<template>
  <div class="warning-box">
    <cpt-card class="card-wr">
      <div class="card-title">
        <img class="title-icon"
             src="../../../../assets/img/shuju/title-tip.png" />
        <div class="title-label">
          联建单位分析&nbsp;&nbsp;
          <el-cascader v-model="selectAgency"
                       :options="propTree"
                       :props="{ checkStrictly: true }"
                       :show-all-levels="false"
                       clearable
                       @change="handleCascader">
          </el-cascader>

        </div>
        <!-- <div class="second-select">
          <el-select v-model="serviceMatter"
                     placeholder="请选择"
                     @change="handleSelectChange"
                     @clear="handleSelectChange">
            <el-option v-for="item in unitList"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="second-select">
          <el-date-picker v-model="timeRange"
                          type="daterange"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                          prefix-icon="el-icon-caret-bottom"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          :clearable="false"
                          :default-time="['00:00:00', '23:59:59']"
                          @change="handleTimeChange">
          </el-date-picker>
        </div> -->
      </div>
     
      <div class="second-title">
        <div class="second-title-label">联建单位分布</div>
      </div>

      <div class="box-wr calc-h">
        <div class="box-left flex-column wd50">
          <!-- <div v-for="(item, index) in partyItem"
               :key="index"
               class="box-left-item">
            <div class="box-label">{{ item.label }}</div>
            <div class="box-num"
                 :style="'color:' + item.color">{{ item.value }}</div>
          </div> -->
          <div class="echart-wr echart-wr100">
            <screen-echarts-frame class="echart-org"
                            @myChartMethod="pieInitOks"
                            ref="eduChart"></screen-echarts-frame>
          </div>

          <div class="warning-box-bottom mt0 table-h">
            <screen-table :headerList="headerTypeList"
                          :tableData="unitTableData"
                          :headerStyle="headerStyle"
                          :tableContentStyle="headerStyle"
                          :visibleLoading="visibleLoading"
                          :operate="true"
                          @look="handleUnitLook"></screen-table>
            <div class="pagination">
              <el-pagination :current-page="unitpageNo"
                             :page-size="unitpageSize"
                             background
                             layout="prev, pager, next"
                             @size-change="pageSizeHandle"
                             @current-change="pageCurrentHandle"
                             :total="unitTotal">
              </el-pagination>
            </div>
          </div>

        </div>
        <div class="box-right">
          <div class="box-map">
            <screen-map class="map"
                        ref="map"
                        :showPolygonLayer="true"
                        :isAddOpenlay="true"
                        :clickType="'popup'"
                        :showIconLayer="true"
                        :showPolIconLayer="true"
                        :areaScale="0.1"
                        @clickFeature="clickProject"
                        ></screen-map>
          </div>
          <!-- <div class="map-tips">
            <div v-for="(item, index) in partyItem"
                 :key="index"
                 class="map-tips-item">
              <div class="map-tips-icon">
                <img :src="item.icon" />
              </div>
              <div class="map-tips-label">{{ item.label }}</div>
            </div>
          </div> -->
        </div>
      </div>

      <div class="card-title mt20">
        <div class="second-title mt0">
          <div class="second-title-label">联建活动分类统计</div>

        </div>
        <div class="second-select">
          <el-select v-model="serviceMatter"
                     placeholder="请选择"
                     @change="handleSelectChange"
                     @clear="handleSelectChange">
            <el-option v-for="item in unitList"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="second-select">
          <el-date-picker v-model="timeRange"
                          type="daterange"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                          prefix-icon="el-icon-caret-bottom"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          :clearable="false"
                          :default-time="['00:00:00', '23:59:59']"
                          @change="handleTimeChange">
          </el-date-picker>
        </div>
      </div>
       
      <div class="box-wr box-wr-400">
        <div class="box-left">
          <div v-for="(item, index) in cateInfo"
               :key="index"
               class="box-left-item">
            <div class="box-label">{{ item.label }}</div>
            <div class="box-num">{{ item.value }}</div>
          </div>
          <!-- <div class="box-left-item">
            <div class="box-label">组织活动</div>
            <div class="box-num">1233</div>
          </div> -->
        </div>
        <div class="box-right">
          <div class="warning-box-bottom">
            <screen-table :headerList="headerList"
                          :tableData="tableData"
                          :visibleLoading="visibleLoading"
                          :operate="true"
                          @look="handleLook"></screen-table>
            <div class="pagination">
              <el-pagination :current-page="pageNo"
                             :page-size="pageSize"
                             background
                             layout="prev, pager, next"
                             @size-change="pageSizeChangeHandleNew"
                             @current-change="pageCurrentChangeHandleNew"
                             :total="total">
              </el-pagination>
            </div>
          </div>
        </div>
      </div>

    </cpt-card>
    <dialog-info v-if="showedMoreInfo" v-fixed
                 :info="detailInfo"
                 @close="showedMoreInfo = false" />
    <unit-info v-if="showedUnitMoreInfo" v-fixed
                 :list="unitAclist"
                 ref="unitdetailInfo"
                 @close="showedUnitMoreInfo = false" />
  </div>
