<template>
  <div class="mainBox">
    <div class="select-nav">
      <div class="left-nav">
        <div class="navText">年份:</div>
        <el-date-picker
          v-model="ruleForm.plannedYear"
          type="year"
          size="mini"
          value-format="yyyy"
          placeholder="请选择年份"
        >
        </el-date-picker>
        <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 v-if="activeIndex == 1" class="boxs">
      <div class="bodyBox boxAllStyle">
        <div id="execution">
          <executionPlan :newTable="newTable" :loadS="loadS"></executionPlan>
        </div>
      </div>
      <div class="bottomBox">
        <div class="boxAllStyle">
          <completePlan :newTable="newTable" :loadS="loadS"></completePlan>
        </div>
        <div style="width: 15px"></div>
        <div class="boxAllStyle">
          <finishRate :newTable="newTable" :loadS="loadS"></finishRate>
        </div>
      </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="institutionName"
            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="enterpriseCount"
            label="省重点计划数"
            header-align="center"
          >
          </el-table-column>
          <el-table-column
            prop="plannedEnterpriseCount"
            label="省重点完成数"
            header-align="center"
          >
          </el-table-column>
          <el-table-column
            prop="percentageCompleted"
            label="省重点完成率"
            header-align="center"
          >
            <template slot-scope="scope">
              {{ scope.row.a ||0 }}%
            </template>
          </el-table-column>
          <el-table-column
            prop="planneKeyEnterpriseCount"
            label="非重点计划数"
            header-align="center"
          >
          </el-table-column>
          <el-table-column
            prop="remainingKeyEnterpriseCount"
            label="非重点完成数"
            header-align="center"
          >
          </el-table-column>
          <el-table-column
            prop="percentageNonCompleted"
            label="非重点完成率"
            header-align="center"
          >
            <template slot-scope="scope">
              {{ scope.row.a ||0}}%
            </template>
          </el-table-column> -->
          <el-table-column
            prop="plannedEnterpriseCount"
            label="执法计划"
            header-align="center"
          >
          </el-table-column>
          <el-table-column
            label="完成执法"
            prop="checkEnterpriseCount"
            header-align="center"
          >
          </el-table-column>
          <el-table-column label="完成率" prop="pt" header-align="center">
            <template slot-scope="scope">
              {{
                scope.row.pt == "NaN" ? "0" : (scope.row.pt * 100).toFixed(2)
              }}%
            </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,
//   planeEnTree,
// } from "@/api/yingji/keyEnterprise.js";
import { indexRegionalism } from "@/api/yingji/home.js";
import executive from "./echarts/executive";

export default {
  data() {
    return {
      ruleForm: {
        plannedYear: "",
      },
      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: [],
      beforeParams: {},
      //传递的等待效果
      loadS: false,
      newTable: [],
    };
  },
  components: {
    completePlan,
    finishRate,
    executionPlan,
    myPagination,
    executive,
  },
  created() {
    this.getHomeList();
  },
  mounted() {},
  methods: {
    searchList() {
      this.beforeParams = { ...this.beforeParams, ...this.ruleForm };
      this.getHomeList();
    },
    getHomeList() {
      this.load1 = true;
      this.loadS = true;
      indexRegionalism(this.beforeParams).then((res) => {
        this.tableData = res.rows;
        this.newTable = res.rows;
        res.rows.forEach((value1, index1) => {
          if (value1.institutionName == "苏州市") {
            let arr1 = this.tableData.slice(index1, index1 + 1);
            this.tableData.splice(index1, 1);
            this.tableData.unshift(arr1[0]);
          }
        });
        this.load1 = false;
        this.loadS = false;
      });
    },
    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;
}
//===
.boxs {
  height: calc(100% - 48px);
}
.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: 45%;

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