<template>
  <!-- 用户信息填写 页面-->
  <el-card class="userInformation">
    <!-- 用户填写信息表单 -->
    <div
      style="
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: flex-end;
      "
    >
      <!-- 审核认证 -->
      <div
        style="    width: 100%;
    font-size: 30px;
    text-align: center;
}"
      >
        <span>审核状态:</span>
        <span> 已通过</span>
      </div>
      <!--  <el-form
          style="margin: 20px; width: 300px"
          label-width="80px"
          label-position="right"
          :model="certificationForm"
        >
          <h3 style="text-align: center">审核认证记录表ID</h3>
          <el-form-item label="操作类型">
            <el-input
              disabled
              v-model="certificationForm.operationType"
            ></el-input>
          </el-form-item>
          <el-form-item label="操作结果">
            <el-input
              disabled
              v-model="certificationForm.checkResult"
            ></el-input>
          </el-form-item>
          <el-form-item label="结果说明">
            <el-input
              disabled
              v-model="certificationForm.resultExplain"
            ></el-input>
          </el-form-item>
          <el-form-item label="记录时间">
            <el-input
              disabled
              v-model="certificationForm.createTime"
            ></el-input>
          </el-form-item>
          <el-form-item label="主键ID">
            <el-input
              disabled
              v-model="certificationForm.businessld"
            ></el-input>
          </el-form-item>
        </el-form> -->
      <!-- 企业信息 -->
      <el-form
        label-width="135px"
        :model="firmForm"
        :rules="rulesFirmForm"
        ref="firmForm"
        label-position="right"
        style="margin: 20px; width: 100%"
      >
        <h3 style="text-align: center">企业信息</h3>
        <el-form-item label="企业名称" prop="companyName">
          <el-input
            placeholder="请输入企业名称"
            v-model="firmForm.companyName"
          ></el-input>
        </el-form-item>
        <el-form-item label="社会统一信用号" prop="creditNum">
          <el-input
            placeholder="请输入企业统一社会信用号"
            v-model="firmForm.creditNum"
          ></el-input>
        </el-form-item>
        <el-form-item label="企业类型" prop="bussinessStatus">
          <el-select
            v-model="firmForm.bussinessStatus"
            placeholder="请选择企业类型"
          >
            <el-option label="生产企业" value="1"></el-option>
            <el-option label="流通企业" value="2"></el-option>
            <el-option label="医疗机构" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="法人名称" prop="legalPerson">
          <el-input
            placeholder="请输入法人名称"
            v-model="firmForm.legalPerson"
          ></el-input>
        </el-form-item>
        <el-form-item label="法人身份证号" prop="legalldCard">
          <el-input
            placeholder="请输入法人身份证号"
            v-model="firmForm.legalldCard"
          ></el-input>
        </el-form-item>
        <el-form-item label="注册地址" prop="registerAddress">
          <el-input
            placeholder="请输入注册地址"
            v-model="firmForm.registerAddress"
          ></el-input>
        </el-form-item>
        <el-form-item label="联系方式" prop="contactWay">
          <el-input
            placeholder="请输入联系方式"
            v-model="firmForm.contactWay"
          ></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input
            placeholder="请输入邮箱"
            v-model="firmForm.email"
          ></el-input>
        </el-form-item>
        <!-- <el-form-item label="注册状态" prop="checkStatus">
          <el-select disabled v-model="firmForm.checkStatus">
            <el-option label="未审核" value="0"></el-option>
            <el-option label="已审核" value="1"></el-option>
            <el-option label="未通过" value="2"></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="备注" prop="comments">
          <el-input v-model="firmForm.comments"></el-input>
        </el-form-item>

        <!-- 企业负责人信息 -->

        <h4 style="text-align: center">企业负责人信息</h4>
        <el-form-item label="姓名">
          <el-input placeholder="请输入姓名"></el-input> </el-form-item
        ><el-form-item label="电话">
          <el-input placeholder="请输入电话"></el-input> </el-form-item
        ><el-form-item label="手机">
          <el-input placeholder="请输入手机"></el-input> </el-form-item
        ><el-form-item label="QQ">
          <el-input placeholder="请输入QQ"></el-input> </el-form-item
        ><el-form-item label="微信">
          <el-input placeholder="请输入微信"></el-input> </el-form-item
        ><el-form-item label="邮箱">
          <el-input placeholder="请输入邮箱"></el-input>
        </el-form-item>
        <!-- <el-form-item>
          <el-button
            type="primary"
            class="bntNext"
            @click="submitfirmForm('firmForm')"
            >提交</el-button
          >
        </el-form-item> -->
      </el-form>
      <!-- 资质证书表格 -->
      <el-table :data="tableData" border>
        <el-table-column prop="date" label="证书名称"> </el-table-column>
        <el-table-column prop="name" label="证书编号"> </el-table-column>
        <el-table-column prop="province" label="起始日期"> </el-table-column>
        <el-table-column prop="city" label="有效期至"> </el-table-column>
        <el-table-column prop="address" label="证书文件"> </el-table-column>
        <el-table-column label="操作" fixed="right" width="140px">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small"
              >查看</el-button
            >
            <el-button type="text" size="small">编辑</el-button>
            <el-button type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-button-group
        style="width: 100%; display: flex; justify-content: center"
      >
        <el-button type="primary" style="margin: 10px 50px">注册</el-button>
        <el-button type="primary" style="margin: 10px 50px">修改</el-button>
      </el-button-group>
    </div>
  </el-card>