</template>

<script>
import { requestPost } from "@/js/dai/request";
import util from '@js/util.js';
import screenTable from "../components/screen-table/index";
import cptCard from "@/views/modules/visual/cpts/card";
import nextTick from "dai-js/tools/nextTick";
import dialogInfo from './dialogInfo.vue'
import unitInfo from './unitInfo.vue'
import screenMap from "@/views/modules/visual/components/screen-map";
import screenEchartsFrame from "../components/screen-echarts-frame";
import { pieOption } from './options'

export default {
  name: "warning-box",
  components: {
    cptCard,
    screenTable,
    dialogInfo,
    unitInfo,
    screenMap,
    screenEchartsFrame
  },
  data () {
    return {

      showedMoreInfo: false,
      showedUnitMoreInfo: false,
      tableLoading: false,
      warningList: [],
      headerTypeList: [
        { title: "序号", coulmn: 'index' },
        { title: "单位名称", coulmn: 'unitName' },
        { title: "单位类型", coulmn: 'type' },
      ],
      headerStyle: [
        {
          'width': '60px'
        },
        {
          'min-width': '160px'
        },
        {
          'width': '160px'
        }
      ],
      headerList: [
        { title: "序号", coulmn: 'index' },
        { title: "活动标题", coulmn: 'title' },
        { title: "单位名称", coulmn: 'unitName' },
        { title: "活动地址", coulmn: 'address' },
        { title: "服务事项", coulmn: 'serviceMatterName' },
        { title: "服务人数", coulmn: 'peopleCount' },
        { title: "活动时间", coulmn: 'activityTime' }
      ],
      tableData: [
        // [1,'商丘路社区第一网格','商丘路小区','2号楼','杨颖、王平、刘佳敏、丁辉、杨萍'],
      ],
      detailId: '',
      unitdetailId: '',
      agencyId: '',
      value2: '',
      timeRange: '',
      visibleLoading: true,
      serviceMatter: 'all',
      pageNo: 1,
      pageSize: 10,
      total: 0,
      unitpageNo: 1,
      unitpageSize: 10,
      unitTotal: 0,
      unitTableData: [],
      activeIndex: 0,
      activeLevel: "1",
      selectAgency: '',
      unitList: [],
      unitType: '',
      propTree: [],
      partyItem: [],
      cateInfo: [],
      //地图相关数据
      isfirstInit: true,//记录是否是首次加载地图
      agencyInfo: {},//登陆者的组织信息：主要为了获取地图中心点和level
      unitMapList: [],

      detailInfo: {},
      unitdetailInfo: {},
      pieEduChartSs: null,
      pieEduOptions: null,
      eduList: [],
      partyCode: '',
      totalCount: 0,
      noInit: false,
      orgData: [],
      orgId: '',
      orgLevel: '',
      parentPolygon: [],
      unitAclist: []
    };
  },
  async mounted () {
    const { user } = this.$store.state
    this.agencyId = user.agencyId
    console.log('agencyId-------', this.agencyId)
    this.initTime()
    await nextTick(100);
    await this.getAgencyList()
    await this.loadOrgData()
    await this.getCateType(this.agencyId)
    this.loadUnit()
    this.getList(this.agencyId)
    this.getUnitList(this.agencyId)
    this.getCateCount(this.agencyId)
    

    await this.getWorkUserInfo()
    // await this.getMapUnitList(this.agencyId)
  },
  watch: {
    timeRange (val) {
      console.log('val-www', val)
      // this.getList(this.agencyId);
      // this.getCateCount(this.agencyId)
    }
  },
  methods: {
    pieInitOks (dom) {
      console.log('pies准备好了', dom)
      this.pieEduChartS = dom
      // this.pieInitState = true

    },
    initEduCharts() {
      // const eId = document.getElementById('echartOrg')
      // let _charts = echarts.init(eId)
      let option = {
      
      }
      let legend = {
        show: true,
        orient: 'vertical',
        top: '20%',
        right: 0,
        textStyle: {
          width: 90,
          color: '#fff',
          rich: {
            a: {
              width: 90
            }
          }
        },
        formatter: name => {
          for (let a = 0; a < this.partyItem.length; a++) {
            // this.data  这个数据中有名称和次数
            if (this.partyItem[a].name === name) {
              //两个名称进行对比，取出对应的次数
              let params1 = name + "\n"; //然后return你需要的legend格式即可
              console.log(params1);
              let tmp = params1.split("\n");
              let res = "" + params1;
              for (let i in tmp) {
                res = res.replace(tmp[i], "");
              }
              return res + params1;
            }
          }
        }
      }
      this.pieEduOptions = pieOption(this.pieEduChartS)
      this.pieEduOptions.legend = { ...legend }
      // this.pieEduOptions.series[1].width = 400
      this.clickEduPie(0)
      let fun = params => {
        this.clickEduPie(params.dataIndex)
      }
      this.$refs.eduChart.handleClick(fun)
      // this.noInit = true
      // option && this.$refs.pieChart.setOption(option);

    },
    clickEduPie (seriesIndex) {
      let _code = ''
      let isClick = false
      this.partyItem.forEach((element, index) => {
        if (index === seriesIndex) {
          _code = element.code

          if (!this.noInit) isClick = false
          else {
            element.isClick = !element.isClick
            isClick = element.isClick
          }

          element.label = {
            show: true,

          };
          element.labelLine = {
            show: true,
            lineStyle: {
              opacity: 1,
            }

          };
          console.log('zlcm')
        } else {
          element.isClick = false
          element.label = {
            show: false,

          };
          element.labelLine = {
            show: false,
            lineStyle: {
              opacity: 0,
              color: 'rgba(255,255,255,0)'
            }

          };

        }
      });
      this.unitType = isClick && _code || ''
      this.pieEduOptions.title.text = this.totalCount
      this.pieEduOptions.series[1].data = this.partyItem
      // this.$refs.pieChart.hideLoading()
      this.$refs.eduChart.setOption(this.pieEduOptions)
      if (this.noInit) {
        const _arr = this.selectAgency[this.selectAgency.length - 1].split('-')
        const orgType = _arr[1] !== 'grid' ? 'agency': 'grid'
        this.unitpageNo = 1
        this.getUnitList(_arr[0])
        // this.getCateType(_arr[0], isClick && _code || '')
      }
      this.noInit = true
      

    },
    handleTimeChange (time) {
      if (time) {
        const startTimeArray = util.dateFormatter(time[0], 'date').split('-')
        const endTimeArray = util.dateFormatter(time[1], 'date').split('-')

        const startTime = startTimeArray[0] + '-' + startTimeArray[1] + '-' + startTimeArray[2] + ' 00:00:00'
        const endTime = endTimeArray[0] + '-' + endTimeArray[1] + '-' + endTimeArray[2] + ' 23:59:59'
        this.timeRange = [startTime, endTime]
        // this.startTimeShow = startTimeArray[0] + '年' + startTimeArray[1] + '月' + startTimeArray[2] + '日'
        // this.endTimeShow = endTimeArray[0] + '年' + endTimeArray[1] + '月' + endTimeArray[2] + '日'
      } else {
        this.initTime()
      }
      this.getList(this.agencyId);
      this.getCateCount(this.agencyId)
    },
    // 根据单位获取活动类表
    async getAcList (agencyId, unitId) {

      const url = "/heart/icpartyactivity/activitylist"
      // const url = "http://yapi.elinkservice.cn/mock/245/heart/icpartyactivity/list"
      let params = {
        pageNo: 1,
        pageSize: 9999,
        agencyId,
        unitId
      }

      const { data, code, msg } = await requestPost(url, params)

      if (code === 0) {
        this.unitAclist = data.list && data.list.map((item, index) => {
          return {
            ...item,
            index: index + 1
          }
        })
        if (this.unitAclist.length > 0) this.showedUnitMoreInfo = true
        else this.$message.warning('该单位还没有活动')
        
      } else {
        this.$message.error(msg)
      }
    },
    //具体活动列表
    async getList (agencyId) {
      this.visibleLoading = true

      const url = "/heart/icpartyactivity/activitylist"
      // const url = "http://yapi.elinkservice.cn/mock/245/heart/icpartyactivity/list"
      let params = {
        agencyId,
        pageSize: this.pageSize,
        pageNo: this.pageNo,
        serviceMatter: this.serviceMatter == 'all' ? '' : this.serviceMatter,
        startTime: this.timeRange && this.timeRange[0] || '',
        endTime: this.timeRange && this.timeRange[1] || ''
      }

      const { data, code, msg } = await requestPost(url, params)

      if (code === 0) {
        this.total = data.total
        this.tableData = data.list.map((item, index) => {
          return {
            ...item,
            index: index + 1
          }
        })
      } else {
        this.$message.error(msg)
      }
      this.visibleLoading = false
    },
    // 获取联建单位
    async getUnitList (agencyId) {
      this.visibleLoading = true

      const url = "/heart/icpartyunit/listbrief"
      // const url = "http://yapi.elinkservice.cn/mock/245/heart/icpartyactivity/list"
      let params = {
        agencyId,
        pageSize: this.unitpageSize,
        pageNo: this.unitpageNo,
        type: this.unitType
      }

      const { data, code, msg } = await requestPost(url, params)

      if (code === 0) {
        this.unitTotal = data.total
        this.unitTableData = data.list.map((item, index) => {
          return {
            ...item,
            index: index + 1
          }
        })
        const url = require('../../../../assets/img/shuju/measure/other.png')
        this.iconUrlArray = [url, url, url, url, url, url, url, url]


        //第一次加载完置为false
        this.$nextTick(() => {
          this.loadMap()
          this.$forceUpdate()
        })
        // this.isfirstInit = false
      } else {
        this.$message.error(msg)
      }
      this.visibleLoading = false
    },
    async getAgencyList () {
      // const url = "/gov/org/customeragency/staffinagencylist";
      // const url = '/gov/org/customeragency/agencygridtree'
      const url = '/gov/org/customeragency/staffinagencylist'
      // let params = {
      //   agencyId: this.$store.state.user.agencyId,
      // };
      const { data, code, msg } = await requestPost(url);
      if (code === 0) {
        console.log('data-org----o', data)
        let { agencyList, subAgencyList } = data
        this.selectAgency = [`${agencyList.agencyId}-${agencyList.level}`]
        let arr = []
        agencyList.subAgencyList = subAgencyList
        arr.push(agencyList)
        this.propTree = arr && this.getTreeData(arr)

      } else {
        this.$message.error(msg)
      }
    },
    async loadOrgData () {

      const url = "/gov/org/agency/maporg"
      let params = {
        orgId: this.orgId,
        level: this.orgLevel
      }

      const { data, code, msg } = await requestPost(url, params)

      if (code === 0) {

        this.orgData = data
        this.orgId = this.orgData.id
        this.orgLevel = this.orgData.level
        this.parentPolygon = []
        this.parentPolygon = data.children.map(item => {
          return {
            ...item,
            color: "#00E5ED",
            fillColor: "rgba(0, 229, 237, 0.16)"
          }
        })

      } else {
        this.$message.error(msg)
      }

    },
    getTreeData (data) {
      if (!Array.isArray(data)) return []
      let arr = data.map(item => {
        let _item = {}
        if (item.subAgencyList) {
          if (item.subAgencyList.length === 0) {
            _item = {
              label: item.agencyName,
              value: item.agencyId + '-' + item.level,
              level: item.level,
              children: undefined
            }
          } else _item = {
            label: item.agencyName,
            value: item.agencyId + '-' + item.level,
            level: item.level,
            children: this.getTreeData(item.subAgencyList)
          }
        } else {
          _item = {
            label: item.agencyName,
            value: item.agencyId + '-' + item.level,
            level: item.level,
          }
        }
        return _item
      })
      return arr
    },
    async getCateCount (agencyId) {

      const url = "/heart/icpartyactivity/statistics"
      // const url = "http://yapi.elinkservice.cn/mock/245/heart/icpartyactivity/list"
      let params = {
        agencyId,
        serviceMatter: this.serviceMatter == 'all' ? '' : this.serviceMatter,
        startTime: this.timeRange && this.timeRange[0] || '',
        endTime: this.timeRange && this.timeRange[1] || ''
      }

      const { data, code, msg } = await requestPost(url, params)

      if (code === 0) {
        this.cateInfo = data
      } else {
        this.$message.error(msg)
      }
    },
    async getCateType (agencyId) {

      const url = "/heart/icpartyunit/typestatistics"
      // const url = "http://yapi.elinkservice.cn/mock/245/heart/icpartyactivity/list"
      let params = {
        agencyId,
        // serviceMatter: this.serviceMatter == 'all' ? '' : this.serviceMatter,
        // startTime: this.timeRange && this.timeRange[0] || '',
        // endTime: this.timeRange && this.timeRange[1] || ''
      }

      const { data, code, msg } = await requestPost(url, params)

      if (code === 0) {
        // this.cateInfo = data
        const colorItem = {
          0: {
            color: 'rgba(250, 32, 10, 1)',
            icon: require('../../../../assets/img/shuju/measure/lxdj.png')
          },
          1: {
            color: 'rgba(251, 177, 4, 1)',
            icon: require('../../../../assets/img/shuju/measure/lxzz.png')
          },
          2: {
            color: 'rgba(80, 194, 237, 1)',
            icon: require('../../../../assets/img/shuju/measure/qydw.png')
          },
          3: {
            color: 'rgba(65, 181, 104, 1)',
            icon: require('../../../../assets/img/shuju/measure/jgzs.png')
          },
          4: {
            color: 'rgba(192, 21, 195, 1)',
            icon: require('../../../../assets/img/shuju/measure/qita.png')
          },
          5: {
            color: '#ee7801',
            icon: require('../../../../assets/img/shuju/measure/minban.png')
          },
          6: {
            color: '#e70683',
            icon: require('../../../../assets/img/shuju/measure/jijin.png')
          },
          7: {
            color: '#0189d5',
            icon: require('../../../../assets/img/shuju/measure/other.png')
          }
        }
        this.partyItem = data.map((item, index) => {
          return {
            ...item,
            ...colorItem[index],
            name: item.label,
            isClick: false
          }
        })
        this.totalCount = 0
        data.forEach(item => {
          this.totalCount += Number(item.value)
        })
        this.initEduCharts()
      } else {
        this.$message.error(msg)
      }
    },
    async getDetail (id) {

      const url = "/heart/icpartyactivity/detail"
      let params = {
        id: id
      }

      const { data, code, msg } = await requestPost(url, params)

      if (code === 0) {
        this.detailInfo = data
        this.detailInfo.serviceMatterNameShow = data.serviceMatterNameList.join(',')
        this.detailInfo.unitNameShow = data.unitNameList.join(',')
      } else {
        this.$message.error(msg)
      }
    },
    async handleCascader (val) {
      console.log('val-vvv', val)
      if (val.length > 0) {
        const _arr = val[val.length - 1].split('-')
        const orgType = _arr[1] !== 'grid' ? 'agency' : 'grid'
        this.agencyId = _arr[0]
        this.orgId = _arr[0]
        this.orgLevel = orgType
        this.unitType = ''
        this.getList(_arr[0])
        await this.getCateType(_arr[0])
        await this.loadOrgData()
        this.agencyInfo = { ...this.orgData }
        console.log('agencyInfo-----', this.agencyInfo)
        this.getUnitList(_arr[0])
        // this.getMapUnitList(_arr[0])
        this.getCateCount(_arr[0])
        
      }

    },
    initTime () {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
      console.log('time-rtt', this.timeFormat(start), this.timeFormat(end))
      this.timeRange = [this.timeFormat(start, '00:00:00'), this.timeFormat(end, '23:59:59')]
    },
    timeFormat (date, h) {
      if (!date || typeof date === 'string') {
        return false
      }
      var y = date.getFullYear() //年
      var m = date.getMonth() + 1 //月
      if (m < 10) m = '0' + m
      var d = date.getDate() //日
      if (d < 10) d = '0' + d

      return y + '-' + m + '-' + d + ' ' + h
    },
    async loadUnit () {
      const url = "/heart/serviceitem/dict-list"

      let params = {

      }

      const { data, code, msg } = await requestPost(url, params)

      if (code === 0) {
        this.unitList = data
        this.unitList.unshift({
          label: '全部',
          value: 'all'
        })
      } else {
        this.$message.error(msg)
      }

    },

    // 获取当前管理员信息
    getWorkUserInfo () {
      const url = '/epmetuser/customerstaff/staffbasicinfo'
      let params = {}
      window.app.ajax.post(
        url,
        params,
        (data, rspMsg) => {
          this.agencyInfo = data
          if (!data.latitude) {
            this.agencyInfo.latitude = 36.072227
          }
          if (!data.longitude) {
            this.agencyInfo.longitude = 120.389455
          }
          if (!data.level) {
            this.agencyInfo.level = 'street'
          }

        },
        (rspMsg, data) => {
          this.$message.error(rspMsg)
        }
      )

    },

    //  //获取分类
    // async loadType () {
    //   const url = "/sys/dict/data/dictlist"

    //   let params = {
    //     dictType: 'party_unit_type'
    //   }

    //   const { data, code, msg } = await requestPost(url, params)

    //   if (code === 0) {
    //     this.typeList = data

    //   } else {
    //     this.$message.error(msg)
    //   }

    // },

    //获取联建单位分布图
    async getMapUnitList (agencyId) {
      const url = "/heart/icpartyunit/distribution"
      // const url = "http://yapi.elinkservice.cn/mock/245/heart/icpartyunit/distribution"

      let params = {
        agencyId
      }

      const { data, code, msg } = await requestPost(url, params)

      if (code === 0) {
        console.log('unitMapList----data', data)
        this.unitMapList = data.map((item, index) => {
          return {
            ...item,
            urlIndex: index
          }
        })

        console.log('unitMapList----', this.unitMapList)
        this.unitMapList.forEach(item => {

          if (item.type === '楼宇党建') {
            item.urlIndex = 0
          } else if (item.type === '两新组织') {
            item.urlIndex = 1
          } else if (item.type === '区域单位党建') {
            item.urlIndex = 2
          } else if (item.type === '机关直属部门') {
            item.urlIndex = 3
          } else if (item.type === '社会团体') {
            item.urlIndex = 4
          } else if (item.type === '民办非企业单位') {
            item.urlIndex = 5
          } else if (item.type === '基金会') {
            item.urlIndex = 6
          } else if (item.type === '其他') {
            item.urlIndex = 7
          }
        });
        const url = require('../../../../assets/img/shuju/measure/other.png')
        // this.iconUrlArray = [
        //   require('../../../../assets/img/shuju/measure/lxdj.png'),//楼宇党建
        //   require('../../../../assets/img/shuju/measure/lxzz.png'),//两新组织
        //   require('../../../../assets/img/shuju/measure/qydw.png'),//区域单位党建
        //   require('../../../../assets/img/shuju/measure/jgzs.png'),//机关直属部门
        //   require('../../../../assets/img/shuju/measure/qita.png'),//社会团体
        //   require('../../../../assets/img/shuju/measure/minban.png'),//民办
        //   require('../../../../assets/img/shuju/measure/jijin.png'),//基金
        //   require('../../../../assets/img/shuju/measure/other.png')//其他
        // ]
        this.iconUrlArray = [url, url, url, url, url, url, url, url]


        //第一次加载完置为false
        this.loadMap()

        this.isfirstInit = false

      } else {
        this.$message.error(msg)
      }

    },


    //加载地图数据
    loadMap () {
      if (this.isfirstInit) {
        //mapInfo, polygonArray, polIconUrlArray, iconArrays, iconUrlArray
        
        const polIconUrlArray = [
          'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20211116/a219130b6bc74b0b80b5ddb0fce0892a.png'
        ]
        console.log('this.unitTableData', this.unitTableData)
        this.$refs.map.loadMap(this.agencyInfo, this.parentPolygon, polIconUrlArray, this.unitTableData, this.iconUrlArray, null)
      } else {
        this.$refs.map.refreshMap(this.agencyInfo, this.unitTableData)

      }
    },

    //点击项目
    clickProject (feature) {
      console.log('标注信息', feature.values_.properties)
    },
    async handleLook (val) {

      this.detailId = val.id
      await this.getDetail(val.id)
      this.showedMoreInfo = true
    },
    async handleUnitLook(val) {
      this.unitdetailId = val.id
      // await this.getDetail(val.id)
      // this.showedUnitMoreInfo = true
      await this.getAcList(this.agencyId, val.id)
      this.$nextTick(() => {
        console.log('this.$refs', this.$refs['unitdetailInfo'])
        this.$refs['unitdetailInfo'].getDetail(this.unitAclist[0].id)
      })
    },

    handleSelectChange (val) {
      this.getList(this.agencyId);
      this.getCateCount(this.agencyId)
    },
    pageSizeChangeHandleNew (val) {
      this.pageNo = 1;
      this.pageSize = val;
      this.getList(this.agencyId);
    },
    pageCurrentChangeHandleNew (val) {
      this.pageNo = val;
      this.getList(this.agencyId);
    },
    pageCurrentHandle(val) {
      this.unitpageNo = val
      this.getUnitList(this.agencyId)
    },
    pageSizeHandle(val) {
      this.unitpageSize = val
      this.getUnitList(this.agencyId)
    },
  },
};
</script>

