<template>
    <el-dialog v-model="isShow" :title="title" :width="widths" class="hc-modal-border" draggable destroy-on-close append-to-body @closed="cancelReportClick">
        <el-form ref="formRef" :model="formModel" :rules="formRules" label-width="auto" size="large">
            <el-form-item label="任务名称" prop="taskName">
                <el-input v-model="formModel.taskName" disabled/>
            </el-form-item>
            <el-form-item label="验收日期" prop="date">
                <el-date-picker type="date" v-model="formModel.date" class="block" value-format="YYYY-MM-DD" :clearable="false"/>
            </el-form-item>
            <el-form-item label="申请内容" v-if="isDatas && reportDatas.length > 0">
                <div class="task-tag-data-box">
                    <template v-for="(item,index) in reportDatas" :key="item.id">
                        <el-tag type="info" size="default" closable @close="taskTagClose(index)">{{item.name}}</el-tag>
                    </template>
                </div>
            </el-form-item>
            <el-form-item label="上传附件">
                <HcFormItemUpload
                    v-model="formModel.pdfUrl"
                    accept="application/pdf,.doc,.docx,application/msword"
                    formatTip="PDF、Word格式文件"
                />
            </el-form-item>
            <el-form-item label="验收专家信息" prop="experts">
                <HcReportExperts v-model="formModel.experts"/>
            </el-form-item>
            <el-form-item label="申请说明">
                <el-input type="textarea" v-model="formModel.taskContent" placeholder="请输入申请说明" :autosize="{ minRows: 3, maxRows: 5 }"/>
            </el-form-item>
            <el-form-item label="任务流程" prop="fixedFlowId">
                <el-select v-model="formModel.fixedFlowId" block @change="handleProcessValue">
                    <el-option v-for="item in processData" :label="item.fixedFlowName" :disabled="item.disabled" :value="item.id"/>
                </el-select>
            </el-form-item>
            <el-form-item label="任务人" prop="userTasks" v-if="diyProcessUser">
                <HcTasksUser ui="w-full" :projectId="projectId" :contractId="contractId" @change="diyProcessUserChange"/>
            </el-form-item>
            <el-form-item label="任务人" v-else>
                <div class="form-item-div">{{linkUserJoinString}}</div>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button size="large" @click="cancelReportClick">
                    <HcIcon name="close"/>
                    <span>取消</span>
                </el-button>
                <el-button type="primary" hc-btn :loading="formReportLoading" @click="formReportClick">
                    <HcIcon name="check"/>
                    <span>提交</span>
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import {ref,watch,onMounted} from "vue";
import tasksFlowApi from '~api/tasks/flow';
import {formValidate, getArrValue, arrIndex} from "js-fast-way"

const props = defineProps({
    show: {
        type: Boolean,
        default: false
    },
    title: {
        type: String,
        default: '上报审批'
    },
    widths: {
        type: String,
        default: '47rem'
    },
    taskName: {
        type: String,
        default: ''
    },
    ids: {
        type: String,
        default: null
    },
    projectId: {
        type: [String,Number],
        default: ''
    },
    contractId: {
        type: [String,Number],
        default: ''
    },
    url: {
        type: [String,Number],
        default: ''
    },
    datas: {
        type: Array,
        default: () => ([])
    },
    isDatas: {
        type: Boolean,
        default: false
    },
    addition: {
        type: Object,
        default: () => ({})
    },
})

//变量
const isShow = ref(props.show)
const projectId = ref(props.projectId)
const contractId = ref(props.contractId)
const ApiUrl = ref(props.url)
const reportDatas = ref(props.datas)

