<template>
    <div class="hc-task-form-body">
        <el-tabs v-if="isType === 1" type="border-card">
            <el-tab-pane label="计量信息">
                <HcMiddlepayForm />
            </el-tab-pane>
            <el-tab-pane label="质保资料" disabled>
                <HcMassForm />
            </el-tab-pane>
        </el-tabs>
        <HcStartWorkForm v-if="isType === 2" />
        <HcAlterForm v-if="isType === 3" />
        <HcMaterialForm v-if="isType === 4" />
        <hc-card-item class="hc-card-footer mt-3">
            <div class="relative">
                <el-radio-group v-model="approval" size="large">
                    <el-radio :label="1">同意</el-radio>
                    <el-radio :label="2">驳回</el-radio>
                </el-radio-group>
            </div>
            <div class="relative mt-2">
                <el-input v-model="remark" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea" placeholder="请描述废除整条任务的原因" />
            </div>
        </hc-card-item>
    </div>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'
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'

const props = defineProps({
    isEdit: {
        type: Boolean,
        default: true,
    },
    type: {
        type: [String, Number],
        default: '',
    },
})

//双向绑定
// eslint-disable-next-line no-undef
const rowInfo = defineModel('modelValue', {
    default: () => ({}),
})

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

//监听类型
const isType = ref(props.type)
watch(() => props.type, (val) => {
    isType.value = val
}, { immediate: true, deep: true })

//监听数据
watch(() => rowInfo, (val) => {
    setTaskInfo(val.value)
}, { deep: true })

//渲染完成
onMounted(() => {
    setTaskInfo(rowInfo.value)
})

//设置任务信息
const taskInfo = ref({})
const setTaskInfo = async (info) => {
    taskInfo.value = info
}

//同意还是驳回
const approval = ref('')
const remark = ref('')
</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>
