<template>
    <div class="hc-report-modal-form-item">
        <div class="hc-form-item-btn">
            <el-button type="primary" size="default" @click="tableExpertsAddClick">
                <HcIcon name="add"/>
                <span>添加</span>
            </el-button>
        </div>
        <div class="hc-table-ref-box no-border" v-if="tableExpertsData.length > 0">
            <el-table :data="tableExpertsData" border style="width: 100%">
                <el-table-column prop="name" label="姓名" align="center" width="120"/>
                <el-table-column prop="position" label="职位" align="center" width="130"/>
                <el-table-column prop="group" label="是否为组长" align="center" width="120">
                    <template #default="scope">
                        {{arrKeyValue(groupSelectData, 'value', 'label', scope.row.group)}}
                    </template>
                </el-table-column>
                <el-table-column prop="idCard" label="身份证" align="center"/>
                <el-table-column prop="phone" label="手机号" align="center" width="140"/>
                <el-table-column prop="action" label="操作" align="center" width="140">
                    <template #default="scope">
                        <el-button type="primary" size="small" @click="tableExpertsEditClick(scope)">编辑</el-button>
                        <el-button type="danger" size="small" @click="tableExpertsDelClick(scope)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>

    <!--新增编辑表单-->
    <HcDialog :show="isInfoModal" :title="`${isModalType}专家信息`" widths="26rem" @close="onInfoModalClose" @save="onInfoModalSave" append-to-body>
        <el-form ref="formRef" :model="formModel" :rules="formRules" label-width="auto" size="large">
            <el-form-item label="姓名" prop="name">
                <el-input v-model="formModel.name" placeholder="请输入姓名"/>
            </el-form-item>
            <el-form-item label="职位" prop="position">
                <el-input v-model="formModel.position" placeholder="请输入职位"/>
            </el-form-item>
            <el-form-item label="组长" prop="group">
                <el-select v-model="formModel.group" block>
                    <el-option v-for="item in groupSelectData" :label="item.label" :value="item.value"/>
                </el-select>
            </el-form-item>
            <el-form-item label="身份证" prop="idCard">
                <el-input v-model="formModel.idCard" placeholder="请输入身份证"/>
            </el-form-item>
            <el-form-item label="手机号" prop="phone">
                <el-input v-model="formModel.phone" placeholder="请输入手机号"/>
            </el-form-item>
        </el-form>
    </HcDialog>

</template>

<script setup>
import {onMounted, ref, watch} from "vue";
import {getArrValue, deepClone, arrKeyValue, formValidate, isIdCard, isPhone} from "js-fast-way"

const props = defineProps({
    modelValue: {
        type: Array,
        default: () => ([])
    },
})

//变量
const tableExpertsData = ref([])
const isInfoModal = ref(false)
const isModalType = ref('新增')
const tableIndex = ref(null)

//渲染完成
onMounted(() => {
    tableExpertsData.value = getArrValue(props.modelValue)
})

//监听
watch(() => [
    props.modelValue
], ([val]) => {
    tableExpertsData.value = getArrValue(val)
})

//是否为组件
const groupSelectData = [
    {label: '是', value: 1},
    {label: '否', value: 2}
]

//表单
const formRef = ref(null)
const formModel = ref({
    name: '', position: '', group: '', idCard: '', phone: ''
})

const formRules = ref({
    name: {
        required: true,
        trigger: "blur",
        message: "请输入姓名"
    },
    position: {
        required: true,
        trigger: "blur",
        message: "请输入职位"
    },
    group: {
        required: true,
        trigger: "blur",
        message: "请选择是否为组长"
    },
    idCard: {
        required: true,
        validator: (rule, value, callback) => {
            if (!value) {
                callback(new Error('请输入身份证号'))
            } else if (!isIdCard(value)) {
                callback(new Error('身份证号码格式错误'))
            } else {
                callback()
            }
        },
        trigger: 'blur'
    },
    phone: {
        required: true,
        validator: (rule, value, callback) => {
            if (!value) {
                callback(new Error('请输入手机号'))
            } else if (!isPhone(value)) {
                callback(new Error('身份证号码格式错误'))
            } else {
                callback()
            }
        },
        trigger: 'blur'
    },
})


//事件
const emit = defineEmits(['change', 'update:modelValue'])


//添加专家信息
const tableExpertsAddClick = () => {
    formModel.value = {}
    tableIndex.value = null
    isModalType.value = '新增'
    isInfoModal.value = true
}

//编辑专家信息
const tableExpertsEditClick = ({row, $index}) => {
    formModel.value = deepClone(row)
    tableIndex.value = $index
    isModalType.value = '编辑'
    isInfoModal.value = true
}

//编辑保存
const onInfoModalSave = async () => {
    const res = await formValidate(formRef.value)
    if (res) {
        if (isModalType.value === '新增') {
            tableExpertsData.value.push(formModel.value)
        } else {
            const index = tableIndex.value
            tableExpertsData.value[index] = formModel.value
        }
        onInfoModalClose()
        setEmitData()
    }
}

//关闭弹窗
const onInfoModalClose = () => {
    isInfoModal.value = false
    formModel.value = {}
    tableIndex.value = null
}

//删除专家信息
const tableExpertsDelClick = ({$index}) => {
    tableExpertsData.value.splice($index, 1);
    setEmitData()
}

//事件
const setEmitData = () => {
    emit('update:modelValue', tableExpertsData.value)
    emit('change', tableExpertsData.value)
}

</script>

<style lang="scss" scoped>
.hc-report-modal-form-item {
    position: relative;
    width: 100%;
    .hc-table-ref-box {
        margin-top: 14px;
    }
}
</style>
