<template>
  <div>
    <el-form :model="inputQuery" :rules="rules" ref="inputQuery" label-width="100px">
      <div style=" float: right;
              text-align: right;
            margin-bottom: 8px;">
        <el-button type="primary" size="mini" icon="search" @click="addCert"
                   style="text-align:right"
        >添加技术资料
        </el-button>
      </div>
      <el-table v-loading="certLoading" :data="certList" style=" width: 100%;margin-top: 20px" border
                highlight-current-row>
        <el-table-column type="index" label="序号" width="50"></el-table-column>
        <el-table-column label="资料名称" prop="name"></el-table-column>
        <el-table-column label="资料编号" prop="code"></el-table-column>
        <el-table-column label="更新日期" prop="updateTime"></el-table-column>
        <el-table-column label="证书状态">
          <template slot-scope="scope">
            <span>{{ expire[scope.row.status] }}</span>
          </template>
        </el-table-column>
        <!--        <el-table-column label="审核状态" prop="auditStatus" width="120">-->
        <!--          <template slot-scope="scope">-->
        <!--            <el-tag :type="(scope.row.auditStatus) | statusFilterType">-->
        <!--              {{ checkFlag[scope.row.auditStatus] }}-->
        <!--            </el-tag>-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <el-table-column label="备注" prop="remark"></el-table-column>

        <el-table-column label="操作" width="140">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click.native="addCert(scope.row)"
            >编辑
            </el-button
            >
            <el-button type="text" size="mini" @click.native="showImgViewer(scope.row)">
              预览
            </el-button>
            <el-button
              type="text"
              size="small"
              @click.native="deleteDeviceCert(scope.row)"
            >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-image-viewer v-if="imgViewerVisible" style="z-index:9999" :on-close="closeImgViewer"
                       :url-list="imgList"/>
      <pagination
        v-show="certTotal>0"
        :total="certTotal"
        :page.sync="certQuery.page"
        :limit.sync="certQuery.limit"
        @pagination="certHandleCurrentChange"
      ></pagination>


      <el-dialog
        title="添加资质证书"
        :visible.sync="addCertVisible"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        width="70%"
        v-if="addCertVisible"
        append-to-body
        @close='closeLocalDialog'
      >
        <deviceAddCert
          :closeDialog="closeLocalDialog"
          :inputQuery="inputQuery"
          :addType="addType"
          :editTye="editTye"
        ></deviceAddCert>
      </el-dialog>


    </el-form>
  </div>
</template>

<script>
import {modifyCompany, addCompany, bindCorp, previewImage} from "@/api/purchase/supCompany";
import store from "@/store";
import {regionDataPlus, CodeToText} from "element-china-area-data";
import {deleteDeviceCert, updateDeviceCert} from "@/api/dev/deviceCert";
import {filterDeviceCert} from "@/api/dev/deviceCert";
import corpMaintainSelect from "@/views/basic/corpMaintain/corpMaintainSelect"
import deviceAddCert from "@/views/inventory/cert/depCertAddDialog.vue";
import draggable from "vuedraggable";
import {getUUID, isBlank} from "@/utils/strUtil";
import supCertSetSelectDialog from "@/views/purchase/cert/supCertSetSelectDialog";
import {getBasicUnitMaintains, getCorpList} from "@/api/basic/basicUnitMaintain";
import ElImageViewer from "element-ui/packages/image/src/image-viewer"

