<template>
  <Mask :is-show="isShow" @close="exit" :height="570" :title="props.id?'编辑':'新增'" :show-footer="true">
    <template #default>
      <el-scrollbar>
        <div style="padding: 24px">
          <el-form :model="form" label-width="auto" :rules="formRules" ref="formRef">
            <el-descriptions
                :column="4"
                direction="vertical"
                border
            >
              <el-descriptions-item label="科室名称">
                <el-form-item prop="name">
                  <el-input v-model="form.name"/>
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item label="科室类别">
                <el-form-item prop="caty">
                  <el-cascader :props="{ checkStrictly: true }"  v-model="form.caty" :options="options"/>
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item label="开始日期">
                <el-form-item prop="beginDate">
                  <div class="demo-date-picker">
                    <el-date-picker
                        v-model="form.beginDate"
                        type="date"
                        placeholder="请选择开始日期"
                    />
                  </div>
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item label="结束日期">
                <el-form-item>
                  <div class="demo-date-picker">
                    <el-date-picker
                        v-model="form.endDate"
                        type="date"
                        placeholder="请选择结束日期"
                    />
                  </div>
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item label="成立时间">
                <el-form-item prop="creationDate">
                  <div class="demo-date-picker">
                    <el-date-picker
                        v-model="form.creationDate"
                        type="date"
                        placeholder="请选择成立时间"
                        :default-value="new Date(2010, 9, 1)"
                    />
                  </div>
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item label="简介">
                <el-form-item>
                  <el-input v-model="form.info" type="text" :show-word-limit="true" :clearable="true" :size="'large'"/>
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item label="负责人姓名">
                <el-form-item prop="resperName">
                  <el-input v-model="form.resperName"/>
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item label="负责人电话">
                <el-form-item prop="resperTel">
                  <el-input v-model="form.resperTel"/>
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item label="医疗服务范围">
                <el-form-item>
                  <el-input v-model="form.medServScp"/>
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item label="批准床位数">
                <el-form-item prop="bedCnt">
                  <el-input v-model="form.bedCnt" type="number"/>
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item label="医保认可床位数量">
                <el-form-item>
                  <el-input v-model.number="form.socialBedCnt" type="number"/>
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item label="医师人数">
                <el-form-item prop="drPsncnt">
                  <el-input v-model.number="form.drPsncnt" type="number"/>
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item label="药师人数">
                <el-form-item prop="pharPsncnt">
                  <el-input v-model.number="form.pharPsncnt" type="number"/>
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item label="护士人数">
                <el-form-item prop="nursPsncnt">
                  <el-input v-model.number="form.nursPsncnt" type="number"/>
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item label="技术人员人数">
                <el-form-item prop="tecnPsncnt">
                  <el-input v-model.number="form.tecnPsncnt" type="number"/>
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item label="备注">
                <el-form-item>
                  <el-input v-model="form.memo" type="text" :show-word-limit="true" :clearable="true"/>
                </el-form-item>
              </el-descriptions-item>
            </el-descriptions>
          </el-form>
        </div>
      </el-scrollbar>
    </template>
    <template #footer>
      <div class="bottom">
        <span class="small-btn" @click="exit">取消</span>
        <span class="small-btn" @click="save()">保存</span>
        <span class="danger-btn" v-if="props.id" @click="deleteDetail">删除</span>
      </div>
    </template>
  </Mask>

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

// do not use same name with ref
const props = defineProps({
  id: {
    type: String,
    default: ''
  },
})
const form = ref<any>({
  name: '',
  caty: '',
  beginDate: '',
  endDate: '',
  creationDate: '',
  info: '',
  resperName: '',
  resperTel: '',
  medServScp: '',
  bedCnt: '',
  socialBedCnt: '',
  drPsncnt: '',
  pharPsncnt: '',
  nursPsncnt: '',
  tecnPsncnt: '',
  memo: '',
})
const formRules = ref<any>({
  name: [
    {required: true, message: '请输入名称', trigger: 'blur'},
  ],
  caty: [
    {required: true, message: '请选择科室类别', trigger: 'change'},
  ],
  beginDate: [
    {required: true, message: '请选择开始日期', trigger: 'blur'},
  ],
  resperName: [
    {required: true, message: '请输入负责人姓名', trigger: 'blur'},
  ],
  resperTel: [
    {required: true, message: '请输入负责人电话', trigger: 'blur'},
  ],
  creationDate: [
    {required: true, message: '请选择成立时间', trigger: 'change'},
  ],
  bedCnt: [
    {required: true, message: '请输入批准床位数', trigger: 'blur'},
  ],
  drPsncnt: [
    {required: true, message: '请输入医师人数', trigger: 'blur'},
  ],
  pharPsncnt: [
    {required: true, message: '请输入药师人数', trigger: 'blur'},
  ],
  nursPsncnt: [
    {required: true, message: '请输入护士人数', trigger: 'blur'},
  ],
  tecnPsncnt: [
    {required: true, message: '请输入技师人数', trigger: 'blur'},
  ],
})
const isShow = ref<any>(false)
const emit = defineEmits(['onSubmit'])
const exit = () => {
  form.value = {}
  isShow.value = false
  emit('onSubmit')
}
const openDialog = () => {
  isShow.value = true
  if (props.id) {
    init(props.id)
  }
}
const formRef = ref()
const save = () => {
  formRef.value.validate((valid: any) => {
    if (valid) {
      if (props.id) {
        post("organization/section/edit", {data: form.value}).then((res) => {
          exit()
          ElMessage.success('已修改')
        })
      } else {
        post("organization/section/add", {data: form.value}).then((res) => {
          exit()
          ElMessage.success('已添加')
        })
      }
    }
  })
}
const options = Object.entries(depts).map(([key, value]) => {
  if (typeof value === 'string') {
    return {value: key, label: value};
  } else {
    return {
      value: key,
      label: value.name,
      children: Object.entries(value.children).map(([childKey, childValue]) => ({
        value: childKey,
        label: childValue,
      })),
    };
  }
});
const init = (id: any) => {
  form.value = {}
  post("organization/section/getById", {id}).then((res: any) => {
    form.value = res
  })

}
const deleteDetail = () => {
  post("organization/section/delete", {id: props.id}).then((res: any) => {
    exit()
    ElMessage.error('已删除');
  })
}
defineExpose({openDialog})
</script>
<style scoped lang="scss">
.bottom {
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 24px;
}
</style>