<template>
  <div class="warning-box">
    <cpt-card>
      <div class="card-title">
        <img class="title-icon" src="../../../../assets/img/shuju/title-tip.png" />
        <div class="title-label">
          <!-- <el-dropdown trigger="click">
            <span class="el-dropdown-link">
              全部网格<i class="el-icon-caret-bottom el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>黄金糕</el-dropdown-item>
              <el-dropdown-item>狮子头</el-dropdown-item>
              <el-dropdown-item>螺蛳粉</el-dropdown-item>
              <el-dropdown-item>双皮奶</el-dropdown-item>
              <el-dropdown-item>蚵仔煎</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown> -->
          <el-cascader 
            v-model="selectAgency"
            :options="propTree" 
            :props="{ checkStrictly: true }" 
            :show-all-levels="false"
            :getCheckedNodes="getCheckedNodes"
            clearable @change="handleCascader">
          </el-cascader>
        </div> 
      </div>
      <div class="card-echart">
        <div class="card-left">
          <div class="card-left-title">党员年龄统计</div>
          <div class="card-flex">
            <div class="echart-wr">
              <!-- <div class="echart-cicle"></div>  -->
              <screen-echarts-frame class="echart-org"
                              @myChartMethod="pieInitOk"
                              ref="ageChart"></screen-echarts-frame>
              <!-- <div id="echartOrg" class="echart-org"></div> -->
            </div>
            <div class="echarts-tips echarts-tips-wd50">
              <div class="tips-lists">
                <div v-for="(item, index) in ageItem" :key="index" class="tips-items">
                  <div class="tips-items-title" :class="'tips-items-title' + item.value">
                    {{ item.name }}
                  </div>
                  <div class="tips-items-num">
                    <div class="tips-item-count">{{item.value}}</div>
                    <div class="tips-item-has">{{ item.radio }}</div>
                  </div>
                </div>
                
              </div>
            </div>
            
          </div>
          <div class="warning-box-bottom">
            <screen-table
              :headerList="headerList"
              :tableData="ageList"
              :visibleLoading="visibleLoading"
              :operate="false"
            ></screen-table>
            <div class="pagination">
              <el-pagination
                :current-page="agePageNo"
                :page-size="agePageSize"
                background
                layout="prev, pager, next"
                @size-change="pageSizeChangeHandleAge"
                @current-change="pageCurrentChangeHandleAge"
                :total="ageTotal"
              >
              </el-pagination>
            </div>
          </div>
        </div>
        <div class="card-left">
          <div class="card-left-title">党员学历统计</div>
          <div class="card-flex">
            <div class="echart-wr echart-wr100">
              <!-- <div class="echart-cicle echart-cicle0"></div> -->
              <!-- <div id="echartType" class="echart-org"></div> -->
              <screen-echarts-frame class="echart-org"
                              @myChartMethod="pieInitOks"
                              ref="eduChart"></screen-echarts-frame>
            </div>
            <div v-if="false" class="echarts-tips">
              <div class="tips-list">
                <div v-for="item in eduItem" :key="item.value" class="tips-item">
                  <div class="tips-item-icon" :style="'background:' + item.color"></div>
                  <div class="tips-item-text">{{item.name}}</div>
                </div>
                
              </div>
            </div>
          </div>
          <div class="warning-box-bottom">
            <screen-table
              :headerList="headerEduList"
              :tableData="eduList"
              :visibleLoading="visibleLoading"
              :operate="false"
            ></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>
  </div>
</template>

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

