<template>
  <div class="certification-management">
    <el-form :model="form" ref="form" :rules="rules" disabled class="certification-form" label-width="160px" :show-message="false">

      <div class="registry-info">

        <div class="title">
          注册信息
        </div>

        <div class="content">

          <div class="inner">

            <el-form-item label="账号：" prop="phone">
              <el-input v-model="form.phone"></el-input>
            </el-form-item>

            <el-form-item label="手机号码：" prop="phone">
              <el-input v-model="form.phone"></el-input>
            </el-form-item>

            <el-form-item label="姓名：" prop="userName">
              <el-input v-model="form.userName"></el-input>
            </el-form-item>

            <el-form-item label="性别：" prop="sex">
              <el-radio v-model="form.sex" label="0">男</el-radio>
              <el-radio v-model="form.sex" label="1">女</el-radio>
            </el-form-item>

            <el-form-item label="邮箱：" prop="email" style="margin:0px">
              <el-input v-model="form.email"></el-input>
            </el-form-item>

          </div>

        </div>

      </div>

      <div class="authentication-info">

        <div class="title">
          认证信息
        </div>

        <div class="content">

          <div class="inner">

            <el-form-item label="公司名称：" prop="companyName">
              <el-input v-model="form.companyName"></el-input>
            </el-form-item>

            <el-form-item label="统一社会信用代码：" prop="creditCode">
              <el-input v-model="form.creditCode"></el-input>
            </el-form-item>

            <el-form-item label="法定代表人：" prop="legalPerson">
              <el-input v-model="form.legalPerson"></el-input>
            </el-form-item>

            <el-form-item label="注册资本：" prop="registeredCapital" class="registered-capital">
              <el-input v-model="form.registeredCapital"></el-input>
              <span>万元</span>
            </el-form-item>

            <el-form-item label="成立日期：" prop="registeredDate">
              <el-input v-model="form.registeredDate"></el-input>
            </el-form-item>

            <el-form-item label="企业注册地：" prop="registeredAddress">
              <el-input v-model="form.registeredAddress"></el-input>
            </el-form-item>

            <el-form-item label="企业注册地：" prop="addressDetail" style="width:100%">
              <el-input v-model="form.addressDetail"></el-input>
            </el-form-item>

            <el-form-item label="营业执照扫描件：" prop="licenseUrl">
              <img v-if="form.licenseUrl" :src="form.licenseUrl" alt="">
            </el-form-item>

            <el-form-item label="法人代表身份证扫描件：" prop="cardUrl">
              <img v-if="form.licenseUrl" :src="form.cardUrl" alt="">
            </el-form-item>

            <el-form-item label="供应商类型选择：" prop="catId">
              <el-cascader v-model="form.catId" :options="options" disabled placeholder="" :props="props"></el-cascader>
            </el-form-item>

          </div>

        </div>

      </div>

    </el-form>

  </div>
</template>
<script>
import { getAuthenticationDetailApi, getSupplierTypeApi } from "@/api/authentication";
import { mapState } from "vuex";
export default {
  name: "certificationManagement",
  data() {
    return {
      form: {
        phone: "",
        userName: "",
        sex: "",
        email: "",
        companyName: "",
        creditCode: "",
        legalPerson: "",
        registeredCapital: "",
        registeredDate: "",
        addressDetail: "",
        registeredAddress: "",
        licenseUrl: "",
        cardUrl: "",
        catId: "",
      },
      rules: {
        "phone": [{ required: true }],
        "userName": [{ required: true }],
        "sex": [{ required: true }],
        "email": [{ required: true }],
        "companyName": [{ required: true }],
        "creditCode": [{ required: true }],
        "legalPerson": [{ required: true }],
        "registeredCapital": [{ required: true }],
        "registeredDate": [{ required: true }],
        "addressDetail": [{ required: true }],
        "registeredAddress": [{ required: true }],
        "licenseUrl": [{ required: true }],
        "cardUrl": [{ required: true }],
        "catId": [{ required: true }],
      },
      options: [],
      props: {
        value: "catId",
        label: "name"
      }
    };
  },
  //可访问data属性
  created() {
    this.getDetail();
  },
  //计算集
  computed: {
    ...mapState("user", {
      userInfo: state => state.userInfo
    })
  },
  //方法集
  methods: {
    async getDetail() {
      try {
        let type = await getSupplierTypeApi();
        if (type) {
          this.options = type?.data;
        }
        let res = await getAuthenticationDetailApi();
        if (res) {
          this.form = { ...this.form, ...this.userInfo, ...res.data };
        }
      } catch (error) {
        console.log(error);
      }
    }
  },
}
</script>
<style lang="scss" scoped>
.certification-management {
  width: 100%;
  height: 100%;

  .certification-form {
    // 注册信息
    .authentication-info,
    .registry-info {
      .title {
        color: #0081ff;
        font-size: 14px;
        font-weight: bold;
        height: 40px;
        line-height: 40px;
        padding: 0px 16px;
        box-sizing: border-box;
        border: 1px solid #eeeeee;
      }
      .content {
        border: 1px solid #eeeeee;
        border-top: none;
        display: flex;
        justify-content: center;
        padding: 16px;
        box-sizing: border-box;

        .inner {
          width: 80%;
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;

          ::v-deep .el-form-item {
            display: flex;
            width: 45%;

            .el-form-item__label {
              white-space: nowrap;
              min-width: 160px;
            }

            .el-form-item__content {
              flex: 1;
              margin: 0px !important;

              .el-cascader {
                width: 100%;
              }

              img {
                width: 100%;
                max-height: 200px;
              }
            }
          }
        }
      }
    }

    //  认证信息
    .authentication-info {
      .title {
        border-top: none;
      }

      .registered-capital {
        ::v-deep .el-form-item__content {
          & > span {
            position: absolute;
            right: 0;
            height: 100%;
            background: #aaaaaa;
            width: 20%;
            text-align: center;
          }

          .el-input__inner {
            padding-right: 20%;
          }
        }
      }
    }
  }
}
</style>
