<template>
  <Mask :is-show="isShow" width="800" :height="500" title="挂号" @close="close" :show-footer="true">

    <div style="padding:0 24px 24px">
      <el-form
          :model="edit_data"
          label-width="auto"
          :rules="rules"
          ref="form"
      >
        <el-descriptions
            border
            direction="vertical"
            label-width="100"
            :column="4"
            style="margin-top: 20px"
        >
          <!--          <el-descriptions-item label="结算方式">-->
          <!--            <el-form-item prop="gender">-->
          <!--              <el-radio-group v-model="edit_data.type">-->
          <!--                <el-radio value="1">医保</el-radio>-->
          <!--                <el-radio value="2">自费</el-radio>-->
          <!--              </el-radio-group>-->
          <!--            </el-form-item>-->
          <!--          </el-descriptions-item>-->
          <el-descriptions-item label="名称">
            <el-form-item prop="name">
              <el-input v-model="edit_data.name" placeholder="请输入名称" clearable></el-input>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item label="性别">
            <el-form-item prop="gender">
              <el-radio-group v-model="edit_data.gender">
                <el-radio value="1">男</el-radio>
                <el-radio value="2">女</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item label="年龄">
            <el-form-item prop="age">
              <el-input v-model.number="edit_data.age" placeholder="请输入年龄"></el-input>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item label="医生">
            <el-form-item prop="organizationDoctorId">
              <el-select
                  v-model="edit_data.organizationDoctorId"
                  placeholder="请选择医生"
              >
                <el-option
                    v-for="item in props.doctorList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item label="证件类型">
            <el-form-item prop="certType">
              <el-select v-model="edit_data.certType" placeholder="证件类型">
                <el-option
                    v-for="item in certTypeList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item label="证件码">
            <el-form-item prop="certNo">
              <el-input v-model="edit_data.certNo" placeholder="请输入证件码"></el-input>
            </el-form-item>
          </el-descriptions-item>

          <el-descriptions-item label="手机号">
            <el-form-item prop="phone">
              <el-input v-model="edit_data.phone" placeholder="手机号"></el-input>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item label="就诊类型">
            <el-form-item prop="visitType">
              <el-select v-model="edit_data.visitType" placeholder="就诊类型">
                <el-option label="初诊" :value="0"></el-option>
                <el-option label="复诊" :value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item label="备注">
            <el-input v-model="edit_data.memo" placeholder="备注"></el-input>
          </el-descriptions-item>
        </el-descriptions>
      </el-form>
    </div>
    <template #footer>
      <div class="bottom">
        <el-dropdown placement="top-start">
          <el-button type="primary" v-if="!isShowCard">读卡</el-button>
          <el-button text v-else>已读卡</el-button>
          <template #dropdown>
            <CardDefault v-model="socialCard" @socialCardUpdate="socialCardUpdate"
                         @close="deleteCard"/>
          </template>
        </el-dropdown>
        <div class="bottom-right">
          <el-button type="primary" @click="save">保存</el-button>
          <el-button @click="close">取消</el-button>
          <el-button v-if="id" type="danger" @click="deleteDetail">删除</el-button>
        </div>
      </div>
    </template>
  </Mask>

</template>
<script setup lang="ts">
import {onMounted, ref} from 'vue'
import {post} from '@/utils/request.ts'
import CardDefault from '@/components/registration/CardDefault.vue'
import {ElMessage} from "element-plus";
import Mask from "@/components/common/Mask.vue";
import psnCertTypes from "@/assets/config/directory/psnCertTypes.json"

// 定义医生选项的接口
interface Doctor {
  id: string | number; // 医生ID
  name: string;        // 医生姓名
}

// 定义组件Props
const props = defineProps({
  id: {
    type: Number,
    default: ''
  },
  doctorList: {
    type: Array as () => Doctor[], // 明确声明医生列表的类型
    default: () => []
  },
  doctorId: {
    type: String,
    default: ''
  }
})
const certTypeList = ref<any>(Object.entries(psnCertTypes).map(([id, name]) => ({id, name})));
const edit_data = ref<any>({})
const rules = ref<any>({
  name: [
    {required: true, message: '请输入名称', trigger: 'blur'},
  ],
  age: [
    {required: true, message: '请输入年龄', trigger: 'blur'},
  ],
  gender: [
    {required: true, message: '请选择性别', trigger: 'blur'},
  ],
  spec: [
    {required: true, message: '请输入规格', trigger: 'blur'},
  ],
  phone: [
    {required: true, message: '请输入手机号', trigger: 'blur'},
  ],
  organzationDoctorId: [
    {required: true, message: '请选择医生', trigger: 'blur'},
  ],
  certType: [
    {required: true, message: '请选择证件类型', trigger: 'blur'},
  ],
  certNo: [
    {required: true, message: '请输入证件码', trigger: 'blur'},
  ],
  visitType: [
    {required: true, message: '请选择就诊类型', trigger: 'blur'},
  ]
})
const isShow = ref(false)
const emit = defineEmits(['close'])
const close = () => {
  isShow.value = false
  edit_data.value = {}
  emit('close')
}
const form = ref()
const save = () => {
  let data = {
    ...edit_data.value,
    psnNo: socialCard.value.data?.baseinfo.psn_no,
    insutype: socialCard.value.data?.insuinfo[0].insutype
  }
  form.value.validate((v: any) => {
    if (v) {
      if (id.value) {
        post('registration/edit', {
          data: data, mdtrtCertNo: socialCard.value.mdtrtCertNo,
          mdtrtCertType: socialCard.value.mdtrtCertType
        }).then(() => {
          ElMessage.success('修改成功')
          close()
        })
      } else {
        console.log(socialCard.value)
        post('registration/add', {
          data: data, mdtrtCertNo: socialCard.value.mdtrtCertNo,
          mdtrtCertType: socialCard.value.mdtrtCertType
        }).then(() => {
          ElMessage.success('新建成功')
          close()
        })
      }
    }
  })

}
const deleteDetail = () => {
  post('registration/delete', {id: id.value}).then(() => {
    ElMessage.success('删除成功')
    close()
  })
}

const socialCard: any = ref({
  data: null,
  payInfo: {},
  lastUse: null
})
const id = ref<any>(null)
const init = () => {
  isShow.value = true
  edit_data.value.organizationDoctorId = props.doctorId
  id.value = props.id
  if (id.value) {
    post('registration/getById', {id: id.value}).then((res: any) => {
      edit_data.value = res
    })
  }
}
const isShowCard = ref<any>(false)
const socialCardUpdate = (e: any) => {
  if (e) {
    isShowCard.value = true
    edit_data.value = e.data.baseinfo
    edit_data.value.gender = e.data.baseinfo.gend
    edit_data.value.name = e.data.baseinfo.psn_name
    edit_data.value.certType = e.data.baseinfo.psn_cert_type
    edit_data.value.certNo = e.data.baseinfo.certno
    edit_data.value.age = Math.floor(e.data.baseinfo.age)
  }

}
const deleteCard = () => {
  isShowCard.value = false
  edit_data.value = {}
}
defineExpose({init})
</script>
<style scoped lang="scss">
.title {
  color: #000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
}

.bottom {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
}
</style>