<template>
  <moduleEnclosure>
    <zj-page-container>
      <map-data-statistics />
      <zj-page-fill>
        <div style="width: 100%; height: 100%; overflow: hidden; position: relative">
          <div id="chart_7" class="chart t_btn9" style="width: 100%; height: 100%"></div>
          <div class="leixingxianshi">
            <div class="viewfilediv">
              <div
                class="zfx"
                style="width: 60px; background: linear-gradient(to right, #6ada40, #ebe24a, #d73921)"
              ></div>
            </div>
          </div>
          <div class="pingtaixianshisheng" v-if="shengData">
            <div class="shengbiaoti">
              {{ isSelectBool }}
              <i
                @click="
                  () => {
                    shengData = null
                    if (isSelectBool) {
                      myChart.dispatchAction({
                        type: 'unselect',
                        name: [isSelectBool]
                      })
                      isSelectBool = ''
                    }
                  }
                "
                style="float: right; color: #fff; margin-top: 12px; margin-right: -8px"
                class="el-icon-circle-close"
              ></i>
            </div>
            <div class="shengshujukuang">
              <div>商户数：{{ shengData.companyNum }}</div>
              <div>师傅数量：{{ shengData.allWorker }}</div>
              <div>分销员数：{{ shengData.allService }}</div>
              <div>用户数：{{ shengData.allUser }}</div>
              <div>总工单：{{ shengData.allWorkerOrderNum }}</div>
              <div>未完工：{{ shengData.neverWorkerNum }}</div>
              <div>销售订单：{{ shengData.salesOrderNum }}</div>
              <div>增值订单：{{ shengData.increOrderNum }}</div>
            </div>
          </div>
          <div v-if="list_.length" class="pingtaixianshisheng" style="width: 100%; height: auto; min-height: 100px">
            <div
              class="shengbiaoti"
              style="
                font-size: 14px;
                border-bottom: 1px solid #50c9fd;
                line-height: 38px;
                margin-bottom: 8px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                box-sizing: border-box;
                position: relative;
                padding-right: 30px;
              "
            >
              <!-- <span>{{ isSelectBool }}</span> -->
              <span>{{ userInfo && userInfo.city }}</span>
              <span
                >总已完工 {{ cityInfo.num }}单/台 总未完工 <span>{{ cityInfo.numWwg }}</span
                >单/台</span
              >
              <i
                @click="guanbitanchuang2"
                style="position: absolute; top: 10px; right: -8px; color: #fff"
                class="el-icon-circle-close"
              ></i>
            </div>
            <div style="width: 100%">
              <table style="width: 100%">
                <thead style="width: 100%">
                  <tr>
                    <th style="color: #50c9fd; font-size: 12px; width: 17.5%; text-align: left">
                      <div align="left">街道</div>
                    </th>
                    <th style="color: #50c9fd; font-size: 12px; width: 16.5%; text-align: left">
                      <div align="left">安装完工/未完工(台)</div>
                    </th>
                    <th style="color: #50c9fd; font-size: 12px; width: 16.5%; text-align: left">
                      <div align="left">维修完工/未完工(台)</div>
                    </th>
                    <th style="color: #50c9fd; font-size: 12px; width: 16.5%; text-align: left">
                      <div align="left">清洗完工/未完工(台)</div>
                    </th>
                    <th style="color: #50c9fd; font-size: 12px; width: 16.5%; text-align: left">
                      <div align="left">增值完工/未完工(台)</div>
                    </th>
                    <th style="color: #50c9fd; font-size: 12px; width: 16.5%; text-align: left">
                      <div align="left">维保完工/未完工(台)</div>
                    </th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(item, index) in list_" :key="index">
                    <td>
                      <div class="bkiuybhlinjm left" style="font-size: 14px">{{ item.streetName }}</div>
                    </td>
                    <td>
                      <div class="bkiuybhlinjm">
                        <span style="font-size: 14px">{{ item.azgd }}</span>
                        <span style="padding: 0 2px">/</span>
                        <span style="font-size: 14px"
                          ><span style="color: #50c9fd">{{ item.azgdwwg }}</span></span
                        >
                      </div>
                    </td>
                    <td>
                      <div class="bkiuybhlinjm">
                        <span style="font-size: 14px">{{ item.wxgd }}</span>
                        <span style="padding: 0 2px">/</span>
                        <span style="font-size: 14px"
                          ><span style="color: #50c9fd">{{ item.wxgdwwg }}</span></span
                        >
                      </div>
                    </td>
                    <td>
                      <div class="bkiuybhlinjm">
                        <span style="font-size: 14px">{{ item.qxgd }}</span>
                        <span style="padding: 0 2px">/</span>
                        <span style="font-size: 14px"
                          ><span style="color: #50c9fd">{{ item.qxgdwwg }}</span></span
                        >
                      </div>
                    </td>
                    <td>
                      <div class="bkiuybhlinjm">
                        <span style="font-size: 14px">{{ item.zzgd }}</span>
                        <span style="padding: 0 2px">/</span>
                        <span style="font-size: 14px"
                          ><span style="color: #50c9fd">{{ item.zzgdwwg }}</span></span
                        >
                      </div>
                    </td>
                    <td>
                      <div class="bkiuybhlinjm">
                        <span style="font-size: 14px">{{ item.wbgd }}</span>
                        <span style="padding: 0 2px">/</span>
                        <span style="font-size: 14px"
                          ><span style="color: #50c9fd">{{ item.wbgdwwg }}</span></span
                        >
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
              <div style="width: 100%; display: flex; justify-content: center; align-items: center">
                <el-button type="text" :disabled="!(pageNum > 1)" @click="shangyiye">上一页</el-button>
                <div style="width: 50px; text-align: center; color: #50c9fd">{{ pageNum }}</div>
                <el-button type="text" :disabled="!(parseInt(total / 5) > pageNum)" @click="xiayiye">下一页</el-button>
              </div>
            </div>
          </div>
        </div>
      </zj-page-fill>
    </zj-page-container>
  </moduleEnclosure>
