<template>
  <div id="festival">
    <search-box
      ref="searchBox"
      :formData="formData"
      :formList="formList"
      @search="search"
      @init="init"
    />
    <div id="tableList">
      <div class="headerNavTool" v-if="navText.headShow !== false">
        <div class="leftIndexText">
          {{ navText.title }} <strong>{{ navText.index }}</strong>
          {{ navText.ch }}
        </div>
        <div class="rightBtnBox">
          <el-button
            size="medium"
            @click="openEditCertDialog(null, 'add')"
            type="primary"
            >新增</el-button
          >
          <el-button size="medium" @click="openImportDialog()" type="primary"
            >批量导入</el-button
          >
          <el-button size="medium" @click="handleDelete(null)" type="primary"
            >批量删除</el-button
          >
        </div>
      </div>
      <el-table
        :row-key="(row) => row.chapterId"
        ref="tableList"
        :loading="loading"
        :data="tableData"
        style="width: 100%"
        fit
        border
        :header-cell-style="{
          'text-align': 'center',
          'background-color': '#eee',
          color: '#333',
          fontSize: '14px',
        }"
        :cell-style="{
          'text-align': 'center',
        }"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
          fixed="left"
        ></el-table-column>
        <el-table-column
          type="index"
          label="序号"
          width="50 "
        ></el-table-column>
        <el-table-column prop="createTime" width="150" label="添加时间">
          <template slot-scope="scope">
            {{ $methodsTools.timestampFormat(scope.row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="companyName"
          width="150"
          label="企业名称"
        ></el-table-column>
        <el-table-column
          prop="certificateNumber"
          label="证书编号"
          width="150"
        ></el-table-column>
        <el-table-column prop="issuanceDate" label="发证日期">
          <template slot-scope="scope">
            {{ $methodsTools.timestampFormat(scope.row.issuanceDate) }}
          </template>
        </el-table-column>
        <el-table-column prop="effectiveDate" label="有效日期" width="150">
          <template slot-scope="scope">
            {{
              scope.row.effectiveFlag == 1
                ? "长期"
                : $methodsTools.timestampFormat(scope.row.effectiveDate)
            }}
          </template>
        </el-table-column>
        <el-table-column prop="warningStatus" label="预警状态" width="150">
          <template slot-scope="scope">
            <span v-if="scope.row.warningStatus == 1"> 正常 </span>
            <span v-if="scope.row.warningStatus == 2" style="color: red">
              已过期{{ scope.row.expirationTime }}天
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="issuingAuthority"
          label="发证机关"
          width="150"
        ></el-table-column>
        <el-table-column prop="previewImg" label="预览" width="150">
          <template slot-scope="scope">
            <el-image
              v-if="scope.row.previewImg"
              style="width: 80px; height: 80px; cursor: pointer"
              :src="$methodsTools.splitImgHost(scope.row.previewImg)"
              :preview-src-list="[
                $methodsTools.splitImgHost(scope.row.previewImg),
              ]"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column
          prop="companyCertificateRemarks"
          label="备注"
          width="150"
        ></el-table-column>
        <el-table-column prop="date" label="操作" fixed="right" width="200">
          <template slot-scope="scope">
            <el-button type="text" @click="openCertDetailDialog(scope.row)"
              >详情</el-button
            >
            <el-button
              type="text"
              @click="openEditCertDialog(scope.row, 'edit')"
              >修改</el-button
            >
            <el-button type="text" @click="handleDelete(scope.row)"
              >删除</el-button
            >
            <el-button type="text" @click="download(scope.row)">下载</el-button>
            <el-button type="text" @click="openRemarkDialog(scope.row)"
              >备注</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <pagination
      :total="total"
      :pageSize="formData.pageSize"
      :currentPage="formData.pageNum"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    />
    <!-- 企业证书(安全生产许可证)详情弹窗 -->
    <certDetailDialog ref="certDetailDialog" />
    <!-- 企业证书(安全生产许可证)新增/编辑弹窗 -->
    <editCertDialog ref="editCertDialog" @refresh="init(2)" />
    <!-- 导入数据弹窗 -->
    <importDialog ref="importDialog" :type="formData.certificateType" />
    <!-- 备注弹窗 -->
    <remarkDialog ref="remarkDialog" @handle-remark="handleRemark" />
  </div>
</template>
  
  <script>
import certDetailDialog from "./certDetailDialog.vue";
import editCertDialog from "./editCertDialog.vue";
import importDialog from "../../component/importDialog.vue";
import remarkDialog from "../../component/remarkDialog.vue";
import pagination from "@/components/pagination.vue";
import {
  certificateList,
  deleteCertificate,
  updateCertificate,
} from "@/api/company";

export default {
  components: {
    certDetailDialog,
    editCertDialog,
    importDialog,
    remarkDialog,
    pagination
  },
  data() {
    return {
      loading: false, //当前表单加载是否加载动画
      navText: {
        title: "安全生产许可证",
        index: 0,
        ch: "条",
      },
      //搜索
      formList: [
        {
          prop: "companyName",
          placeholder: "企业名称",
          scope: "companyList",
        },
        {
          prop: "warningStatus",
          placeholder: "预警状态",
          scope: "select",
          options: [
            {
              label: "正常",
              value: 1,
            },
            {
              label: "已过期",
              value: 2,
            },
          ],
        },
        {
          prop: "certificateNumber",
          placeholder: "请输入证书编号",
        },
      ],
      formData: {
        pageSize: 10,
        pageNum: 1,
      },
      tableData: [], //表单数据
      multipleSelection: [], // 多选选中数据
      total: 0, //一共多少条
      pageSize: 10, //每页多少条数据
      currentPage: 1, //当前页码
    };
  },
  mounted() {
    this.search();
  },
  activated() {
    this.search();
  },
  methods: {
    openCertDetailDialog(row) {
      this.$refs.certDetailDialog.openBoxs(row);
    },
    openEditCertDialog(row, type) {
      this.$refs.editCertDialog.openBoxs(row, type);
    },
    openImportDialog() {
      this.$refs.importDialog.openBoxs();
    },
    openRemarkDialog(row) {
      this.$refs.remarkDialog.openBoxs(row, "companyCertificateRemarks");
    },
    handleRemark(val) {
      console.log(val, "备注回调");
      updateCertificate({
        certificateId: val.certificateId,
        companyCertificateRemarks: val.companyCertificateRemarks,
      })
        .then((res) => {
          this.$message.success("保存成功！");
          this.search(1);
        })
        .finally(() => {
          console.log("end");
        });
    },
    handleDelete(row) {
      if (!this.multipleSelection.length && !row) {
        this.$message.warning("请勾选需要删除的选项");
        return;
      }
      this.$confirm(
        row
          ? `确定删除此内容？内容删除后将无法恢复！`
          : `此操作将永久删除所勾选的${this.multipleSelection.length}条数据, 是否继续?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          const ids = row
            ? [row.certificateId]
            : this.multipleSelection.map((item) => item.certificateId);
          console.log(ids, "ids");
          deleteCertificate({ certificateIds: ids }).then((res) => {
            this.$message.success("删除成功");
            this.search(1);
          });
        })
        .catch(() => {});
    },
    search(int) {
      this.loading = true;
      if (int === 1) {
        this.formData.pageNum = 1;
      }
      if (int === 2) {
        this.formData = {
          pageSize: 10,
          pageNum: 1,
        };
      }
      this.formData.certificateType = 3; // 3:安全生产许可证
      certificateList(this.formData)
        .then((res) => {
          console.log(res, "安全生产许可证");
          this.tableData = res.rows;
          this.total = res.total;
          this.navText.index = res.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    init() {
      this.search(2);
    },
    download(v, int) {
      this.$methodsTools.downloadImg(v.previewImg, '安全生产许可证')
    },
    //多选操作回调
    handleSelectionChange(val) {
      console.log(val);  
      this.multipleSelection = val;
    },
    handleSizeChange(v) {
      this.formData.pageSize = v;
      this.formData.pageNum = 1;
      this.search();
    },
    handleCurrentChange(v) {
      this.formData.pageNum = v;
      this.search();
    },
  },
};
</script>
  
  <style lang="less" scoped>
/deep/.el-button {
  border-radius: 8px;
}
#tableList {
  padding: 16px 16px 16px;
  border-radius: 8px;
  box-shadow: 0px 0px 9px 1px rgba(28, 41, 90, 0.1);
  background: #ffffff;
  .headerNavTool {
    height: 72px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: -16px;
    .rightBtnBox {
      display: flex;
      align-items: center;
    }
  }
}
</style>
  
  