<template>
  <div class="app-container box progress">
    <div class="box-top">
      <customForm ref="formRef" :model="queryParams" :config="FormConfig">
        <template #region>
          <el-tree-select
            v-model="queryParams.xzqdm"
            :data="deptList"
            :props="{
              value: 'id',
              label: 'label',
              children: 'children',
            }"
            value-key="id"
            default-expanded-keys
            check-strictly
            style="width: 200px"
          />
        </template>
        <template #monTime>
          <el-date-picker
            v-model="queryParams.time"
            type="daterange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          />
        </template>
        <template #action>
          <el-button type="primary" icon="Search" @click="handleQuery"
            >搜索</el-button
          >
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </template>
      </customForm>
      <div class="content gdzlc">
        <div class="item" v-for="zl in zllist[route.query.type]" :key="zl.name">
          <div
            class="icon"
            :class="(zl.name.match(/\n/g) || []).length == 2 ? 'tree' : ''"
          >
            <div v-html="zl.name.replace(/\n/g, '<br>')"></div>
          </div>
          <div class="text">
            <div class="ibolk">
              <div>{{ countData[`${zl.prop}num`] || 0 }}个</div>
              <div>{{ (countData[`${zl.prop}mj`] || 0).toFixed(2) }}亩</div>
            </div>
            <div class="ibolk progrestext" v-if="zl.prop3">
              <div class="radio">{{ countData[`${zl.prop}zb`] || 0 }}%</div>
              <div class="protitle">{{ zl.prop3 }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="box-left">
      <div class="box-left-content">
        <div class="echartTitle">
          <div class="block-title">{{ titles[route.query.type] }}</div>
          <el-select
            v-if="route.query.type == 'judge'"
            clearable
            v-model="judgetype"
            placeholder="请选择判定类型"
          >
            <el-option
              v-for="(item, index) in zllist.judge"
              :key="index"
              :label="item.name.replace(/\n/g, '')"
              :value="index"
            />
          </el-select>
          <el-select
            v-else-if="route.query.type == 'result'"
            clearable
            v-model="resulttype"
            placeholder="请选择判定类型"
          >
            <el-option
              v-for="(item, index) in zllist.result"
              :key="index"
              :label="item.name.replace(/\n/g, '')"
              :value="index"
            />
          </el-select>
          <el-select v-model="ntype">
            <el-option
              v-for="item in typeoptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </div>
        <echarts-map
          ref="echartsMap"
          class="map_echart"
          :mapData="mapGeoJson"
          :regionLevel="regionLevel"
          @mapClick="mapClick"
          @mapClicker="mapClicker"
        ></echarts-map>
      </div>
      <div class="box-left-content">
        <div class="echartTitle">
          <div class="block-title">{{ titles[route.query.type] }}统计表</div>
          <el-select v-model="nunit">
            <el-option
              v-for="item in units"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </div>
        <el-table :data="tableData" class="table">
          <el-table-column
            v-for="(columni, cindex) in judgeTable"
            :key="cindex"
            :prop="columni.prop"
            :label="columni.label"
            :width="columni.width"
            :align="columni.align"
          >
            <template v-if="columni.list">
              <el-table-column
                v-for="(child, chi) in columni.list || []"
                :key="chi"
                :prop="child.prop"
                :label="child.label"
                :width="child.width"
                :align="child.align"
            /></template>
          </el-table-column>
          <el-table-column label="商业服务用地">
            <el-table-column prop="xzqmc" label="图斑数" />
            <el-table-column label="面积"> </el-table-column>
          </el-table-column>
        </el-table>
        <div class="echartTitle">
          <div class="block-title">{{ titles[route.query.type] }}统计图</div>
          <el-select v-model="ntype">
            <el-option
              v-for="item in typeoptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </div>
        <bar class="pie_echart" ref="echartRef"></bar>
      </div>
    </div>
  </div>
</template>

<script setup name="Role">
import customForm from "@/components/custom-form.vue";
import EchartsMap from "@/components/echarts/EchartsMap.vue";
import bar from "@/components/echarts/bar.vue";
import { FormConfig, titles, units, judgeTable } from "./config";
import { nextTick } from "vue";
import { userDept } from "@/api/system/dept";
import { getcount, listJctb, listJz } from "@/api/rsmonitoring/statistics";
import parse from "wellknown";
const route = useRoute();
const router = useRouter();
const { proxy } = getCurrentInstance();
const { sys_normal_disable } = proxy.useDict("sys_normal_disable");
const echartRef = ref();
const echartsMap = ref();
const mapGeoJson = ref({
  type: "FeatureCollection",
  features: [],
});

const tableData = ref([]);
const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    xzqdm: "",
    time: ["", ""],
    startTime: "",
  },
  countData: {},
  eData: {
    xData: ["2020", "2021", "2022", "2023"],
    yData: [
      [-10, 10, 10, 10],
      [-10, 10, 10, 10],
      [-10, 10, 10, 10],
    ],
    legend: ["未判定", "已判定（拆分前）", "已判定（拆分后）"],
    yName: "个",
    stack: "ad",
    barWidth: "20px",
  },
});
const showdata = reactive({
  deptList: [],
  zllist: {
    all: [
      { name: "监测\n图斑", prop: "all" },
      { name: "已举证\n图斑", prop: "WYTJ", prop3: "完成进度" },
      { name: "县级\n已审核", prop: "XJYSH", prop3: "完成进度" },
      { name: "市级\n已审核", prop: "SJYSH", prop3: "完成进度" },
      { name: "省级\n已审核", prop: "SJJYSH", prop3: "完成进度" },
    ],
    judge: [
      { name: "监测\n图斑", pro: "all" },
      { name: "未判定\n图斑", prop: "WPD", prop3: "占比" },
      { name: "已判定\n图斑\n(拆分前)", prop: "PDCFQ", prop3: "占比" },
      { name: "已判定\n图斑\n(拆分后)", prop: "PDCFH" },
    ],
    result: [
      { name: "已判定\n图斑", pro: "all" },
      { name: "判定为\n合法用地", prop: "HFYD", prop3: "占比" },
      { name: "判定为\n违法用地", prop: "WFYD", prop3: "占比" },
      { name: "判定为\n其它用地", prop: "QTYD", prop3: "占比" },
    ],
  },

  ntype: "0",
  typeoptions: [
    { name: "图斑数", id: "0" },
    { name: "图斑面积", id: "1" },
  ],
  nunit: "0",
  judgetype: "",
  resulttype: "",
});
const { queryParams, countData, eData } = toRefs(data);
const { deptList, zllist, typeoptions, ntype, nunit, judgetype, resulttype } =
  toRefs(showdata);