</template>

<script>
import zhejiang from './js/zhejiang.js'
import moduleEnclosure from '@/components/moduleEnclosure.vue'
import mapDataStatistics from './mapDataStatistics.vue'
import * as echarts from 'echarts'
import { bigGetRegion, bigGetLarge9, bigGetLarge10, bigList, bigGetLarge1, bigGetLarge11 } from '@/api/common.js'
// 计算 GeoJSON 数据的边界框
function calculateBoundingBox(geoJsonData) {
  let minX = Infinity,
    minY = Infinity,
    maxX = -Infinity,
    maxY = -Infinity
  geoJsonData.features.forEach(feature => {
    const coordinates = feature.geometry.coordinates
    const type = feature.geometry.type
    if (type === 'Polygon') {
      coordinates.forEach(polygon => {
        polygon.forEach(coord => {
          minX = Math.min(minX, coord[0])
          minY = Math.min(minY, coord[1])
          maxX = Math.max(maxX, coord[0])
          maxY = Math.max(maxY, coord[1])
        })
      })
    } else if (type === 'MultiPolygon') {
      coordinates.forEach(multiPolygon => {
        multiPolygon.forEach(polygon => {
          polygon.forEach(coord => {
            minX = Math.min(minX, coord[0])
            minY = Math.min(minY, coord[1])
            maxX = Math.max(maxX, coord[0])
            maxY = Math.max(maxY, coord[1])
          })
        })
      })
    }
  })
  return { minX, minY, maxX, maxY }
}
export default {
  components: {
    moduleEnclosure,
    mapDataStatistics
  },
  data() {
    return {
      list: [],
      geoCoordMap: zhejiang.features.map(function (item) {
        return {
          name: item.properties.name,
          value: item.properties.center
        }
      }),
      data: zhejiang.features.map(function (item) {
        return {
          name: item.properties.name
        }
      }),
      cIndex: 0,
      oldcIndex: 0,
      myChart: null,
      getLarge9: [],
      getLarge10: [],
      shengData: null,
      isSelectBool: '',
      pageNum: 1,
      total: 0,
      list_: [],
      cityInfo: {}
    }
  },
  computed: {
    userInfo() {
      return JSON.parse(localStorage.getItem('greemall_user'))
    }
  },
  watch: {
    'userInfo.type': {
      handler(newVal, oldVal) {
        this.init(true)
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    guanbitanchuang() {
      this.shengData = null
      if (this.isSelectBool) {
        this.myChart.dispatchAction({
          type: 'unselect',
          name: [this.isSelectBool]
        })
        this.isSelectBool = ''
      }
    },
    guanbitanchuang2() {
      this.pageNum = 1
      this.total = 0
      this.list_ = []
      this.cityInfo = {}
      if (this.isSelectBool) {
        this.myChart.dispatchAction({
          type: 'unselect',
          name: [this.isSelectBool]
        })
        this.isSelectBool = ''
      }
    },
    init() {
      if (this.userInfo) {
        if (this.userInfo.type == 2) {
          this.getbigGetLarge9({ country: 100000 })
        } else {
          this.getbigGetLarge10({ province: this.userInfo.province, city: this.userInfo.city })
        }
      }
    },
    getbigGetLarge9(pam) {
      bigGetLarge9().then(res => {
        this.getLarge9 = res.data
        this.getLarge10 = []
        this.echart_7(pam)
      })
    },
    getbigGetLarge10(pam) {
      bigGetLarge10(pam).then(res => {
        this.getLarge9 = []
        this.getLarge10 = res.data
        this.echart_7({ province: this.userInfo.province, city: this.userInfo.city })
      })
    },
    echart_7(pam) {
      var that = this
      if (that.myChart) {
        that.myChart.dispose()
      }
      bigGetRegion(pam).then(res => {
        // 初始化 ECharts 实例
        that.myChart = echarts.init(document.getElementById('chart_7'))
        const geoJsonData = JSON.parse(res.data)
        // 计算边界框
        const boundingBox = calculateBoundingBox(geoJsonData)
        // 计算中心点
        const center = [(boundingBox.minX + boundingBox.maxX) / 2, (boundingBox.minY + boundingBox.maxY) / 2]
        echarts.registerMap('china', geoJsonData)
        // 指定城市和颜色
        var cityColors = {}
        this.getLarge9.map(name => {
          cityColors[name] = '#009eff'
        })
        this.getLarge10.map(item => {
          cityColors[item.area] =
            item.num <= 2 ? '#6ada40' : item.num <= 4 ? '#ebe24a' : item.num > 4 ? '#d73921' : 'none'
        })
        // 构建 series 数据
        var seriesData = Object.keys(cityColors).map(function (city) {
          return {
            name: city,
            itemStyle: {
              normal: {
                areaColor: cityColors[city],
                borderColor: cityColors[city]
              },
              emphasis: {
                label: { show: true, color: '#ffffff' },
                areaColor: 'none',
                borderColor: 1
              }
            }
          }
        })
        var mapcon = {
          label: {
            emphasis: {
              textStyle: {
                color: '#beecff'
              }
            }
          },
          itemStyle: {
            normal: {
              borderColor: 'rgba(0,144,255, 1)',
              borderWidth: 1,
              areaColor: {
                type: 'radial',
                x: 0.4,
                y: 0.5,
                r: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(0,144,255, 0)' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: 'rgba(0,144,255, .1)' // 100% 处的颜色
                  },
                  {
                    offset: 1,
                    color: 'rgba(0,144,255, 1)' // 100% 处的颜色
                  }
                ],
                globalCoord: false // 缺省为 false
              },
              shadowColor: 'rgba(0,144,255, 1)',
              shadowOffsetX: -1,
              shadowOffsetY: 1,
              shadowBlur: 10
            },
            emphasis: {
              label: { show: true, color: '#ffffff' },
              areaColor: 'none',
              borderColor: 1
            }
          },
          select: {
            // 地图选中区域样式
            label: {
              // 选中区域的label(文字)样式
              color: '#fff'
            },
            itemStyle: {
              // 选中区域的默认样式
              areaColor: '#7024fb'
            }
          },
          animation: false
        }
        // 配置项
        var option = {
          tooltip: {
            confine: true,
            trigger: 'item',
            formatter: '{b}'
          },
          geo: {
            map: 'china',
            roam: true,
            zoom: pam.country ? 1.3 : pam.city ? 4.5 : pam.province ? 1.7 : 2, // 设置缩放比例
            center: center,
            ...mapcon,
            regions: [
              ...seriesData,
              {
                name: '南海诸岛',
                itemStyle: {
                  normal: {
                    opacity: 0
                  }
                },
                label: {
                  show: false
                }
              }
            ]
          },
          series: [
            {
              type: 'map',
              map: 'china',
              ...mapcon,
              geoIndex: 0,
              data: seriesData,
              emphasis: {
                label: { show: true, color: '#ffffff' },
                areaColor: 'none',
                borderColor: 1
              }
            }
          ]
        }
        // 使用配置项生成图表
        that.myChart.setOption(option)
        var bool_i = false
        that.myChart.on('selectchanged', function (params) {
          bool_i = !!params.selected.length
        })
        // 监听点击事件
        that.myChart.on('click', function (params) {
          if (bool_i) {
            if (that.userInfo) {
              if (that.userInfo.type == 2) {
                // 平台
                if (!!cityColors[params.name]) {
                  bigGetLarge1({
                    province: params.name
                  }).then(res => {
                    that.shengData = res.data
                    that.isSelectBool = params.name
                  })
                }
              } else {
                // 商户
                if (!!cityColors[params.name]) {
                  that.isSelectBool = params.name
                  that.pageNum = 1
                  that.total = 0
                  that.pagedatalist()
                  bigGetLarge11({
                    // area: that.isSelectBool,
                    city: that.userInfo.city,
                    province: that.userInfo.province
                  }).then(res => {
                    that.cityInfo = res.data
                  })
                }
              }
            }
          }
          if (!cityColors[params.name]) {
            that.guanbitanchuang()
            that.guanbitanchuang2()
          }
        })
      })
    },
    pagedatalist() {
      if (this.isSelectBool) {
        bigList({
          pageNum: this.pageNum,
          pageSize: 5,
          city: this.userInfo.city,
          province: this.userInfo.province,
          area: this.isSelectBool
        }).then(res => {
          this.total = res.data.total
          this.list_ = res.data.records
        })
      }
    },
    xiayiye() {
      if (parseInt(this.total / 5) > this.pageNum) {
        this.pageNum++
        this.pagedatalist()
      } else {
      }
    },
    shangyiye() {
      if (this.pageNum > 1) {
        this.pageNum--
        this.pagedatalist()
      } else {
      }
    }
  }
}
</script>

