<template>
  <div>
    <el-dialog
        :before-close="handleClose"
        :modal="true"
        :modal-append-to-body="false"
        :visible.sync="dialogVisible"
        class="dissatisfied-detail"
        title=""
        width="1366px"
    >
      <div class="content">
        <div class="main-title main-title2">

          <Title :text="
          type === 'njjwtqk'?'难解决问题情况':
          type === 'bmysxqk'?'不满意事项情况':
          type === 'xqwwcqk'?'需求未完成情况':''
          "/>
        </div>

        <div class="contents">
     <div class="map-dialog-con">
              <div class="tree">
                <el-tree
                    ref="tree"
                    :data="type === 'njjwtqk'?njjwtqkTree:type === 'bmysxqk'?bmysxqkTree:type === 'xqwwcqk'?xqwwcqkTree:[]"
                    :default-expand-all="true"
                    :props="defaultProps"
                    highlight-current
                    icon-class="el-icon-arrow-right"
                    node-key="value"
                    @node-click="handleNodeClick"
                >
                   <span slot-scope="{ node, data }" class="custom-tree-node">
                      <span>{{ node.label }}</span>
                      <span v-if="data.total">（{{ data.total }}）</span>
                   </span>
                </el-tree>
              </div>
          <div class="right-con">
              <template v-if="type === 'njjwtqk'">
                <div class="eventDetails">
                  <img
                      :height="18"
                      :width="18"
                      src="@/assets/images/manyidu/tc-title-icon.png"
                  />
                  {{
                    catVal === 1 ? '难点堵点分类统计' :
                        catVal === 2 ? '矛盾纠纷资源调度' :
                            catVal === 3 ? '自身问题事件列表' :
                                catVal === 4 ? '超出服务范围事件列表' : ''
                  }}
                </div>
                <DifficultyCharts v-if="catVal === 1" :currentLevelData="currentLevelData"
                                  style="margin-bottom: 56px;"/>
                <DisputeDispatch v-if="catVal === 2" :currentLevelData="currentLevelData" style="margin-bottom: 56px;"/>
                <Njjwtqk :currentLevelData="currentLevelData" :catVal="catVal"/>
              </template>

              <template v-if="type === 'bmysxqk'">
                <div class="eventDetails">
                  <img :height="18" :width="18" src="@/assets/images/manyidu/tc-title-icon.png"/>
                  不满意事项列表
                </div>
                <List12345 v-if="catVal === 1" :catVal="catValSub" :currentLevelData="currentLevelData"/>
                <CommunityList v-if="catVal === 2" :catVal="catValSub" :currentLevelData="currentLevelData"/>
                <SatisfactionList v-if="catVal === 3" :catVal="catValSub" :currentLevelData="currentLevelData"/>
              </template>

              <template v-if="type === 'xqwwcqk'">
                <div class="eventDetails">
                  <img :height="18" :width="18" src="@/assets/images/manyidu/tc-title-icon.png"/>
                  {{ catLabel }}-资源调度
                </div>
                <ResourceDispatch :catVal="catVal" :currentLevelData="currentLevelData"/>
                <div class="eventDetails">
                  <img :height="18" :width="18" src="@/assets/images/manyidu/tc-title-icon.png"/>
                  {{ catLabel }}-需求列表
                </div>
                <DemandList :categoryCode="catVal" :currentLevelData="currentLevelData"/>
              </template>

        </div>
        </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Title from "@/views/dataBoard/satisfactionEval/components/Title";
import DifficultyCharts from "./DifficultyCharts";
import Njjwtqk from "./Njjwtqk.vue";
import List12345 from "./List12345.vue";
import CommunityList from "./CommunityList.vue";
import SatisfactionList from "./SatisfactionList.vue";
import DisputeDispatch from "./DisputeDispatch";
import DemandList from "./DemandList";
import ResourceDispatch from "./ResourceDispatch";
import titleSmall from "@/views/dataBoard/satisfactionEval/components/Title/titleSmall.vue";
import Pagination from "@/views/dataBoard/satisfactionEval/components/Pagination";

