<template>
  <div class="container-main">
    <div class="filtrate">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
        <el-form-item label="行政区划" prop="district">
          <executive
            @quhua="quhua"
            @quhuadizhi="quhuadizhi"
            ref="executive"
          ></executive>
        </el-form-item>
        <el-form-item label="企业名称" prop="enterpriseName">
          <el-input
            v-model="queryParams.enterpriseName"
            size="small"
            placeholder="请输入企业名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="统一社会信用代码" prop="enterpriseId">
          <el-input
            v-model="queryParams.enterpriseId"
            size="small"
            placeholder="请输入企业名称"
          ></el-input>
        </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="riskLevel">
          <el-select
            v-model="queryParams.riskLevel"
            placeholder="请输入安全风险等级"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标准化等级" prop="standLevel">
          <el-select
            v-model="queryParams.standLevel"
            placeholder="请输入标准化等级"
          >
            <el-option
              v-for="item in dict.type.dict_stand_level"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </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">
      <el-table
        v-loading="loading"
        :data="newList"
        :height="tableHeight"
        :border="false"
        tooltip-effect="light"
        :row-class-name="tableRowClassName"
      >
        <el-table-column
          prop="enterpriseName"
          label="企业名称"
          show-overflow-tooltip
          header-align="center"
        >
        </el-table-column>
        <el-table-column
          prop="enterpriseId"
          label="统一社会信用代码"
          width="180"
          header-align="center"
        />
        <el-table-column
          prop="district"
          label="行政区划"
          width="230"
          header-align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div>
              {{ componendDistrict(scope.row.district) || "/" }}
            </div>
          </template>
        </el-table-column>

        <el-table-column
          prop="supervisionLarge"
          label="行业监管大类"
          width="140"
          header-align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div>
              {{ scope.row.supervisionLarge | supervisionLarge }}
            </div>
          </template>
        </el-table-column>

        <el-table-column
          prop="riskLevel"
          label="安全风险等级"
          width="120"
          header-align="center"
        />
        <el-table-column
          prop="standLevel"
          label="标准化等级"
          width="100"
          header-align="center"
        />
        <el-table-column
          prop="examineEndTime"
          label="上次检查时间"
          width="120"
          header-align="center"
        />
        <el-table-column label="操作" header-align="center">
          <template slot-scope="scope">
            <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>
    </div>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 查看 -->
    <el-dialog
      :visible.sync="addShow"
      :show-close="false"
      :destroy-on-close="true"
      :close-on-click-modal="false"
      append-to-body
      custom-class="dialog-boxed"
      width="50%"
    >
      <div class="dialog-slot">
        <div class="closeClick">
          <div class="newplan">
            <div class="line"></div>
            <div class="span">企业详情</div>
          </div>
          <img src="@/assets/images/close.png" alt="" @click="closeDialog" />
        </div>
        <div class="content">
          <div class="filtrate">
            <el-descriptions :column="2" border>
              <el-descriptions-item
                :label="value"
                v-for="(key, value) in elDesLabels"
                :key="key"
                :span="1"
              >
                <dict-tag
                  v-if="key == 'supervisionLarge'"
                  :options="dict.type.category"
                  :value="infoData[key]"
                />
                <span v-else>{{ infoData[key] || "/" }}</span>
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getByUuto } from "@/api/yingji/keyEnterprise";
import { listNew, getNew, delNew, addNew, updateNew } from "@/api/yingji/new";
import executive from "./echarts/executive";
import dictzh from "@/utils/dictzh.js";
import detectZoom from "@/utils/detectZoom";

