<template>
  <div>
    <div class="tables" v-loading="loading">
      <el-table v-loading="loading" :data="enterpriseList">
        <el-table-column label="计划年份" align="center" prop="plannedYear" />

        <el-table-column label="计划月份" align="center" prop="plannedMonth">
          <template slot-scope="scope">
            <span @click="editMonth(scope.row)">
              <i class="el-icon-edit el-edit"></i>{{ scope.row.plannedMonth }}
            </span>
          </template>
        </el-table-column>

        <el-table-column
          label="企业名称"
          align="center"
          prop="enterpriseName"
        />
        <el-table-column label="行政区划" align="center" prop="district">
          <template slot-scope="scope">
            <span>{{ componendDistrict(scope.row.district) || "/" }}</span>
          </template>
        </el-table-column>

        <el-table-column label="执法地区" align="center" prop="lawAreas" />
        <el-table-column label="执法级别" align="center" prop="lawLevel" />
        <el-table-column label="执法层级" align="center" prop="lawHierarchy" />
        <el-table-column label="是否省重点" align="center" prop="isPoint">
          <template slot-scope="scope">
            <span>{{ scope.row.isPoint == 1 ? "是" : "否" }}</span>
          </template>
        </el-table-column>

        <el-table-column label="安全风险等级" align="center" prop="" />
        <el-table-column label="标准化等级" align="center" prop="" />
        <el-table-column label="上次检查时间" align="center" prop="" />

        <el-table-column label="状态" align="center" prop="status">
          <template slot-scope="scope">
            <span>{{ scope.row.isPoint == 1 ? "正式" : "草稿" }}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作" header-align="center">
          <template slot-scope="scope">
            <div class="tabs-btns">
              <div class="look" @click="handleDelete(scope.row)">
                <span>删除</span>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>

    <div class="next">
      <div class="selected">
        草稿箱(<span> {{ total }} 家</span>)
      </div>
      <div class="btn" ref="next">正式提交</div>
    </div>
  </div>
</template>
<script>
// 字典
import dictzh from "@/utils/dictzh.js";
// 行政区域
import executive from "../../yingji/echarts/executive.vue";
import {
  listEnterprise,
  getEnterprise,
  delEnterprise,
  addEnterprise,
  updateEnterprise,
} from "@/api/yingji/enterprise";

