<template>
  <div class="detail">
    <div class="box">
       
         <!-- 查询区 -->
         <el-col :span="24" class="warp-breadcrum">
            <!--搜索栏-->
            <el-col :span="24" class="toolbar">
              <el-form :inline="true" :model="filters">
                <el-form-item>
                  <el-select
                    v-model="filters.capitalType"
                    collapse-tags
                    clearable 
                    filterable
                    placeholder="巡检目标"
                    >
                    <el-option
                      v-for="item in capitalOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                  <!-- <el-autocomplete
                    v-model="filters.channelName"
                    :fetch-suggestions="queryChannelSearchAsync"
                    placeholder="渠道"
                    @select="handleChannelSelect"
                  ></el-autocomplete> -->
                </el-form-item>
                <el-form-item>
                  <el-select
                    v-model="filters.status"
                    collapse-tags
                    clearable 
                    filterable
                    placeholder="目标状态"
                    >
                    <el-option
                      v-for="item in statusOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-date-picker
                    v-model="filters.dateTime"
                    type="daterange"
                    align="right"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    :default-time="['00:00:00', '23:59:59']"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    :picker-options="pickerOptions">
                  </el-date-picker>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="getImageGroups">搜索</el-button>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="exportTravel">导出</el-button>
                </el-form-item>
              </el-form>
            </el-col>
          </el-col>
       <!-- 任务表 -->
      <div class="detail-table">
 <el-table
    :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
    style="width: calc(100vw - 240px);overflow:hidden;"
    border=true
    fit
    highlight-current-row=true
    >
    <el-table-column
      type="index"
      label="序号"
      width="50"
      >
    </el-table-column>
    <el-table-column
      label="巡检时间"
      prop="imageTime">
    </el-table-column>
    <el-table-column
      label="巡检目标"
      prop="type2">
    </el-table-column>
    <el-table-column
      label="目标位置"
      prop="position">
    </el-table-column>
    <el-table-column
      label="目标状态"
      prop="status">
    </el-table-column>
    <el-table-column
      v-if="isShowCol"
      label="图片路径"
      prop="imagePath">
    </el-table-column>
    <el-table-column fixed="right" label="详情">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="showPicture(scope.$index, scope.row)">查看</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20, 40]" 
        :page-size="pagesize"        
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length">  
  </el-pagination>
      </div>
      
      <!-- 任务统计 -->
      <!-- <div class="task-echarts">
        <h3>任务统计</h3>
        <div class="echarts-box" id="echarts-box"></div>
      </div> -->
       
    </div>
    <el-dialog
        :visible.sync="isShowPicture"
        :title="imgContent"
        custom-class="customWidth"
        >
        <div :style="'height:' + fullHeight + 'px;'">
          <img :src="bigImgUrl" width="100%" style="height: 100%;">
        </div>
    </el-dialog>
  </div>
</template>
<style lang="less" scope>
.detail{
  .box{
    width: calc(100vw - 240px);
    .el-pagination{
      padding: 15px;
    }
  }
}
</style>
<script>
import axios from 'axios';
import { Message } from 'element-ui';
import echarts from 'echarts';
import moment from 'moment';
import address from '../config';
import { export_json_to_excel } from '@/excel/Export2Excel'

