<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" class="license-url">
              <img v-if="form.licenseUrl" :src="form.licenseUrl" alt="">
              <div class="img-model" v-if="form.licenseUrl">
                <i class="el-icon-full-screen" @click="viewImg(form.licenseUrl)"></i>
              </div>
            </el-form-item>

            <el-form-item label="法人代表身份证扫描件：" prop="cardUrl" class="card-url">
              <img v-if="form.licenseUrl" :src="form.cardUrl" alt="">
              <div class="img-model" v-if="form.licenseUrl">
                <i class="el-icon-full-screen" @click="viewImg(form.licenseUrl)"></i>
              </div>
            </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>

    <el-dialog :visible.sync="viewDialogStatus" width="650px" @close="viewDialogClose" :show-close="false" custom-class="view-dialog">
      <img :src="viewSrc">
      <span slot="footer">
        <el-button @click="viewDialogClose">关闭</el-button>
      </span>
    </el-dialog>

  </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"
      },
      viewSrc: "",
      viewDialogStatus: false
    };
  },
  //可访问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);
      }
    },
    viewImg(src) {
      this.viewSrc = src;
      this.viewDialogStatus = true;
    },
    viewDialogClose() {
      this.viewSrc = "";
      this.viewDialogStatus = false;
    }
  },
}
</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%;
                height: 100%;
              }
            }
          }

          ::v-deep .card-url,
          ::v-deep .license-url {
            .el-form-item__content {
              position: relative;
              height: 200px;

              &:hover .img-model {
                visibility: visible;
                opacity: 1;
              }

              .img-model {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.6);
                opacity: 0;
                visibility: hidden;
                transition: opacity 0.3s;

                & > i {
                  position: absolute;
                  left: 50%;
                  top: 50%;
                  transform: translate(-50%, -50%);
                  color: #fff;
                  font-size: 30px;
                  cursor: pointer;
                }
              }
            }
          }
        }
      }
    }

    //  认证信息
    .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%;
          }
        }
      }
    }
  }

  ::v-deep .view-dialog {
    display: flex;
    flex-direction: column;
    margin: 0 !important;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    max-height: 80%;
    overflow: hidden;

    .el-dialog__body {
      height: calc(100% - 100px);
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: auto;

      &>img {
        width: 100%;
      }
    }
  }

}
</style>
