<template>
  <div class="mapData">
    <div class="mapDataLeft" v-if="leftDafrt">
      <div v-if="leftDafrt.length!==0">指标名称</div>
      <!-- 指标名称 -->
      <div
        v-for="(item,index) in leftDafrt"
        :key="index"
        :class="{bgcolor:item.state}"
        @click="trickChange(index)"
      >{{item.name}}</div>
      <div style="margin:0 auto;color:#8fa3ae;font-size:1.375rem;" v-if="leftDafrt.length===0">暂无指标名</div>
    </div>
    <div class="mapDataRight">
      <div class="maptopSty">
        <!-- 年 -->
        <div class="yearD">
          <el-cascader v-model="value" :options="options" @change="handleChange"></el-cascader>
        </div>
        <!-- 月 -->
        <!-- 季 -->
        <!-- <div style="margin:0 auto;color:#8fa3ae;font-size:1.375rem;">该指标下暂无数据</div> -->
      </div>
      <div ref="mapRefs"></div>
    </div>
  </div>
</template>
<script>
// 引入数据计算js用于机选渲染的数据
// import ComputedData from '../../assets/js/computeddata'
import china from 'echarts/map/json/china.json'
var echarts = require('echarts/lib/echarts')
require('echarts/lib/chart/map')
echarts.registerMap('china', china)
require('echarts/theme/shine')
export default {
  name: 'mapData',
  data () {
    return {
      // 控制下拉框显示隐藏
      isHideProp: true,
      // 左侧当前默认
      defaultSelectLies: null,
      // 右侧默认显示数据
      defaultDataRight: null,
      leftCateData: null,
      option: {
        // title: {
        //   text: 'iphone销量',
        //   subtext: '纯属虚构',
        //   x: 'center'
        // },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          x: 'left',
          data: ['iphone3']
        },
        dataRange: {
          min: 0,
          max: 2500,
          x: 'left',
          y: 'bottom',
          text: ['高', '低'], // 文本，默认为数值文本
          calculable: true
        },
        // toolbox: {
        //   show: true,
        //   orient: 'vertical',
        //   x: 'right',
        //   y: 'center',
        //   feature: {
        //     mark: { show: true },
        //     dataView: { show: true, readOnly: false },
        //     restore: { show: true },
        //     saveAsImage: { show: true }
        //   }
        // },
        // roamController: {
        //   show: true,
        //   x: 'right',
        //   mapTypeControl: {
        //     'china': true
        //   }
        // },
        series: [
          {
            name: 'iphone3',
            type: 'map',
            mapType: 'china',
            roam: false,
            itemStyle: {
              normal: { label: { show: true } },
              emphasis: { label: { show: true } }
            },
            data: [
              { name: '北京', value: Math.round(Math.random() * 1000) },
              { name: '天津', value: Math.round(Math.random() * 1000) },
              { name: '上海', value: Math.round(Math.random() * 1000) },
              { name: '重庆', value: Math.round(Math.random() * 1000) },
              { name: '河北', value: Math.round(Math.random() * 1000) },
              { name: '河南', value: Math.round(Math.random() * 1000) },
              { name: '云南', value: Math.round(Math.random() * 1000) },
              { name: '辽宁', value: Math.round(Math.random() * 1000) },
              { name: '黑龙江', value: Math.round(Math.random() * 1000) },
              { name: '湖南', value: Math.round(Math.random() * 1000) },
              { name: '安徽', value: Math.round(Math.random() * 1000) },
              { name: '山东', value: Math.round(Math.random() * 1000) },
              { name: '新疆', value: Math.round(Math.random() * 1000) },
              { name: '江苏', value: Math.round(Math.random() * 1000) },
              { name: '浙江', value: Math.round(Math.random() * 1000) },
              { name: '江西', value: Math.round(Math.random() * 1000) },
              { name: '湖北', value: Math.round(Math.random() * 1000) },
              { name: '广西', value: Math.round(Math.random() * 1000) },
              { name: '甘肃', value: Math.round(Math.random() * 1000) },
              { name: '山西', value: Math.round(Math.random() * 1000) },
              { name: '内蒙古', value: Math.round(Math.random() * 1000) },
              { name: '陕西', value: Math.round(Math.random() * 1000) },
              { name: '吉林', value: Math.round(Math.random() * 1000) },
              { name: '福建', value: Math.round(Math.random() * 1000) },
              { name: '贵州', value: Math.round(Math.random() * 1000) },
              { name: '广东', value: Math.round(Math.random() * 1000) },
              { name: '青海', value: Math.round(Math.random() * 1000) },
              { name: '西藏', value: Math.round(Math.random() * 1000) },
              { name: '四川', value: Math.round(Math.random() * 1000) },
              { name: '宁夏', value: Math.round(Math.random() * 1000) },
              { name: '海南', value: Math.round(Math.random() * 1000) },
              { name: '台湾', value: Math.round(Math.random() * 1000) },
              { name: '香港', value: Math.round(Math.random() * 1000) },
              { name: '澳门', value: Math.round(Math.random() * 1000) }
            ]
          }
        ]
      },
      myEchartsObj: null, // 图表渲染对象
      // 栏目级数
      jishuTime: 1,
      // 默认显示栏目
      cityDefaultNameTime: '',
      // 筛选数据
      selectpatternTime: [
        {
          field: 'userProvinceId',
          placeholder: '2019'
        }
      ],
      // 栏目数据   结构不可变
      cityDataTime: [
        { 'id': '110000', 'name': '1985年', 'parentId': '100000', 'shortName': '北京', 'cityCode': '' },
        { 'id': '110000', 'name': '1986年', 'parentId': '100000', 'shortName': '北京', 'cityCode': '' },
        { 'id': '110000', 'name': '1987年', 'parentId': '100000', 'shortName': '北京', 'cityCode': '' },
        { 'id': '110000', 'name': '2019年', 'parentId': '100000', 'shortName': '北京', 'cityCode': '' }
      ],
      // 默认选中月
      monthData: '1月',
      // 筛选数据月
      selectMonth: [
        {
          field: 'userProvinceId',
          placeholder: '1月'
        }
      ],
      // 月 结构不可变
      monthDatas: [
        { 'id': '110000', 'name': '1月', 'parentId': '100000', 'shortName': '北京', 'cityCode': '' },
        { 'id': '110000', 'name': '2月', 'parentId': '100000', 'shortName': '北京', 'cityCode': '' },
        { 'id': '110000', 'name': '3月', 'parentId': '100000', 'shortName': '北京', 'cityCode': '' },
        { 'id': '110000', 'name': '4月', 'parentId': '100000', 'shortName': '北京', 'cityCode': '' }
      ],
      // 左侧数据
      leftDafrt: null,
      // 总的地图数据
      AllMapCount: null,
      value: [],
      options: [
        {
          value: 'zhinan',
          label: '指南'
        }
      ]
    }
  },
  methods: {
    // 获取左侧菜单数据
    getCateData () {
      this.$axios({
        method: 'GET',
        url: 'data/data/list',
        params: {
          type: this.$route.query.type === 'area' ? 2 : 1,
          f: this.$store.state.selectDataLeft.f
        }
      }).then(res => {
        console.log(res, '左侧菜单')
        // 请求接口完成   请求成功
        if (res.data.code === 200) {
          this.leftCateData = res.data.data.list
          this.defaultSelectLie()
        }
      }).catch((fail) => {
        console.log(fail)
      })
    },
    // 默认选中的列
    defaultSelectLie () {
      let stateStatic = []
      this.leftCateData.forEach((item1, index1) => {
        if (index1 === 0) {
          stateStatic.push('' + index1)
          if (item1.children) {
            item1.children.forEach((item2, index2) => {
              if (index2 === 0) {
                stateStatic.push('' + index1 + '-' + index2)
                if (item2.children) {
                  item2.children.forEach((item3, index3) => {
                    if (index3 === 0) {
                      stateStatic.push('' + index1 + '-' + index2 + '-' + index3)
                      if (item3.children) {
                        item3.children.forEach((item4, index4) => {
                          if (index4 === 0) {
                            stateStatic.push('' + index1 + '-' + index2 + '-' + index3 + '-' + index4)
                            if (item4.children) {
                              item4.children.forEach((item5, index5) => {
                                if (index5 === 0) {
                                  stateStatic.push('' + index1 + '-' + index2 + '-' + index3 + '-' + index4 + '-' + index5)
                                }
                              })
                            }
                          }
                        })
                      }
                    }
                  })
                }
              }
            })
          }
        }
      })
      this.defaultSelectLies = stateStatic
      // console.log(this.defaultSelectLies, 'stateStatic')
      let dataDome = []
      console.log(stateStatic, '数据')
      console.log(this.leftCateData[0].children[0], '数据0')
      JSON.parse(JSON.stringify(stateStatic)).forEach((item, index) => {
        console.log(index)
        index === 0 ? (dataDome = this.leftCateData[index]) : (dataDome = dataDome.children[0])
      })
      this.defaultDataRight = dataDome
      console.log(this.defaultDataRight, '1250')
    },
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    },
    selectActive (key, keyPath) {
      console.log(key, keyPath)
      this.showColoect(key)
    },
    // 渲染数据地图
    showMapData () {
      this.myEchartsObj = echarts.init(this.$refs.mapRefs, 'shine')
      // 绘制图表
      this.myEchartsObj.setOption(this.option, true)
      this.myEchartsObj.resize()
    },
    // 被选中时触发
    choiceCallerTime (resu) {
      console.log(resu, 1011111)
      // this.option.series[0].data = this.AllMapCount[resu[0]]
      // this.showMapData()
    },
    changesInputStu () {
      console.log(12569)
    },
    monthDataState (resu) {
      console.log(resu)
      console.log(this.cityDefaultName)
    },
    monthDataChange () {
      console.log(12569)
    },
    // 地图左侧指标名称显示
    searchDataMap () {
      console.log(this.$store.state.selectDataLeft, '10111110')
      this.$axios({
        method: 'GET',
        url: 'data/data/quota',
        params: {
          id: this.$store.state.selectDataLeft.id
        }
      }).then(res => {
        console.log(res, '地图左侧指标名称显示')
        // 请求接口完成   请求成功
        if (res.data.code === 200) {
          this.leftDafrt = res.data.data.list.map((item, index) => {
            let brrO = {}
            if (index === 0) {
              brrO = {
                id: item.id,
                name: item.name,
                state: true
              }
            } else {
              brrO = {
                id: item.id,
                name: item.name,
                state: false
              }
            }
            return brrO
          })
          console.log(this.leftDafrt, 'this.leftDafrt')
          this.getLabelDatart()
        }
      }).catch((fail) => {
        console.log(fail)
      })
    },
    // 获取每个指标的数据
    getLabelDatart () {
      console.log(this.leftDafrt, 1010110)
      this.$axios({
        method: 'GET',
        url: 'data/data/map-data',
        params: {
          id: this.$store.state.selectDataLeft.id,
          quota_id: this.leftDafrt.find((item, index) => { return item.state === true }).id
        }
      }).then(res => {
        console.log(res, '数据地图数据')
        // 请求接口完成   请求成功
        if (res.data.code === 200) {
          console.log(res.data.data.list, 'Object.values(res.data.data.list)')
          this.option.legend.data = [this.leftDafrt.find((item, index) => { return item.state === true }).name]
          this.option.series[0].name = [this.leftDafrt.find((item, index) => { return item.state === true }).name]
          this.AllMapCount = res.data.data.list
          this.cityDataTime = this.monthDatas
          // 筛选的数据
          this.cityDataTime = Object.keys(res.data.data.list).map((item, index) => {
            return { 'id': '110000', 'name': item, 'parentId': '100000', 'shortName': '北京', 'cityCode': '' }
          })
          this.cityDefaultNameTime = this.cityDataTime[0].name
          this.selectpatternTime[0].placeholder = this.cityDataTime[0].name
          console.log(this.cityDataTime)
          this.options = Object.keys(res.data.data.list).map((item, index) => {
            return {
              value: item,
              label: item
            }
          })
          this.value = [this.options[0].value]
          this.option.series[0].data = this.AllMapCount[this.options[0].value]
          this.showMapData()
          // this.option.series[0].data = Object.values(res.data.data.list)
          // this.showMapData()
        }
      }).catch((fail) => {
        console.log(fail)
      })
    },
    // 点击改变指标名称
    trickChange (ind) {
      this.leftDafrt.forEach((item, index) => {
        index === ind ? item.state = true : item.state = false
      })
      this.getLabelDatart()
      // this.showMapData()
    },
    // 选中
    handleChange (value) {
      console.log(value)
      console.log(this.value, 'this.value')
      this.option.series[0].data = this.AllMapCount[value[0]]
      this.showMapData()
    }
  },
  mounted () {
    // 查询左侧数据
    this.searchDataMap()
    // 获取菜单信息
    // this.getCateData()
    // 渲染图表
    // this.showMapData()
    // 查询左侧数据
    // this.searchDataMap()
    this.cityDataTime = this.monthDatas
  }
}
</script>
<style lang="scss" scoped>
/deep/ .el-col-24{
  min-width: 100%;
  width:auto;
}
/deep/ .el-menu{
  border:none;
}
/deep/ .el-submenu__title {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  flex-flow: row-reverse;
  // border: 1px solid red;
  padding: 0;
}
/deep/ .el-submenu__icon-arrow {
  position: static;
  margin-top: 0.25rem;
  margin-right: 0.42rem;
  // left: 0;
  // right: auto;
}
.bgcolor {
  background-color: #95cee4;
  color: #fff;
}
.mapData {
  margin-top: 0.75rem;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  & > .mapDataLeft {
    width: 26rem;
    // margin-right: 2rem;
    min-height: 54.875rem;
    overflow: auto;
    background-color: #ffffff;
    box-shadow: 0rem 0.1875rem 1rem 0rem rgba(172, 172, 172, 1);
    & > div {
      padding-left: 10%;
      width: 90%;
      height: 3.2rem;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      font-size: 1.375rem;
    }
    & > div:hover {
      cursor: pointer;
    }
    & > div:nth-child(1) {
      padding: 0;
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
    }
  }
  & > .mapDataRight {
    width: 57rem;
    overflow: auto;
    background-color: #ffffff;
    box-shadow: 0rem 0.1875rem 1rem 0rem rgba(172, 172, 172, 1);
    // border: 1px solid red;
    & > div:nth-child(2) {
      width: 100%;
      min-height: 50.875rem;
    }
    & > .maptopSty {
      width: 100%;
      height: 4rem;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      & > .yearD {
        margin: 0 2rem;
      }
      & > .monthD {
        margin: 0 2rem;
      }
    }
  }
}
</style>
