<template>
  <div class="flex items-center">
    <div style="font-size: 16px; font-weight: 600; color: var(--sy-black)">
      认证信息
    </div>
    <div
      style="font-size: 14px; font-weight: 400; color: var(--sy-gray)"
      class="ml-3 flex-grow"
    >
      认证信息在获得认证后将不能修改
    </div>
    <div style="font-size: 16px; font-weight: 600; color: #f5b82b">
      已实名认证-审核通过
    </div>
  </div>
  <div style="height: 1px; background: #f0f0f0; margin-top: 15px"></div>
  <ElForm
    :rules="rules"
    :model="model"
    label-position="top"
    ref="formRef"
    class="mx-[147px] mt-10"
  >
    <div v-if="globalState.userInfos.auth_type === 1">
      <CustomizeFormItem prop="name" label="姓名">
        <syDialogInput :value="userInfo.name" class="w-full" :disabled="true" />
      </CustomizeFormItem>
      <CustomizeFormItem prop="name" label="身份证号"
        ><syDialogInput
          :value="userInfo.id_card"
          class="w-full"
          :disabled="true"
        />
      </CustomizeFormItem>
      <CustomizeFormItem prop="name" label="银行卡号"
        ><syDialogInput
          :value="userInfo.bank_card"
          class="w-full"
          :disabled="true"
        />
      </CustomizeFormItem>
      <CustomizeFormItem prop="name" label="银行预留手机号"
        ><syDialogInput
          :value="userInfo.bank_phone"
          class="w-full"
          :disabled="true"
        />
      </CustomizeFormItem>
    </div>

    <div v-if="globalState.userInfos.auth_type === 2">
      <CustomizeFormItem :required="true" prop="name" label="企业注册名称">
        <syDialogInput
          :value="companyInfo.name"
          class="w-full"
          :disabled="true"
        />
      </CustomizeFormItem>
      <CustomizeFormItem :required="true" prop="name" label="统一信用代码"
        ><syDialogInput
          :value="companyInfo.uscd"
          class="w-full"
          :disabled="true"
        />
      </CustomizeFormItem>
      <CustomizeFormItem :required="true" prop="name" label="法人姓名"
        ><syDialogInput
          :value="companyInfo.corporations_name"
          class="w-full"
          :disabled="true"
        />
      </CustomizeFormItem>
    </div>
  </ElForm>
  <div
    style="font-size: 16px; font-weight: 600; color: var(--sy-black)"
    v-if="globalState.userInfos.auth_type === 2"
  >
    认证信息
  </div>
  <div
    style="height: 1px; background: #f0f0f0; margin-top: 15px"
    v-if="globalState.userInfos.auth_type === 2"
  ></div>
  <ElForm
    v-if="globalState.userInfos.auth_type === 2"
    :rules="rules"
    :model="model"
    label-position="top"
    ref="formRef"
    class="mx-[147px] mt-10"
  >
    <CustomizeFormItem :required="true" prop="name" label="对公户名"
      ><syDialogInput
        :value="companyInfo.tp_name"
        class="w-full"
        :disabled="true"
      />
    </CustomizeFormItem>
    <CustomizeFormItem :required="true" prop="name" label="对公账户"
      ><syDialogInput
        :value="companyInfo.bank_card"
        class="w-full"
        :disabled="true"
      />
    </CustomizeFormItem>
    <CustomizeFormItem :required="true" prop="name" label="开户银行"
      ><syDialogInput
        :value="companyInfo.bank_name"
        class="w-full"
        :disabled="true"
      />
    </CustomizeFormItem>
    <CustomizeFormItem :required="true" prop="name" label="开户城市"
      ><syDialogInput
        :value="companyInfo.city"
        class="w-full"
        :disabled="true"
      />
    </CustomizeFormItem>
    <CustomizeFormItem :required="true" prop="name" label="开户支行"
      ><syDialogInput
        :value="companyInfo.sub_branch"
        class="w-full"
        :disabled="true"
      />
    </CustomizeFormItem>
  </ElForm>
</template>
<script lang="ts" setup>
import CustomizeFormItem from "@/components/Form/CustomizeFormItem.vue";
import { ElForm, FormInstance } from "element-plus";
import { ref, reactive, onMounted } from "vue";
import { syDialogInput } from "cqk-sy-ui";
import { companyStatus, get } from "@/service/Api.service";
import { globalState } from "@/store/state";

const formRef = ref<FormInstance>();

const userInfo = ref<any>({});
const companyInfo = ref<any>({});
const rules = ref({});

onMounted(async () => {
  const res = await get(JSON.parse(String(sessionStorage.getItem("user"))).id);
  userInfo.value = res!.data;

  companyInfo.value = (
    await companyStatus(JSON.parse(String(sessionStorage.getItem("user"))).id)
  )?.data;
});

const model = reactive({});
</script>
<style scoped lang="scss"></style>
