<template>
  <div class="detail">
    <div class="box">
       <el-row class="warp">
         <!-- 查询区 -->
         <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"
                    multiple
                    collapse-tags
                    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-button type="primary" @click="getCapitalDetails">搜索</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
    highlight-current-row=true
    >
    <el-table-column
      label="序号"
      prop="no">
    </el-table-column>
    <el-table-column
      label="道路资产名称"
      prop="name">
    </el-table-column>
     <el-table-column
      label="道路资产位置信息"
      prop="position">
    </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> -->
       </el-row>
    </div>
  </div>
</template>
<style lang="less" scope>
.detail{
  .box{
    .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';

export default {
  name: 'detail',
  data() {
    return {
      tableData: [
        
      ],
      filters: {
        capitalType: []
      },
      showCol: false,
      currentPage:1, //初始页
      pagesize:10, //每页的数据
      loading: false,
      no: 0,
      capitalOptions: [
        
      ],
      currentdate: '',
      
    };
  },
  mounted() {
    
  },
  created() {
    this.filters.capitalType = [];
    if(this.$route.params.capitalName){
      this.filters.capitalType.push(this.$route.params.capitalName);
    }
    this.getCapitalDetails();
    this.getAllCapitals();
  },
  methods: {
    linkPic(index, row) {
      this.getCurrentDate();
      var photoDate = row.finalOnlineTime ? row.finalOnlineTime : this.currentdate;
      window.open('http://106.52.130.113:9088/'+ photoDate + '/' + row.channelCode + '/' + row.code,'_blank');
    },
    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;
    },
    linkActul(index, row) {
      this.$router.push({
        path: '/overview',
        query: {
          equipment: row.code,
          channel: row.channelCode,
          plateNo: row.plateNo,
        }
      });
    },
    linkMileage(index, row) {
      this.$router.push({
        path: '/mileage',
        query: {
          equipment: row.code,
          channel: row.channelCode,
          plateNo: row.plateNo,
          startTime: this.filters.dateTime && this.filters.dateTime.length > 0 ? this.filters.dateTime[0] : null,
          endTime: this.filters.dateTime && this.filters.dateTime.length > 1 ? this.filters.dateTime[1] : null,
        }
      });
    },
    queryEquipSearchAsync(queryString, cb) {
      var restaurants = this.equips;
      var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;

      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
      }, 3000 * Math.random());
    },
    queryPlateSearchAsync(queryString, cb) {
      var restaurants = this.plateNos;
      var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;

      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
      }, 3000 * Math.random());
    },
    queryChannelSearchAsync(query) {
        if (query !== '') {
          this.channelLoading = true;
          setTimeout(() => {
            this.channelLoading = false;
            this.channelOptions = this.list.filter(item => {
              return item.label.toLowerCase()
                .indexOf(query.toLowerCase()) > -1;
            });
          }, 200);
        } else {
          this.channelOptions = [];
        }
    },
    
    // queryChannelSearchAsync(queryString, cb) {
    //   var restaurants = this.channels;
    //   var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;

    //   clearTimeout(this.timeout);
    //   this.timeout = setTimeout(() => {
    //     cb(results);
    //   }, 3000 * Math.random());
    // },
    createStateFilter(queryString) {
      return (state) => {
        return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) >= 0);
      };
    },
    handleEquipSelect(item){
      if(item && item.value){
        this.filters.equipmentNo = item.value;
      }
    },
    handlePlateSelect(item){
      if(item && item.value){
        this.filters.plateNo = item.value;
      }
    },
    handleChannelSelect(item){
      if(item && item.channelId){
        this.filters.channel = item.channelId;
        this.filters.channelName = item.value;
      }
    },
    // 初始页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;
	  },
    queryEquipment() {
      if(this.filters.channelName){
        if(this.channelNames.length > 0 && this.isInArray(this.channelNames,this.filters.channelName)){
          this.channels.forEach((val) => {
            if(val && val.value == this.filters.channelName){
              this.filters.channel = val.channelId;
            }
          });
        }else{
          this.filters.channel = -99;
        }
      }else{
        this.filters.channel = '';
      }

      axios.post(`/roadlinks/getAllEquipments`, {
        code: this.filters.equipmentNo,
        channelId: this.filters.channel,
        plateNo: this.filters.plateNo,
        type: this.filters.type,
        status: this.filters.status,
        startTime: this.filters.dateTime && this.filters.dateTime.length > 0 ? this.filters.dateTime[0] : null,
        endTime: this.filters.dateTime && this.filters.dateTime.length > 1 ? this.filters.dateTime[1] : null
      }).then((response) => {
        if (response.data.code === 200) {
          if (response.data.data) {
            response.data.data.forEach((item) => {
              item.status = (item.status ? '启用' : '未启用');
              item.type = item.type == 1 ? '小客车' : (item.type == 2 ? '大客车' : (item.type == 3 ? '货车' : ''));
              item.finalOnlineTime = item.finalOnlineTime ? moment(new Date(item.finalOnlineTime)).format("YYYY-MM-DD") : '';
            });
          }
          this.tableData = response.data.data;
        } else {
          this.tableData = [];
          Message({
            message: response.data.message,
            // type: 'error',
            // duration: '800',
          });
        }
      })
        .catch((error) => {
          console.log(error);
        });
    },
    
  },
};
</script>