<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, i) in alarmOrderUsersData"
              :key="i + '1u'"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工单号">
          <el-input v-model="formSearch.order_num" placeholder="输入工单号"></el-input>
        </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.state"
            style="margin-left: 20px;"
            placeholder="请选择"
          >
            <el-option
              v-for="(item,ind) in optionStatus"
              :key="ind + '2s'"
              :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, 5]"
      :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="180">
        <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="180">
        <template slot-scope="scope">
          <span @click="handleCopy(scope.row.devicenumber,$event)">{{ scope.row.devicenumber }}</span>
        </template>
      </el-table-column>
      <el-table-column label="接单人" width="100">
        <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="80">
        <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="orderStateFilter(scope.row.state, 'type')" effect="dark">{{ orderStateFilter(scope.row.state, 'content') }}</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-column label="--" width="140">
        <template slot-scope="scope">
          <el-button @click="alarmShow(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="dialogTableVisible" width="70%">
      <el-steps :active="order_content.isorderone" align-center style="margin-bottom: 40px;">
        <el-step
          v-for="(item, oindex) in order_step"
          :key="oindex + '1o'"
          :title="stepFilter(item.schedule)"
          :description="item.created_at + item.content"
          :finish-status="item.finish_status"
        >
        </el-step>
      </el-steps>
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="amap-page-container" style="height: 350px;">
            <el-amap
              ref="map"
              vid="amapDemo"
              :amap-manager="amapManager"
              :zoom="zoom"
              :center="center"
              :events="events"
              class="amap-demo"
              :plugin="plugin"
            >
              <el-amap-circle-marker
                :visible="true"
                :center="marker.devicecoord | deviceLocationFilter(marker.devicecoord)"
                :radius="13"
                :fill-color="marker.devicepolice | deviceStatusFilter('color')"
                :fill-opacity="1"
                :stroke-color="'#ccc'"
                :stroke-opacity="0.9"
              ></el-amap-circle-marker>
            </el-amap>
          </div>
        </el-col>
        <el-col :span="16">
          <el-row>
            <el-col :span="12">
              <el-form size="mini">
                <el-form-item label="设备编号">{{ order_content.devicenumber }}</el-form-item>
                <el-form-item label="设备名称">{{ order_content.username }}</el-form-item>
                <el-form-item label="类型">{{ order_content.tname }}</el-form-item>
                <el-form-item label="检测介质">{{ order_content.gas }}</el-form-item>
                <el-form-item label="位置">{{ order_content.deviceinfo }}</el-form-item>
                <el-form-item label="坐标">{{ order_content.devicecoord }}</el-form-item>
                <el-form-item label="检测值">{{ order_content.concentration + order_content.danwei }}</el-form-item>
                <el-form-item label="报警类型">{{ order_content.status_name }}</el-form-item>
                <el-form-item label="报警开始时间">{{ order_content.start_time }}</el-form-item>
                <el-form-item label="报警结束时间">{{ order_content.end_time }}</el-form-item>
              </el-form>
            </el-col>
            <el-col :span="12">
              <el-form size="mini">
                <el-form-item label="订单编号">{{ order_content.order_num }}</el-form-item>
                <el-form-item label="订单创建时间">{{ order_content.created_at }}</el-form-item>
                <el-form-item label="订单更新时间">{{ order_content.updated_at }}</el-form-item>
                <el-form-item label="接单人">{{ order_content.name }}</el-form-item>
                <el-form-item label="联系电话">{{ order_content.phone_number }}</el-form-item>
                <el-form-item label="是否到达现场">{{ isLiveFilter(order_content.is_live) }}</el-form-item>
                <el-form-item label="是否属实">{{ isVerifiedFilter(order_content.is_verified) }}</el-form-item>
                <el-form-item label="维修状态">{{ isRepairedFilter(order_content.isrepaired) }}</el-form-item>
                <el-form-item label="进度">{{ isOrderOneFilter(order_content.isorderone) }}</el-form-item>
                <el-form-item label="反馈内容">{{ order_content.content }}</el-form-item>
                <el-form-item size="large">
                  <el-button type="primary" :disabled="buttonStatus" @click="onSubmitDetail(order_content.id)">确认</el-button>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
          <div class="demo-image">
            <el-image
              v-for="(item, index) in order_content.images"
              :key="index + '1m'"
              style="width: 100px; height: 100px; margin-right: 10px;"
              :src="item.path"
              :preview-src-list="order_content.srcList"
            >
            </el-image>
          </div>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import clip from '@/utils/clipboard';
