<template>
  <section class="staPane">
    <ai-list isTabs>
      <template #blank>
        <ai-tree-menu title="组织目录" @search="v=>$refs.areaTree.filter(v)">
          <el-tree ref="areaTree" lazy node-key="id" :load="getAreas"
                   :filter-node-method="handleTreeFilter"
                   :default-expanded-keys="[selectedAreaId]"
                   @node-click="handleSelectArea"
                   :props="{label:'name',isLeaf:'leaf'}"/>
        </ai-tree-menu>
        <el-scrollbar>
          <div class="mainPane">
            <el-row type="flex">
              <div class="cardPane orgCountMap" v-for="v in orgCountMap" :key="v.key">
                <b v-html="v.name"/>
                <span v-html="v.desc"/>
                <b class="count" v-html="v.v1"/>
              </div>
            </el-row>
            <el-row type="flex">
              <div class="cardPane">
                <ai-title title="各类组织成员数量" class="pad-l32"/>
                <div id="orgMemberCountMapChart"/>
              </div>
              <div class="cardPane">
                <ai-title title="待建党组织关注度统计" class="pad-l32"/>
                <div id="buildPartyCountMapChart"/>
              </div>
            </el-row>
            <el-row type="flex" v-if="top.bizType==0">
              <div class="cardPane">
                <ai-title title="新经济组织类型分布" class="pad-l32"/>
                <div id="companyCategoryCountMapChart"/>
              </div>
              <div class="cardPane">
                <ai-title title="安全隐患类型占比" class="pad-l32"/>
                <div id="dangerousTypeCountMapChart"/>
              </div>
            </el-row>
            <el-row type="flex" v-if="top.bizType==1">
              <div class="cardPane">
                <ai-title title="新社会组织类型分布" class="pad-l32"/>
                <div id="socialTypeCountMapChart"/>
              </div>
              <div class="cardPane">
                <ai-title title="外资背景统计" class="pad-l32"/>
                <div id="foreignCountMapChart"/>
              </div>
            </el-row>
          </div>
        </el-scrollbar>
      </template>
    </ai-list>
  </section>
</template>

<script>
import {mapState} from "vuex";
import * as echarts from "echarts";