let countparm = {
  all: {
    all: null,
    WYTJ: [{ auditflowStep: "WYTJ" }],
    XJYSH: [{ auditflowStep: "XJSH" }],
    SJYSH: [{ auditflowStep: "SJSH" }],
    SJJYSH: [{ auditflowStep: "SJJSH" }],
  },
  judge: {
    XJDSH: [
      { auditflowStep: "XJHGX" },
      { auditflowStep: "XJSH" },
      { auditflowStep: "WYTJ", successType: "0" },
    ],
    XJYSH: [{ auditflowStep: "XJSH" }],
    XJYTJ: [{ auditflowStep: "XJTJ" }],
    SJTH: [{ auditflowStep: "SJTJ", successType: "1" }],
    SJJTH: [{ auditflowStep: "SJJTJ", successType: "1" }],
  },
  result: {
    SJDSH: [
      { auditflowStep: "SJSH" },
      { auditflowStep: "XJTJ", successType: "0" },
    ],
    SJYSH: [{ auditflowStep: "SJSH" }],
    SJYTJ: [{ auditflowStep: "SJTJ" }],
    SJJTH: [{ auditflowStep: "SJJTJ", successType: "1" }],
  },
};
onMounted(() => {
  nextTick(() => {
    // 初始化主题样式
    echartRef.value.setOptions(eData.value);
  });
});
function getDrpt() {
  userDept({}).then((response) => {
    deptList.value = response.data;
  });
}
function getData() {
  countData.value = {};
  let prams = countparm[route.query.type];
  Object.keys(prams).forEach((key) => {
    getcount({
      xzqdm: queryParams.value.xzqdm,
      startTime: queryParams.value.time[0],
      endTime: queryParams.value.time[1],
      auditflowList: prams[key],
    }).then((res) => {
      countData.value[`${key}num`] = res.data.dq.countNumber;
      countData.value[`${key}mj`] = res.data.dq.countSum;
      countData.value[`${key}zb`] = res.data.zb;
    });
  });
}
// function getDrpt() {
//   userDept({}).then((response) => {
//     // deptList.value = response.data;
//   });
// }
/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  queryParams.value.startTime = queryParams.value.time[0];
  queryParams.value.endTime = queryParams.value.time[1];
  getData();
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
}
/** 查询角色列表 */
function getList() {
  // loading.value = true;
  listJctb(queryParams.value).then((res) => {
    tableData.value = res.data;
    mapGeoJson.value = JSON.parse(res.data[1].geom);
    console.log(mapGeoJson.value, "---");
    // res.data.forEach((a) => {
    //   mapGeoJson.value.features.push({
    //     type: "Feature",
    //     properties: {
    //       adcode:a.xzqdm,
    //       name: a.xzqmc,
    //       // center: [116.310316, 39.956074],
    //       // centroid: [116.23328, 40.026927],
    //       childrenNum: 0,
    //       level: "district",
    //       // acroutes: [100000, 110000],
    //       // parent: { adcode: 110000 },
    //     },
    //     geometry: parse(a.geom),
    //   });
    // });
    // total.value = response.total;
    // loading.value = false;
  });
  listJz(queryParams.value).then((res) => {});
}
function setLnbh(data) {
  // this.eData.yName = `变化面积${this.unitList[this.nowunit].unit}`;
  // this.eData.xData = [];
  // this.eData.yData = [[]];
  // data.forEach((res) => {
  //   this.eData.xData.push(res.year);
  //   this.eData.yData[0].push(res[this.uprops[this.nowunit]]);
  // });
  // this.setEchart(this.eData, 0);
}