import BackToTop from '@/components/BackToTop';
import { alarmOrderUsers, alarmOrderList, alarmOrderDetail, alarmOrderUpdate } from '@/api/alarmOrder';
import Vue from 'vue';
import VueAMap from 'vue-amap';
import { AMapManager } from 'vue-amap';
Vue.use(VueAMap);

// 初始化vue-amap
VueAMap.initAMapApiLoader({
  // 高德的key
  key: '95cc1b89d62f020ce5a21ec503daef6c',
  // 插件集合
  plugin: [
    'AMap.Autocomplete',
    'AMap.PlaceSearch',
    'AMap.Scale',
    'AMap.OverView',
    'AMap.ToolBar',
    'AMap.MapType',
    'AMap.PolyEditor',
    'AMap.CircleEditor',
  ],
  // 高德 sdk 版本，默认为 1.4.4
  v: '1.4.15',
  uiVersion: '1.0.11',
});
export default {
  components: { BackToTop },
  filters: {
    deviceLocationFilter(center) {
      if (center === null) {
        return '';
      }
      center = center.replace(/\s*/g, '');
      return center.split(',');
    },
    deviceStatusFilter(status, cate) {
      var statuses = [];
      statuses[1] = { color: '#1c7a17', name: '正常' };
      statuses[2] = { color: '#f6e032', name: '错误' };
      statuses[3] = { color: '#f6e032', name: '传感器故障' };
      statuses[4] = { color: '#f30016', name: '报警' };
      statuses[5] = { color: '#f42f18', name: '低报' };
      statuses[6] = { color: '#97000b', name: '高报' };
      statuses[7] = { color: '#f6e032', name: '通信故障' };
      statuses[8] = { color: '#f6e032', name: '超量程' };
      statuses[9] = { color: '#747677', name: '离线' };
      statuses[10] = { color: '#f6e032', name: '电量低' };
      statuses[11] = { color: '#f6e032', name: '主电故障' };
      statuses[12] = { color: '#f6e032', name: '备电故障' };
      statuses[13] = { color: '#f6e032', name: '无此节点' };
      statuses[14] = { color: '#f6e032', name: '低电压' };
      statuses[15] = { color: '#f6e032', name: '故障' };
      statuses[16] = { color: '#97000b', name: '报警联动' };
      if (cate === 'color') {
        return statuses[status].color;
      } else if (cate === 'status') {
        return statuses[status].name;
      }
    },
  },
  data() {
    const _this = this;
    return {
      buttonStatus: true,
      order_content: {},
      order_step: [],
      marker: {
        devicecoord: '114.505208, 38.045474',
        devicepolice: 5,
      },
      map: {},
      amapManager: new AMapManager(),
      zoom: 13,
      center: [114.505208, 38.045474],
      events: {
        init: (o) => {
          o.setMapStyle('amap://styles/normal');
          // console.log(o.getCenter());
          // console.log(this.$refs.map.$$getInstance());
          o.getCity(result => {
            // console.log(result);
          });
        },
        'moveend': () => {
        },
        'zoomchange': () => {
          _this.zoom = this.$refs.map.$$getInstance().getZoom();
        },
        'click': (e) => {
          // alert('map clicked');
        },
      },
      plugin: [{
        pName: 'ToolBar',
        position: 'LB',
      }, {
        pName: 'MapType',
        defaultType: 0,
        events: {
          init(o) {
            console.log(o);
          },
        },
      }],
      dialogTableVisible: false,
      alarmOrders: [],
      alarmOrderUsersData: [{
        id: 0,
        name: '全部',
      }],
      formSearch: {
        order_num: '',
        deviceNum: '',
        state: 99,
        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: {
    onSubmitDetail(id) {
      const data = {
        state: 2,
        isorderone: 4,
        schedule: JSON.stringify({
          'schedule': 5, 'content': '恭喜，你的工单完成啦！',
        }),
      };
      alarmOrderUpdate(data, id).then(response => {
        if (response.code === 200) {
          this.$message.success('恭喜，你的工单完成啦！');
          this.dialogTableVisible = false;
          this.dataSearch();
        }
      }).catch(err => {
        console.log(err);
      });
    },
    isLiveFilter(id) {
      const steps = [];
      steps[1] = '到达现场';
      steps[2] = '未到达现场';
      return steps[id];
    },
    isVerifiedFilter(id) {
      const steps = [];
      steps[1] = '属实';
      steps[2] = '不属实';
      return steps[id];
    },
    isRepairedFilter(id) {
      const status = [];
      status[1] = '已修好';
      status[2] = '未修好';
      return status[id];
    },
    isOrderOneFilter(id) {
      const steps = [];
      steps[1] = '开始';
      steps[2] = '等待';
      steps[3] = '检修';
      steps[4] = '完成';
      steps[5] = '审核通过';
      return steps[id];
    },
    stepFilter(step) {
      const steps = [];
      steps[1] = '待接单';
      steps[2] = '已接单';
      steps[3] = '进行中';
      steps[4] = '已完成';
      steps[5] = '审核';
      return steps[step];
    },
    alarmShow(data) {
      this.marker.devicecoord = data.devicecoord;
      this.marker.devicepolice = data.policestatus;
      // 地图中心
      this.center = data.devicecoord.replace(/\s*/g, '').split(',');
      console.log(data);
      this.orderDetail(data.id);
      this.dialogTableVisible = true;
    },
    orderStateFilter(state, type) {
      const status = [];
      status[0] = { content: '未接单', type: 'danger' };
      status[1] = { content: '进行中', type: 'warning' };
      status[2] = { content: '完成', type: 'success' };
      status[3] = { content: '异常终止', type: 'info' };
      status[4] = { content: '已提交未审核', type: 'warning' };
      if (type === 'type') {
        return status[state].type;
      }
      if (type === 'content') {
        return status[state].content;
      }
    },
    // 工单详情
    orderDetail(id) {
      this.buttonStatus = true;
      alarmOrderDetail(id).then(response => {
        const all_steps = [{
          schedule: 1, content: '', created_at: '', finish_status: 'finish',
        }, {
          schedule: 2, content: '', created_at: '', finish_status: 'finish',
        }, {
          schedule: 3, content: '', created_at: '', finish_status: 'finish',
        }, {
          schedule: 4, content: '', created_at: '', finish_status: 'finish',
        }, {
          schedule: 5, content: '', created_at: '', finish_status: 'finish',
        }];
        if (response.code === 200) {
          console.log(response.data);
          this.order_content = response.data;
          const srcList = [];
          for (var key in response.data.images) {
            srcList.push(response.data.images[key].path);
          }
          this.order_content.srcList = srcList;
          const order_step = response.data.step;
          for (var step in all_steps) {
            if (order_step[step]) {
              all_steps[step] = order_step[step];
            }
          }
          this.order_step = all_steps;
          console.log((this.order_content.isorderone === 4) && (this.order_content.state === 4));
          if ((this.order_content.isorderone === 3) && (this.order_content.state === 4)) {
            this.buttonStatus = false;
          }
          if (response.data.state === 2) {
            this.order_content.isorderone = 5;
          }
          console.log(this.order_step);
        }
      }).catch(err => {
        console.log(err);
      });
    },
    // 可以派单的人员
    orderUsers(data) {
      alarmOrderUsers().then(response => {
        if (response.code === 200) {
          this.alarmOrderUsersData = this.alarmOrderUsersData.concat(response.data);
        }
      }).catch(err => {
        console.log(err);
      });
    },
    // 工单列表
    alarmOrdersData() {
      console.log(this.formSearch);
      alarmOrderList(this.formSearch).then(response => {
        if (response.code === 200) {
          console.log(response.data);
          this.alarmOrders = response.data.orders;
          this.formSearch.total = response.data.meta.count;
        }
      }).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>
