<template>
  <div>
    <div class="top_title" >
      <el-col :span="4" :offset="2">
        <div>待办工作：{{ statisticNum.work }}</div>
      </el-col>
      <el-col :span="4">
        <div>今日案卷数量：{{ statisticNum.todayCase }}</div>
      </el-col>
      <el-col :span="4">
        <div>累计案卷数量：{{ statisticNum.allCase }}</div>
      </el-col>
      <el-col :span="4">
        <div>商户数量：{{ statisticNum.merchant }}</div>
      </el-col>
      <el-col :span="4">
        <div>部件数量：{{ statisticNum.parts }}</div>
      </el-col>
    </div>
    <div id="map" class="leaflet_container"/>
  </div>
</template>
<script>
import L from 'leaflet'
import 'leaflet/dist/leaflet.css'
import { workListPage } from '@/api/coorBusiness/case'
import { statisticToday } from '@/api/overview'
import { merchantDetail } from '@/api/merchant/merchant'
import { punishStatisticByMerchant } from '@/api/merchant/punish'

var esri = require('esri-leaflet')
export default {
  name: 'ShopOverview',
  data() {
    return {
      listLoading: false, // 加载动画
      TianDiTu: {
        Normal: {
          Map: 'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
          Annotion: 'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8'
        },
        Satellite: {
          Map: 'https://t{s}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
          Annotion: 'https://t{s}.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8'
        },
        Terrain: {
          Map: 'https://t{s}.tianditu.gov.cn/ter_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ter&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
          Annotion: 'https://t{s}.tianditu.gov.cn/cta_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cta&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8'
        },
        Subdomains: ['0', '1', '2', '3', '4', '5', '6', '7']
      },
      map: null,
      tab: 'lamp',
      showtable: true,
      controlQuery: {
        lampIds: [],
        circuitId: '',
        lampBoxId: '',
        controlType: ''
      },
      listQuery: {
        offset: 1,
        limit: 1000000,
        isShopCase: '1'
      }, // 筛选条件
      list: [],
      id: '',
      multipleSelection: [], // 多选选中项
      iconlist: [],
      baselayer: [],
      caselist: [], // 路灯（map）
      statisticNum: {
        work: 0,
        todayCase: 0,
        allCase: 0,
        merchant: 0,
        parts: 0
      },
      status: {
        register: 0,
        dispatch: 0,
        disposal: 0,
        disposaling: 0
      }
    }
  },
  mounted() {
    this.init()
    this.initData()
    // this.getCase()
  },
  methods: {
    tableclick() {
      this.showtable = !this.showtable
    },
    async initData() {
      // const statusDetail = await statisticByState()
      // this.status = statusDetail.data
      const resDetail = await statisticToday()
      this.statisticNum = resDetail.data
    },
    async shopDetail(id) {
      this.id = id
      const [res, res1] = await Promise.all([merchantDetail(id), punishStatisticByMerchant(id)])
      const data = res.data
      const data1 = res1.data
      if (!data.shopInfo) {
        throw new Error('数据错误')
      }
      const { chargePhone, deptName, address, rentArea, rentStatusName } = data.shopInfo
      return `
      <div style="font-size: 14px;width:420px;">
        <div style="font-weight: bold;padding-bottom: 10px ">${data.merchantInfo.merchantName}</div>
        <div style="padding-bottom: 2px"><label style="padding-right: 5px">联系电话：</label>${chargePhone}</div>
        <div style="padding-bottom: 2px"><label style="padding-right: 5px">管理部门：</label>${deptName}</div>
        <div style="padding-bottom: 2px"><label style="padding-right: 5px">详细地址：</label>${address}</div>
        <div style="padding-bottom: 2px"><label style="padding-right: 5px">租用面积：</label>${rentArea}</div>
        <div style="padding-bottom: 2px"><label style="padding-right: 5px">租用状态：</label>${rentStatusName}</div>
        <div style="padding-bottom: 2px"><label style="padding-right: 5px">店铺情况：</label></div>
        <table border="1" style="border-collapse: collapse;"><tr style="background-color: #eeeeee"><th style="width: 80px">处罚</th><th style="width: 80px">警告</th><th style="width: 80px">劝导</th></tr>
        <tr><td style="text-align: center">${data1.punish}</td><td style="text-align: center">${data1.warn}</td><td style="text-align: center">${data1.persuade}</td></tr></table>
      <div style="text-align: right;margin-right: 10px;margin-top: 5px"><button style="background-color: #409eff;border-color: #409eff;color: white;padding: 5px 8px;font-size: 14px;border-radius: 4px;" id="btndetail">查看详情</button></div></div>
      </div></div>`
    },
    // async shopDetail(id) {
    //   var data, data1
    //   this.id = id
    //   await merchantDetail(id).then(res => {
    //     data = res.data
    //   })
    //   await punishStatisticByMerchant(id).then(res1 => {
    //     data1 = res1.data
    //   })
    //   var str = '<div style="font-size: 14px;width:420px;">' +
    //     '<div style="font-weight: bold;padding-bottom: 10px ">' + data.merchantInfo.merchantName + '</div>' +
    //     '<div style="padding-bottom: 2px"><label style="padding-right: 5px">联系电话：</label>' + data.shopInfo.chargePhone + '</div>' +
    //     '<div style="padding-bottom: 2px"><label style="padding-right: 5px">管理部门：</label>' + data.shopInfo.deptName + '</div>' +
    //     '<div style="padding-bottom: 2px"><label style="padding-right: 5px">详细地址：</label>' + data.shopInfo.address + '</div>' +
    //     '<div style="padding-bottom: 2px"><label style="padding-right: 5px">租用面积：</label>' + data.shopInfo.rentArea + '</div>' +
    //     '<div style="padding-bottom: 2px"><label style="padding-right: 5px">租用状态：</label>' + data.shopInfo.rentStatusName + '</div>' +
    //     '<div style="padding-bottom: 2px"><label style="padding-right: 5px">店铺情况：</label></div>' +
    //     '<table border="1" style="border-collapse: collapse;"><tr style="background-color: #eeeeee"><th style="width: 80px">处罚</th><th style="width: 80px">警告</th><th style="width: 80px">劝导</th></tr>' +
    //     ' <tr><td style="text-align: center">' + data1.punish + '</td><td style="text-align: center">' + data1.warn + '</td><td style="text-align: center">' + data1.persuade + '</td></tr></table>'
    //   str += '<div style="text-align: right;margin-right: 10px;margin-top: 5px"><button style="background-color: #409eff;border-color: #409eff;color: white;padding: 5px 8px;font-size: 14px;border-radius: 4px;" id="btndetail">查看详情</button></div></div>'
    //   str += '</div></div>'
    //   return str
    // },
    removemarkers() {
      for (var i = 0; i < this.iconlist.length; i++) {
        this.map.removeLayer(this.iconlist[i])
      }
      var base = this.baselayer
      this.map.eachLayer(function(layer) {
        if (layer !== base[0] && layer !== base[1]) {
          layer.remove()
        }
      })
    },
    setZoom(points) {
      if (points.length > 0) {
        var maxLng = points[0][1]
        var minLng = points[0][1]
        var maxLat = points[0][0]
        var minLat = points[0][0]
        var res
        for (var i = points.length - 1; i >= 0; i--) {
          res = points[i]
          if (res[1] > maxLng) maxLng = res[1]
          if (res[1] < minLng) minLng = res[1]
          if (res[0] > maxLat) maxLat = res[0]
          if (res[0] < minLat) minLat = res[0]
        }
        var cenLng = (parseFloat(maxLng) + parseFloat(minLng)) / 2
        var cenLat = (parseFloat(maxLat) + parseFloat(minLat)) / 2
        var zoom = this.getZoom(maxLng, minLng, maxLat, minLat)
        this.map.setView({ lat: cenLat, lng: cenLng }, zoom)
      } else {
        // 没有坐标，显示全中国
        this.map.setView({ lat: 103.388611, lng: 35.563611 }, 5)
      }
    },
    getZoom(maxLng, minLng, maxLat, minLat) {
      var zoom = ['50', '100', '200', '500', '1000', '2000', '5000', '10000', '20000', '25000', '50000', '100000', '200000', '500000', '1000000', '2000000', '5000000']// 级别18到3。
      var latlng = L.latLng(maxLat, maxLng)
      var distance = latlng.distanceTo(L.latLng(minLat, minLng))
      // var distance = pointA.distanceTo(pointB)// 获取两点距离,保留小数点后两位
      for (var i = 0, zoomLen = zoom.length; i < zoomLen; i++) {
        if (zoom[i] - distance > 0) {
          return 18 - i + 2 // 之所以会多2，是因为地图范围常常是比例尺距离的10倍以上。所以级别会增加3。
        }
      }
      return 5
    },
    async init() {
      const map = L.map('map', {
        minZoom: 2,
        maxZoom: 18,
        center: [28.238528, 116.601117],
        zoom: 15,
        zoomControl: false,
        attributionControl: false,
        crs: L.CRS.EPSG3857
      })
      map.doubleClickZoom.disable()
      this.map = map // data上需要挂载
      window.map = map
      this.baselayer.push(L.tileLayer(
        'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
      ).addTo(map))
      this.baselayer.push(L.tileLayer(
        'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
      ).addTo(map))
      var shop = { // 图层名称
        url: 'http://111.198.10.15:13002/arcgis/rest/services/2w/MapServer/8',
        opacity: 0.8,
        f: 'json'
      }
      var shop_layer = esri.featureLayer(shop).addTo(map)
      var that = this
      await shop_layer.bindPopup(function(err, featureCollection, response) {
        // var id = err.feature.properties.FID
        var id = '1346730611456352258'
        const str = that.shopDetail(id)
        console.log(str)
        return ''
      }, { minWidth: 410 }).openPopup()
      document.getElementById('btndetail').onclick = function() {
        that.$router.push({ path: '/merchantDetail/' + that.id })
      }
    },
    // 多选触发方法
    handleSelectionChange(val) {
      this.multipleSelection = val
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  $tableTitleHeight:35px;
  .leaflet_container{
    width: 100%;
    height: 88vh;
  }
  .top_title{
    height: 40px;
    font-size: 18px;
    border: 1px solid #b5b5b5;
    padding-top: 10px;
  }
  .title{
    height: 40px;
    width: 320px;
    padding-top: 10px;
    padding-left: 5px;
    z-index: 100000;
    background-color: rgba(255, 255, 255, 0.91);
  }
  .titletext{
    text-align: center;
    font-size: 15px;
  }
  .titlenumtext{
    text-align: center;
    font-size: 19px;
  }
  .icon-gray {
    width: 10px;
    height: 10px;
    background-color: #555555;
    margin-left: 10px;
    margin-top: 5px;
    border-radius: 50%;
  }
  .icon-red {
    width: 10px;
    height: 10px;
    background-color: #d0021b;
    margin-left: 10px;
    margin-top: 5px;
    border-radius: 50%;
  }
  .icon-green {
    width: 10px;
    height: 10px;
    margin-top: 5px;
    margin-left: 10px;
    background-color: #00b238;
    border-radius: 50%;
  }
  .icon-yellow {
    width: 10px;
    height: 10px;
    margin-left: 10px;
    background-color: #ffcc00;
    margin-top: 5px;
    border-radius: 50%;
  }
  .icon-blue {
    width: 10px;
    height: 10px;
    background-color: #8eb4f6;
    margin-left: 10px;
    margin-top: 5px;
    border-radius: 50%;
  }
  .list{
    text-align:center;
    width: 500px;
    height: 40px;
    z-index: 10000;
    position: absolute;
    right:20px;
    top:20px;
  }
  .btn_bottom{
    text-align:center;
    width: 100%;
    height:70px;
    z-index: 1000;
    position: fixed; bottom: 0; left: 0;right:0;
  }
  .table-name{
    position:relative;
    width: 100px;
    top:20px;
    margin:-10px auto; //外面的div高度的一半
    z-index: 100001;
  }
  .table-title{
    background-color:rgba(243, 243, 243, 1);
    height: $tableTitleHeight;
  .title-header{
    line-height:$tableTitleHeight;
    color: #606266;
    font-size: 15px;
  i{
    margin-left: 5px;
    margin-right: 5px;
  }
  }
  }
</style>