<template>
  <!-- 本企业资质页面 -->
  <div>
    <div slot="header" style="font-weight: bold;margin-top: 35px">
      <div style="text-align: center">
        <img
          alt="element-logo"
          style="width: 8%"
          src="../assets/logo/logo.png"
        />
      </div>
      <h3 style="text-align: center;font-size: larger ;color:#707070 ">医疗器械UDI追溯平台</h3>
      <h3 style="text-align: center;font-size: larger ;color:#707070 ">新用户注册</h3>
    </div>
    <el-form
      :model="inputQuery"
      :rules="rules"
      style="margin-top: 35px"
      ref="inputQuery"
      label-width="150px"
    >

      <el-card class="el-card">
        <div slot="header" class="clearfix">
          <span>审核信息:</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>
          </div>
        </div>
        <el-row
          :gutter="20"
          class="el-row"
          type="flex"
        >
          <el-col :span="15" class="el-col">

            <el-form-item
              label="审核结果:"
              prop="reason"
            >
               <span>
           <el-tag :type="inputQuery.ucstatus | statusFilterType">
             {{ checkSupFlag[inputQuery.ucstatus] }}
              </el-tag>
          </span>
            </el-form-item>


          </el-col>
        </el-row>
        <el-row
          :gutter="20"
          class="el-row"
          type="flex"
        >
          <el-col :span="15" class="el-col">
            <el-form-item
              label="审核说明:"
              prop="reason"
            >
              <el-input
                size="small"
                disabled
                v-model="inputQuery.reason"
              ></el-input>
            </el-form-item>
          </el-col>


        </el-row>
      </el-card>
      <el-card class="el-card">
        <div slot="header" class="clearfix">
          <span>本企业信息:</span>

        </div>
        <!--        <el-row-->
        <!--          :gutter="20"-->
        <!--          class="el-row"-->
        <!--          type="flex"-->
        <!--        >-->
        <!--          <el-col :span="15" class="el-col">-->

        <!--            <el-form-item-->
        <!--              label="本企业信息审核状态:"-->
        <!--              prop="reason"-->
        <!--            >-->
        <!--               <span>-->
        <!--           <el-tag :type="inputQuery.ucstatus | statusFilterType">-->
        <!--             {{ checkSupFlag[inputQuery.ucstatus] }}-->
        <!--              </el-tag>-->
        <!--          </span>-->
        <!--            </el-form-item>-->


        <!--          </el-col>-->
        <!--        </el-row>-->

        <el-row
          :gutter="20"
          class="el-row"
          type="flex"
        >
          <el-col :span="15" class="el-col">
            <el-form-item
              label=" 企业名称:"

              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="15" class="el-col">
            <el-form-item
              label=" 社会信用号:"

              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="15" class="el-col">
            <el-form-item label="企业类型:" 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="15" class="el-col">

            <el-form-item
              label=" 法人名称 :"

              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="15" class="el-col">
            <el-form-item
              label="法人身份证号 :"

              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="15" class="el-col">

            <el-form-item
              label="注册地址:"

              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="15" class="el-col">
            <el-form-item label="注册手机:" 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="15" class="el-col">
            <el-form-item label="注册人名称:" 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="15" class="el-col">
            <el-form-item label="法人联系电话:" 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="15" class="el-col">
            <el-form-item label="邮箱:" 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" style="margin-top: 0px">-->
        <!--  <el-col :span="20" class="el-col">-->
        <!--    <el-form-item label="备注:" 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 slot="header" class="clearfix">
          <span>
            系统负责人信息:
          </span>
        </div>


        <el-row
          :gutter="20"
          class="el-row"
          type="flex"
          style="margin-top: 10px"
        >
          <el-col :span="15" class="el-col">
            <el-form-item
              label="系统负责人姓名:"

              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="15" class="el-col">
            <el-form-item
              label="系统负责人电话:"

              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="15" class="el-col">
            <el-form-item
              label="系统负责人QQ:"

              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="15" class="el-col">
            <el-form-item
              label="系统负责人微信:"

              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="15" class="el-col">
            <el-form-item
              label="系统负责人邮箱:"

              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 slot="header" class="clearfix">
          <span>
            资质证书信息:
          </span>

          <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>

        </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" show-overflow-tooltip></el-table-column>
          <el-table-column label="证书编号" prop="code" show-overflow-tooltip></el-table-column>
          <el-table-column label="生效日期" prop="validDate" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column label="失效日期" prop="expireDate" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column label="确认状态" prop="checkStatus" width="80" show-overflow-tooltip>
            <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="130">
            <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"
          :mobile="mobile"
        ></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/userCertAddDialog";
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_UPLOAD_BASE_API,
      inputQuery: {
        ucstatus: 0,
        formData: {},
      },
      headers: {},
      imgViewerVisible: false,
      imgList: [],
      fromOptions: [],
      classesDisplay: false,
      corpLoading: false,
      mobile: "",
      selectedOptions: [],
      query: {
        mobile: null,
        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.$refs["inputQuery"].validate((valid) => {
        if (valid) {
          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.query.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) {
      let newWindow = window.open();
      newWindow.document.write(row.filePath)
      // 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 20%;
  width: 60%;
  /*transition: all .5s;*/
}

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

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

}

.el-form-item {
  margin-top: 5px;
  margin-bottom: 4px;
}
</style>
