<template>
  <div class="component-card-container">
    <div class="component-card-title">基础组件封装 使用描述</div>
    {{ validateObj }}
    <el-collapse v-model="activeNames">
      <el-collapse-item title="Form表单封装" name="1">
        <div class="left-wrap">
          <div class="from-wrap">
            <IdentityCard v-model="formData.identity" prop="identity" :isRequired="true"
              @validateStatus="changeValidate" placeholder="请输入身份证号"></IdentityCard>
            <Phone v-model="formData.phone" prop="phone" @blur="blurTest()" maxlength="11" show-word-limit
              @validateStatus="changeValidate"></Phone>
            <Email v-model="formData.email" prop="identity" @validateStatus="changeValidate" placeholder="请输入邮箱">
            </Email>
            <el-button type="success" @click="validateData()">一键校验form</el-button>
          </div>
        </div>
        <div class="right-wrap">
          <pre>
            1.正常引入组件随着父级元素自适应宽度
            import IdentityCard from '@/components/From/IdentityCard/index'
            import Phone from '@/components/From/Phone/index'
            2.使用组件 已把校验封装到组件里 支持element 属性 及 事件
            3.*正常使用组件 如需使用 required 请单独传入【 :isRequired="true" 】 element bug避免校验出现英文的情况

            4. 如果需要 一键 校验表单 请调用 validateData() 方法 返回Boolean值
          </pre>
        </div>
      </el-collapse-item>
      <el-collapse-item title="民族选择组件" name="2">
        <div>next</div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script setup>

import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus';
import IdentityCard from '@/components/From/IdentityCard/index'
import Phone from '@/components/From/Phone/index'
import Email from '@/components/From/Email/index'
const activeNames = ref(['1'])
const formData = ref({})

const blurTest = (e) => {
}

/****一键校验 bengin*****/
const validateObj = ref({})
const changeValidate = (e) => {
  const [key, value] = [...Object.entries(e)[0]]
  validateObj.value[key] = value;
  return !Object.values(validateObj.value).includes(false)
}
const verifySuccess = computed(() =>
  !Object.values(validateObj.value).includes(false)
)
const validateData = () => {
  if (verifySuccess.value) {
    ElMessage.success("校验通过")
  } else {
    ElMessage.error("校验失败")
  }
}
/****校验代码end*****/

</script>
<style lang="scss" scoped>
.component-card-container {
  .component-card-title {
    padding-bottom: 20px;
  }

  .from-wrap {
    width: 300px;
  }

  ::v-deep .el-collapse-item__content {
    display: flex;
    justify-content: flex-start;

    .left-wrap {
      width: 350px;
      @include text-overflow;
    }

    .right-wrap {
      width: 700px;
    }
  }
  .el-collapse {
    --el-collapse-border-color:green;
  }
}
</style>
