<template>
  <cpt-card>
    <div class="title">
      <img src="@/assets/img/shuju/title-tip.png" />
      <span>居民热议</span>

      <div class="second-select cascader">

        <el-cascader class="customer_cascader"
                     ref="myCascader"
                     v-model="agencyIdArray"
                     :key="iscascaderShow"
                     :options="casOptions"
                     :props="optionProps"
                     :show-all-levels="false"
                     @change="handleChangeAgency"></el-cascader>
      </div>
      <div class="second-select status-select">
        <el-select v-model="status"
                   :popper-append-to-body="false"
                   placeholder="请选择">
          <el-option v-for="(item,index) in stateArray"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value"
                     @click.native="handleChangeState(index)">
          </el-option>
        </el-select>
      </div>
    </div>

    <div class="g-cpt-resi">
      <div class="g-l">
        <screen-echarts-frame v-if="!pieNoData && !dataLoading"
                              class="echart-wr"
                              @myChartMethod="pieInitOk"
                              ref="pieChart"></screen-echarts-frame>
        <screen-nodata class="nodata"
                       v-if="pieNoData && !dataLoading"></screen-nodata>
        <div class="table-status"
             v-if="dataLoading">
          <screen-loading>加载中</screen-loading>
        </div>
      </div>
      <div class="g-r">
        <div class="m-tb">

          <div class="tb">
            <cpt-tb :col-list="demand.colList"
                    :loading="demand.loading"
                    :header="demand.header"
                    :list="demand.list"
                    @operate="toIssueInfo"></cpt-tb>

          </div>
          <div class="m-pagination">
            <el-pagination :current-page="demand.pageNo"
                           :page-size="demand.pageSize"
                           :total="demand.total"
                           background
                           layout="prev, pager, next"
                           @current-change="handlePageNoChange_demand">
            </el-pagination>
          </div>
        </div>

      </div>
    </div>

    <issue-info v-if="showIssue"
                :issueId="issueId"
                @close="showIssue = false" />

  </cpt-card>
</template>

<script>
import { Loading } from "element-ui"; //引入Loading服务
import { requestPost } from "@/js/dai/request";
import cptCard from "@/views/modules/visual/cpts/card";
import cptTb from "@/views/modules/visual/cpts/tb";
import screenEchartsFrame from "@/views/modules/visual/components/screen-echarts-frame";
import ScreenLoading from "@/views/modules/visual/components/screen-loading";
import ScreenNodata from "@/views/modules/visual/components/screen-nodata";
import { pieOption } from './resiPieOption.js'
import nextTick from 'dai-js/tools/nextTick'
import issueInfo from "./cpt/issue-info";


