<template>
  <div class="mainBox">
    <div class="select-nav">
      <div class="left-nav" v-if="activeIndex == 1">
        <div class="navText">年份:</div>
        <el-select v-model="ruleForm.date" placeholder="请选择年份" size="mini">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="left-nav" v-if="activeIndex == 0">
        <div class="inputs">
          <div class="navText">年份:</div>
          <div>
            <el-date-picker
              v-model="form.plannedYear"
              size="mini"
              type="month"
              format="yyyy-MM"
              :clearable="false"
              value-format="yyyy-MM"
              placeholder="请选择年份"
            >
            </el-date-picker>
          </div>
        </div>
        <div class="inputs">
          <div class="navText" style="margin-left: 10px">区划:</div>
          <div>
            <el-cascader
              size="mini"
              v-model="deptName"
              placeholder="请选择"
              :options="xzList"
              :props="props"
              :disabled="isNoneDivision"
            >
            </el-cascader>
          </div>
        </div>
        <div class="export" @click="searchList">
          <span>搜索</span>
        </div>
      </div>
      <div class="rightBigNav">
        <div class="right-nav">
          <div
            class="tabStyle"
            v-for="(item, index) in options1"
            :key="index"
            @click="active(index)"
            :class="activeIndex == index ? 'blue' : ''"
          >
            <div
              :style="`background-image:url('${
                activeIndex == index ? item.url1 : item.url
              }')`"
            ></div>
            <span>{{ item.name }}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 各区域执法计划 -->
    <div class="bodyBox boxAllStyle" v-if="activeIndex == 1">
      <div id="execution">
        <executionPlan></executionPlan>
      </div>
    </div>
    <div class="bottomBox" v-if="activeIndex == 1">
      <div class="boxAllStyle">
        <completePlan></completePlan>
      </div>
      <div style="width: 15px"></div>
      <div class="boxAllStyle">
        <finishRate></finishRate>
      </div>
    </div>
    <div class="bgContent" v-if="activeIndex == 0">
      <div class="tables">
        <el-table
          v-loading="load1"
          :data="tableData"
          style="width: 100%"
          :height="530"
          :border="false"
          :row-class-name="tableRowClassName"
        >
          <el-table-column
            prop="deptName"
            label="行政区划"
            header-align="center"
          >
            <template slot-scope="scope">
              {{ scope.row.deptName }}
            </template>
          </el-table-column>
          <!-- <el-table-column prop="deptName" label="区县" header-align="center">
            <template slot-scope="scope">
              {{ scope.row.deptName.slice(scope.row.deptName.length - 1) }}级
            </template>
          </el-table-column> -->
          <el-table-column
            prop="keyPlan"
            label="省重点计划数"
            header-align="center"
          >
          </el-table-column>
          <el-table-column
            prop="keyCompleted"
            label="省重点完成数"
            header-align="center"
          >
          </el-table-column>
          <el-table-column
            prop="percentageCompleted"
            label="省重点完成率"
            header-align="center"
          >
            <template slot-scope="scope">
              {{ scope.row.percentageCompleted }}%
            </template>
          </el-table-column>
          <el-table-column
            prop="nonKeyPlan"
            label="非重点计划数"
            header-align="center"
          >
          </el-table-column>
          <el-table-column
            prop="nonKeyCompleted"
            label="非重点完成数"
            header-align="center"
          >
          </el-table-column>
          <el-table-column
            prop="percentageNonCompleted"
            label="非重点完成率"
            header-align="center"
          >
            <template slot-scope="scope">
              {{ scope.row.percentageNonCompleted }}%
            </template>
          </el-table-column>
          <el-table-column
            prop="totalPlanCount"
            label="合计计划数"
            header-align="center"
          >
          </el-table-column>
          <el-table-column label="合计完成数" header-align="center">
            <template slot-scope="scope">
              {{ scope.row.keyCompleted + scope.row.nonKeyCompleted }}
            </template>
          </el-table-column>
          <el-table-column label="合计完成率" header-align="center">
            <template slot-scope="scope">
              {{
                scope.row.percentageCompleted +
                scope.row.percentageNonCompleted
              }}%
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination">
        <my-pagination
          :total="total"
          @pagesChange="pagesChange"
        ></my-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import completePlan from "./echarts/completePlan";
import finishRate from "./echarts/finishRate";
import executionPlan from "./echarts/executionPlan";
import myPagination from "@/views/components/myPagination/index";
import { workStatistics, xzTree } from "@/api/yingji/keyEnterprise.js";
import { mapState } from "vuex";