import * as echarts from 'echarts';
export default {
  name: "warning-box",
  components: {
    cptCard,
    screenTable,
    screenEchartsFrame
  },
  data() {
    return {
      headerList: [
        { title: "序号", coulmn: 'index' },
        { title: "姓名", coulmn: 'name' },
        { title: "年龄", coulmn: 'age' },
        { title: "手机号码", coulmn: 'mobile' }
      ],
      headerEduList: [
        { title: "序号", coulmn: 'index' },
        { title: "姓名", coulmn: 'name' },
        { title: "学历", coulmn: 'education' },
        { title: "手机号码", coulmn: 'mobile' }
      ],
      tableData: [
        // [1,'商丘路社区第一网格','商丘路小区','2号楼','杨颖、王平、刘佳敏、丁辉、杨萍'],
      ],
      noInit: false,
      selectAgency: null,
      ageTotalCount: 0,
      eduTotalCount: 0,
      propTree: [],
      value2: '',
      visibleLoading: true,
      pageNo: 1,
      pageSize: 10,
      agePageNo: 1,
      agePageSize: 10,
      total: 0,
      ageTotal: 0,
      eduItem: [
        {
          name: '小学',
          value: 0,
          color: 'rgba(27, 81, 255, 1)'
        }, {
          name: '初中',
          value: 1,
          color: 'rgba(0, 229, 237, 1)'
        }, {
          name: '高中',
          value: 2,
          color: 'rgba(120, 0, 255, 1)'
        }, {
          name: '中专',
          value: 3,
          color: 'rgba(255, 120, 0, 1)'
        }, {
          name: '大专',
          value: 4,
          color: 'rgba(255, 186, 0, 1)'
        }, {
          name: '本科',
          value: 5,
          color: 'rgba(22, 215, 131, 1)'
        }, {
          name: '硕士',
          value: 6,
          color: 'rgba(42, 0, 255, 1)'
        }, {
          name: '博士',
          value: 7,
          color: 'rgba(198, 0, 255, 1)'
        }, {
          name: '其他',
          value: 8,
          color: 'rgba(255, 42, 0, 1)'
        }
      ],
      ageItem: [
        {
          name: '50岁以下',
          value: 1,
          color: 'rgba(27, 81, 255, 1)'
        }, {
          name: '50-59岁',
          value: 2,
          color: 'rgba(0, 229, 237, 1)'
        }, {
          name: '60-69岁',
          value: 3,
          color: 'rgba(120, 0, 255, 1)'
        }, {
          name: '70-79岁',
          value: 4,
          color: 'rgba(255, 120, 0, 1)'
        }, {
          name: '80岁以上',
          value: 5,
          color: 'rgba(255, 186, 0, 1)'
        }
      ],
      ageList: [],
      eduList: [],
      pieAgeChartS: null,
      pieEduChartSs: null,
      pieAgeOptions: null,
      pieEduOptions: null
    };
  },
  async mounted() {
    await nextTick(100);
    await this.getAgencyList()
    this.getAgeCount(this.$store.state.user.agencyId, 'agency')
    this.getEduCount(this.$store.state.user.agencyId, 'agency')
    // this.initAgeCharts()
    // this.initEduCharts()
    this.getAgeList(this.$store.state.user.agencyId, 'agency')
    this.getEduList(this.$store.state.user.agencyId, 'agency')
    // this.initChartType()
  },
  methods: {
    pieInitOk (dom) {
      console.log('pie准备好了', dom)
      this.pieAgeChartS = dom
      // this.pieInitState = true

    },
    pieInitOks (dom) {
      console.log('pies准备好了', dom)
      this.pieEduChartS = dom
      // this.pieInitState = true

    },
    initAgeCharts() {
      // const eId = document.getElementById('echartOrg')
      // let _charts = echarts.init(eId)
      let option = {
      
      }
      this.pieAgeOptions = pieOption(this.pieAgeChartS)
      this.clickAgePie(0)
      let fun = params => {
        this.clickAgePie(params.dataIndex)
      }
      this.$refs.ageChart.handleClick(fun)
      // option && this.$refs.pieChart.setOption(option);

    },
    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.eduItem.length; a++) {
            // this.data  这个数据中有名称和次数
            if (this.eduItem[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);

    },
    initChartType() {
      const eId = document.getElementById('echartType')
      let _charts = echarts.init(eId)
      
      let option = {
        tooltip: {
          trigger: 'item'
        },
        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.eduItem.length; a++) {
              // this.data  这个数据中有名称和次数
              if (this.eduItem[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;
              }
            }
          }
        },
        title: {
          text: '12000',  //图形标题，配置在中间对应效果图的80%
          subtext: '总数',
          left: 196,
          top: "center",
          textAlign: 'center',
          textStyle: {
            color: "#fff",
            fontSize: 28,
            align: "center"
          },
          subtextStyle: {
            fontSize: 16,
            color: '#fff',
            align: 'center'
          }
        },
        series: [
          {
            // name: 'Access From',
            type: 'pie',
            // center: ['50%', '50%'],
            radius: ['40%', '60%'],
            avoidLabelOverlap: true,
            // top: top + '%',
            // height: '80%',
            // left: 0,
            width: 400,
            label: {
              position: 'outside',
              alignTo: 'edge',
              formatter: '{a|{c}}\n{r|}\n{name|{b}}',
              minMargin: 5,
              edgeDistance: 20,
              lineHeight: 15,
              color: '#fff',
              fontSize: 15,
              rich: {
                name: {
                  padding: [0, 6, 0, 6]
                },
                a: {
                  fontSize: 15,
                  color: '#fff',
                  padding: [0, 6, 0, 6]
                },
                r: {
                  backgroundColor: 'auto',
                  borderRadius: 6,
                  width: 6,
                  height: 6,
                  // padding: [3, 3, 0, -12]
                }
              }
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '14',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: true,
              length: 20,
              length2: 0,
              maxSurfaceAngle: 80
            },
            labelLayout: function (params) {
              const isLeft = params.labelRect.x < _charts.getWidth() / 2;
              const points = params.labelLinePoints;
              // Update the end point.
              points[2][0] = isLeft
                ? params.labelRect.x
                : params.labelRect.x + params.labelRect.width;
              return {
                labelLinePoints: points
              };
            },
            data: this.eduItem
          }
        ]
      }
      option && _charts.setOption(option);

    },
    clickAgePie (seriesIndex) {
      let _code = ''
      this.ageItem.forEach((element, index) => {
        if (index === seriesIndex) {
          _code = element.code
          element.label = {
            show: true,

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

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

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

          };

        }
      });
      this.pieAgeOptions.title.text = this.ageTotalCount
      this.pieAgeOptions.series[1].data = this.ageItem
      // this.$refs.pieChart.hideLoading()
      this.$refs.ageChart.setOption(this.pieAgeOptions)
      if (this.noInit) {
        const _arr = this.selectAgency[this.selectAgency.length - 1].split('-')
        const orgType = _arr[1] !== 'grid' ? 'agency': 'grid'
        this.getAgeList(_arr[0], orgType, _code)
      }
      this.noInit = true

    },
    clickEduPie (seriesIndex) {
      let _code = ''
      this.eduItem.forEach((element, index) => {
        if (index === seriesIndex) {
          _code = element.code
          element.label = {
            show: true,

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

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

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

          };

        }
      });
      this.pieEduOptions.title.text = this.eduTotalCount
      this.pieEduOptions.series[1].data = this.eduItem
      // 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.getEduList(_arr[0], orgType, _code)
      }
      this.noInit = true
      

    },
    async getAgeCount(orgId, orgType) {
      const url = "/epmetuser/icresiuser/partymemberagestatistics";
      let params = {
        orgId,
        orgType
      };
      const { data, code, msg } = await requestPost(url, params);
      if (code === 0) {
        this.ageItem = data.map(item => {
          return {
            ...item,
            name: item.label
          }
        })
        data.forEach(item => {
          this.ageTotalCount += Number(item.value)
        })
        this.initAgeCharts()
      } else {
      }
    },
    async getEduCount(orgId, orgType) {
      const url = "/epmetuser/icresiuser/partymembereducationstatistics";
      let params = {
        orgId,
        orgType
      };
      const { data, code, msg } = await requestPost(url, params);
      if (code === 0) {
        this.eduItem = data.map(item => {
          return {
            ...item,
            name: item.label
          }
        })
        data.forEach(item => {
          this.eduTotalCount += Number(item.value)
        })
        this.initEduCharts()
      } else {
      }
    },
    async getAgeList(orgId, orgType, _code) {
      
      this.visibleLoading = true
      const url = "/epmetuser/icresiuser/partymemberagelist";
      let params = {
        orgId,
        orgType,
        code: _code || '',
        pageNo: this.agePageNo,
        pageSize: this.agePageSize
      };
      const { data, code, msg } = await requestPost(url, params);
      if (code === 0) {
        this.ageList = data.list.map((item, index) => {
          return {
            ...item,
            index: index + 1
          }
        })
        this.ageTotal = data.total
      } else {
        this.$message.error(msg)
      }
      // if (_code == 0 || _code) this.noInit = true
      this.visibleLoading = false
    },
    async getEduList(orgId, orgType, _code) {
      const url = "/epmetuser/icresiuser/partymembereducationlist";
      let params = {
        orgId,
        orgType,
        code: _code || '',
        pageNo: this.pageNo,
        pageSize: this.pageSize
      };
      const { data, code, msg } = await requestPost(url, params);
      if (code === 0) {
        this.eduList = data.list.map((item, index) => {
          return {
            ...item,
            index: index + 1
          }
        })
        this.total = data.total
      } else {
        this.$message.error(msg)
      }
    },
    async getAgencyList(node, resolve) {
      // const url = "/gov/org/customeragency/staffinagencylist";
      const url = '/gov/org/customeragency/agencygridtree'
      // let params = {
      //   agencyId: this.$store.state.user.agencyId,
      // };
      const { data, code, msg } = await requestPost(url);
      if (code === 0) {
        console.log('data-org----o', data)
        this.selectAgency = [`${data.agencyId}-${data.level}`]
        let arr = []
        arr.push(data)
        this.propTree = arr && this.getTreeData(arr)

      } else {
      }
    },
    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
    },
    handleCascader(val) {
      console.log('val-vvv', val)
      const _arr = val[val.length - 1].split('-')
      const orgType = _arr[1] !== 'grid' ? 'agency': 'grid'
      this.getAgeList(_arr[0], orgType)
      this.getEduList(_arr[0], orgType)
    },
    getCheckedNodes(val) {
      console.log('val-nnn', val)
    },
    lazyLoad(node, resolve) {
      setTimeout(() => {
        this.getAgeList(node, resolve)
      }, 500)
    },
    pageSizeChangeHandleAge(val) {
      this.agePageNo = 1
      this.agePageSize = val
      this.getAgeList()
    },
    pageCurrentChangeHandleAge (val) {
      this.agePageSize = val
      this.getAgeList()
    },
    pageSizeChangeHandleNew(val) {
      this.pageNo = 1;
      this.pageSize = val;
      this.getEduList()
    },
    pageCurrentChangeHandleNew(val) {
      this.pageNo = val;
      this.getEduList()
    },
  },
};
</script>

