<template>
  <div class="container-main" ref="main">
    <div class="filtrate">
      <div class="one-line">
        <div class="select-input">
          <div class="select-span">行政区划:</div>
          <executive
            @quhua="quhua"
            @quhuadizhi="quhuadizhi"
            ref="executive"
          ></executive>
        </div>
        <div class="select-input">
          <div class="select-span" style="width: 85px">企业名称:</div>
          <el-input
            v-model="form.enterpriseName"
            size="small"
            placeholder="请输入企业名称"
          ></el-input>
        </div>
        <!-- <div class="select-input">
          <div class="select-span">企业规模:</div>
          <el-select v-model="form.majorHazardLevel" placeholder="请选择">
            <el-option
              v-for="item in dict.type.major_hazard_level"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div> -->
        <div class="select-input">
          <div class="select-span">行业监管大类:</div>
          <el-select v-model="form.supervisionLarge" placeholder="请选择">
            <el-option
              v-for="item in dict.type.category"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="two-line">
        <div class="two-line-left">
          <div class="input-input" style="margin-left: 10px">
            <div class="select-span">统一社会信用代码:</div>
            <el-input
              v-model="form.uuitNo"
              placeholder="请输入统一社会信用代码"
            ></el-input>
          </div>
        </div>
        <div class="select-btn" @click="searchList">搜索</div>
        <div
          class="select-btn"
          @click="reset"
          style="background-color: #fdab5b"
        >
          重置
        </div>
      </div>
    </div>
    <div class="tables">
      <el-table
        v-loading="load1"
        :data="tableData"
        style="width: 100%"
        :height="497"
        :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="uuitNo"
          label="统一社会信用代码"
          width="180"
          header-align="center"
        />
        <el-table-column
          prop="majorHazardLevel"
          label="行政区划"
          width="230"
          header-align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div>
              {{ componendDistrict(scope.row.subdistrict) || "/" }}
            </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=""
          label="安全风险等级"
          width="120"
          header-align="center"
        />
        <el-table-column
          prop=""
          label="标准化等级"
          width="100"
          header-align="center"
        />
        <el-table-column
          prop=""
          label="上次检查时间"
          width="120"
          header-align="center"
        />

        <!-- <el-table-column prop="isPoint" label="是否重点" header-align="center">
          <template slot-scope="scope">
            <div
              style="font-family: 'Alibaba PuHuiTi'"
              :class="scope.row.isPoint == '1' ? 'isStyle' : ''"
            >
              <span v-if="scope.row.isPoint == '1'">是</span>
              <span v-if="scope.row.isPoint == '0'">否</span>
            </div>
          </template>
        </el-table-column> -->
        <el-table-column label="操作" header-align="center">
          <template slot-scope="scope">
            <div class="tabs-btns">
              <div class="look" @click="look(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="searchBefore.pageNum"
      :limit.sync="searchBefore.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="shutDownDetail" />
        </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="
                  key == 'majorProduct' ||
                  key == 'businessScope' ||
                  key == 'subdistrict' ||
                  key == 'rigisterAddress'
                    ? 2
                    : 1
                "
              >
                {{ infoData[key] || "/" }}
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { businessList } 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";

