<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form :inline="true" :model="formSearch" class="demo-form-inline">
        <el-form-item label="接单人员">
          <el-select
            v-model="formSearch.user_id"
            style="margin-left: 20px;"
            placeholder="请选择"
          >
            <el-option
              v-for="item in alarmOrderUsersData"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设备编号">
          <el-input v-model="formSearch.deviceNum" placeholder="输入完整设备编号"></el-input>
        </el-form-item>
        <el-form-item label="工单状态">
          <el-select
            v-model="formSearch.deviceStatus"
            style="margin-left: 20px;"
            placeholder="请选择"
          >
            <el-option
              v-for="item in optionStatus"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="时间">
          <el-date-picker
            v-model="formSearch.timeRange"
            align="right"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="至"
            value-format="yyyy/MM/dd HH:mm:ss"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-pagination
      :current-page="formSearch.page"
      :page-sizes="[20, 80, 150, 300]"
      :page-size="formSearch.limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="formSearch.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
    <el-table :key="tableKey" :data="alarmOrders" border fit highlight-current-rows>
      <el-table-column label="工单号" width="209">
        <template slot-scope="scope">
          <span @click="handleCopy(scope.row.order_num,$event)">{{ scope.row.order_num }}</span>
        </template>
      </el-table-column>
      <el-table-column label="设备编号" width="209">
        <template slot-scope="scope">
          <span @click="handleCopy(scope.row.devicenumber,$event)">{{ scope.row.devicenumber }}</span>
        </template>
      </el-table-column>
      <el-table-column label="接单人" width="140">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="设备名称" width="200">
        <template slot-scope="scope">
          <span>{{ scope.row.username }}</span>
        </template>
      </el-table-column>
      <el-table-column label="位置" width="200">
        <template slot-scope="scope">
          <span>{{ scope.row.location }}</span>
        </template>
      </el-table-column>
      <el-table-column label="报警类型" width="130">
        <template slot-scope="scope">
          <span>{{ scope.row.status_name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="工单状态" width="130">
        <template slot-scope="scope">
          <span>
            <el-tag :type=" scope.row.state==1 ? 'success' : 'warning' " effect="dark">{{ orderStateFilter(scope.row.state) }}</el-tag>
          </span>
        </template>
      </el-table-column>
      <el-table-column label="创建时间">
        <template slot-scope="scope">
          <span>{{ scope.row.created_at }}</span>
        </template>
      </el-table-column>
      <el-table-column label="更新时间">
        <template slot-scope="scope">
          <span>{{ scope.row.updated_at }}</span>
        </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>
  </div>
</template>

<script>
import clip from '@/utils/clipboard';
import BackToTop from '@/components/BackToTop';
import { alarmOrderUsers, alarmOrderList } from '@/api/alarmOrder';
export default {
  components: { BackToTop },
  data() {
    return {
      alarmOrders: [],
      alarmOrderUsersData: [],
      formSearch: {
        deviceNum: '',
        state: 0,
        timeRange: null,
        page: 1,
        limit: 20,
        user_id: 0,
        total: 0,
      },
      optionStatus: [{
        value: 99,
        label: '全部',
      }, {
        value: 0,
        label: '未接单',
      }, {
        value: 1,
        label: '进行中',
      }, {
        value: 2,
        label: '完成',
      }, {
        value: 3,
        label: '异常终止',
      }],
      equipment: [],
      timer: null,
      tableKey: 0,
      value2: undefined,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [{
          text: '24小时内',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', [start, end]);
          },
        },
        ],
      },
      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
      },
    };
  },
  created() {
    this.orderUsers();
    this.alarmOrdersData();
  },
  methods: {
    orderStateFilter(state) {
      const status = [];
      status[0] = '未接单';
      status[1] = '进行中';
      status[2] = '完成';
      status[3] = '异常终止';
      return status[state];
    },
    // 可以派单的人员
    orderUsers(data) {
      alarmOrderUsers().then(response => {
        if (response.code === 200) {
          this.alarmOrderUsersData = response.data;
        }
      }).catch(err => {
        console.log(err);
      });
    },
    // 工单列表
    alarmOrdersData() {
      alarmOrderList(this.formSearch).then(response => {
        if (response.code === 200) {
          console.log(response.data);
          this.alarmOrders = response.data;
        }
      }).catch(err => {
        console.log(err);
      });
    },
    handleSizeChange(val) {
      this.formSearch.limit = val;
      this.dataSearch();
    },
    handleCurrentChange(val) {
      this.formSearch.page = val;
      this.dataSearch();
    },
    handleCopy(text, event) {
      clip(text, event);
    },
    onSubmit() {
      this.formSearch.page = 1;
      this.dataSearch();
    },
    dataSearch() {
      this.alarmOrdersData();
    },
    timers() {
      // this.timer = setInterval(() => {
      //   this.equipmentlist();
      // }, 10000);
    },
    destroyed() {
      this.$once('hook:beforeDestroy', () => {
        clearInterval(this.timer);
      });
    },
  },
};
</script>
<style scoped lang="scss">
.placeholder-container {
  ul {
    li {
      margin: 10px;
      list-style-type: none;
    }
  }
}
</style>