export default {
  name: "staPane",
  label: "两新组织统计",
  props: {
    instance: Function,
    dict: Object,
    permissions: Function,
  },
  inject: ['top'],
  computed: {
    ...mapState(['user']),
    typeName() {
      return this.top.bizType == 0 ? '新经济' : '新社会'
    },
    orgCountMap() {
      let init = [
        {name: `${this.typeName}组织总量`, desc: `当前所有的${this.typeName}组织总数量`, key: "zzzl", v1: 0},
        {name: "含有党群组织的数量", desc: `含有党群组织的${this.typeName}组织总数量`, key: "dqzzsl", v1: 0},
        {name: "具备建立中共党组织条件的数量", desc: "具备条件但尚未建立党组织的数量", key: "jbjldzztjsl", v1: 0}
      ]
      return init.map(e => ({
        ...e,
        v1: Number(this.meta.orgCountMap?.[e.key]) || 0
      }))
    },
    chartOps() {
      let orgMemberCountMapData = this.dict.getDict('orgMemberTypes').map(e => [e.dictName, Number(this.meta?.orgMemberCountMap?.[e.dictValue] || 0)]),
          buildPartyCountMapData = this.dict.getDict('twoNewOrgConcernDegree').map(e => [e.dictName, Number(this.meta?.buildPartyCountMap?.[e.dictValue] || 0)]),
          companyCategoryCountMapData = this.dict.getDict('twoNewOrgCompanyCategory').map(e => [e.dictName, Number(this.meta?.companyCategoryCountMap?.[e.dictValue] || 0)]),
          dangerousTypeCountMapData = this.dict.getDict('twoNewOrgDangerousType').slice(1).map(e => [e.dictName, Number(this.meta?.dangerousTypeCountMap?.[e.dictValue] || 0)]),
          socialTypeCountMapData = this.dict.getDict('twoNewOrgSocialType').map(e => [e.dictName, Number(this.meta?.socialTypeCountMap?.[e.dictValue] || 0)]),
          foreignCountMapData = this.dict.getDict('twoNewOrgIsForeign').map(e => [e.dictName, Number(this.meta?.foreignCountMap?.[e.dictValue] || 0)])
      return {
        orgMemberCountMap: {
          tooltip: {},
          grid: {
            left: 82,
            right: 40,
            bottom: 80,
            top: 30
          },
          xAxis: {
            type: 'category', axisLine: {lineStyle: {color: '#D8DDE8'}}, axisTick: false,
            axisLabel: {color: '#666', margin: 19}
          },
          yAxis: {
            type: 'value', axisLine: false, min: 0, minInterval: 1,
            axisLabel: {color: '#666', margin: 19},
            splitLine: {lineStyle: {color: '#D8DDE8', type: 'dashed'}}
          },
          series: {
            type: 'bar',
            barWidth: 24,
            itemStyle: {color: '#22AA99'},
            emphasis: {itemStyle: {color: "#2266FF"}},
          },
          dataset: {
            source: orgMemberCountMapData
          }
        },
        buildPartyCountMap: {
          tooltip: {},
          grid: {
            left: 82,
            right: 40,
            bottom: 80,
            top: 30
          },
          xAxis: {
            type: 'category', axisLine: {lineStyle: {color: '#D8DDE8'}}, axisTick: false,
            axisLabel: {color: '#666', margin: 19}
          },
          yAxis: {
            type: 'value', axisLine: false, min: 0, minInterval: 1,
            axisLabel: {color: '#666', margin: 19},
            splitLine: {lineStyle: {color: '#D8DDE8', type: 'dashed'}}
          },
          series: {
            type: 'bar',
            barWidth: 24,
            itemStyle: {color: '#22AA99'},
            emphasis: {itemStyle: {color: "#2266FF"}},
          },
          dataset: {
            source: buildPartyCountMapData
          }
        },
        companyCategoryCountMap: {
          legend: {
            orient: 'vertical', left: 220, y: 'center',
            itemGap: 4, itemWidth: 8, itemHeight: 8,
            formatter: name => {
              let item = companyCategoryCountMapData.find(e => e?.[0] == name)
              return `  {a|${name.replace(/(.{10}).*/g, '$1...')}} {b|${item?.[1]}}`
            },
            tooltip: {show: true},
            textStyle: {
              rich: {
                a: {color: '#666', width: 130, fontSize: 14, lineHeight: 22},
                b: {fontWeight: 'bold', align: 'right', color: '#333', fontSize: 14, width: 54, lineHeight: 22}
              }
            },
          },
          tooltip: {},
          color: ['#02A499', '#F8B425', '#EC4461', '#D846E4', '#38A4F8'],
          series: {
            name: '重点青少年类型分布',
            center: [100, '50%'], radius: 80,
            type: 'pie', label: false,
            itemStyle: {borderColor: '#fff', borderWidth: 2},
          },
          dataset: {
            source: companyCategoryCountMapData
          }
        },
        dangerousTypeCountMap: {
          legend: {
            orient: 'vertical', left: 220, y: 'center',
            itemGap: 4, itemWidth: 8, itemHeight: 8,
            formatter: name => {
              let item = dangerousTypeCountMapData.find(e => e?.[0] == name)
              return `  {a|${name.replace(/(.{10}).*/g, '$1...')}} {b|${item?.[1]}}`
            },
            tooltip: {show: true},
            textStyle: {
              rich: {
                a: {color: '#666', width: 166, fontSize: 14, lineHeight: 22},
                b: {fontWeight: 'bold', align: 'right', color: '#333', fontSize: 14, lineHeight: 22}
              }
            },
          },
          tooltip: {},
          color: ['#02A499', '#F8B425', '#EC4461', '#D846E4', '#38A4F8'],
          series: {
            name: '重点青少年性别分布', type: 'pie',
            center: [100, '50%'], radius: [40, 80], label: false,
            itemStyle: {borderColor: '#fff', borderWidth: 2},
          },
          dataset: {
            source: dangerousTypeCountMapData
          }
        },
        socialTypeCountMap: {
          legend: {
            orient: 'vertical', left: 220, y: 'center',
            itemGap: 4, itemWidth: 8, itemHeight: 8,
            formatter: name => {
              let item = socialTypeCountMapData.find(e => e?.[0] == name)
              return `  {a|${name.replace(/(.{10}).*/g, '$1...')}} {b|${item?.[1]}}`
            },
            tooltip: {show: true},
            textStyle: {
              rich: {
                a: {color: '#666', width: 130, fontSize: 14, lineHeight: 22},
                b: {fontWeight: 'bold', align: 'right', color: '#333', fontSize: 14, width: 54, lineHeight: 22}
              }
            },
          },
          tooltip: {},
          color: ['#02A499', '#F8B425', '#EC4461', '#D846E4', '#38A4F8'],
          series: {
            name: '重点青少年类型分布',
            center: [100, '50%'], radius: 80,
            type: 'pie', label: false,
            itemStyle: {borderColor: '#fff', borderWidth: 2},
          },
          dataset: {
            source: socialTypeCountMapData
          }
        },
        foreignCountMap: {
          legend: {
            orient: 'vertical', left: 220, y: 'center',
            itemGap: 4, itemWidth: 8, itemHeight: 8,
            formatter: name => {
              let item = foreignCountMapData.find(e => e?.[0] == name)
              return `  {a|${name.replace(/(.{10}).*/g, '$1...')}} {b|${item?.[1]}}`
            },
            tooltip: {show: true},
            textStyle: {
              rich: {
                a: {color: '#666', width: 166, fontSize: 14, lineHeight: 22},
                b: {fontWeight: 'bold', align: 'right', color: '#333', fontSize: 14, lineHeight: 22}
              }
            },
          },
          tooltip: {},
          color: ['#02A499', '#F8B425', '#EC4461', '#D846E4', '#38A4F8'],
          series: {
            name: '重点青少年性别分布', type: 'pie',
            center: [100, '50%'], radius: [40, 80], label: false,
            itemStyle: {borderColor: '#fff', borderWidth: 2},
          },
          dataset: {
            source: foreignCountMapData
          }
        },
      }
    }
  },
  data() {
    return {
      selectedAreaId: "",
      meta: {},
      charts: {
        orgMemberCountMap: null,
        buildPartyCountMap: null,
        companyCategoryCountMap: null,
        dangerousTypeCountMap: null,
        socialTypeCountMap: null,
        foreignCountMap: null,
      }
    }
  },
  methods: {
    getAreas(node, resolve) {
      if (node.level == 0) {
        let {areaName: name, areaId: id} = this.user.info
        resolve([{name, id}])
      } else {
        let {id} = node?.data
        this.instance.post("/admin/area/queryAreaByParentId", null, {
          params: {id}
        }).then(res => {
          if (res?.data) {
            resolve(res.data.map(e => ({...e, leaf: e.type == 5})))
          }
        })
      }
    },
    handleTreeFilter(v, data) {
      return data.name.indexOf(v) > -1
    },
    getStaData() {
      let {bizType} = this.top
      return this.instance.post("/app/apptwoneworganization/countByAreaIdAndBizType", null, {
        params: {areaId: this.selectedAreaId, bizType}
      }).then(res => {
        if (res?.data) {
          this.meta = res.data
        }
      })
    },
    handleSelectArea({id}) {
      this.selectedAreaId = id
      this.getStaData().then(() => this.getChartData())
    },
    initEcharts() {
      Object.keys(this.charts).map(id => {
        let ref = document.getElementById(id + "Chart")
        if (ref) this.charts[id] = echarts.init(ref)
      })
      this.getChartData()
    },
    getChartData() {
      Object.keys(this.charts).map(e => {
        this.charts[e]?.setOption(this.chartOps?.[e])
      })
    }
  },
  created() {
    this.dict.load("twoNewOrgCompanyCategory", 'twoNewOrgDangerousType',
        'twoNewOrgConcernDegree', 'orgMemberTypes', 'twoNewOrgSocialType', 'twoNewOrgIsForeign')
    this.selectedAreaId = JSON.parse(JSON.stringify(this.user.info.areaId))
  },
  mounted() {
    this.initEcharts()
    this.getStaData().then(() => this.getChartData())
  }
}
</script>

