<template>
  <Mask :width="650" :height="580" :is-show="show" @close="show=false" :title="id?'患者编辑':'患者建档'"
        :show-footer="true">
    <template #default>
      <el-scrollbar>
        <div class="content">
          <el-form
              :model="ruleForm"
              label-width="auto"
              :rules="rules"
              ref="ruleFormRef"
          >
            <el-row>
              <el-col :span="12">
                <el-form-item label="会员等级">
                  <el-select
                      v-model="ruleForm.levelId"
                      placeholder="等级"
                      size="default"
                      style="width: 100%"
                  >
                    <el-option
                        v-for="item in levelList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="姓名" prop="name">
                  <el-input v-model="ruleForm.name" placeholder="输入真实姓名"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="性别" prop="sex">
                  <el-radio-group v-model="ruleForm.sex">
                    <el-radio :value="1">男</el-radio>
                    <el-radio :value="2">女</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="年龄" prop="age">
                  <el-input v-model.number="ruleForm.age"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="手机号" prop="phone">
                  <el-input v-model="ruleForm.phone" placeholder="输入电话号码"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="证件类型" prop="certType">
                  <el-select
                      v-model="ruleForm.certType"
                      placeholder="证件类型"
                      size="default"
                      style="width: 100%"
                  >
                    <el-option
                        v-for="item in cardTypeList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="证件号" prop="certNo">
                  <el-input v-model="ruleForm.certNo" placeholder="证件号"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="生日" prop="birthday">
                  <el-date-picker style="width: 100%" v-model="ruleForm.birthday" type="date" placeholder="选择日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="民族">
                  <el-select
                      v-model="ruleForm.nation"
                      placeholder="民族选择"
                      size="default"
                      style="width: 100%"
                  >
                    <el-option
                        v-for="item in antysList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="来源">
                  <el-select
                      v-model="ruleForm.source"
                      placeholder="来源选择"
                      size="default"
                      style="width: 100%"
                  >
                    <el-option
                        v-for="item in options1"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="地区">
              <SelectArea v-model="ruleForm.area" style="width: 100%"></SelectArea>
            </el-form-item>
            <el-form-item label="详细地址">
              <el-input v-model="ruleForm.address"></el-input>
            </el-form-item>
            <el-form-item label="备注">
              <el-input v-model="ruleForm.remark"></el-input>
            </el-form-item>
            <el-form-item label="既往史">
              <el-input v-model="ruleForm.beforeMedicalHistory"></el-input>
            </el-form-item>
            <el-form-item label="过敏史">
              <el-input v-model="ruleForm.allergyHistory"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </el-scrollbar>
    </template>
    <template #footer>
      <div class="bottom">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="submitForm">
          保存
        </el-button>
      </div>
    </template>
  </Mask>
</template>
<script setup lang="ts">
import {onMounted, ref} from "vue"
import {ElForm, ElFormItem, ElSelect, ElOption, ElRow, ElCol, ElRadioGroup, type FormInstance} from "element-plus";
import SelectArea from "@/components/SelectArea.vue";
import {post} from "@/utils/request.ts";
import Mask from "@/components/common/Mask.vue";
import psnCertTypes from "@/assets/config/directory/psnCertTypes.json"
import antys from '@/assets/config/directory/antys.json'


const ruleFormRef = ref<FormInstance>()
const id = ref<any>(null)
const show = ref<boolean>(false)
const emit = defineEmits(['close'])
const close = () => {
  ruleForm.value = {}
  id.value = ''
  show.value = false
  emit('close')
}

// form表单数据
let ruleForm = ref<any>({
  exp: 0,
  phone: '',
  name: '',
  sex: '',
  age: null,
  birthday: '',
  certNo: '',
  source: '',
  nation: '',
  area: '',
  address: '',
  remark: '',
  beforeMedicalHistory: '',
  allergyHistory: '',
  certType: '',
  levelId: ''
})
const antysList= ref<any>(Object.entries(antys).map(([id, name]) => ({id, name})))
const cardTypeList = ref<any>(Object.entries(psnCertTypes).map(([id, name]) => ({id, name})))
const options1 = [
  {
    value: '员工推荐',
    label: '员工推荐',
  },
  {
    value: '顾客推荐',
    label: '顾客推荐'
  },
  {
    value: '线上活动',
    label: '线上活动'
  },
  {
    value: '线下活动',
    label: '线下活动'
  },
  {
    value: '其他',
    label: '其他'
  }
]
const submitForm = async () => {
  let formEl = ruleFormRef.value
  if (!formEl) return
  await formEl.validate((valid: any) => {
    if (valid) {
      if (ruleForm.value.id) {
        post("vip/vip/update", {vipInfo: ruleForm.value}).then(() => {
          close()
        })
      } else {
        post("vip/vip/create", {vipInfo: ruleForm.value}).then(() => {
          close()
        })
      }

    }
  })
}
const levelName = ref('')
const rules = ref<any>({
  name: [
    { required: true, message: '姓名不能为空', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '手机号不能为空', trigger: 'blur' }
  ],
  sex: [
    { required: true, message: '性别不能为空', trigger: 'change' }
  ],
  birthday: [
    { required: true, message: '请选择生日', trigger: 'change' }
  ],
  certType: [
    { required: true, message: '请选择证件类型', trigger: 'change' }
  ],
  certNo: [
    { required: true, message: '请输入证件号', trigger: 'blur' }
  ],
  age: [
    { required: true, message: '年龄不能为空', trigger: 'blur'},
    { type: 'number', message: '年龄必须为数字', trigger: 'blur' }
  ],
})
const init = (_id: any) => {
  id.value = _id
  levelName.value = ''
  show.value = true
  if (!id.value) {
    ruleForm.value = {}
    return
  } else {
    post("vip/vip/get", {id: _id}).then((res: any) => {
      ruleForm.value = res
      ruleForm.value.area = JSON.parse(ruleForm.value.area)
      ruleForm.value.levelId=ruleForm.value.levelId==0?null:ruleForm.value.levelId
      if (!res.levelId) return
      post("vip/vipLevel/get", {levelId: res.levelId}).then((res: any) => {
        levelName.value = res.name
      })
    })
  }


}
const levelList = ref<any>([])
const getLevelConfig = () => {
  post("vip/vipLevel/list").then((res: any) => {
    levelList.value = res
  })
}
onMounted(() => {
  getLevelConfig()
})
defineExpose({init})
</script>
<style scoped lang="scss">
.content {
  padding: 20px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;

}

.bottom {
  height: 100%;
  display: flex;
  justify-content: flex-end;
  padding: 20px;
  align-items: center;
}
</style>