export default {
  components: { executive },
  name: "Order",
  data() {
    return {
      dictzh: dictzh,
      tableData: [],
      option: [],
      form: {},
      xzqh: "",
      searchBefore: {
        pageSize: 10,
        pageNum: 1,
      },
      xzList: [],
      load1: true,
      total: 0,
      main: {
        height: "",
      },
      elDesLabels: {
        企业名称: "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",
        // 工艺流程内容: "htmlText",
        // :"updateBy",
        // :"updateId",
        // :"updater",
        // :"userId",
        // :"village",
        // :"supervisionSmall",
        // :"reportHistoryId",
        // :"indusTypeClass",
        // :"indusTypeLagre",
        // :"indusTypeMiddle",
        // :"indusTypeSmall",
        // :"isDelete",
        // :"jhptUpdateTime",
        // :"lastPageNumber",
        // :"creater",
        // :"deptId",
        // :"districtCode",
        // :"province",
        // :"createBy",
        // :"createId",
        // :"businessScope",
        // :"city",
      },
      addShow: false,
      details: null,
      subdistrict: [],
      infoData: {},
    };
  },
  created() {
    this.getList();
  },
  dicts: [
    "economic_categories",
    "economic_subcategory",
    "special_governance",
    "enterprise_status",
    "standardization_level",
    "safety_level",
    "category",
    "major_hazard_level",
    "entpr_color",
    "is_point",
  ],
  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(",") || "/";
    },
  },
  methods: {
    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(",");
    },
    // 匹配行政区划
    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;
    },
    // 获取行政区划树
    quhuadizhi(district) {
      this.option = district;
    },
    filterTable1(datas, value) {
      if (!value) {
        return "/";
      }
      var actions = [];
      datas.forEach((value1, index1) => {
        actions.push(value1.raw);
      });
      let newarr = actions.filter((value2) => {
        return value2.dictValue == value;
      });
      if (newarr.length > 0) {
        return newarr[0].dictLabel;
      } else {
        return "/";
      }
    },
    shutDownDetail() {
      this.addShow = false;
    },
    look(e) {
      localStorage.setItem("enterInfo", JSON.stringify(e));
      let infoObj = JSON.parse(localStorage.getItem("enterInfo"));
      // 查看弹窗
      this.addShow = true;
      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["subdistrict"] =
        this.componendDistrict(infoObj.subdistrict) || "/";
      this.infoData = infoObj;
    },
    quhua(e) {
      this.form.subdistrict = e;
    },
    searchList() {
      this.searchBefore = {
        pageSize: 10,
        pageNum: 1,
      };
      this.searchBefore = { ...this.searchBefore, ...this.form };
      this.getList();
    },
    reset() {
      this.form = {
        subdistrict: "",
        frimType: "",
        supervisionLarge: "",
        // isPoint: "",
        majorHazardLevel: "",
        entprColor: "",
        uuitNo: "",
        enterpriseName: "",
      };
      this.searchBefore = {
        pageSize: 10,
        pageNum: 1,
      };
      this.$refs.executive.district = [];
      this.getList();
    },
    // 页码，当前页切换事件
    // pagesChange(pages) {
    //   this.searchBefore.pageNum = pages.pageNum;
    //   this.searchBefore.pageSize = pages.pageSize;
    //   this.getList();
    // },
    getList() {
      this.load1 = true;
      businessList(this.searchBefore).then((res) => {
        this.tableData = res.rows;
        this.total = res.total;
        this.load1 = false;
      });
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 !== 0) {
        return "success-row";
      }
      return "";
    },
  },
  mounted() {},
};
</script>
<style lang="scss" scoped>
.isStyle {
  color: #f71052;
}
::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;
}
.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;
    }
  }
}
.container-main {
  // height: calc(100vh - 84px);
  height: 100%;
  overflow: hidden;
  padding: 0 20px;
  background-color: #fff;
  .filtrate {
    padding-bottom: 10px;
    .one-line,
    .two-line {
      display: flex;
      align-items: center;

      .select-input {
        margin-left: 10px;
      }

      .two-line-left {
        display: flex;
        align-items: center;
        // justify-content: space-between;
        padding-right: 50px;
        width: 88%;
        .input-input {
          margin: 10px 0 0 0;
          width: 355px;
          display: flex;
          align-items: center;

          .select-span {
            font-size: 14px;
            font-family: "Alibaba PuHuiTi";
            font-weight: 400;
            color: #525966;
            line-height: 40px;
            margin-right: 10px;
          }
          ::v-deep .el-input {
            flex: 1;
            .el-input__inner {
              height: 33px;
            }
          }
        }
      }
      .select-btn {
        padding: 12px 20px;
        margin: 10px 0 0 5px;
        height: 33px;
        background: #2378ec;
        border-radius: 2px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 15px;
        font-family: Alibaba PuHuiTi;
        font-weight: 500;
        color: #ffffff;
        cursor: pointer;
      }
    }

    .select-input {
      margin-top: 10px;
      display: flex;
      align-items: center;
      .select-span {
        font-size: 14px;
        font-family: "Alibaba PuHuiTi";
        font-weight: 400;
        color: #525966;
        line-height: 40px;
        margin-right: 10px;
      }
      ::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);
        }
      }
    }
  }
  .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;
  }
}
</style>
