<template>
  <div>
    <el-card>
      <el-form :model="filterQuery" class="query-form" label-width="120px" inline>
        <el-row>
          <el-form-item label="企业名称">
            <el-input
              v-model="filterQuery.companyName"
              style="width: 90%"
              placeholder="请输入企业名称"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="审核状态">
            <el-select v-model="filterQuery.checkStatus" style="width: 90%" placeholder="请选择审核状态">
              <el-option label="未审核" value="3"></el-option>
              <el-option label="已审核" value="1"></el-option>
              <el-option label="未通过" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button-group>
              <el-button
                type="primary"
                icon="el-icon-refresh"
                @click="onReset"
              >重置
              </el-button>
              <el-button type="primary" icon="search" @click="onSubmit"
              >查询
              </el-button
              >
            </el-button-group>
          </el-form-item>
        </el-row>
      </el-form>

      <el-table v-loading="loading" :data="list" style="width: 100%" border highlight-current-row class="table-fixed">
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column
          label="企业名称"
          prop="companyName"
          width="230"
        ></el-table-column>
        <el-table-column
          label="社会信用号"
          prop="creditNum"
          width="230"
        ></el-table-column>
        <el-table-column label="企业类型" prop="bussinessStatus">
          <template slot-scope="scope">
            <span>{{ bussinessFlag[scope.row.bussinessStatus] }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="注册时间"
          prop="registerTime"
          width="230"
        ></el-table-column>

        <el-table-column
          label="法人名称"
          prop="legalPerson"
          width="230"
        ></el-table-column>

        <el-table-column
          label="法人身份证"
          prop="legalPerson"
          width="230"
        ></el-table-column>

        <el-table-column
          label="注册地址"
          prop="registerAddress"
          width="230"
        ></el-table-column>

        <el-table-column label="注册人名称" prop="realName" width="220"></el-table-column>

        <!--<el-table-column-->
        <!--  label="联系人"-->
        <!--  prop="legalPerson"-->
        <!--  width="160"-->
        <!--&gt;</el-table-column>-->
        <el-table-column label="注册手机" prop="mobile" width="120"></el-table-column>
        <el-table-column label="法人电话" prop="fmobile" width="120"></el-table-column>
        <el-table-column label="邮箱" prop="email" width="180"></el-table-column>

        <el-table-column label="审核状态" prop="checkType" width="120">
          <template slot-scope="scope">
            <span>{{ checkFlag[scope.row.checkStatus] }}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="60px" fixed="right">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              :disabled="scope.row.checkType == 1"
              @click.native.stop="checkDialog(scope.row)"
            >审核
            </el-button
            >

            <!-- <el-button
              type="text"
              size="small"
              @click.native.stop="deleteDialog(scope.row)"
              >删除</el-button
            > -->
          </template>
        </el-table-column>
      </el-table>

      <el-dialog
        title="详情"
        :visible.sync="details"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        width="60%"
      >
        <el-form :model="rowCertData"  label-width="100px">
          <el-row>
            <el-col :span="11">
              <el-form-item label="证书名称:" prop="name">
                <el-input
                  size="small"
                  v-model="rowCertData.name"
                  :disabled="true"
                  style="width: 90%"
                ></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="11">
              <el-form-item label="证书编号:" prop="code">
                <el-input
                  size="small"
                  v-model="rowCertData.code"
                  :disabled="true"
                  style="width: 90%"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="11">
              <el-form-item label="有效期:" prop="vailDate">
                <el-input
                  size="small"
                  v-model="rowCertData.vailDate"
                  :disabled="true"
                  style="width: 90%"
                ></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="11">
              <el-form-item label="失效期:" prop="expireDate">
                <el-input
                  size="small"
                  v-model="rowCertData.expireDate"
                  :disabled="true"
                  style="width: 90%"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="11">
              <el-form-item label="确认状态:" prop="checkStatus">
                <el-select
                  v-model="rowCertData.checkStatus"
                  :disabled="true"
                  size="small"
                  style="width: 90%"
                >
                  <el-option label="未审核" value="3"></el-option>
                  <el-option label="拒绝" value="2"></el-option>
                  <el-option label="已通过" value="1"></el-option>
                  <el-option label="未认证" value="0"></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="11">
              <el-form-item label="确认说明:" prop="checkComment">
                <el-input
                  size="small"
                  v-model="rowCertData.checkComment"
                  :disabled="true"
                  style="width: 90%"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="11">
              <el-form-item label="状态:" prop="status">
                <el-select
                  v-model="rowCertData.status"
                  :disabled="true"
                  size="small"
                  style="width: 90%"
                >
                  <el-option label="确认" value="0"></el-option>
                  <el-option label="未确认" value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="11">
              <el-form-item label="备注:" prop="remark">
                <el-input
                  size="small"
                  v-model="rowCertData.remark"
                  :disabled="true"
                  style="width: 90%"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>


        </el-form>
        <span slot="footer" class="dialog-footer">
        <el-button @click="details = false">取消</el-button>
         <el-button
           type="primary"
           @click.native="determine"
         >通过</el-button
         >
       <el-button
         type="primary"
         @click.native="addCert"
       >不通过</el-button
       >
      </span>


      </el-dialog>

      <el-dialog
        title="新企业审核"
        :visible.sync="centerDialogVisible"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        width="60%"
        center
      >
        <el-form :model="rowData" :rules="rowDataRules" ref="rowDataForm" label-width="100px">

          <el-row>
            <el-col :span="11">
              <el-form-item label="企业名称:" prop="companyName">
                <el-select
                  v-model="rowData.companyName"
                  filterable
                  remote
                  :disabled="rowData.companyName != null && rowData.companyName != ''"
                  clearable="true"
                  reserve-keyword
                  placeholder="请输入企业名称"
                  :remote-method="findMethod"
                  size="small"
                  style="width: 90%"
                  :loading="loading"
                >
                  <el-option
                    v-for="item in fromOptions"
                    :key="item.name"
                    :label="item.name"
                    :value="item.name"
                  >
                    <span style="float: left">{{ item.name }}</span>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="11">
              <el-form-item label="社会信用号:" prop="creditNum">
                <el-input
                  size="small"
                  v-model="rowData.creditNum"
                  :disabled="true"
                  style="width: 90%"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>

            <el-col :span="11">
              <el-form-item label="企业类型:" prop="bussinessStatus">
                <el-input
                  size="small"
                  v-model="bussinessFlag[rowData.bussinessStatus]"
                  :disabled="true"
                  style="width: 90%"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="注册时间:" prop="registerTime">
                <el-input
                  size="small"
                  v-model="rowData.registerTime"
                  :disabled="true"
                  style="width: 90%"
                ></el-input>
              </el-form-item>
            </el-col>


          </el-row>

          <el-row>
            <el-col :span="11">
              <el-form-item label="法人名称:" prop="legalPerson">
                <el-input
                  size="small"
                  v-model="rowData.legalPerson"
                  :disabled="true"
                  style="width: 90%"
                ></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="11">
              <el-form-item label="法人身份证:" prop="legalIdCard">
                <el-input
                  size="small"
                  v-model="rowData.legalIdCard"
                  :disabled="true"
                  style="width: 90%"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="11">
              <el-form-item label="注册地址:" prop="registerAddress">
                <el-input
                  size="small"
                  v-model="rowData.registerAddress"
                  :disabled="true"
                  style="width: 90%"
                ></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="11">
              <el-form-item label="注册人名称:" prop="realName" >
                <el-input
                  size="small"
                  v-model="rowData.realName"
                  :disabled="true"
                  style="width: 90%"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="11">
              <el-form-item label="注册手机:" prop="mobile">
                <el-input
                  size="small"
                  v-model="rowData.mobile"
                  :disabled="true"
                  style="width: 90%"
                ></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="11">
              <el-form-item label="法人电话:" prop="fmobile" >
                <el-input
                  size="small"
                  v-model="rowData.fmobile"
                  :disabled="true"
                  style="width: 90%"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>

        </el-form>

        <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取消</el-button>
        <el-button type="primary"  :disabled="this.check != 3" @click="passRegister">通过</el-button>
        <el-button type="primary"  :disabled="this.check != 3" @click="noPassRegister">不通过</el-button>
      </span>
        <el-table
          v-loading="certLoading"
          :data="certList"
          style="width: 100%"
          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="vailDate"></el-table-column>
          <el-table-column label="失效期" prop="expireDate"></el-table-column>
          <el-table-column label="确认状态" prop="checkStatus" width="120">
            <template slot-scope="scope">
              <el-tag :type="scope.row.checkStatus | statusFilterType">
                {{ checkFlag[scope.row.checkStatus] }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            label="确认说明"
            prop="checkComment"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column label="状态" prop="status" width="120">
            <template slot-scope="scope">
              <el-tag :type="scope.row.status | statusType">
                {{ statusFlag[scope.row.status] }}
              </el-tag>
            </template>
          </el-table-column>

          <el-table-column label="备注" prop="remark"></el-table-column>

          <el-table-column label="操作" width="180">
            <template slot-scope="scope">

              <el-button
                type="text"
                size="small"
                v-if="check == 3"
                @click.native="determine1(scope.row)"
              >审核</el-button
              >
              <el-button
                type="text"
                size="small"
                @click.native="showImgViewer(scope.row)"
              >预览</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="certTotal > 0"
          :total="certTotal"
          :limit.sync="query.limit"
          :page.sync="query.page"
          @pagination="certHandleCurrentChange"
        ></pagination>

      </el-dialog>
      <pagination
        v-show="total>0"
        :total="total"
        :limit.sync="filterQuery.limit"
        :page.sync="filterQuery.page"
        @pagination="handleCurrentChange"
      ></pagination>
    </el-card>

    <el-image-viewer
      v-if="imgViewerVisible"
      style="z-index: 9999"
      :on-close="closeImgViewer"
      :url-list="imgList"
    />



  </div>
</template>

<script>
import {selectReslist,NotApproved} from "@/api/auth/registComPer";
import {filterCompanyCert,deleteCert,updateCert} from "@/api/sup/userCert";
import { previewImage } from "@/api/purchase/supCompany";
import ElImageViewer from "element-ui/packages/image/src/image-viewer";

import draggable from "vuedraggable";



export default {
  data() {
    return {
      certTotal: 0,
      details:false,
      imgList:[],
      certLoading: false,
      imgViewerVisible: false,
      BASE_URL: process.env.VUE_APP_BASE_API,
      filterQuery: {
        companyName: "",
        checkStatus: "",
        page: 1,
        limit: 20,
      },
      query:{
        businessId:"",
        page: 1,
        limit: 20,
      },
      certList:[],
      formData:{
        name:"",
        code:"",
        vailDate:"",
        expireDate:"",
        remark:"",
      },
      rowCertData:{},
      value: "",
      total: 0,
      checkFlag: {
        3: "未审核",
        1: "已通过",
        2: "已拒绝",
        0:"未认证",
      },
      statusFlag: {
        1: "有效",
        0: "失效",
      },
      bussinessFlag: {
        1: "生产企业",
        2: "流通企业",
        3: "医疗机构",
        4: "监管机构",
      },
      checkQuery: {
        id: "",
        checkType: "",
        roles: "",
        companyName: ""

      },
      rowDataRules: {
        nickName: [
          {required: true, message: "请输入用户名称", trigger: "blur"},
        ],
        check:[
          {required: true, message: "请选择角色", trigger: "blur"}
        ],
      },
      list: [],
      roles: [],
      addDialogVisible: false,
      centerDialogVisible: false,
      check: "",
      rId:"",
      rowData: {},
      sOptions: [],
      sValue: [],
      sList: [],
      sLoading: false,
      sSelectStatus: false,
      registerConfigMap: {
        companyCheckStatus: true
      },
      fileUrl: "",
      fromOptions: [],
    };
  },

  methods: {
    onReset() {
      this.$router.push({
        path: "",
      });
      this.filterQuery = {
        companyName: "",
        checkType: "",
        page: 1,
        limit: 20,
      };
      this.getList();
    },
    onSubmit() {
      this.filterQuery.page = 1;
      this.getList();
    },
    getList() {
      this.loading = true;
      selectReslist(this.filterQuery)
        .then((response) => {
          this.loading = false;
          this.list = response.data.list || [];
          this.total = response.data.total || 0;
        })
        .catch(() => {
          this.loading = false;
          this.list = [];
          this.total = 0;
        });
    },
    certHandleCurrentChange(val){
      this.query.page = val.page;
      this.getCertList(this.query);

    },

    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;
        }
        console.log(this.imgList);
        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);
    },

    addCert(){
      this.$prompt('请输入结果说明', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({value}) => {
        let params ={
          checkComment :value,
          id:this.rowCertData.id,
          checkStatus:2,
          name:this.rowCertData.name,
          createUser: this.$store.getters.name,
          key:"key"
        }
        updateCert(params).then((res)=>{
          if (res.code === 20000) {
            this.$message.success("提交成功");
            this.getCertList(this.query);
            this.details=false;
          }
        })


      }).catch(() => {
      });
    },

    determine1(row){
      this.details=true;
      this.rowCertData=row;
      console.log(this.rowCertData)
    },

    determine(){
      this.$confirm("是否审核通过?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let params ={
          id:this.rowCertData.id,
          checkStatus:1,
          checkComment:"",
          name:this.rowCertData.name,
          createUser:this.$store.getters.name,
          key:"key"
        }
        updateCert(params).then((res)=>{
          if (res.code === 20000) {
            this.$message.success("提交成功");
            this.getCertList(this.query);
            this.details=false;
          }
        })


      }).catch(() => {
      });
    },


    selectOne(event) {
      this.checkQuery.companyName = this.sOptions.find(item => item.id == event).name
      this.checkQuery.companyId = this.sOptions.find(item => item.id == event).erpId;
      this.sSelectStatus = true;
    },
    remoteMethod(query) {
      if (query !== '') {
        this.sLoading = true;
        let tQuery = {
          key: query,
          page: 1,
          limit: 20,
        };
        getBasicUnitMaintains2(tQuery)
          .then((response) => {
            this.sLoading = false;
            this.sOptions = response.data.list
          })
          .catch(() => {
            this.sLoading = false;
            this.sOptions = [];
          });
      } else {
        this.sOptions = [];
      }
    },
    cancelDialog() {
      this.addDialogVisible = false;
    },

    handleCheckedChange(val) {
    },

    handleSizeChange(val) {
      this.filterQuery.limit = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.filterQuery.page = val.page;
      this.getList();
    },
    findMethod(query) {
      this.fromOptions = [];
      let cQuery = {
        key: query,
      };
      getBasicUnitMaintains(cQuery)
        .then((response) => {
          this.loading = false;
          this.fromOptions = response.data.page.list || [];
        })
        .catch(() => {
          this.loading = false;
        });
    },
    checkDialog(row) {
      this.check=row.checkStatus;
      this.rId=row.id;
      this.rowData=row;
      this.query.businessId=row.ucId;
      this.getCertList(this.query);
      this.centerDialogVisible = true;
    },

    getCertList(){
      filterCompanyCert(this.query).then((res) =>{
        this.certList = res.data.list || []
        this.certTotal = res.data.total;
      })
    },

    passRegister() {
      this.$confirm("是否审核通过?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let param={
          ucId: this.query.businessId,
          reviewer:this.$store.getters.name,
           xemail:this.rowData.email,
          name:this.rowData.name,
          checkStatus:1,
          id:this.rId,
          isPass:'isPass'
        }
        NotApproved(param).then((res)=>{
          if(res.code == 20000){
            this.$message({
              type: "success",
              message: "审核成功！",
            });
            this.centerDialogVisible = false;
          }else{
            this.$message.error(res.message);
          }
        })

      })



    },
    noPassRegister() {
      this.$prompt('请输入结果说明', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({value}) => {
         let params={
           ucId:this.query.businessId,
           reason:value,
           reviewer:this.$store.getters.name,
           checkStatus:2,
           id:this.rId
         }
        NotApproved(params).then((res)=>{
          if(res.code == 20000){
            this.$message({
              type: "success",
              message: "审核成功！",
            });
            this.centerDialogVisible = false;
          }
        })
      }).catch(() => {
      });


    },



  },

  mounted() {
  },
  created() {
   this.getList();

  },
  components: {
    ElImageViewer,
  },
  filters: {
    statusFilterType(status) {
      const statusMap = {
        0: "warning",
        1: "success",
        2: "danger",
        3: "warning",
      };
      return statusMap[status];
    },

    statusType(status) {
      const statusMap = {
        1: "success",
        0: "danger",
      };
      return statusMap[status];
    },
  },
};


</script>


<style lang="scss" scoped>



</style>