<style
  lang="scss"
  src="@/assets/scss/modules/visual/warning.scss"
  scoped
></style>
<style lang="scss" scoped>
.warning-box {
  display: flex;
  .card-wr {
    flex: 1;
  }
  .card-wr:last-child {
    margin-left: 20px;
  }
  ::v-deep .table-body {
    overflow: auto;
    &::-webkit-scrollbar {
      width: 8px;
      // background: linear-gradient(270deg, #0063FE, #0095FF);
    }

    &::-webkit-scrollbar-corner,
      /* 滚动条角落 */
    &::-webkit-scrollbar-thumb,
    &::-webkit-scrollbar-track {
      /*滚动条的轨道*/
      border-radius: 4px;
    }

    &::-webkit-scrollbar-corner,
    &::-webkit-scrollbar-track {
      /* 滚动条轨道 */

      background: rgba(12, 129, 254, 0.24);
      // box-shadow: inset 0 0 1px rgba(180, 160, 120, 0.5);
    }

    &::-webkit-scrollbar-thumb {
      /* 滚动条手柄 */
      background: linear-gradient(270deg, #0063fe, #0095ff);
    }
  }
}
.card-title {
  display: flex;
  align-items: center;
  cursor: pointer;
  .title-icon {
    display: block;
    width: 46px;
    height: 34px;
    box-sizing: border-box;
    margin-right: 6px;
  }
  .title-label {
    font-size: 20px;
    font-weight: 800;
    ::v-deep .el-input {
      width: 180px;
      margin-left: 10px;
      .el-input__inner {
        font-size: 18px;
        // font-weight: 800;
        color: #fff;
        background: #06186d;
        border: 1px solid #1a64cc;
      }
      .el-icon-arrow-down::before {
        content: "\e790";
      }
    }
  }
  ::v-deep .el-dropdown {
    font-size: 16px;
    color: #fff;
    font-weight: 800;
  }
}
.second-title {
  display: flex;
  align-items: center;
  margin-top: 20px;
  .second-title-label {
    position: relative;
    padding-left: 40px;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
  }
  .second-title-label::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 20px;
    width: 12px;
    height: 12px;
    box-sizing: border-box;
    margin-top: -6px;
    background: #2865fa;
    border-radius: 50%;
  }
}
.second-select {
  margin: 0 10px 0 10px;
  ::v-deep .el-input {
    width: 180px;
    height: 36px;
    .el-input__inner {
      height: 100%;
      padding: 0 10px;
      color: #fff;
      line-height: 36px;
      background: #06186d;
      border: 1px solid #1a64cc;
    }

    .el-icon-arrow-up:before {
      content: "\e78f";
    }
    // .el-select__caret:before {
    //   content: '\E790'
    // }
  }
  ::v-deep .el-date-editor {
    width: 360px;
    position: relative;
    background: #06186d;
    border: 1px solid #1a64cc;
    .el-range-input {
      color: #fff;
      background: #06186d;
    }
    .el-range-separator {
      color: #fff;
    }
    .el-range__icon {
      position: absolute;
      right: 5px;
      // float: right;
    }
    .el-input__prefix {
      left: unset;
      right: 5px;
    }
  }
}
.second-select:last-child {
  margin-left: 0;
}
.box-wr {
  display: flex;
  box-sizing: border-box;
  .box-left {
    flex-shrink: 0;
    display: flex;
    .box-left-item {
      .box-label {
        font-size: 16px;
        color: rgba(255, 255, 255, 0.72);
      }
      .box-num {
        font-size: 32px;
        font-weight: bold;
        color: #fff;
      }
    }
  }
  .box-right {
    flex: 1;
    height: 100%;
    overflow: hidden;
    .pagination {
      margin-top: 0;
    }
    .box-map {
      height: 100%;
      // border: 1px solid #2865fa;

      .map {
        height: 100%;
        width: 100%;
      }
    }
  }
  .box-left-w400 {
    flex-wrap: wrap;
    width: 400px;
    box-sizing: border-box;
    padding-top: 60px;
    padding-left: 100px;
    .box-left-item {
      width: 50%;
    }
  }
}
.flex-column {
  flex-direction: column;
}
.box-wr-400 {
  height: 400px;
  .box-left {
    width: 300px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .box-left-item:last-child {
      margin-top: 100px;
    }
  }
}
.echart-wr {
  position: relative;
  flex-shrink: 0;
  width: 90%;
  height: 320px;
  box-sizing: border-box;
  .echart-org {
    width: 100%;
    height: 100%;
  }
  .echart-cicle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 240px;
    height: 240px;
    box-sizing: border-box;
    margin-top: -120px;
    margin-left: -120px;
    border: 1px dashed rgba(0, 96, 240, 1);
    border-radius: 50%;
  }
  .echart-cicle0 {
    left: 80px;
    margin-left: 0;
  }
}
.table-h {
  height: 360px;
}
.calc-h {
  height: calc(100vh - 240px);
}
.wd50 {
  width: 50%;
}
.map-tips {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding-top: 10px;
  padding-bottom: 20px;
  .map-tips-item {
    display: flex;
    align-items: center;
    margin-top: 20px;
    margin-right: 40px;
    .map-tips-icon {
      width: 32px;
      height: 32px;
      box-sizing: border-box;
      margin-right: 10px;
      // background: #DD2719;
      // border-radius: 2px;
      img {
        display: block;
        width: 100%;
        height: 100%;
      }
    }
    .map-tips-label {
      font-size: 16px;
      color: #fff;
    }
  }
}
.mt0 {
  margin: 0;
}
.mt20 {
  margin-top: 20px;
}
</style>