export default {
  name: "HomeMap",
  data () {
    return {
      dataLoading: true,
      pieNoData: false,

      pieChartS: null,
      pieChart: '',
      pieOption: {},
      pieInitState: false,
      pieTotal: 0,
      colorArray: [],
      pieData: [
        // { count: 1048, categoryName: '城市管理', color: '#1B51FF', selected: true },
        // { count: 735, categoryName: '为民服务', color: '#00E5ED' },
        // { count: 580, categoryName: '安全监管', color: '#7800FF' },
        // { count: 484, categoryName: '民政', color: '#16D783' },
        // { count: 300, categoryName: '环境保护', color: '#FF7800' },
        // { count: 1048, categoryName: '建设管理', color: '#FFBA00' },
        // { count: 735, categoryName: '街道吹哨部门报到', color: '#FFD685' },
        // { count: 1580, categoryName: '社会治安综合', color: '#2A00FF' },
        // { count: 484, categoryName: '公安交通管理', color: '#C600FF' },
        // { count: 300, categoryName: '卫生计生监管执法', color: '#FF2A00' },
        // { count: 484, categoryName: '民生', color: '#3DDA83' },
        // { count: 300, categoryName: '街道安全', color: '#FAC126' }
      ],
      //voting 已转项目：shift_project 已关闭：closed，全部：all
      stateArray: [
        {
          label: '全部',
          value: 'all'
        },
        {
          label: '表决中',
          value: 'voting'
        },
        {
          label: '已转项目',
          value: 'shift_project'
        },
        {
          label: '已关闭',
          value: 'closed'
        },
      ],

      status: 'all',
      orgId: '',
      orgTypeSel: '',
      tableList: [],
      demand: {
        loading: true,
        colList: [
          {
            align: "center",
            width: "5%",
          },
          {
            align: "center",
            width: "10%",
          },
          {
            align: "center",
            width: "20%",
          },
          {
            align: "center",
            width: "10%",
          },
          {
            align: "center",
            width: "5%",
          },
          {
            align: "center",
            width: "10%",
          },
          {
            align: "center",
            width: "10%",
          },
          {
            align: "center",
            width: "15%",
          },
          {
            align: "center",
            width: "5%",
          },
          {
            align: "center",
            width: "5%",
          },
          {
            align: "center",
            width: "10%",
          },
        ],
        header: ["序号", "议题标题", "处理意见", "分类", "状态", "创建时间", "发起人", "已表态/应表态", "支持", "反对", "操作"],
        list: [],
        pageSize: 10,
        pageNo: 1,
        total: 0,
      },
      showIssue: true,
      issueId: 'cf48b7dc70ef4c319fd9c71890d9dbbb',

      casOptions: [],
      agencyIdArray: [],
      customerList: [],
      iscascaderShow: 0,

      optionProps: {
        multiple: false,
        value: 'orgLevel',
        label: 'agencyName',
        children: 'subAgencyList',
        checkStrictly: true
      },

    };
  },
  // mixins: [animate]
  beforeDestroy () {

  },

  async mounted () {
    this.dataLoading = true
    await this.getAgencylist()//获取组织级别
    await this.getApiData()

    this.dataLoading = false

    this.getPie()
  },

  methods: {

    async getApiData () {
      await this.getPieChart()
      await this.getTable();
    },

    // 获取当前登录人员信息及组织信息
    async getAgencylist () {
      const url = "/gov/org/customeragency/agencygridtree";
      let params = {};

      const { data, code, msg } = await requestPost(url, params);
      if (code === 0) {
        this.agencyInfo = data
        this.orgId = this.agencyInfo.agencyId
        this.orgType = this.agencyInfo.level === 'grid' ? 'grid' : 'agency'


        if (!this.agencyInfo.latitude) {
          this.agencyInfo.latitude = 36.072227
        }
        if (!this.agencyInfo.longitude) {
          this.agencyInfo.longitude = 120.389455
        }
        if (!this.agencyInfo.level) {
          this.agencyInfo.level = 'street'
        }

        //组织级联数据
        ++this.iscascaderShow
        this.casOptions = []
        this.agencyIdArray.length = []

        if (data) {
          this.casOptions.push(data)
          this.agencyIdArray.push(this.agencyInfo.orgLevel)
        }

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


    },
    // 获取饼状图
    async getPieChart () {
      if (this.$refs.pieChart) {
        this.$refs.pieChart.clear()
        this.$refs.pieChart.showLoading()
      }

      const url = "/gov/issue/issue/resibuzz-leftpiechart";
      // const url = "http://yapi.elinkservice.cn/mock/245/gov/issue/issue/resibuzz-leftpiechart";
      let params = {
        orgId: this.orgId,
        orgType: this.orgType,

      };

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

      if (code === 0) {
        if (data && data.length > 0) {

          this.pieData = data

        } else {
          this.pieData = []

        }

        if (this.$refs.pieChart) {
          this.$refs.pieChart.hideLoading()
        }

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

    },

    pieInitOk (dom) {
      console.log('pie准备好了', dom)
      this.pieChartS = dom
      this.pieInitState = true

    },
    getPie () {
      if (this.pieInitState) {
        this.assignPieChart()
      } else {
        setTimeout(() => {
          this.getPie()
        }, 500)
      }
    },

    clickPie (seriesIndex) {
      this.pieData.forEach((element, index) => {
        if (index === seriesIndex) {
          element.label = {
            show: true,

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

          };
          console.log('zhilma')

        } else {
          element.label = {
            show: false,

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

          };

        }
      });
      this.pieOption.series[1].data = this.pieData

      this.$refs.pieChart.setOption(this.pieOption)

    },

    assignPieChart () {

      this.pieTotal = 0

      if (this.pieData.length > 0) {
        this.pieNoData = false
        const _that = this
        let maxIndex = 0
        let maxValue = this.pieData[0].count

        this.pieData[0].selected = true

        this.pieData.forEach((item, index) => {
          item.name = item.categoryName
          item.value = item.count
          this.colorArray.push(item.color)
          this.pieTotal = this.pieTotal + item.value

          if (item.value > maxValue) {
            maxValue = item.value
            maxIndex = index
            item.selected = true
          } else if (index !== 0) {
            item.selected = false
          }

        });
        // 获取pieChart配置
        this.pieOption = pieOption(this.pieChartS)
        this.pieOption.title.text = this.pieTotal
        this.pieOption.series[1].itemStyle = {
          color: function (params) {
            return _that.colorArray[params.dataIndex]
          }
        }
        this.clickPie(maxIndex)

        let fun = function (params) {
          _that.clickPie(params.dataIndex)
        }
        this.$refs.pieChart.handleClick(fun)
      } else {
        this.pieNoData = true
      }

    },

    handleChangeState (index) {
      this.getTable()
    },

    async handleChangeAgency (value) {
      let orgArray = []
      let key = this.agencyIdArray.length > 0 ? this.agencyIdArray[this.agencyIdArray.length - 1] : ''
      if (key) {
        orgArray = key.split('-')
        this.orgId = orgArray[0]
        this.orgType = orgArray[1] === 'grid' ? 'grid' : 'agency'
      } else {
        this.orgId = ''
        this.orgType = ''
      }

      await this.getApiData()
      this.assignPieChart()

    },

    //加载组织数据
    async getTable () {
      const url = "/gov/issue/issue/resibuzz";
      // const url = "http://yapi.elinkservice.cn/mock/245/gov/issue/issue/resibuzz";
      let params = {
        status: this.status,
        orgId: this.orgId,
        orgType: this.orgType,
        pageNo: this.demand.pageNo,
        pageSize: this.demand.pageSize,
      };

      const { data, code, msg } = await requestPost(url, params);
      this.demand.loading = false;

      if (code === 0) {
        this.demand.total = data.total;
        this.tableList = data.list
        this.demand.list = data.list.map((item) => {
          return [
            { type: "index" },
            item.issueTitle ? item.issueTitle : '',
            item.suggestion ? item.suggestion : '',
            item.categoryName.join(','),
            item.status ? item.status : '',
            item.createdTime ? item.createdTime : '',
            item.issueOriginator ? item.issueOriginator : '',
            item.voteAccount ? item.voteAccount : '',
            item.supportCount ? item.supportCount : '',
            item.oppositionCount ? item.oppositionCount : '',
            { type: "operate", list: ["查看"] },
          ];
        });
      } else {
        this.$message.error(msg);
      }
    },

    handlePageNoChange_demand (val) {
      this.demand.pageNo = val;
      this.getTable();
    },

    async toIssueInfo (index) {
      const { tableList } = this;
      this.issueId = tableList[index].issueId
      this.showIssue = true

    },
  },
  props: {
    uid: {
      type: String,
      default: "",
      // default: "8ada68cb6f1e4b9a8333348a39ef3aee",
    },
  },

  computed: {},

  components: {
    cptCard,
    cptTb,
    screenEchartsFrame,
    ScreenLoading,
    ScreenNodata,
    issueInfo
  },

  watch: {
    uid (id) {
      this.userId = id;
    },
    userId () {
      this.getApiData();
      window.scrollTo(0, 0);
    },
  },
};
</script>

<style
  lang="scss"
  src="@/assets/scss/modules/visual/resibuzz.scss"
  scoped
></style>

<style lang=scss scoped>
</style>