export default {
  name: "MapDialog",
  components: {
    Title,
    DifficultyCharts,
    Njjwtqk,
    titleSmall,
    DisputeDispatch,
    Pagination,
    List12345,
    CommunityList,
    SatisfactionList,
    DemandList,
    ResourceDispatch
  },
  props: {

  },
  data() {
    return {
      total: 10,
      queryParams: {},
      dialogVisible: false,
      njjwtqkTree: [],
      bmysxqkTree: [],
      xqwwcqkTree: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      catVal: 1,
      catValSub: '',
      catLabel: '',
      totalCount: [],
      currentLevelData: {},
      type: ''
    };
  },
  methods: {
    handleClose(done) {
      this.dialogVisible = false;
      this.$emit('close')
    },
    open(data,type) {
      this.dialogVisible = true;
      this.currentLevelData = data
      this.type = type
      this.$nextTick(() => {
        this.getDetail(data);
      })
    },
    getDetail({orgId}) {
      if (this.type === 'njjwtqk') {
        this.catVal = 1
        this.$http.post('/governance/icEventOld/getMarkersByMarkType', {
          agencyId: orgId,
          type: 1
        }).then(({data: {data}}) => {
          console.log('data', data)
          let njjwtqkTree = [
            {
              label: '难点堵点',
              value: 1
            }, {
              label: '矛盾纠纷',
              value: 2
            }, {
              label: '自身问题',
              value: 3
            }, {
              label: '超出服务范围',
              value: 4
            }
          ]
          njjwtqkTree.forEach(item => {
            item.label = item.label + '(' + data.filter(item2 => item2.markType === item.value)[0].total + ')'
          })
          this.njjwtqkTree = njjwtqkTree
          this.$refs.tree.setCurrentKey(this.catVal)
        })
      }
      if (this.type === 'xqwwcqk') {
        this.getDemandOptions(orgId)
      }
      if (this.type === 'bmysxqk') {
        this.catVal = 1
        this.$http.get('/governance/icEvent/dissatisfyByCategoryType?agencyId=' + orgId).then(({data: {data}}) => {
          this.bmysxqkTree = data.map((item, index) => {
            return {
              label: item.type + '(' + item.total + ')',
              value: index - 0 + 1,
              children: item.datas.map(item2 => {
                return {
                  label: item2.categoryName + '(' + item2.total + ')',
                  value: item2.value,
                  parentId: index - 0 + 1
                }
              })
            }
          })
          this.$refs.tree.setCurrentKey(this.catVal)
        })
      }
    },
    handleViews() {
      this.$refs.ResourceInfo.open()
    },
    async getDemandOptions(orgId) {
      this.$http.post('/governance/streetOverview/getUnResolveTaskStatic?org_id=' + orgId, {org_id: orgId})
          .then(({data: {data}}) => {
            this.xqwwcqkTree = data.map(item => {
              return {
                label: item.name,
                value: item.code,
                total: item.total
              }
            });
            this.xqwwcqkTree = this.xqwwcqkTree.filter(item => item.value)
            this.$refs.tree.setCurrentKey(this.catVal)
            this.catLabel = this.xqwwcqkTree[0].label;
          })
          .catch(() => {
            return this.$message.error("网络错误");
          });
    },
    handleNodeClick(item) {
      this.catLabel = item.label
      if (this.type === "bmysxqk") {
        this.catValSub = item.value
        this.catVal = item.parentId
        // console.log(item.value, this.catVal)

      } else {
        this.catVal = item.value
      }

    },
    getTopLevel(key) {
      const currentNode = this.$refs.tree.getNode(key);
      let parentNode = currentNode;
      if (!parentNode) {
        return parentNode
      }
      while (parentNode.level > 1) {
        parentNode = parentNode.parent;
      }
      console.log(parentNode, parentNode.level, 'parentNode')

      return parentNode.data.value
    }
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/scss/dataBoard/dialog.scss";
@import "@/assets/scss/dataBoard/tree.scss";
@import "@/assets/scss/dataBoard/table2.scss";

.handle {
  font-size: 14px;
  margin-left: 10px;
  color: #9A69EC;
  cursor: pointer;
}

.view {
  font-size: 14px;
  margin-left: 10px;
  color: #007FF1;
  cursor: pointer;
}

.eventDetails {
  font-size: 18px;
  margin-bottom: 26px;
  color: #ffffff;

  img {
    margin-top: -4px;
    margin-right: 8px;
  }
}

.tree {
  height: 855px;
}
.map-dialog-con {
  display: flex;
  justify-content: space-between;
}
.tree {
  flex: 0 0 180px;
}
.right-con {
  width: calc(100% - 200px);
  flex: 0 0 calc(100% - 200px);
}
.pagination-container {
  padding-bottom: 0!important;
}
</style>