export default {
  components: { executive },

  name: "New",
  dicts: [
    "economic_categories",
    "economic_subcategory",
    "special_governance",
    "enterprise_status",
    "standardization_level",
    "safety_level",
    "category",
    "major_hazard_level",
    "entpr_color",
    "is_point",
    "dict_risk_level",
    "dict_stand_level",
  ],
  data() {
    return {
      options: [
        {
          value: "A",
          label: "A",
        },
        {
          value: "B",
          label: "B",
        },
        {
          value: "C",
          label: "C",
        },
        {
          value: "D",
          label: "D",
        },
      ],
      dictzh: dictzh,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 企业新表格数据
      newList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        enterpriseId: null,
        enterpriseName: null,
        district: null,
        supervisionLarge: null,
        riskLevel: null,
        standLevel: null,
        examineEndTime: null,
        createId: null,
        updateId: null,
        userId: null,
        deptId: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      elDesLabels: {
        企业名称: "enterpriseName",
        统一社会信用代码: "enterpriseId",
        "所在乡镇（街道）": "district",
        行业监管大类: "supervisionLarge",
        安全风险等级: "riskLevel",
        标准化等级: "standLevel",
        上次检查时间: "examineEndTime",
      },
      elDesLabels2: {
        企业名称: "enterpriseName",
        统一社会信用代码: "uuitNo",
        法定代表人: "legalPerson",
        法人证件号: "frzjh",
        是否规上企业: "aboveDesignated",
        企业规模: "aboveDesignatedTwo",
        企业类型: "zjEconKind",
        生产经营地址: "businessAddress",
        行业监管大类: "supervisionLarge",
        "所在乡镇（街道）": "subdistrict",
        注册地址: "rigisterAddress",
        主营业务及产品: "majorProduct",
        经营范围: "businessScope",
        登记状态: "corpStatus",
        // 行政区划: "county",
        办公地址: "enterpriseAddress",
        企业规模: "enterpristScale",
        固定资产: "fixedAssets",
        占地面积: "floorSpace",
        上一年经营收入: "lastYearOperatingIncome",
        企业上一年投入生产: "lastYeatOnStream",
        法人移动电话: "legalPersonCellphone",
        法人职务: "legalPersonPost",
        法人固定电话: "legalPersonTel",
        法人类型: "legalPersonType",
        机构编码: "orgCode",
        其他名称: "otherName",
        登记时间: "registerTime",
        登记机关: "registrationOrg",
        注册资金: "rigisterFund",
        是否上报风险报告: "riskReport",
        安全生产投入占比: "safetyProductionInvestment",
        申请人: "sqr",
        申请人联系方式: "sqrlxfs",
        成立时间: "startTime",
        有效期起: "termStart",
        有效期止: "termEnd",
        创建时间: "createTime",
        修改时间: "updateTime",
        备注: "remark",
      },
      addShow: false,
      details: null,
      subdistrict: [],
      infoData: {},
      tableHeight: 400,
    };
  },
  filters: {
    supervisionLarge: function (value) {
      // console.log(value.split(","));
      let array = value.split(",");
      array.map((item, ind) => {
        array[ind] = dictzh[item];
      });
      // console.log(array.join(","));
      return array.join(",") || "/";
    },
  },
  created() {
    this.getList();
    // 设置表格高度 100% 125%
    this.tableHeight = detectZoom == 100 ?  700: 480;
  },
  methods: {
    /** 查询企业新列表 */
    getList() {
      this.loading = true;
      listNew(this.queryParams).then((response) => {
        this.newList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        enterpriseId: null,
        enterpriseName: null,
        district: null,
        supervisionLarge: null,
        riskLevel: null,
        standLevel: null,
        examineEndTime: null,
        createId: null,
        createBy: null,
        createTime: null,
        updateId: null,
        updateBy: null,
        updateTime: null,
        remark: null,
        userId: null,
        deptId: null,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.$refs.executive.onClear();
      this.handleQuery();
    },
    closeDialog() {
      this.addShow = false;
    },
    handleInfo(row) {
      getNew(row.id).then((res) => {
        this.addShow = true;
        // console.log(res);
        let infoObj = res.data;
        infoObj.district = this.componendDistrict(infoObj.district) || "/";
        this.infoData = infoObj;
      });
      // getByUuto(row.enterpriseId.trim()).then((res) => {
      //  console.log(res.data);
      // let infoObj = res.data;
      // 查看弹窗
      // infoObj["aboveDesignated"] =
      //   infoObj.aboveDesignated == 1 ? "规上" : "规下";
      // infoObj["riskReport"] = infoObj.riskReport == 1 ? "是" : "否";
      // infoObj["aboveDesignatedTwo"] =
      //   infoObj.aboveDesignatedTwo == 1
      //     ? "大型"
      //     : infoObj.aboveDesignatedTwo == 2
      //     ? "中型"
      //     : infoObj.aboveDesignatedTwo == 3
      //     ? "小型"
      //     : infoObj.aboveDesignatedTwo == 4
      //     ? "微型"
      //     : "";
      // infoObj["supervisionLarge"] = this.supervisionLarge(
      //   infoObj.supervisionLarge
      // );
      // infoObj["district"] =
      //   this.componendDistrict(infoObj.subdistrict) || "/";

      // infoObj["createTime"] = this.$moment(infoObj.createTime).format(
      //   "yyyy-MM-DD"
      // );
      // infoObj["updateTime"] = this.$moment(infoObj.createTime).format(
      //   "yyyy-MM-DD"
      // );

      // this.infoData = infoObj;
      // });
    },
    supervisionLarge(value) {
      // console.log(value.split(","));
      let array = value.split(",");
      array.map((item, ind) => {
        array[ind] = dictzh[item];
      });
      // console.log(array.join(","));
      return array.join(",");
    },
    quhua(e) {
      this.queryParams.district = e;
    },
    // 获取行政区划树
    quhuadizhi(district) {
      this.option = district;
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 !== 0) {
        return "success-row";
      }
      return "";
    },
    // 匹配行政区划
    componendDistrict(district) {
      let name;
      this.option.map((item) => {
        if (item.value == district) {
          name = item.label;
        } else {
          item.children.map((itemTwo) => {
            if (itemTwo.value == district) {
              name = item.label + "-" + itemTwo.label;
            }
          });
        }
      });
      return name;
    },
  },
};
</script>

<style lang="scss" scoped>
.container-main {
  // height: calc(100vh - 84px);
  height: 100%;
  overflow: hidden;
  padding: 0 20px;
  background-color: #fff;
  .filtrate {
    padding-top: 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: 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;
    }
  }
}

.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;
    .filtrate {
      padding-bottom: 10px;
    }
  }
}

::v-deep .el-descriptions-row th {
  width: 20% !important;
  font-size: 14px;
  font-family: "Alibaba PuHuiTi";
  font-weight: 400;
}
::v-deep .el-descriptions-row td {
  width: 30% !important;
  font-size: 14px;
  font-family: "Alibaba PuHuiTi";
  font-weight: 400;
}
</style>