<style scoped lang="scss">
.pingtaixianshisheng {
  position: absolute;
  top: 0;
  left: 0;
  width: 467px;
  height: 120px;
  background: #04418f;
  border-radius: 5px;
  opacity: 0.8;
  z-index: 999;
  box-sizing: border-box;
  padding: 0 20px;

  .shengbiaoti {
    font-family: Source Han Sans CN;
    font-weight: 500;
    font-size: 18px;
    color: #50c9fd;
    line-height: 49px;
  }

  .shengshujukuang {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 13px;
    color: #ffffff;
    line-height: 26px;

    div {
      width: 25%;
    }
  }
}

.leixingxianshi {
  // width: 120px;
  height: auto;
  position: absolute;
  bottom: 0px;
  right: -10px;
}

.viewfilediv {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
  align-items: center;

  &:not(:last-child) {
    margin-bottom: 10px;
  }

  span {
    font-size: 14px;
    font-family: Source Han Sans CN, Source Han Sans CN-Regular;
    font-weight: 400;
    text-align: right;
    color: #8ab1dc;
  }
}

.zfx {
  width: 14px;
  height: 14px;
  margin-right: 6px;
}

.c1 {
  background: linear-gradient(0deg, #21c8fb 0%, #21c8fb 100%);
}

.c2 {
  background: linear-gradient(0deg, #ffc737 0%, #ffc737 100%);
}

.c3 {
  background: linear-gradient(0deg, #ea539b 0%, #e34691 100%);
}

.c4 {
  background: linear-gradient(0deg, #59cfe6 0%, #59cfe6 100%);
}

.c5 {
  background: linear-gradient(0deg, #8061ff 0%, #8061ff 100%);
}

.c6 {
  color: #e15960 !important;
}

.c7 {
  color: #ffffff !important;
}

.c8 {
  color: #ff9900 !important;
}

.c9 {
  background: linear-gradient(0deg, #3ce783 0%, #3ce783 100%);
}

.bkiuybhlinjm {
  padding: 8px 0;
  color: #fff;
  box-sizing: border-box;
  padding-right: 30px;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  &.left {
    justify-content: flex-start;
  }
}
</style>