export default {
  data() {
    return {
      ruleForm: {
        date: "",
      },
      options: [
        {
          value: "选项5",
          label: "2023",
        },
        {
          value: "选项4",
          label: "2022",
        },
        {
          value: "选项3",
          label: "2021",
        },
        {
          value: "选项2",
          label: "2020",
        },
        {
          value: "选项1",
          label: "2019",
        },
      ],
      options1: [
        {
          name: "表格",
          url: require("../../assets/images/bg1.png"),
          url1: require("../../assets/images/bg2.png"),
        },
        {
          name: "图表",
          url: require("../../assets/images/tb1.png"),
          url1: require("../../assets/images/tb2.png"),
        },
      ],
      activeIndex: 0,
      //======
      load1: false,
      total: 0,
      tableData: [
        {
          deptName:'苏州市',
          keyPlan:10,
          keyCompleted:5,
          percentageCompleted:50,
          nonKeyPlan:10,
          nonKeyCompleted:5,
          percentageNonCompleted:50,
          totalPlanCount:20,
        }
      ],
      //===
      beforeParams: {
        pageSize: 10,
        pageNum: 1,
      },
      form: {
        deptName: "",
        plannedYear: "",
      },
      deptName: [],
      xzList: [],
      props: {
        checkStrictly: true,
        value: "value",
        label: "label",
        children: "children",
      },
      isNoneDivision: false,
    };
  },
  components: {
    completePlan,
    finishRate,
    executionPlan,
    myPagination,
  },
  computed: {
    ...mapState({
      //根据存储的dept.parentId判断是哪个等级
      dept: (state) => state.user.dept,
    }),
  },
  created() {
    // this.getTree();
    // this.getHomeList();
  },
  mounted() {},
  methods: {
    getTree() {
      xzTree().then((res1) => {
        if (this.dept.parentId == 0) {
          res1.data.forEach((value, index) => {
            this.xzList.push({
              value: value.county,
              label: value.institutionName,
              children: [],
            });
            if (value.children.length > 0) {
              value.children.forEach((value1, index1) => {
                this.xzList[index].children.push({
                  value: value1.subdistrict,
                  label: value1.institutionName,
                });
              });
            }
          });
        }
      });
    },
    searchList() {
      if (this.deptName) {
        this.form.deptName = this.deptName[0];
      }
      this.beforeParams = { ...this.beforeParams, ...this.form };
      this.getHomeList();
    },
    getHomeList() {
      this.load1 = true;
      workStatistics(this.beforeParams).then((res) => {
        this.load1 = false;
        this.tableData = res.data.list;
        this.total = res.data.total;
      });
    },
    pagesChange(e) {
      this.beforeParams.pageNum = e.pageNum;
      this.beforeParams.pageSize = e.pageSize;
      this.getHomeList();
    },
    active(e) {
      this.activeIndex = e;
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 !== 0) {
        return "success-row";
      }
      return "";
    },
  },
};
</script>
<style lang="scss" scoped>
.export {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 19px;
  background-color: #2378ec;
  margin-left: 10px;
  cursor: pointer;
  user-select: none;
  border-radius: 2px;
  span {
    color: #ffffff;
    font-size: 14px;
    font-family: "Alibaba PuHuiTi";
    font-weight: 400;
  }
}
.inputs {
  display: flex;
}
//===
.bgContent {
  height: calc(100% - 48px);
  width: 100%;
  .tables {
    background-color: #eaf2fd;
    .tabs-btns {
      display: flex;
      align-items: center;
      justify-content: center;
      .look {
        display: flex;
        align-items: center;
        cursor: pointer;
        img {
          width: 20px;
          margin-right: 5px;
        }
        span {
          font-size: 15px;
          font-family: Alibaba PuHuiTi;
          font-weight: 400;
          color: #045ffd;
        }
      }
    }
    ::v-deep .el-table {
      .success-row {
        background-color: rgba(234, 242, 253, 0.25);
      }
      td {
        height: 45px;
        text-align: center;
        font-size: 14px;
        font-family: "Alibaba PuHuiTi";
        font-weight: 400;
        color: #525966;
      }
      th {
        height: 42px;
        background-color: #eaf2fd;
        font-size: 15px;
        font-family: "Alibaba PuHuiTi";
        font-weight: bold;
        color: #525966;
        .el-checkbox {
          display: none;
        }
      }
      // .el-table__body-wrapper {
      //   height: 450px !important;
      //   overflow-y: auto;
      // }
    }
    ::v-deep .el-table::before {
      height: 0;
    }
  }
}

.pagination {
  margin-top: 10px;
}
//===

.boxAllStyle {
  background: #ffffff;
  box-shadow: 0px 1px 24px 0px #e2e2e2;
  border-radius: 10px;
}
.mainBox {
  height: 100%;
  width: 100%;
  padding: 20px;
  .select-nav {
    // height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
    .left-nav {
      display: flex;
      align-items: center;
      .navText {
        margin-right: 8px;
        color: #525966;
        font-family: "Alibaba PuHuiTi";
        font-size: 14px;
        display: flex;
        align-items: center;
      }
    }
    .rightBigNav {
      padding: 2px;
      box-sizing: border-box;
      height: 33px;
      background: #fff;
      .right-nav {
        display: flex;
        height: 100%;
        font-family: "Alibaba PuHuiTi";
        font-size: 14px;
        .tabStyle {
          height: 100%;
          background: #fff;
          padding: 0 10px;
          border-radius: 2px;
          display: flex;
          align-items: center;
          cursor: pointer;
          user-select: none;
          color: #7a8599;
          & > div:nth-of-type(1) {
            height: 13px;
            width: 13px;
            background-size: 100% 100%;
            margin-right: 5px;
          }
        }
        .blue {
          background: #518afb;
          color: #fff;
        }
      }
    }

    ::v-deep .el-select {
      background-color: transparent;
      width: 210px;
      .el-input__inner {
        height: 33px;
      }
      .el-input .el-input__suffix .el-input__suffix-inner .el-icon-arrow-up {
        display: flex;
        align-items: center;
        justify-content: center;
      }
      // border-radius: 2px;
      .el-input
        .el-input__suffix
        .el-input__suffix-inner
        .el-icon-arrow-up::before {
        content: "";
        background: url(../../assets/images/down2.png) center center no-repeat;
        background-size: cover;
        position: absolute;
        width: 10px;
        height: 7px;
        // top: 50%;
        // left: 50%;
        // transform: translate(-50%, -50%);
        transform: rotate(180deg);
      }
    }
  }
  .bodyBox {
    width: 100%;
    height: 250px;

    margin-bottom: 15px;
    #execution {
      width: 100%;
      height: 100%;
    }
  }
  .bottomBox {
    height: calc(100% - 250px - 48px - 15px);
    display: flex;
    justify-content: space-between;
    & > .boxAllStyle {
      flex: 1;
    }
  }
}
</style>