<template>
  <Mask :is-show="isShow" @close="exit" :width="800" :height="600" title="成员管理" :show-footer="true">
    <el-scrollbar>
      <div style="padding: 24px">
        <el-form :model="userInfo" label-width="auto" :rules="rulesBasic" ref="ruleBasicFormRef"
                 style="width: 100%;height: 100%">
          <el-descriptions
              title="基本信息"
              :column="3"
              direction="vertical"
              border
          >
            <el-descriptions-item label="账号">
              <el-form-item prop="username">
                <el-input v-model="userInfo.username"/>
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item label="密码">
              <el-form-item prop="password">
                <el-input v-model="userInfo.password" show-password/>
              </el-form-item>
            </el-descriptions-item>
          </el-descriptions>
        </el-form>
        <el-form :model="memberInfo" label-width="auto" :rules="rules" ref="ruleFormRef">
          <el-descriptions
              title="扩展信息"
              :column="3"
              direction="vertical"
              border
          >
            <el-descriptions-item label="姓名">
              <el-form-item>
                <el-input v-model="memberInfo.name"/>
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item label="性别">
              <el-form-item prop="gender">
                <el-select
                    v-model="memberInfo.gender"
                    placeholder="选择性别"
                >
                  <el-option
                      v-for="item in ganderOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item label="年龄">
              <el-form-item prop="age">
                <el-input v-model="memberInfo.age"/>
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item label="手机号">
              <el-form-item>
                <el-input v-model="memberInfo.tel"/>
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item label="角色">
              <el-form-item prop="role">
                <el-select
                    v-model="memberInfo.role"
                    placeholder="选择角色"
                    size="large"
                >
                  <el-option
                      v-for="item in roleList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item label="身份证号">
              <el-form-item prop="idCardNumber">
                <el-input v-model="memberInfo.idCardNumber"/>
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item label="科室">
              <el-form-item prop="sectionIds">
                <el-select
                    v-model="memberInfo.sectionIds"
                    placeholder="选择科室"
                    multiple
                    collapse-tags
                    collapse-tags-tooltip
                >
                  <el-option
                      v-for="item in sectionList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item label="医保人员代码">
              <el-form-item>
                <el-input v-model="memberInfo.socialMemberCode"/>
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item label="备注">
              <el-form-item>
                <el-input v-model="memberInfo.memo"/>
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item label="电子签名">
              <el-form-item>
                <UpLoad v-model="memberInfo.electronicSignature" ref="uploadRef"
                        @uploadSuccess="(url)=>{memberInfo.electronicSignature=url}"></UpLoad>
              </el-form-item>
            </el-descriptions-item>
          </el-descriptions>
        </el-form>
      </div>
    </el-scrollbar>
    <template #footer>
      <div class="bottom">
        <span class="small-btn" @click="save()">保存</span>
        <span class="small-btn" @click="exit()">取消</span>
        <span class="danger-btn" v-if="memberInfo.id" @click="deleteDetail">删除</span>
      </div>
    </template>
  </Mask>

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

const ganderOptions = [
  {
    label: '男',
    value: 1
  },
  {
    label: '女',
    value: 2
  }

]
const roleList = [
  {
    value: 1,
    label: '医生',
  },
  {
    value: 2,
    label: '护士',
  },
  {
    value: 3,
    label: '检验技师',
  },
  {
    value: 4,
    label: '理疗师',
  },
  {
    value: 5,
    label: '医生助手',
  },
  {
    value: 6,
    label: '检查技师',
  },
  {
    value: 7,
    label: '管理员',
  },
  {
    value: 8,
    label: '其他',
  },
]
const memberInfo = ref<any>({
  name: "", // 姓名
  gender: "", // 性别
  age: "", // 年龄
  idCardNumber: "", // 身份证号
  tel: "", // 手机号
  socialMemberCode: "", // 医保人员代码
  role: "", // 角色
  sectionIds: [], // 科室id
  electronicSignature: "", // 电子签名
  memo: '',// 备注
  password: "",
})
const userInfo = ref<any>({
  username: "", // 账号
  name: "",
  password: "",
})
const rulesBasic = {
  username: [
    {required: true, message: '请输入账号', trigger: 'blur'},
  ],
  password: [
    {required: true, message: '请输入密码', trigger: 'blur'},
  ]
}
const rules = {
  username: [
    {required: true, message: '请输入账号', trigger: 'blur'},
  ],
  password: [
    {required: true, message: '请输入密码', trigger: 'blur'},
  ],
  name: [
    {required: true, message: '请输入姓名', trigger: 'blur'},
  ],
  gender: [
    {required: true, message: '请选择性别', trigger: 'change'},
  ],
  age: [
    {required: true, message: '请输入年龄', trigger: 'blur'},
  ],
  idCardNumber: [
    {required: true, message: '请输入身份证号', trigger: 'blur'},
  ],
  sectionIds: [
    {required: true, message: '请选择科室', trigger: 'change'},
  ],
  role: [
    {required: true, message: '请选择角色', trigger: 'change'},
  ]
}
const isShow = ref(false)
const emit = defineEmits(['close'])
const exit = () => {
  memberInfo.value = {}
  userInfo.value = {}
  sectionIds.value = []
  isShow.value = false
  emit('close')
}
const sectionIds = ref<any>([])
const ruleFormRef = ref<any>('')
const ruleBasicFormRef = ref<any>('')
const save = () => {
  let form = {
    memberInfo: memberInfo.value,
    userInfo: userInfo.value,
    sectionIds: memberInfo.value.sectionIds
  }
  ruleBasicFormRef.value.validate((valid: any) => {
    if (valid) {
      ruleFormRef.value.validate((valid: any) => {
        if (valid) {
          post(apiConfig.OrganizationMemberSave, {data: form}).then(() => {
            if(memberInfo.value.id){
              ElMessage.success('修改成功')
            }else{
              ElMessage.success('添加成功')
            }
            exit()
          })
        }else{
          ElMessage.error('请填写必填项')
        }
      })
    }else{
      ElMessage.error('请填写必填项')
    }
  })
}

const uploadRef = ref<any>('')
const getById = (id: any) => {
  memberInfo.value = {}
  userInfo.value = {}
  post("organization/member/getById", {id: id}).then((res: any) => {
    memberInfo.value = res.memberInfo
    if (res.userInfo) {
      userInfo.value = res.userInfo
    }
    memberInfo.value.sectionIds = res.sectionIds
    if (memberInfo.value.electronicSignature) {
      uploadRef.value?.getImageUrl(memberInfo.value.electronicSignature)
    }
  })
}
const uploadURL = ref('')
onMounted(() => {
  list()
})
const sectionList = ref<any>([])
const list = () => {
  post('organization/section/allList').then((res: any) => {
    sectionList.value = res
  })
}
const deleteDetail = () => {
  post("organization/member/delete", {id: memberInfo.value.id}).then(() => {
    exit()
    ElMessage.error('已删除');
  })
}
const id = ref('')
const init = (id: any) => {
  isShow.value = true
  uploadURL.value = ''
  if (id) {
    getById(id)
  }
}
defineExpose({init})
</script>
<style scoped>
.bottom {
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 24px;
}
</style>