</template>

<script>
import { registerSave } from "@/api//login";
export default {
  name: "userInformation",
  data() {
    //限制输入正确的手机号码格式
    const validatePhone = (rule, value, callback) => {
      if (/^1[3-9]\d{9}$/.test(value) === false) {
        callback(new Error("请输入正确的手机号码"));
      } else {
        // 校验通过
        callback();
      }
    };
    //限制输入正确的邮箱
    const validateEmail = (rule, value, callback) => {
      if (
        /^([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/.test(
          value
        ) === false
      ) {
        callback(new Error("请输入正确的邮箱地址"));
      } else {
        // 校验通过
        callback();
      }
    };
    //限制统一信用号
    const validatePatt = (rule, value, callback) => {
      if (
        /^([0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}|[1-9]\d{14})$/.test(
          value
        ) === false
      ) {
        callback(new Error("请输入有效的的社会统一信用号"));
      } else {
        // 校验通过
        callback();
      }
    };
    //限制身份证号码
    const validateIdentity = (rule, value, callback) => {
      if (/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(value) === false) {
        callback(new Error("请输入正确的身份证号码"));
      } else {
        // 校验通过
        callback();
      }
    };
    return {
      checkResult: "已通过", //审核结果
      certificationForm: {
        operationType: "新用户审核/企业认证", //操作类型
        checkResult: "已通过", //操作结果
        resultExplain: "通过通过", //结果说明
        createTime: "20250101", //记录时间
        businessld: "1111", //被操作表主键ID,企业信息表
      },
      firmForm: {
        mobile: null, //手机号码
        companyName: null, //企业名称
        creditNum: null, //社会信用号
        bussinessStatus: null, //企业类型
        legalPerson: null, //法人名称
        legalldCard: null, //法人身份证号
        registerAddress: null, //注册地址
        contactWay: null, //练习方式
        email: null, //邮箱
        //checkStatus: null, //注册状态
        comments: null, //备注
      },
      rulesFirmForm: {
        mobile: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          { validator: validatePhone, trigger: "blur" },
        ],
        companyName: [
          { required: true, message: "请输入企业名称", trigger: "blur" },
        ],
        creditNum: [
          { required: true, message: "请输入社会信用号", trigger: "blur" },
          { validator: validatePatt, trigger: "blur" },
        ],
        bussinessStatus: [
          { required: true, message: "请选择企业类型", trigger: "change" },
        ],
        legalPerson: [
          { required: true, message: "请输入法人名称", trigger: "blur" },
        ],
        legalldCard: [
          { required: true, message: "请输入法人身份证号", trigger: "blur" },
          { validator: validateIdentity, trigger: "blur" },
        ],
        registerAddress: [
          { required: true, message: "请输入注册地址", trigger: "blur" },
        ],
        contactWay: [
          { required: true, message: "请输入联系方式", trigger: "blur" },
          { validator: validatePhone, trigger: "blur" },
        ],
        email: [
          { required: true, message: "请输入邮箱", trigger: "blur" },
          { validator: validateEmail, trigger: "blur" },
        ],
        checkStatus: [
          { required: true, message: "注册状态", trigger: "change" },
        ],
      },
      tableData: [
        {
          date: "资质证书1",
          name: "111111",
          province: "20201010",
          city: "20301010",
          address: "",
        },
        {
          date: "资质证书1",
          name: "111111",
          province: "20201010",
          city: "20301010",
          address: "",
        },
        {
          date: "资质证书1",
          name: "111111",
          province: "20201010",
          city: "20301010",
          address: "",
        },
      ],
    };
  },
  created() {},
  methods: {
    //用户信息填写  表单
    submitFirmForm(firmForm) {
      this.$refs[firmForm].validate((valid) => {
        if (valid) {
          const data = this.firmForm;
          registerSave(data).then((response) => {
            if (response.code === 20000) {
              this.$message.error("提交成功,请等待审核");
            } else {
              this.$message.error(response.message);
            }
          });
        }
      });
    },
    //资质证书
    handleClick(row) {
      console.log(row);
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss">
.userInformation {
  background-image: url("../assets/login.jpg");
  .el-card__body {
    display: flex;
    justify-content: flex-end;
    margin-right: 50px;
    .el-select {
      width: 100%;
    }
  }
}
</style>
