<template>
  <div>
    <div class="filtrate">
      <el-form
        :model="queryParams"
        ref="queryForm"
        size="small"
        :inline="true"
        v-show="showSearch"
      >
        <el-form-item label="行政区划:" prop="district">
          <executive @quhua="quhua" @quhuadizhi="quhuadizhi" ref="executive" />
        </el-form-item>
        <el-form-item label="行业监管大类:" prop="supervisionLarge">
          <el-select
            v-model="queryParams.supervisionLarge"
            placeholder="请选择"
          >
            <el-option
              v-for="item in dict.type.category"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="" prop="enterpriseName">
          <el-input
            v-model="queryParams.enterpriseName"
            placeholder="请输入企业名称"
            clearable
          />
        </el-form-item>
        <el-form-item label="" prop="enterpriseId">
          <el-input
            v-model="queryParams.enterpriseId"
            placeholder="请输入统一信用代码"
            clearable
          />
        </el-form-item>
        <el-form-item>
          <el-button
            class="btn-search"
            type="primary"
            size="mini"
            @click="handleQuery"
            >搜索</el-button
          >
          <el-button class="btn-reset" size="mini" @click="resetQuery"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="tables" v-loading="loading">
      <el-table v-loading="loading" :data="newList">
        <el-table-column
          label="企业名称"
          align="center"
          prop="enterpriseName"
          width="200"
          show-overflow-tooltip
        />
        <el-table-column
          prop="enterpriseId"
          label="统一社会信用代码"
          width="200"
          header-align="center"
        />
        <el-table-column
          prop="district"
          label="行政区划"
          width="130"
          header-align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>
              {{ componendDistrict(scope.row.district) || "/" }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="supervisionLarge"
          label="行业监管大类"
          width="180"
          header-align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div>
              {{ scope.row.supervisionLarge | supervisionLarge }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="安全风险等级" align="center" prop="riskLevel" />
        <el-table-column label="标准化等级" align="center" prop="standLevel" />
        <el-table-column
          label="上次检查时间"
          align="center"
          prop="examineEndTime"
          width="180"
        >
          <template slot-scope="scope">
            <span>{{
              parseTime(scope.row.examineEndTime, "{y}-{m}-{d}")
            }}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作" header-align="center">
          <template slot-scope="scope">
            <div class="tabs-btns">
              <div class="look" @click="handleAddDrafts(scope.row)">
                <span>加入草稿箱</span>
              </div>
            </div>
            <!-- <div class="tabs-btns">
                      <div class="look" @click="handleInfo(scope.row)">
                        <img src="@/assets/images/lookInfo.png" alt="" />
                        <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> {{ enterpriseTotal }} 家</span>)
      </div>
      <div class="btn" ref="next" @click="btnNext">下一步</div>
    </div>

    <firm-dialog ref="firmDialog"></firm-dialog>
  </div>
</template>
<script>
// 企业详情
import firmDialog from "@/views/components/firmDialog/index.vue";
// 字典
import dictzh from "@/utils/dictzh.js";
// 行政区域
import executive from "../../yingji/echarts/executive.vue";
import { listNew, getNew, delNew, addNew, updateNew } from "@/api/yingji/new";
import {
  listEnterprise,
  getEnterprise,
  delEnterprise,
  addEnterprise,
  updateEnterprise,
} from "@/api/yingji/enterprise";

export default {
  dicts: [
    "category",
    "economic_categories",
    "is_point",
    "entpr_color",
    "major_hazard_level",
  ],
  components: { firmDialog, executive },
  data() {
    return {
      activeTab: 0,
      dictzh: dictzh,
      dialogVisible: false,
      options: [],
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 企业新表格数据
      newList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        enterpriseId: null,
        enterpriseName: null,
        district: null,
        supervisionLarge: null,
        riskLevel: null,
        standLevel: null,
        examineEndTime: null,
        createId: null,
        updateId: null,
        userId: null,
        deptId: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      // 查询计划企业参数
      queryPlanEnterpriseParams: {
        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: 1,
        checkStatus: null,
        checkId: null,
        checkAgeing: null,
      },
      enterpriseList: [],
      enterpriseTotal: 0,
      // 表单参数
      formPlanEnterprise: {},
    };
  },
  created() {
    this.getList();
    this.getPlanEnterpriseList();
  },
  methods: {
    /** 查询计划企业列表 */
    getPlanEnterpriseList() {
      listEnterprise(this.queryPlanEnterpriseParams).then((response) => {
        this.enterpriseList = response.data;
        this.enterpriseTotal = response.data.length;
      });
    },
    /** 查询企业新列表 */
    getList() {
      this.loading = true;
      listNew(this.queryParams).then((response) => {
        this.newList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    btnNext() {
      this.$emit("nextTab", 2);
    },
    // 加入草稿箱
    handleAddDrafts(row) {
      // console.log("1", row);
      this.resetPlanEnterprise();
      this.formPlanEnterprise.plannedYear = this.$moment(new Date()).format(
        "yyyy"
      );
      this.formPlanEnterprise.plannedMonth = "";
      this.formPlanEnterprise.enterpriseId = row.enterpriseId;
      this.formPlanEnterprise.enterpriseName = row.enterpriseName;
      this.formPlanEnterprise.district = row.district;
      this.formPlanEnterprise.status = 0;
      // console.log("2", this.formPlanEnterprise);
      addEnterprise(this.formPlanEnterprise).then((response) => {
        this.$modal.msgSuccess("加入成功");
        this.getList(); //对应草稿箱的消失需要后台写
        this.getPlanEnterpriseList();
      });
    },
    // 表单重置
    resetPlanEnterprise() {
      this.formPlanEnterprise = {
        id: null,
        enterpriseId: null,
        createId: null,
        createBy: null,
        createTime: null,
        updateId: null,
        updateBy: null,
        updateTime: null,
        remark: null,
        userId: null,
        deptId: null,
        district: null,
        plannedYear: null,
        isPoint: null,
        enterpriseName: null,
        lawSort: null,
        lawAreas: null,
        lawLevel: null,
        lawHierarchy: null,
        plannedMonth: null,
        status: null,
        checkStatus: null,
        checkId: null,
        checkAgeing: null,
      };
    },
    // 查看企业详情
    handleInfo(row) {
      this.$refs.firmDialog.open(row);
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.$refs.executive.onClear();
      this.handleQuery();
    },
    quhua(e) {
      this.queryParams.district = e;
    },
    // 获取行政区划树
    quhuadizhi(district) {
      this.option = district;
    },
    // 匹配行政区划
    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: #045ffd;
          }
        }
      }
      ::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;
      }
    }
    .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;
        // position: relative;
        // .data_icon {
        //   width: 10px;
        //   height: 7px;
        //   position: absolute;
        //   top: 50%;
        //   left: 280px;
        //   z-index: 9;
        //   color: #c0c4cc;
        //   font-size: 14px;
        //   transform: translateY(-50%);
        // }
        // ::v-deep .el-input__prefix {
        //   display: none;
        // }
      }
    }
    .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>