//表单
const formRef = ref(null)
const processData = ref([])
const formModel = ref({
    projectId: projectId.value, contractId: contractId.value, ids: props.ids, experts: [],
    userTasks: null, taskName: props.taskName, fixedFlowId: '', ...props.addition
})
const formRules = ref({
    date: {
        required: true,
        trigger: "blur",
        message: "请选择验收日期"
    },
    experts: {
        required: true,
        trigger: "blur",
        message: "请完善专家信息"
    },
    fixedFlowId: {
        required: true,
        trigger: "blur",
        message: "请选择任务流程"
    },
    userTasks: {
        required: true,
        trigger: "blur",
        message: "请选择任务人"
    }
})

//监听
watch(() => [
    props.show,
    props.projectId,
    props.contractId,
    props.taskName,
    props.ids,
    props.url,
    props.addition,
    props.datas
], ([val,pid,cid,name,ids,url,addition, datas]) => {
    isShow.value = val
    projectId.value = pid
    contractId.value = cid
    ApiUrl.value = url
    //更新到表单数据
    formModel.value = {
        projectId: pid, contractId: cid, ids: ids, taskName: name,
        taskContent: '', fixedFlowId: '', experts: [],
        ...addition
    }
    reportDatas.value = datas
    if (val) {
        getProcessDatasApi()
    }
})

//渲染完成
onMounted(() => {
    getProcessDatasApi()
})

const processDefaultData = [{ id: 0, fixedFlowName: '自定义流程', disabled: false}]
const getProcessDatasApi = () => {
    if (isShow.value) {
        getProcessData()
    }
}

//获取流程数据
const linkUserJoinString = ref('')
const getProcessData = async () => {
    linkUserJoinString.value = ''
    const { error, code, data } = await tasksFlowApi.getPageData({
        projectId: projectId.value,
        contractId: contractId.value,
        current: 1, size: 100
    })
    if (!error && code === 200) {
        const arr = getArrValue(data['records'])
        processData.value = [...processDefaultData, ...arr]
    } else {
        processData.value = processDefaultData
    }
}

//流程数据切换
const diyProcessUser = ref(false)
const handleProcessValue = (val) => {
    if (val > 0) {
        diyProcessUser.value = false
        const list = processData.value
        const index = arrIndex(list, 'id', val)
        linkUserJoinString.value = list[index]?.linkUserJoinString
    } else {
        linkUserJoinString.value = ''
        diyProcessUser.value = true
    }
}

//自定义流程任务人选择完毕
const diyProcessUserChange = (user) => {
    formModel.value.userTasks = user
}

const emit = defineEmits(['hide','finish', 'tagClose'])

//审批内容的标签移除
const taskTagClose = (index) => {
    reportDatas.value.splice(index, 1)
    emit('tagClose', index)
    if (reportDatas.value.length <= 0) {
        window.$message?.warning('请重新选择要上报的内容')
        cancelReportClick()
    }
}

//取消
const cancelReportClick = () => {
    linkUserJoinString.value = ''
    isShow.value = false
    emit('hide', false)
}
//上报
const formReportClick = async () => {
    const res = await formValidate(formRef.value)
    if (res) await batchApprovalApi()
}

//上报请求
const formReportLoading = ref(false)
const batchApprovalApi = async () => {
    console.log(formModel.value)
    /*formReportLoading.value = true
    //发起请求
    const { error, code, data } = await ApprovalApi(ApiUrl.value, {
        projectId: projectId.value,
        contractId: contractId.value,
        ...formModel.value
    })
    linkUserJoinString.value = ''
    formReportLoading.value = false
    if (!error && code === 200) {
        isShow.value = false
        window.$message?.success('上报成功')
        emit('hide', false)
        emit('finish', data)
    } else {
        processData.value = []
    }*/
}
</script>

<style lang="scss" >
.task-tag-data-box {
    position: relative;
    border: 1px solid #e0e0e6;
    border-radius: 4px;
    padding: 5px;
    min-height: 40px;
    display: flex;
    align-items: center;
    flex-flow: row wrap;
    width: 100%;
    .el-tag {
        margin: 5px;
    }
}
.hc-report-modal-form-item .hc-table-ref-box {
    margin-top: 14px;
}
</style>
