<template>
  <div>
    <div class="panel-box">
      <h3 class="train-h3">个人信息</h3>
      <div class="panel-body">
        <el-form
          ref="ruleFormRef"
          label-width="100"
          class="signForm"
          :model="form"
          style="width: 100%;"
        >
          <el-row>
            <el-col :span="8" :offset="2">
              <el-form-item label="&nbsp;" prop="photo" required>
                <image-upload
                  v-model="form.photo"
                  disabled
                  class="threeFour"
                  :limit="1"
                />
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="会员编号" prop="perCode" required>
                <el-input
                  v-model="form.perCode"
                  readonly
                  placeholder="请输入会员编号"
                />
              </el-form-item>
              <el-form-item label="有效期" prop="validityDate" required>
                <el-input
                  v-model="form.validityDate"
                  readonly
                  placeholder="请输入有效期"
                />
              </el-form-item>
              <el-form-item label="姓名" prop="name" required>
                <el-input v-model="form.name" placeholder="请输入姓名" readonly />
              </el-form-item>
              <el-form-item label="性别" prop="sex" required>
                <el-radio-group v-model="form.sex" disabled>
                  <el-radio value="0" size="large">男</el-radio>
                  <el-radio value="1" size="large">女</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="证件类型" prop="idcType" required>
                <el-select
                  v-model="form.idcType"
                  disabled
                  style="width: 100%;"
                  placeholder="请选择证件类型"
                >
                  <el-option
                    v-for="item in certificates"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="证件号码" prop="idcCode" required>
                <el-input
                  v-model="form.idcCode"
                  readonly
                  placeholder="请输入证件号码"
                />
              </el-form-item>
              <el-form-item label="出生日期" prop="birth" required>
                <el-date-picker
                  v-model="form.birth"
                  readonly
                  type="date"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  placeholder="请选择出生日期"
                  style="width: 100%;"
                />
              </el-form-item>
              <el-form-item label="联系方式" prop="phone" required>
                <el-input v-model="form.phone" placeholder="请输入联系方式" readonly />
              </el-form-item>
              <el-form-item label="所在地区" prop="cityName" required>
                <el-input v-model="form.cityName" placeholder="请输入所在地区" readonly />
              </el-form-item>
              <el-form-item label="详细地址" prop="address" required>
                <el-input v-model="form.address" placeholder="请输入详细地址" readonly />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>

    </div>
    <div class="panel-footer text-center">
      <el-button class="back" type="" round @click="prev">上一步</el-button>
      <el-button type="primary" round @click="next">下一步</el-button>
    </div>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue'


const emit = defineEmits(['prev', 'next'])

const props = defineProps({
  personal: {
    type: Object,
    default: () => {}
  }
})
const form = computed(() => props.personal)
const certificates = ref([
  {
    value: '0',
    label: '居民身份证'
  },
  {
    value: '1',
    label: '护照'
  },
  {
    value: '2',
    label: '其他'
  }
])

function prev() {
  emit('prev')
}

function next() {
  emit('next')
}

</script>

<style scope lang="scss">
.panel-box{
  border:1px solid #F5766A;
  padding:10px 20px;
}
.train-h3{
  font-size: 16px;
  font-weight: 600;
  color: var(--el-color-primary);
  padding-left: 20px;
  border-left: 3px solid var(--el-color-primary) ;
 }
.back{
  border:1px solid var(--el-color-primary) ;
  color:var(--el-color-primary)
}

.app-container {
  padding: 0;
  background: #f5f7f9;
}

.panel-footer .el-button--success {
  background: linear-gradient(270deg, #39dba7, #38ef7d);
  border: none;
  padding: 0 40px;
  font-size: 16px;
}

.signForm {
  .el-form-item__label {
    color: #4c5359;
  }
}

.tip {
  font-size: 13px;
  color: #999;
  margin: 10px 0;

  i {
    color: red;
    margin: 0 4px 0 0;
  }
}

.threeFour {
  width: 100%;
}

:deep(.el-upload--picture-card) {
  width: 120px;
  height: 160px;
}

:deep(.el-upload-list--picture-card .el-upload-list__item) {
  width: 120px;
  height: 160px;
}

.red {
  color: #f56c6c;
}
</style>