export default {
  name: 'detail',
  data() {
    return {
      tableData: [
        
      ],
      filters: {
        capitalType: '',
        status: null,
        dateTime: []
      },
      
      currentPage:1, //初始页
      pagesize:10, //每页的数据
      loading: false,
      isShowCol: false,
      isShowPicture: false,
      imgContent: '',
      bigImgUrl: '',
      no: 0,
      capitalOptions: [
        {
          label: '路面状况',
          value: 1
        }, {
          label: '护栏',
          value: 2
        },
        {
          label: '龙门架',
          value: 101
        }, {
          label: '矩形标牌',
          value: 201
        }, {
          label: '圆形标牌',
          value: 202
        }, {
          label: '三角标牌',
          value: 203
        }, {
          label: '其它形状标牌',
          value: 209
        }, {
          label: '可变信息牌(情报板)',
          value: 301
        }, {
          label: 'T型杆',
          value: 401
        }, {
          label: 'L型杆',
          value: 402
        }, {
          label: 'I型立杆',
          value: 403
        }, {
          label: '枪式摄像机',
          value: 801
        }, {
          label: '相机',
          value: 802
        }, {
          label: '补光灯',
          value: 803
        },  {
          label: 'RSU天线',
          value: 804
        }, {
          label: '测速雷达',
          value: 805
        }
      ],
      statusOptions: [
        {
          label: '全部',
          value: -1
        },
        {
          label: '正常',
          value: 1
        },  {
          label: '异常',
          value: 2
        }, {
          label: '新增',
          value: 3
        }
      ],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          },
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          },
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          },
        }],
      },
      currentdate: '',
      fullHeight: document.documentElement.clientHeight/1.5,
    };
  },
  mounted() {
    
  },
  created() {
    let startTime = null;
    let endTime = null;
    let equipment = null
    if(this.$route.params.startTime){
      startTime = this.$route.params.startTime;
    }
    if(this.$route.params.endTime){
      endTime = this.$route.params.endTime;
    }
    if(this.$route.params.equipment){
      equipment = this.$route.params.equipment;
    }
    if (startTime || endTime || equipment) {
      this.filters.dateTime = [moment(startTime).format("YYYY-MM-DD HH:mm:ss"), moment(endTime).format("YYYY-MM-DD HH:mm:ss")];
      this.getImageGroupsByCon(startTime, endTime, equipment);
    } else {
      this.filters.status = 2;
      this.getImageGroups();
    }
    
  },
  methods: {
    getImageGroupsByCon(startTime, endTime, equipment) {
      axios.post(`/roadlinks/getImageGroupsByCon`, {
        startTimeMill: startTime,
        endTimeMill: endTime,
        equipment: equipment
      }).then((response) => {
        if (response.data.code === 200) {
          if (response.data.data) {
            response.data.data.forEach((val) => {
              val.status = val.status == 1 ? '正常' : (val.status == 2 ? '异常' : '新增');
              val.imageTime = moment(parseInt(val.imageTime)).format("YYYY-MM-DD HH:MM:SS");
              this.capitalOptions.forEach((item) => {
                if(item.value == val.type2) {
                  val.type2 = item.label;
                }
              });
            });
            this.tableData = response.data.data;
          } else {
            this.tableData = [];
          }
        } else {
          this.tableData = [];
        }
      })
        .catch((error) => {
          console.log(error);
        });
    },
    getImageGroups() {
      if(this.filters.dateTime.length == 0){
        this.filters.dateTime[0] = moment((new Date()).setTime((new Date()).getTime() - 3600 * 1000 * 24)).format("YYYY-MM-DD") + ' 00:00:00';
        this.filters.dateTime[1] = moment((new Date()).setTime((new Date()).getTime() - 3600 * 1000 * 24)).format("YYYY-MM-DD") + ' 23:59:59';
      }
      axios.post(`/roadlinks/getImageGroups`, {
        beginTime: this.filters.dateTime[0],
        endTime: this.filters.dateTime[1],
        capitalType: this.filters.capitalType,
        status: this.filters.status > 0 ? this.filters.status : null
      }).then((response) => {
        if (response.data.code === 200) {
          if (response.data.data) {
            response.data.data.forEach((val) => {
              val.status = val.status == 1 ? '正常' : (val.status == 2 ? '异常' : '新增');
              val.imageTime = moment(parseInt(val.imageTime)).format("YYYY-MM-DD HH:MM:SS");
              this.capitalOptions.forEach((item) => {
                if(item.value == val.type2) {
                  val.type2 = item.label;
                }
              });
            });
            this.tableData = response.data.data;
          } else {
            this.tableData = [];
          }
        } else {
          this.tableData = [];
        }
      })
        .catch((error) => {
          console.log(error);
        });
    },
    getCurrentDate() {
      var date = new Date();
      var seperator1 = "-";
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      var currentdate = year + seperator1 + month + seperator1 + strDate;
      this.currentdate = currentdate;
    },
    
    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange: function (size) {
      this.pagesize = size;
      console.log(this.pagesize)  //每页下拉显示数据
    },
    handleCurrentChange: function(currentPage){
      this.currentPage = currentPage;
      console.log(this.currentPage)  //点击第几页
    },
    getAllCapitals() {
      axios.post(`/roadlinks/getAllCapitals`, {
        
      }).then((response) => {
        if (response.data.code === 200) {
          this.capitalOptions = [];
          if (response.data.data) {
            console.log(response.data.data);
            let capitals = response.data.data.capitals;
            let nameSet = new Set();
            capitals.forEach((val) => {
              nameSet.add(val.capitalName);
            });
            nameSet.forEach((item) => {
              if(item) {
                this.capitalOptions.push({value: item, label: item});
              }
            })
          }
        } else {
          
        }
      })
        .catch((error) => {
          console.log(error);
        });
    },
    getCapitalDetails() {
      this.currentPage = 1;
      let capitalName = '';
      if(this.filters.capitalType){
        this.filters.capitalType.forEach((val) => {
          if(capitalName === '') {
            capitalName = capitalName + val;
          } else {
            capitalName = capitalName + ',' + val;
          }
        });
      }
      axios.post(`/roadlinks/getCapitalDetails`, {
        capitalName: capitalName
      }).then((response) => {
        if (response.data.code === 200) {
          this.tableData = [];
          this.no = 0;
          if (response.data.data) {
            let nameMap = new Map();
            response.data.data.forEach((val) => {
              if(val.lng && val.lat){
                //nameSet.add(val.capitalName);
                let num = 1;
                if(nameMap.has(val.capitalName)){
                  num = nameMap.get(val.capitalName) + 1;
                  nameMap.set(val.capitalName, num);
                }else{
                  nameMap.set(val.capitalName, num);
                }
                this.tableData.push({no: ++this.no, name: val.capitalName + num, position: val.position});
              }
            });
          }
        } 
      })
        .catch((error) => {
          console.log(error);
        });
    },
    isInArray(arr,value){
	    for(var i = 0; i < arr.length; i++){
	        if(value === arr[i]){
	            return true;
	        }
	    }
	    return false;
	  },
    showPicture(index, row) {
      this.imgContent = row.type2 + "|" + row.status + "|" + row.position;
      this.bigImgUrl = "/roadlinks/getCapitalImg?imgPath=" + row.imagePath;
      this.isShowPicture = true;
      if (row.status == "异常") {
        this.$confirm('此情况是否为异常?', '确认信息', {
          distinguishCancelAndClose: true,
          confirmButtonText: '是',
          cancelButtonText: '否'
        })
          .then(() => {
            this.$confirm('是否已经处理改异常情况?', '确认信息', {
              distinguishCancelAndClose: true,
              confirmButtonText: '已处理',
              cancelButtonText: '未处理'
            })
              .then(() => {
                this.tableData[index].status = "正常";
              })
              .catch(action => {
                // do nothing
              });
          })
          .catch(action => {
            this.tableData[index].status = "正常";
          });
      }
    },
    exportTravel(){
        this.tableData.forEach((item, index) => {
          item.no = index + 1 + '';
        })
        require.ensure([], () => {
            //tHeader为存放excel表头标题的数组
            const tHeader = ["序号","巡检时间","巡检目标","目标位置","目标状态"];
            //filterVal为tHeader标题对应的键值
            const filterVal = ["no","imageTime","type2","position","status"];
            //list为要转化为excel文件的数据,是一个数组
            const list = this.tableData;
            //用map方法处理list数据
            const data =list.map(v => filterVal.map(j => v[j]));
            //自定义excel文件名
            const fileName="巡检结果明细";
            export_json_to_excel(tHeader, data,fileName);
        });
    }
  },
};
</script>