<template>
  <!-- 本企业资质页面 -->
  <div>
    <div slot="header" style="font-weight: bold">
      <div style="text-align: center">
        <img
          alt="element-logo"
          style="width: 10%"
          src="../assets/logo/logo.png"
        />
      </div>
      <h3 style="text-align: center;font-size: larger ;color:#707070 ">协调平台注册</h3>
    </div>
    <el-form
      :model="inputQuery"
      :rules="rules"
      ref="inputQuery"
      label-width="500px"
    >
      <el-card class="el-card">
        <div>
          <span>
            企业信息：
          </span>
        </div>
        <div style=" margin-left: 40%">
          <span>
            本企业信息审核状态：
           <el-tag :type="inputQuery.ucstatus | statusFilterType" >
             {{checkSupFlag[inputQuery.ucstatus] }}
              </el-tag>
          </span>
        </div>


        <div style="float: right; margin-top: -20px">
          <el-button
            type="primary"
            size="mini"
            icon="search"
            @click="onModifySubmit()"
            :disabled ="inputQuery.ucstatus == 1 || inputQuery.ucstatus ==3"
          >草稿保存
          </el-button>

          <el-button
            type="primary"
            size="mini"
            icon="search"
            @click="onModifySubmit('key')"
            :disabled ="inputQuery.ucstatus == 1 || inputQuery.ucstatus ==3"
          >提交审核
          </el-button>
        </div>

        <el-row
          :gutter="20"
          class="el-row"
          type="flex"
          style="margin-top: 25px"
        >
          <el-col :span="10" class="el-col">
            <el-form-item
              label=" 说明:"
              label-width="150px"
              prop="reason"
            >
              <el-input
                size="small"
                disabled
                v-model="inputQuery.reason"
              ></el-input>
            </el-form-item>
          </el-col>


        </el-row>
        <el-row
          :gutter="20"
          class="el-row"
          type="flex"
        >
          <el-col :span="10" class="el-col">
            <el-form-item
              label=" 企业名称:"
              label-width="150px"
              prop="companyName"
            >
              <el-input
                size="small"
                :disabled ="inputQuery.ucstatus == 1 || inputQuery.ucstatus ==3"
                splaceholder="请输入内容"
                v-model="inputQuery.companyName"
              ></el-input>
            </el-form-item>
          </el-col>


        </el-row>

        <el-row
          :gutter="20"
          class="el-row"
          type="flex"

        >

          <el-col :span="10" class="el-col">
            <el-form-item
              label=" 社会信用号:"
              label-width="150px"
              prop="creditNum"
            >
              <el-input
                size="small"
                :disabled ="inputQuery.ucstatus == 1 || inputQuery.ucstatus ==3"
                splaceholder="请输入内容"
                v-model="inputQuery.creditNum"
              ></el-input>
            </el-form-item>
          </el-col>

        </el-row>


        <el-row :gutter="20" class="el-row" type="flex" style="margin-top: 0px">
          <el-col :span="10" class="el-col">
            <el-form-item label="企业类型:" label-width="150px" prop="bussinessStatus">
              <el-select
                size="small"
                :disabled ="inputQuery.ucstatus == 1 || inputQuery.ucstatus ==3"
                v-model="inputQuery.bussinessStatus"
                placeholder="企业类型"
                style="width: 100%"
              >
                <el-option
                  label="生产企业"
                  value="1"
                ></el-option>
                <el-option label="流通企业" value="2"></el-option>
                <el-option label="医疗机构" value="3"></el-option>
                <el-option label="监管机构" value="4"></el-option>
              </el-select>
            </el-form-item>
          </el-col>


        </el-row>


        <el-row :gutter="20" class="el-row" type="flex" style="margin-top: 0px">
          <el-col :span="10" class="el-col">

            <el-form-item
              label=" 法人名称 :"
              label-width="150px"
              prop="legalPerson"
            >
              <el-input
                size="small"
                :disabled ="inputQuery.ucstatus == 1 || inputQuery.ucstatus ==3"
                splaceholder="请输入内容"
                v-model="inputQuery.legalPerson"
              ></el-input>
            </el-form-item>

          </el-col>

        </el-row>


        <el-row :gutter="20" class="el-row" type="flex" style="margin-top: 0px">

          <el-col :span="10" class="el-col">
            <el-form-item
              label="法人身份证号 :"
              label-width="150px"
              prop="legalIdCard"
            >
              <el-input
                size="small"
                :disabled ="inputQuery.ucstatus == 1 || inputQuery.ucstatus ==3"
                splaceholder="请输入内容"
                v-model="inputQuery.legalIdCard"
              ></el-input>
            </el-form-item>
          </el-col>

        </el-row>

        <el-row :gutter="20" class="el-row" type="flex" style="margin-top: 0px">
            <el-col :span="10" class="el-col">

              <el-form-item
                label="注册地址:"
                label-width="150px"
                prop="registerAddress"
              >
                <el-input
                  size="small"
                  :disabled ="inputQuery.ucstatus == 1 || inputQuery.ucstatus ==3"
                  splaceholder="请输入内容"
                  v-model="inputQuery.registerAddress"
                ></el-input>
              </el-form-item>

            </el-col>



        </el-row>

        <!--<el-row :gutter="20" class="el-row" type="flex" style="margin-top: 0px">-->
        <!--  <el-col :span="10" class="el-col">-->
        <!--    <el-form-item label="备注:" label-width="150px" prop="remark">-->
        <!--      <el-input-->
        <!--        size="small"-->
        <!--        v-model="inputQuery.remark"-->
        <!--      ></el-input>-->
        <!--    </el-form-item>-->
        <!--  </el-col>-->
        <!--</el-row>-->

      </el-card>

      <el-card class="el-card">
        <div>
          <span>
            个人基本信息：
          </span>
        </div>
        <el-row
          :gutter="20"
          class="el-row"
          type="flex"
          style="margin-top: 25px"
        >
          <el-col :span="10" class="el-col">
            <el-form-item label="注册手机:" label-width="150px" prop="mobile">
              <el-input
                size="small"
                placeholder="请输入内容"
                :disabled ="inputQuery.ucstatus == 1 || inputQuery.ucstatus ==3"
                v-model="inputQuery.mobile"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row
          :gutter="20"
          class="el-row"
          type="flex"
        >
          <el-col :span="10" class="el-col">
            <el-form-item label="注册人名称:" label-width="150px" prop="realName">
              <el-input
                size="small"
                placeholder="请输入内容"
                :disabled ="inputQuery.ucstatus == 1 || inputQuery.ucstatus ==3"
                v-model="inputQuery.realName"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row
          :gutter="20"
          class="el-row"
          type="flex"
        >
          <el-col :span="10" class="el-col">
            <el-form-item label="法人联系电话:" label-width="150px" prop="fmobile">
              <el-input
                size="small"
                placeholder="请输入内容"
                :disabled ="inputQuery.ucstatus == 1 || inputQuery.ucstatus ==3"
                v-model="inputQuery.fmobile"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row
          :gutter="20"
          class="el-row"
          type="flex"
        >
          <el-col :span="10" class="el-col">
            <el-form-item label="邮箱:" label-width="150px" prop="email">
              <el-input
                size="small"
                placeholder="请输入内容"
                :disabled ="inputQuery.ucstatus == 1 || inputQuery.ucstatus ==3"
                v-model="inputQuery.email"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>




        <el-row
          :gutter="20"
          class="el-row"
          type="flex"
        >
          <el-col :span="10" class="el-col">
            <el-form-item
              label="系统负责人姓名:"
              label-width="150px"
              prop="name"
            >
              <el-input
                size="small"
                splaceholder="请输入内容"
                :disabled ="inputQuery.ucstatus == 1 || inputQuery.ucstatus ==3"
                v-model="inputQuery.name"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row
          :gutter="20"
          class="el-row"
          type="flex"
        >
          <el-col :span="10" class="el-col">
            <el-form-item
              label="系统负责人电话:"
              label-width="150px"
              prop="tel"
            >
              <el-input
                size="small"
                splaceholder="请输入内容"
                :disabled ="inputQuery.ucstatus == 1 || inputQuery.ucstatus ==3"
                v-model="inputQuery.tel"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row
          :gutter="20"
          class="el-row"
          type="flex"
        >
          <el-col :span="10" class="el-col">
            <el-form-item
              label="系统负责人QQ:"
              label-width="150px"
              prop="qq"
            >
              <el-input
                size="small"
                :disabled ="inputQuery.ucstatus == 1 || inputQuery.ucstatus ==3"
                splaceholder="请输入内容"
                v-model="inputQuery.qq"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row
          :gutter="20"
          class="el-row"
          type="flex"
        >
          <el-col :span="10" class="el-col">
            <el-form-item
              label="系统负责人微信:"
              label-width="150px"
              prop="weChat"
            >
              <el-input
                size="small"
                splaceholder="请输入内容"
                :disabled ="inputQuery.ucstatus == 1 || inputQuery.ucstatus ==3"
                v-model="inputQuery.weChat"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row
          :gutter="20"
          class="el-row"
          type="flex"
        >
          <el-col :span="10" class="el-col">
            <el-form-item
              label="系统负责人邮箱:"
              label-width="150px"
              prop="xemail"
            >
              <el-input
                size="small"
                splaceholder="请输入内容"
                :disabled ="inputQuery.ucstatus == 1 || inputQuery.ucstatus ==3"
                v-model="inputQuery.xemail"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>


      </el-card>








      <el-card>
        <div style="float: right; text-align: right; margin-bottom: 8px">
          <el-button
            type="primary"
            size="mini"
            icon="search"
            @click="addCert()"
            :disabled ="inputQuery.ucstatus == 1 || inputQuery.ucstatus ==3"
            style="text-align: right"
          >添加资质证书
          </el-button>
        </div>

        <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 | statusFilterType">
                {{ 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"
                :disabled ="inputQuery.ucstatus == 1 || inputQuery.ucstatus ==3"
                @click.native="addCert(scope.row)"
              >编辑</el-button
              >
              <el-button
                type="text"
                size="small"
                @click.native="showImgViewer(scope.row)"
              >预览</el-button
              >
              <el-button
                type="text"
                size="small"
                :disabled ="inputQuery.ucstatus == 1 || inputQuery.ucstatus ==3"
                @click.native="deleteCompanyCert(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-card>

      <el-dialog
        :title="formMap[formName]"
        :visible.sync="addCertVisible"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        width="60%"
        v-if="addCertVisible"
        append-to-body
        @close="closeLocalDialog"
        :before-close="closeLocal"
      >
        <companyAddCert
          :closeDialog="closeLocalDialog"
          :inputQuery="inputQuery"
          :addType="addType"
          :editTye="editTye"
          :ucId="ucId"
        ></companyAddCert>
      </el-dialog>
      <el-image-viewer
        v-if="imgViewerVisible"
        style="z-index: 9999"
        :on-close="closeImgViewer"
        :url-list="imgList"
      />





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





<script>
import companyAddCert from "@/views/purchase/cert/supCertAddDialog";
import {insertInitial,saveAllInfo} 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 {isBlank} from "@/utils/strUtil";
import {encrypts} from "@/api/login";




export default {
  name: "supCompanyEdit",
  data() {
    return {
      BASE_URL: process.env.VUE_APP_BASE_API,
      inputQuery: {
        ucstatus:0,
        formData:{},
      },
      headers: {},
      imgViewerVisible: false,
      imgList: [],
      fromOptions: [],
      classesDisplay: false,
      corpLoading: false,
      mobile:"",
      selectedOptions: [],
      query:{
        page: 1,
        limit: 20,
      },
      upId:"",
      urId:"",
      ucId:"",
      rules: {
        companyName: [
          {
            required: true,
            message: "请输入企业名称",
            trigger: "blur",
          },
        ],
        creditNum: [
          {
            required: true,
            message: "请输入统一社会信用代码",
            trigger: "blur",
          },
        ],
        bussinessStatus: [
          {
            required: true,
            message: "请选择企业类别",
            trigger: "change",
          },
        ],
        name: [
          {
            required: true,
            message: "请输入姓名",
            trigger: "change",
          },
        ],
        tel: [
          {
            required: true,
            message: "请输入电话",
            trigger: "change",
          },
        ],
        contacts: [
          {
            required: true,
            message: "请输入联系人",
            trigger: "change",
          },
        ],
        mobile: [
          {
            required: true,
            message: "请输入联系电话",
            trigger: "change",
          },
        ],
        email: [
          {
            required: true,
            message: "请输入邮箱",
            trigger: "change",
          },
        ],
        legalIdCard: [
          {
            required: true,
            message: "请输入法人身份证号",
            trigger: "change",
          },
        ],
        legalPerson: [
          {
            required: true,
            message: "请输入法人名称",
            trigger: "change",
          },
        ],
        registerAddress: [
          {
            required: true,
            message: "请输入注册地址",
            trigger: "change",
          },
        ],
        realName: [
          {
            required: true,
            message: "请输入注册人名称",
            trigger: "change",
          },
        ],
        fmobile: [
          {
            required: true,
            message: "请输入法人电话",
            trigger: "change",
          },
        ],
        qq: [
          {
            required: true,
            message: "请输入系统负责人qq",
            trigger: "change",
          },
        ],
        weChat: [
          {
            required: true,
            message: "请输入系统负责人微信",
            trigger: "change",
          },
        ],
        xemail: [
          {
            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",
      certList: [],
      certTotal: 0,
      certLoading: false,
      addCertVisible: false,
      certType: 1,
      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,
      },
      productList: [],
      productTotal: 0,
      productLoading: false,
      uuid: null,
      companyApplyUpdateVisible: false,
      explainCertVisible: false,
      explainMsg: "",
      companyEditDisabled: true,
      companyEditButtonStr: "编辑",
      addType: "1", //证书类型：1:供应商；2.生产企业；3.产品品种
      editTye: 1,
      checkFlag: {
        0: "未认证",
        1: "通过",
        2: "已拒绝",
        3: "待审核",
      },
      checkSupFlag: {
        0: "未认证",
        1: "通过",
        2: "已拒绝",
        3: "待审核",
      },
      statusFlag: {
        1: "有效",
        0: "失效",
      },
      formName: 1,
      formMap: {
        1: "新增本企业资质证书",
        2: "编辑本企业资质证书",
      },
      selectCertVisible: false,
    };
  },

  created() {

    this.yz();
  //  this.getInfo();



  },
  components: { companyAddCert,ElImageViewer
  },

  methods: {
    onModifySubmit(val){
      let mess ="";
      if(this.$isNotBlank(val)){
         mess='审核提交';
      }else{
        mess='草稿保存'
      }
      this.$confirm("是否"+mess, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(()=>{
      this.inputQuery.upId=this.upId;
      this.inputQuery.urId=this.urId;
      this.inputQuery.ucId=this.ucId;
      this.inputQuery.list=this.certList;
      if(this.$isNotBlank(val)){
        this.inputQuery.key=val;
      }
      saveAllInfo(this.inputQuery)
        .then((res)=>{
          if(res.code = 20000){
            this.$message.success("提交成功");
            this.getInfo();
          }else{
            this.$message.error(res.message);
          }
        })
      })

    },



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

      })
    },

    yz(){
      var phoneReg = /^[1][3,4,5,7,8][0-9]{9}$/;
      let param={
        mobile:this.$route.query.mobile,
        captcha:this.$route.query.captcha,
      }
      encrypts(param).then((res)=>{
        if(res.code == 20000){
          if(phoneReg.test(res.data.mobile) && res.data.captcha.length == 6) {
            this.mobile = res.data.mobile;
            this.inputQuery.mobile = res.data.mobile;
            this.getInfo();
          }
        }else{
          this.$router.push({path:"/404"})
        }
      })

    },

    getInfo(){
      let param ={
        mobile :this.mobile
      }
      insertInitial(param)
        .then((res)=>{
          if(!isBlank(res.data['registComPerResponse'])){
            this.inputQuery =res.data['registComPerResponse'];
            // this.upId=res.data['registComPerResponse'].upId;
            this.urId=res.data['registComPerResponse'].id;
            this.ucId=res.data['registComPerResponse'].ucId;
          }else{
            // this.upId=res.data['upId'];
            this.urId=res.data['urId'];
            this.ucId=res.data['ucId'];
          }
          this.getCert();
        })


    },

    getCert(){
      this.query.businessId=this.ucId;
      filterCompanyCert( this.query)
        .then((res)=>{
          if(res.code == 20000){
            this.certList= res.data.list || [];
            this.certTotal = res.data.total;
          }
        })
    },
    certHandleCurrentChange(val){
      this.query.page = val.page;
      this.getCert();

    },

    addCert(row){
      if (this.$isNotBlank(row)) {
        this.formName = 2;
        this.inputQuery.formData = row;
        this.editTye = 2;
      }else{
        this.formName = 1;
        this.inputQuery.formData = {};
        this.editTye = 1;
      }
      this.addCertVisible = true;
    },
    closeLocalDialog() {
      this.addCertVisible = false;
      this.getCert();
    },
    closeLocal() {
      this.addCertVisible = false;
    },

    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);
    },

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

    statusType(status) {
      const statusMap = {
        0: "success",
        1: "danger",
      };
      return statusMap[status];
    },
  },
};
</script>
<style scoped>
.itemTag {
  float: left;
  text-align: left;
  margin-top: 10px;
  width: 120px;
}

.text {
  width: 100%;
  font-size: 13px;
  font-family: "Microsoft YaHei";
}

.el-card {
  margin: 15px 25%;
  width: 50%;

  /*transition: all .5s;*/
}

.el-row {
  display: flex;
  flex-wrap: wrap;
}

.el-col {
  border-radius: 4px;
  flex-wrap: wrap;
  margin: auto;

}
</style>
