<template>
  <div class="mainBox">
    <div class="select-nav">
      <div class="left-nav">
        <el-form
          :model="queryParams"
          ref="queryForm"
          size="small"
          :inline="true"
        >
          <el-form-item label="年份:" prop="plannedYear">
            <el-date-picker
              v-model="queryParams.plannedYear"
              type="year"
              size="mini"
              value-format="yyyy"
              placeholder="请选择年份"
            />
          </el-form-item>
          <el-form-item label="月份:" prop="plannedMonth">
            <el-select
              v-model="plannedMonth"
              multiple
              collapse-tags
              style="margin-left: 20px"
              placeholder="请选择月份"
              @change="multipleChange"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item class="btn-group">
            <el-button class="btn-search" size="mini" @click="handleQuery"
              >搜索</el-button
            >
            <el-button class="btn-reset" size="mini" @click="resetQuery"
              >重置</el-button
            >
            <el-button class="btn-export" size="small" @click="handelExport">
              <i class="el-icon-devops" /><span>导出excel</span>
            </el-button>
          </el-form-item>
        </el-form>
      </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="tableHeight"

          :border="false"
          :row-class-name="tableRowClassName"
        >
          <el-table-column
            prop="lawAreas"
            label="执法地区"
            header-align="center"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              {{ scope.row.lawAreas }}
            </template>
          </el-table-column>
          <el-table-column prop="count" label="执法计划" header-align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.lawAreas == '合计'"
                >{{ scope.row.count }}家</span
              >
              <span
                v-else-if="scope.row.lawAreas == '苏州'"
                class="numb-hover"
                @click="routerLink('苏州市局')"
                >{{ scope.row.count }}家</span
              >
              <span v-else class="numb-hover" @click="openDialog(scope.row)"
                >{{ scope.row.count }}家</span
              >
            </template>
          </el-table-column>
          <el-table-column
            label="完成执法"
            prop="completed"
            header-align="center"
          >
            <template slot-scope="scope">
              {{ scope.row.completed }} 家
            </template>
          </el-table-column>
          <el-table-column
            label="完成率"
            prop="completionRate"
            header-align="center"
          >
            <template slot-scope="scope">
              {{ scope.row.completionRate }}%
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 列表对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="isDialogShow"
      width="60%"
      append-to-body
      class="tables-dialog"
    >
      <el-form
        :model="queryParams"
        ref="queryForm"
        size="small"
        :inline="true"
        style="display: flex; flex-direction: row-reverse"
      >
        <el-form-item class="btn-group">
          <el-button class="btn-export" size="small" @click="handelExport2">
            <i class="el-icon-devops" /><span>导出excel</span>
          </el-button>
        </el-form-item>
      </el-form>
      <div class="tables">
        <el-table
          :data="tableInfoData"
          style="width: 100%"
          :height="530"
          :border="false"
          :row-class-name="tableRowClassName"
        >
          <el-table-column
            prop="lawAreas"
            label="执法地区"
            header-align="center"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <span>{{ scope.row.lawAreas }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="count" label="执法计划" header-align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.lawAreas == '合计'"
                >{{ scope.row.count }}家</span
              >
              <span
                v-else
                class="numb-hover"
                @click="routerLink(scope.row.lawAreas)"
                >{{ scope.row.count }}家</span
              >
            </template>
          </el-table-column>
          <el-table-column
            label="完成执法"
            prop="completed"
            header-align="center"
          >
            <template slot-scope="scope">
              {{ scope.row.completed }} 家
            </template>
          </el-table-column>
          <el-table-column
            label="完成率"
            prop="completionRate"
            header-align="center"
          >
            <template slot-scope="scope">
              {{ scope.row.completionRate }}%
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>

    <!-- 重置密码 -->
    <el-dialog
      title="需要修改原始密码"
      :visible.sync="isResetPwdDialog"
      :show-close="false"
      width="30%"
      center
    >
      <resetPwd />
    </el-dialog>
  </div>
</template>
<script>
import completePlan from "./echarts/completePlan";
import finishRate from "./echarts/finishRate";
import executionPlan from "./echarts/executionPlan";
import resetPwd from "../system/userc/profile/resetPwd.vue";
import detectZoom from "@/utils/detectZoom";

import {
  listEnterprise,
  getEnterprise,
  delEnterprise,
  addEnterprise,
  updateEnterprise,
  treeEnterprise,
  exportPage,
} from "@/api/yingji/enterprise";

export default {
  data() {
    return {
      isResetPwdDialog: false,
      queryParams: {
        plannedYear: null,
        plannedMonth: null,
      },
      queryParams2: {
        plannedYear: null,
        plannedMonth: null,
        lawAreas: null,
      },
      plannedMonth: "",
      options: [
        {
          value: "1",
          label: "1月",
        },
        {
          value: "2",
          label: "2月",
        },
        {
          value: "3",
          label: "3月",
        },
        {
          value: "4",
          label: "4月",
        },
        {
          value: "5",
          label: "5月",
        },
        {
          value: "6",
          label: "6月",
        },
        {
          value: "7",
          label: "7月",
        },
        {
          value: "8",
          label: "8月",
        },
        {
          value: "9",
          label: "9月",
        },
        {
          value: "10",
          label: "10月",
        },
        {
          value: "11",
          label: "11月",
        },
        {
          value: "12",
          label: "12月",
        },
      ],
      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: [],
      title: "",
      isDialogShow: false,
      tableInfoData: [],
            tableHeight: 530,

    };
  },
  components: {
    completePlan,
    finishRate,
    executionPlan,
    resetPwd,
  },
  created() {
    this.queryParams.plannedYear = this.$moment(new Date()).format("yyyy");
    this.getList();
// 设置表格高度 100% 125%
    this.tableHeight = detectZoom == 100 ? 730 : 530;
    if (JSON.parse(sessionStorage.getItem("USER_P_STATUS")) == 1) {
      // 原始密码修改
      this.resetPwd();
    }
  },
  mounted() {},
  methods: {
    resetPwd() {
      this.isResetPwdDialog = true;
    },
    // 导出
    handelExport() {
      this.download(
        "/pharmaceuticals/bPlanEnterprise/exportpage",
        {
          ...this.queryParams,
        },
        `苏州市_统计数据_${new Date().getTime()}.xlsx`
      );
    },
    handelExport2() {
      this.download(
        "/pharmaceuticals/bPlanEnterprise/exportpage",
        {
          ...this.queryParams2,
        },
        `${this.queryParams2.lawAreas}_统计数据_${new Date().getTime()}.xlsx`
      );
    },
    multipleChange(e) {
      // console.log(e.join(","));
      this.queryParams.plannedMonth = e.join(",");
      // this.getList();
    },
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    resetQuery() {
      this.resetForm("queryForm");
      this.plannedMonth = "";
      this.handleQuery();
    },
    // 获取列表数据
    getList() {
      treeEnterprise(this.queryParams).then((response) => {
        // console.log(response);
        this.tableData = response.data;
        this.newTable = response.data;
      });
    },
    // 打开县区下的列表数据
    openDialog(row) {
      // console.log(row);
      this.isDialogShow = true;
      this.title = `2023年 ${row.lawAreas} 计划企业数：${row.count}家`;
      // this.tableInfoData = row.children;
      this.queryParams2.lawAreas = row.lawAreas;
      treeEnterprise(this.queryParams2).then((response) => {
        this.tableInfoData = response.data;
      });
    },
    routerLink(lawHierarchy) {
      this.$router.push(`/planManage?lawHierarchy=${lawHierarchy}`);
    },
    active(e) {
      this.activeIndex = e;
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 !== 0) {
        return "success-row";
      }
      return "";
    },
    // 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;
    // });
    // },
  },
};
</script>
<style lang="scss" scoped>
.btn-group {
  .btn-search {
    background: #2378ec;
    color: #ffffff;
    font-size: 15px;
    font-family: Alibaba PuHuiTi;
    border-radius: 2px;
    border: none;
  }

  .btn-reset {
    background: #fdab5b;
    color: #ffffff;
    font-size: 15px;
    font-family: Alibaba PuHuiTi;
    border-radius: 2px;
    border: none;
  }

  .btn-export {
    background: #2378ec;
    color: #ffffff;
    font-size: 15px;
    font-family: Alibaba PuHuiTi;
    border-radius: 2px;
    border: none;

    ::v-deep .el-icon-devops {
      background: url("../../assets/images/export.png") center no-repeat; // 注意此处的url，在这里引入自己的图片
      font-size: 16px;
      background-size: cover;
    }

    ::v-deep .el-icon-devops:before {
      content: "替";
      font-size: 14px;
      visibility: hidden;
    }

    span {
      margin-left: 10px;
    }
  }
  ::v-deep .el-button--small {
    padding: 7px 13px !important;
  }
}

.numb-hover {
  color: #045ffd;
  cursor: pointer;
  &:hover {
    color: #518afb;
    text-decoration: underline;
  }
}
.inputs {
  display: flex;
}
//===
.bgContent,
.tables-dialog {
  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 {
    display: flex;
    // align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;

    .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>