<style
  lang="scss"
  src="@/assets/scss/modules/visual/warning.scss"
  scoped
></style>
<style lang="scss" scoped>
.card-title {
  display: flex;
  align-items: center;
  cursor: pointer;
  .title-icon {
    display: block;
    width: 46px;
    height: 34px;
    box-sizing: border-box;
    margin-right: 6px;
  }
  ::v-deep .el-dropdown {
    font-size: 18px;
    color: #fff;
    font-weight: 800;
  }
  .title-time {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    margin-left: 30px;
    font-size: 14px;
    color: #fff;
    .title-time-label {
      margin-right: 10px;
    }
    ::v-deep .el-date-editor--month {
      width: 100px;
      .el-input__inner {
        width: 100px;
        height: 24px;
        box-sizing: border-box;
        padding: 0;
        font-size: 14px;
        color: #fff;
        line-height: 24px;
        text-align: center;
        background: #06186D;
        border: 1px solid #1A64CC;
        border-radius: 2px;
      }
      .el-input__prefix {
        display: none;
      }
      .el-input__suffix {
        right: 0;
        .el-input__icon {
          line-height: 24px;
        }
      }
      
    }
  }
  .title-label {
    ::v-deep .el-input {
      width: 180px;
      .el-input__inner {
        font-size: 20px;
        font-weight: 800;
        color: #fff;
        background: transparent;
        border: 0;
      }
      .el-icon-arrow-down::before {
          content: "\e790";
      }
    }
  }
}
.card-echart {
  display: flex;
  margin-top: 40px;
  height: 100%;
  .card-left {
    position: relative;
    flex: 1;
    // display: flex;
    height: 100%;
    .card-flex {
      width: 100%;
      display: flex;
    }
  }
}
.card-left-title {
  position: relative;
  padding-left: 40px;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
}
.card-left-title::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 20px;
  width: 12px;
  height: 12px;
  box-sizing: border-box;
  margin-top: -6px;
  background: #2865FA;
  border-radius: 50%;
}
.echart-wr {
  position: relative;
  flex-shrink: 0;
  width: 50%;
  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;
  }
}
.echart-wr100 {
  width: 70%;
}
.echarts-tips {
  width: 40%;
  // flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.echarts-tips-wd50 {
  width: 320px;
}
.tips-list, .tips-item, .tips-lists, .tips-items-num {
  display: flex;
  align-items: center;
}
.tips-list {
  // width: 100%;
  // height: 100%;
  flex-wrap: wrap;
  // justify-content: center;
  .tips-item {
    // flex: 1;
    width: 50%;
    margin-top: 20px;
    // margin-right: 40px;
    cursor: pointer;
    .tips-item-icon {
      width: 20px;
      height: 10px;
      box-sizing: border-box;
      margin-right: 8px;
      background: #1B51FF;
      border-radius: 2px;
    }
    .tips-item-text {
      font-size: 16px;
      color: #D2E7FF;
    }
  }
}
.tips-lists {
  width: 100%;
  box-sizing: border-box;
  padding: 30px 0 0 30px;
  flex-wrap: wrap;
  .tips-items {
    margin-bottom: 30px;
    margin-right: 40px;
    // width: 50%;
    cursor: pointer;
    .tips-items-title {
      position: relative;
      width: 100px;
      height: 26px;
      box-sizing: border-box;
      padding-left: 6px;
      font-size: 16px;
      color: #EFF0F1;
      background: url('../../../../assets/img/shuju/measure/zi@2x.png') no-repeat left bottom;
      &1 {
        background: url('../../../../assets/img/shuju/measure/huang@2x.png') no-repeat left bottom;
      }
      &2 {
        background: url('../../../../assets/img/shuju/measure/lan@2x.png') no-repeat left bottom;
      }
      &3 {
        background: url('../../../../assets/img/shuju/measure/lanlv@2x.png') no-repeat left bottom;
      }
      &4 {
        background: url('../../../../assets/img/shuju/measure/lv@2x.png') no-repeat left bottom;
      }
    }
    .tips-items-num {
      justify-content: space-between;
      box-sizing: border-box;
      margin-top: 10px;
      // padding-right: 30px;
      font-size: 20px;
      .tips-item-has {
        font-size: 14px;
      }
    }
  }
}

.warning-box-bottom {
  height: calc(100% - 500px);
  box-sizing: border-box;
  margin: 0;
  padding: 0 30px;
  // overflow-y: scroll;
}
</style>