getDrpt();
getData();
getList();
</script>
<style scoped lang="scss">
.echartTitle {
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #166cad;
  margin-right: 10px;
  line-height: 40px;
  font-weight: bold;
  color: #409eff;
  .block-title {
    width: calc(100% - 320px);
  }
  .el-select {
    width: 150px;
  }
}
.box {
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  background: #f2f2f2;
  padding: 15px;
  .box-top {
    background: #fff;
    padding: 10px;
  }
  &-left {
    height: 70vh;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 10px;

    &-content {
      background: #fff;
      width: calc(50% - 5px);
      height: 100%;
      z-index: 3;
      padding: 10px;
      // position: relative;
      // z-index: 99998;
    }
  }
}
.progress {
  .gdzlc {
    height: 80px;
    display: flex;
    justify-content: space-between;

    .item {
      // width: 48%;
      height: 75px;
      background: #f2f2f2;
      border-radius: 5px;

      .icon {
        width: 85px;
        height: 100%;
        display: inline-block;

        background: #76b9ed;
        text-align: center;
        padding: 15px 10px;
        .title {
          // display: flex;
          // align-items: center; /* 垂直居中 */
          // justify-content: center;
        }
      }
      .tree {
        padding: 8px 10px;
        line-height: 18px;
      }

      .text {
        display: inline-block;
        width: calc(100% - 85px);
        text-align: center;
        font-weight: bold;
        padding: 5px 20px;
        .ibolk {
          display: inline-block;
          padding-right: 10px;
        }
        .progrestext {
          padding-left: 10px;
          border-left: 1px solid #d7d7d7;
          .radio {
            color: #f59a23;
          }
          .protitle {
            font-weight: normal;
          }
        }
      }
      .higtext {
        background: #81d3f8;
        border: 2px solid #00ffff;
        border-left: 0px;
      }
    }
  }
  .map_echart {
    height: calc(100% - 50px);
  }
  .table {
    width: 100%;
    height: calc(50% - 60px);
    margin-top: 10px;
  }

  .pie_echart {
    margin-top: 20px;
    /* margin-left: 20px; */
    width: 43vw;
    height: 20vh;
  }
}
</style>