<style lang="scss" scoped>
.staPane {
  height: 100%;

  :deep( .ai-list__blank ){
    display: flex;
    height: 100% !important;
    gap: 16px;

    .el-scrollbar {
      flex: 1;
      min-width: 0;

      .el-scrollbar__wrap {
        overflow-x: hidden;
      }
    }

    .mainPane {
      display: flex;
      flex-direction: column;
      gap: 16px;

      & > .el-row {
        width: 100%;
        gap: 16px;
        height: auto;

        & > div {
          flex: 1;
          min-width: 0;
        }
      }
    }

    .cardPane {
      background: #FFFFFF;
      box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.05);
      border-radius: 4px;

      &.orgCountMap {
        padding: 16px 24px;
        box-sizing: border-box;
        height: 120px;
        font-size: 14px;
        color: #888;
        display: flex;
        flex-direction: column;
        gap: 8px;

        b {
          font-size: 16px;
          color: #333333;

          &.count {
            font-size: 24px;
            color: #2266FF;
          }
        }
      }
    }
  }

  #orgMemberCountMapChart, #buildPartyCountMapChart {
    width: 100%;
    height: 270px;
  }

  #companyCategoryCountMapChart, #dangerousTypeCountMapChart, #socialTypeCountMapChart, #foreignCountMapChart {
    width: 100%;
    height: 220px;
  }
  .pad-l32 {
    padding-left: 32px;
  }
  :deep( .el-tree .is-current>.el-tree-node__content ){
    background-color: #26f;
    color: #fff;
  }
}
</style>