export default {

  name: "invTechnicalEdit",
  props: {
    // closeDialog: {
    //   type: Function,
    //   required: true,
    // },
    // inputEdit: {
    //   type: Object,
    //   required: true,
    // },
    // editType: {
    //   type: Number,
    //   required: true,
    // }
    idQuery: {
      type: Object,
      required: true,
    },
    rowData: {
      type: Object,
      required: true,
    },

  },
  watch: {
    rowData: function (newVal, oldVal) {

      this.searchData(newVal);
    }
  }
  ,
  data() {
    return {
      BASE_URL: process.env.VUE_APP_BASE_API,
      headers: {},
      classesDisplay: false,
      selectedOptions: [],
      imgViewerVisible: false,
      imgList: [],
      options: regionDataPlus,
      inputQuery: {
        // customerId: null,
        devCodeFk: null,
        companyName: null,
        contacts: null,
        mobile: null,
        detailAddr: null,
      },
      rules: {
        companyName: [
          {
            required: true,
            message: "请输入企业名称",
            trigger: "blur"
          }
        ],
        creditNum: [
          {
            required: true,
            message: "请输入统一社会信用代码",
            trigger: "blur"
          }
        ],
        classes: [
          {
            required: true,
            message: "请选择企业类别",
            trigger: "change"
          }
        ],
        area: [
          {
            required: true,
            message: "请选择所属地区",
            trigger: "change"
          }
        ],
        detailAddr: [
          {
            required: true,
            message: "请输入详细地址",
            trigger: "change"
          }
        ],
        contacts: [
          {
            required: true,
            message: "请输入联系人",
            trigger: "change"
          }
        ],
        mobile: [
          {
            required: true,
            message: "请输入联系电话",
            trigger: "change"
          }
        ],
        email: [
          {
            required: true,
            message: "请输入邮箱",
            trigger: "change"
          }
        ],
        updateCause: [
          {
            required: true,
            message: "请输入变更原因",
            trigger: "change"
          }
        ],

      },
      uploadUrl: "",
      fileUrl: "",
      certFileUrl: "",
      url: 'http://127.0.0.1:9996/udiwms/image/register/file/getImage?type=image1&name=t11111.jpg',
      certQuery: {
        devCodeFk: "",
        page: 1,
        limit: 20,
        type: 1
      },
      expire: {
        0: "有效",
        1: "失效"
      },
      certList: [],
      certTotal: 0,
      certLoading: false,
      addCertVisible: false,
      salesmanQuery: {
        name: "",
        page: 1,
        limit: 20
      },
      salesmanList: [],
      salesmanTotal: 0,
      salesmanLoading: false,
      addSalesmanVisible: false,
      certTypeMap: {
        1: '身份证'
      },
      selectLocalVisible: false,
      productQuery: {
        ylqxzcrbarmc: "",
        cpmctymc: "",
        ggxh: "",
        page: 1,
        limit: 20
      },
      maintainsList: [],
      productList: [],
      productTotal: 0,
      productLoading: false,
      uuid: null,
      companyApplyUpdateVisible: false,
      companyEditDisabled: true,
      companyEditButtonStr: "编辑",
      addType: "2", //证书类型（1：资质证书；2：技术材料）
      checkFlag: {
        0: "草稿",
        1: "已通过",
        2: "已拒绝",
        3: "变更未审核",
        6: "未审核",
      },
      editTye: 1,

      selectCorpVisible: false,
      selectCertVisible: false,
      certType: 1,
      customerId: null,

    };
  },
  created() {
    console.log("第一次this.rowData:")
    console.log(this.rowData)
    // if (this.rowData.editType == 1) {
    //   this.getDeviceCertList();
    // }
    this.getBasicUnitMaintainsList();
    this.headers = {
      ADMINID: store.getters.adminId,
      ADMINTOKEN: store.getters.token,
    };
  },
  components: {
    draggable, deviceAddCert, corpMaintainSelect, supCertSetSelectDialog, ElImageViewer
  }
  ,
  methods: {
    searchData(query) {
      console.log("完成！")
      console.log(query)
      this.idQuery = {...query}

      this.getDeviceCertList();

    },
    //预览照片
    showImgViewer(row) {
      this.certFileUrl = this.BASE_URL + "/udiwms/image/register/file/getImage?type=image2&name=";
      this.imgList = [];
      previewImage({imageUrl: row.filePath, certFileUrl: this.certFileUrl}).then(response => {
        if (response.code === 20000) {
          this.imgList = response.data;
        }
      });
      this.imgViewerVisible = true;
      const m = (e) => {
        e.preventDefault()
      };
      document.body.style.overflow = 'hidden';
      document.addEventListener("touchmove", m, false); // 禁止页面滑动
    },
    closeImgViewer() {
      this.imgViewerVisible = false;
      const m = (e) => {
        e.preventDefault()
      };
      document.body.style.overflow = 'auto';
      document.removeEventListener("touchmove", m, true);
    },
    selectBasicCorp() {
      this.selectCorpVisible = true;
    },
    cancelDialog() {
      this.closeDialog();
    },
    //关闭添加证书界面
    closeLocalDialog() {
      this.addCertVisible = false;
      this.selectCertVisible = false;
      // this.getCompanyCertList();
      this.getDeviceCertList();
    }
    ,
    //添加资质证书
    addCert(row) {
      if (isBlank(this.inputQuery.devCodeFk)) {
        return this.$message.error("请先选择设备");
      }
      console.log(this.inputQuery.devCodeFk)
      if (this.$isNotBlank(row) && this.$isNotBlank(row.id)) {
        this.formName = 2
        this.inputQuery.formData = row;
        this.editTye = 2;
      } else {
        this.formName = 1;
        this.inputQuery.formData = {};
        this.inputQuery.formData.addType = 2;
        this.editTye = 1;
      }
      this.addCertVisible = true;
    }
    ,
    //页数
    certHandleCurrentChange(val) {
      this.certQuery.page = val.page;
      // this.getCompanyCertList();
      this.getDeviceCertList();
    },
    getBasicUnitMaintainsList() {
      getCorpList()
        .then((response) => {
          this.maintainsList = response.data || [];
        })
        .catch(() => {
          this.maintainsList = [];
        });

    },


    getDeviceCertList() {
      this.certLoading = true;
      // let certRuery = {}
      // this.certQuery.customerId = this.inputEdit.customerId;
      console.log("获取idQuery：")
      console.log(this.idQuery)
      this.certQuery.devCodeFk = this.idQuery.code;
      this.certQuery.type = 2;
      this.inputQuery={...this.idQuery};
      this.inputQuery.devCodeFk=this.idQuery.code;
      console.log(this.inputQuery);
      console.log("获取this.certQuery:")
      console.log(this.certQuery)
      filterDeviceCert(this.certQuery)
        .then((response) => {
          this.certLoading = false;
          this.certList = response.data.list || [];
          this.certTotal = response.data.total;
        })
        .catch(() => {
          this.certLoading = false;
          this.certList = [];
        });
    },

    deleteDeviceCert(row) {
      this.$confirm("是否删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.certLoading = true;
        let tquery = {
          id: row.id,
          filePath: row.filePath,
        };
        deleteDeviceCert(tquery)
          .then((response) => {
            this.certLoading = false;
            if (response.code === 20000) {
              this.getDeviceCertList();
              this.$message({
                type: "success",
                message: "删除成功！",
              });
            } else {
              this.$message.error(response.message);
            }
          })
          .catch(() => {
            this.certLoading = false;
          });
      }).catch(() => {
      });
    },
  },

}
;
</script>
<style scoped>

</style>
