<template>
    <div class="hc-task-form-body">
        <el-tabs v-if="taskInfo.meterType === 1" type="border-card">
            <el-tab-pane label="计量信息">
                <HcMiddlepayForm :table="tableInfo" :info="taskInfo" :is-edit="isEdits" />
            </el-tab-pane>
            <el-tab-pane label="质保资料" disabled>
                <HcMassForm :table="tableInfo" :info="taskInfo" :is-edit="isEdits" />
            </el-tab-pane>
        </el-tabs>
        <HcMaterialForm v-if="taskInfo.meterType === 2" :table="tableInfo" :info="taskInfo" :is-edit="isEdits" />
        <HcStartWorkForm v-if="taskInfo.meterType === 3" :table="tableInfo" :info="taskInfo" :is-edit="isEdits" />
        <HcAlterForm v-if="taskInfo.meterType === 4" :table="tableInfo" :info="taskInfo" :is-edit="isEdits" />
        <hc-card-item class="hc-card-footer mt-3">
            <template #header>
                <el-radio-group v-model="taskForm.auditStatus" size="large" :disabled="!isEdits || tableInfo.status === 2">
                    <el-radio :label="1">同意</el-radio>
                    <el-radio :label="2">驳回</el-radio>
                </el-radio-group>
            </template>
            <template #extra>
                <el-link type="primary" :disabled="taskForm.auditStatus === 0 || !isEdits || tableInfo.status === 2" @click="tableSubmitClick">
                    <hc-icon name="check" />
                    <span class="ml-1">这里点提交</span>
                </el-link>
            </template>
            <div class="relative">
                <el-input v-model="taskForm.repealDesc" :autosize="{ minRows: 2, maxRows: 4 }" :disabled="!isEdits || tableInfo.status === 2" type="textarea" placeholder="请描述废除整条任务的原因" />
            </div>
        </hc-card-item>
    </div>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'
import { useAppStore } from '~src/store'
import HcMiddlepayForm from './middlepay-form.vue'
import HcMassForm from './mass-form.vue'
import HcStartWorkForm from './start-work-form.vue'
import HcAlterForm from './alter-form.vue'
import HcMaterialForm from './material-form.vue'
import mainApi from '~api/tasks/hc-data'

const props = defineProps({
    isEdit: {
        type: Boolean,
        default: true,
    },
    info: {
        type: Object,
        default: () => ({}),
    },
    table: {
        type: Object,
        default: () => ({}),
    },
})

//事件
const emit = defineEmits(['finish'])

const useAppState = useAppStore()
const projectId = ref(useAppState.getProjectId || '')
const contractId = ref(useAppState.getContractId || '')
const taskInfo = ref(props.info)
const tableInfo = ref(props.table)

//监听可否编辑
const isEdits = ref(props.isEdit)
watch(() => props.isEdit, (val) => {
    isEdits.value = val
}, { immediate: true, deep: true })

//监听数据
watch(() => [
    props.table,
    props.info,
], ([table, row]) => {
    tableInfo.value = table
    taskInfo.value = row
    taskForm.value = { auditStatus: table.status ?? 0, repealDesc: table.repealDesc ?? '' }
}, { deep: true })

//渲染完成
onMounted(() => {
    const { status, repealDesc } = tableInfo.value
    taskForm.value = { auditStatus: status ?? 0, repealDesc: repealDesc ?? '' }
})

//审批表单
const taskForm = ref({ auditStatus: 0, repealDesc: '' })

//单条提交
const tableSubmitClick = async () => {
    const { auditStatus, repealDesc } = taskForm.value
    if (auditStatus === 0) {
        window.$message.error('请先选择同意或驳回')
        return
    }
    if (auditStatus === 2 && !repealDesc) {
        window.$message.error('请先填写驳回原因')
        return
    }
    //发起请求
    const { error, code, msg } = await mainApi.taskAudit({
        ...taskForm.value,
        dataId: tableInfo.value.id,
        taskId: taskInfo.value.id,
        projectId: projectId.value,
        contractId: contractId.value,
    })
    if (!error && code === 200) {
        window.$message.success('提交成功')
        emit('finish')
    } else {
        window.$message.error(msg ?? '提交失败')
    }
}
</script>

<style lang="scss" scoped>
.hc-task-form-body {
    position: relative;
}
</style>

<style lang="scss">
.hc-task-form-body .hc-card-item-box {
    background: #f6f6f6 !important;
}
.hc-task-form-body .hc-card-item-box.hc-card-footer {
    background: white !important;
}
.hc-task-form-body .el-tabs--border-card>.el-tabs__content {
    padding: 6px;
}
</style>