export default {
  dicts: [
    "category",
    "economic_categories",
    "is_point",
    "entpr_color",
    "major_hazard_level",
  ],
  components: { executive },
  data() {
    return {
      activeTab: 0,
      dictzh: dictzh,
      dialogVisible: false,
      options: [],
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 企业表格数据
      enterpriseList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        enterpriseId: null,
        createId: null,
        updateId: null,
        userId: null,
        deptId: null,
        district: null,
        plannedYear: null,
        isPoint: "",
        enterpriseName: null,
        lawSort: null,
        lawAreas: null,
        lawLevel: null,
        lawHierarchy: null,
        plannedMonth: null,
        status: 0,
        checkStatus: null,
        checkId: null,
        checkAgeing: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 编辑月份
    editMonth(row) {
      let _this = this;
      this.$prompt("请输入月份", "编辑", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputValue: row.plannedMonth,
        inputPlaceholder: "请输入1到12的数字",
        inputPattern: /^(1[0-2]|[1-9])$/,
        inputErrorMessage: "格式不正确",
        closeOnClickModal: false,
      })
        .then(({ value }) => {
          // 调用接口
          if (row.id != null) {
            row.createTime = null;
            row.plannedMonth = value;
            updateEnterprise(row).then((response) => {
              this.$modal.msgSuccess("修改成功");
              _this.getList();
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },
    /** 查询计划企业列表 */
    getList() {
      this.loading = true;
      listEnterprise(this.queryParams).then((response) => {
        this.enterpriseList = response.data;
        this.total = response.data.length;
        this.loading = false;
      });
    },
    // 删除
    handleDelete(row) {
      this.$modal
        .confirm("是否确认删除计划企业数据项？")
        .then(function () {
          return delEnterprise(row.id);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    // 匹配行政区划
    componendDistrict(district) {
      let fullName;
      let treeData = JSON.parse(localStorage.getItem("TREE_DATA"));
      treeData.map((item) => {
        if (item.districtCode == district) {
          fullName = item.district;
        } else {
          item.children.map((itemTwo) => {
            if (itemTwo.countyCode == district) {
              fullName = item.district + "-" + itemTwo.county;
            }
          });
        }
      });
      return fullName;
    },
  },
  mounted() {},
  computed: {},
  filters: {
    supervisionLarge: function (value) {
      let array = value.split(",");
      array.map((item, ind) => {
        array[ind] = dictzh[item];
      });
      return array.join(",") || "/";
    },
  },
};
</script>
<style lang="scss" scoped>
.isStyle {
  color: #f71052;
}
.dialog-slot {
  .closeClick {
    position: absolute;
    top: 0;
    right: 0;
    padding: 10px 20px;
    width: 100%;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    background: #f8f9fa;
    box-shadow: 0px 1px 0px 0px #dbe0e8;
    background-color: #e0eaf8;
    img {
      width: 18px;
      height: 18px;
      cursor: pointer;
    }
    .newplan {
      display: flex;
      align-items: center;
      .line {
        margin-right: 10px;
        width: 5px;
        height: 16px;
        background-color: #1e70de;
      }
      .span {
        font-size: 16px;
        font-family: "Alibaba PuHuiTi";
        font-weight: bold;
        color: #1e70de;
      }
    }
  }
  .content {
    // padding: 15px 10px;
    .module {
      padding-bottom: 15px;
      display: flex;
      border-bottom: 1px solid #e8ecf0;
      .select,
      .issue {
        width: 150px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: #525966;
        span {
          font-size: 15px;
          font-family: "Alibaba PuHuiTi";
          font-weight: 400;
        }
        .span-one {
          margin-right: 10px;
        }
      }
      .select {
        background-image: url("../../../assets/images/select2.png");
        background-size: 100% 100%;
        margin-right: 10px;
      }
      .issue {
        background-image: url("../../../assets/images/issue2.png");
        background-size: 100% 100%;
      }
      .nextStepSelect {
        background-image: url("../../../assets/images/select1.png");
        span {
          color: #2378ec;
        }
      }
      .nextStepIssue {
        background-image: url("../../../assets/images/issue1.png");
        span {
          color: #2378ec;
        }
      }
    }
    .filtrate {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      padding-top: 10px;
      padding-bottom: 10px;
      .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;
      }
    }
    .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: red;
          }
        }
      }
      ::v-deep .el-table {
        .success-row {
          background-color: rgba(234, 242, 253, 0.25);
        }
        td {
          height: 30px;
          text-align: center;
          font-size: 15px;
          font-family: "Alibaba PuHuiTi";
          font-weight: 400;
          color: #525966;
        }
        th {
          height: 30px;
          background-color: #eaf2fd;
          font-size: 16px;
          font-family: "Alibaba PuHuiTi";
          font-weight: bold;
          color: #525966;
          .el-checkbox {
            display: none;
          }
        }
        .el-table__body-wrapper {
          height: 448px !important;
          overflow-y: auto;
        }
      }
      ::v-deep .el-table::before {
        height: 0;
      }

      .el-edit {
        color: #2378ec;
        cursor: pointer;
        &:hover {
          color: #6aa4f6;
        }
      }
    }
    .pagination {
      margin-top: 10px;
      .unselectedNumber {
        color: #f71052;
      }
      .selectedNumber {
        color: #48e1bb;
      }
      .sum {
        color: #48e1bb;
      }
    }
    .release-planning {
      padding: 10px 10px 0 0;
      .form-inline {
        ::v-deep .el-select {
          background-color: transparent;
          width: 190px;
          .el-input__inner {
            height: 33px;
            font-size: 15px;
            font-family: "Alibaba PuHuiTi";
            font-weight: 400;
            color: #525966;
          }
          // border-radius: 2px;
        }
        ::v-deep .el-input {
          .el-input__inner {
            font-size: 15px;
            font-family: "Alibaba PuHuiTi";
            font-weight: 400;
            color: #525966;
          }
        }
        .form-textarea {
          ::v-deep .el-textarea {
            height: 180px;
            .el-textarea__inner {
              height: 100%;
              font-size: 15px;
              font-family: "Alibaba PuHuiTi";
              font-weight: 400;
              color: #525966;
            }
          }
        }
      }
      .inputs {
        display: flex;
        margin-top: 20px;
        .inputs-span {
          width: 80px;
          text-align: right;
          margin-right: 10px;
          font-size: 15px;
          font-family: "Alibaba PuHuiTi";
          font-weight: 400;
          color: #525966;
        }
        ::v-deep .el-select {
          background-color: transparent;
          width: 190px;
          .el-input__inner {
            height: 33px;
          }
          // border-radius: 2px;
        }
        .input {
          flex: 1;
          ::v-deep .el-textarea {
            height: 180px;
            .el-textarea__inner {
              height: 100%;
            }
          }
        }
      }
      .centered {
        align-items: center;
      }
    }
    .next {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 10px;
      .selected {
        display: flex;
        align-items: center;
        font-size: 15px;
        font-family: "Alibaba PuHuiTi";
        font-weight: 400;
        color: #525966;
        margin-right: 15px;
        span {
          color: #2378ec;
        }
      }
      .btn {
        width: 150px;
        height: 30px;
        border: 1px solid #2378ec;
        border-radius: 2px;
        background-color: #eff6ff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 15px;
        font-family: "Alibaba PuHuiTi";
        font-weight: 400;
        color: #2378ec;
        cursor: pointer;
      }
      .selectBtn {
        background-color: #2378ec;
        color: #ffffff;
      }
    }
  }
}
::v-deep .el-dialog__body {
  padding: 30px 15px;
}
</style>
