<template>
  <div class="app-container">
    <el-date-picker v-model="devicehtime" type="date" placeholder="选择日期" style="width: 15%;"></el-date-picker>--<el-time-picker v-model="devicetime" placeholder="选择时间" style="width: 15%;"></el-time-picker>
    <el-select v-model="data_device_type" placeholder="报警类型">
      <el-option v-for="item in device_type" :key="item.id" :label="item.status_name" :value="item.id"></el-option>
    </el-select>
    <el-select v-model="data_device_quyu" placeholder="区域">
      <el-option v-for="item in device_quyu" :key="item.deviceid" :label="item.deviceinfo" :value="item.deviceid"></el-option>
    </el-select>
    <el-button type="primary" icon="el-icon-search" style="margin-left: 12px;" @click="deviceonut()">搜索</el-button>
    <el-table :key="tableKey" :data="reportpolice" border fit highlight-current-rows style="margin-top: 20px;">
      <el-table-column label="设备编号" width="150">
        <template slot-scope="scope">
          <span @click="handleCopy(scope.row.devicenumber,$event)">{{ scope.row.devicenumber }}</span>
        </template>
      </el-table-column>
      <el-table-column label="设备报警开始时间" width="150">
        <template slot-scope="scope">
          <span>{{ scope.row.starttime | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="设备结束报警时间" width="150">
        <template slot-scope="scope">
          <span>{{ scope.row.endtime=='0-0-0 0:0' ? '' : scope.row.endtime | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="报警浓度" width="150">
        <template slot-scope="scope">
          <span @click="handleCopy(scope.row.concentration,$event)">{{ scope.row.concentration }}</span>
        </template>
      </el-table-column>
      <el-table-column label="报警位置">
        <template slot-scope="scope">
          <span @click="handleCopy(scope.row.location,$event)">{{ scope.row.location }}</span>
        </template>
      </el-table-column>
      <el-table-column label="报警类型" width="150">
        <template slot-scope="scope">
          <span>{{ scope.row.status_name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="切断装置状态" width="150">
        <template slot-scope="scope">
          <span>{{ shutoffStatus(scope.row.shutoff_status) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="设备状态" width="155">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status==1 ? 'danger' : 'success' " effect="dark">{{ scope.row.status==1 ? '报警' : '正常' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="设备是否当前报警" width="150">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status==1 ? 'danger' : 'success' " effect="dark">{{ scope.row.status==1 ? '当前正在报警' : '已结束报警' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" effect="dark" @click="orderUsers(scope.row)">生成工单</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-tooltip placement="top" content="tooltip">
      <back-to-top :custom-style="myBackToTopStyle" :visibility-height="300" :back-position="50" transition-name="fade" />
    </el-tooltip>
    <el-dialog title="向谁派发工单？" :visible.sync="dialogFormVisible">
      <el-table
        ref="singleTable"
        :data="alarmOrderUserData"
        :highlight-current-row="true"
        row-class-name="order-users-row"
        style="width: 100%"
        @row-click="handleCurrentChange"
      >
        <el-table-column
          label="ID"
          width="150"
        >
          <template slot-scope="scope">
            <el-radio v-model="form.alarmOrderToUserId" :label="scope.row.id">{{ scope.row.id }}</el-radio>
          </template>
        </el-table-column>
        <el-table-column property="name" label="用户名" width="150"></el-table-column>
        <el-table-column property="username" label="账号" width="120"></el-table-column>
        <el-table-column property="phone_number" label="手机号" width="120"></el-table-column>
        <el-table-column property="role_name" label="角色"></el-table-column>
        <el-table-column property="province" label="省"></el-table-column>
        <el-table-column property="city" label="市"></el-table-column>
        <el-table-column property="area" label="区域(县)"></el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="createAlarmOrder()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { police, history_device_type } from '@/api/device';
import clip from '@/utils/clipboard';
import BackToTop from '@/components/BackToTop';
import { alarmOrderStore, alarmOrderUsers } from '@/api/alarmOrder';
export default {
  components: { BackToTop },
  data() {
    return {
      dialogFormVisible: false,
      alarmOrderUserData: [],
      tableKey: 0,
      reportpolice: [],
      myBackToTopStyle: {
        right: '50px',
        bottom: '50px',
        width: '40px',
        height: '40px',
        'border-radius': '4px',
        'line-height': '45px', // Please keep consistent with height to center vertically
        background: '#e7eaf1', // The background color of the button
      },
      // 报警工单数据
      form: {
        alarmOrderToUserId: 0,
      },
      formDataOrder: {
        device_num: '',
        reportpolice_id: 0,
        policestatus: 0,
        shutoff_status: 0,
        user_id: 0,
      },
      devicetime: '', // 时间
      devicehtime: '', // 年月
      device_type: '', // 搜索数据设备报警类型
      device_quyu: '', // 设备区域
      data_device_type: '', // 设备数据
      data_device_quyu: '', // 设备区域
    };
  },
  created() {
    this.police(); // 列表
    this.historydevicetype(); // 设备搜索所需数据
  },
  methods: {
    // 生成工单
    handleCurrentChange(val) {
      console.log(val);
      this.form.alarmOrderToUserId = val.id;
      this.formDataOrder.user_id = this.form.alarmOrderToUserId;
    },
    orderUsers(data) {
      alarmOrderUsers().then(response => {
        if (response.code === 200) {
          this.alarmOrderUserData = response.data;
        }
      }).catch(err => {
        console.log(err);
      });
      this.formDataOrder.device_num = data.devicenumber;
      this.formDataOrder.reportpolice_id = data.id;
      this.formDataOrder.policestatus = data.policestatus;
      this.formDataOrder.shutoff_status = data.shutoff_status;
      this.dialogFormVisible = true;
    },
    createAlarmOrder() {
      if (this.formDataOrder.user_id === 0) {
        this.$message.error('你的工单要派发给谁呢？');
        return;
      }
      alarmOrderStore(this.formDataOrder).then(response => {
        console.log(response);
        if (response.code === 200) {
          this.$message.success('你的工单派发成功了！');
          this.dialogFormVisible = false;
        }
      }).catch(err => {
        console.log(err);
      });
    },
    shutoffStatus(id) {
      const shutoff = [];
      shutoff[0] = '初始化';
      shutoff[1] = '开启';
      shutoff[2] = '关闭';
      return shutoff[id];
    },
    police() {
      police()
        .then(response => {
          if (response.code === 200) {
            this.reportpolice = response.data;
          } else if (response.code === 105) {
            this.$message({
              message: response.msg,
              type: 'warning',
            });
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    historydevicetype(){
      history_device_type()
        .then(response => {
          if (response.code === 200) {
            this.device_type = response.data.device_type;
            this.device_quyu = response.data.device_quyu;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    handleCopy(text, event) {
      clip(text, event);
    },
    deviceonut() {
      console.log(this.devicetime);
      console.log(this.devicehtime);
      console.log(this.device_type);
    },
  },
};
</script>

<style>
  .order-users-row {
    cursor: pointer;
  }
</style>