<template>
  <div class="grid-content">
    <el-tabs v-model="activeName">
      <el-tab-pane label="个人基本信息" name="first">

        <el-form v-if="!isFill" ref="myformRef" label-suffix="：" :model="myForm" label-width="120px">
          <div style="padding-left: 40px"> 输入身份证绑定个人会员</div>
          <el-form-item label="身份证号" prop="idcCode">
            <el-input v-model="myForm.idcCode" placeholder="请输入身份证" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" round @click="handleBind">绑定</el-button>
          </el-form-item>
        </el-form>
        <el-form v-else label-suffix="：" label-width="120px">
          <el-form-item label="身份证号" prop="idcCode">
            {{ myForm.idcCode }}
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { getCurrentInstance, onMounted } from '@vue/runtime-core'
import { bind } from '@/apiPc/common'
import useUserStore from '@/store/modules/user'

const { proxy } = getCurrentInstance()
const activeName = ref('first')
const userStore = useUserStore()
const myForm = ref({
  idcCode: ''
})
const isFill = ref(false)

onMounted(() => {
  if (userStore.user?.perId) {
    isFill.value = true
    myForm.value = userStore.user
  } else {
    myForm.value = {
      idcCode: ''
    }
  }
})

function handleBind() {
  if (!myForm.value.idcCode) {
    proxy.$modal.msgError('请输入身份证号')
    return
  }

  bind(myForm.value).then(res => {
    proxy.$modal.msgSuccess('操作成功')
    isFill.value = true
    userStore.getInfoPc()
  })
}

</script>

<style scoped lang="scss">
.app-container {
  background: #F5F7F9;
}

.grid-content {
  background: #fff;
}

:deep(.el-tabs__nav-wrap) {
  padding: 0 15px;
}

</style>