<template>
    <el-dialog title="任务详情"  v-model="visible" width="650px">
        <div v-loading='taskLoading'>
            <p class="title bold">任务信息</p>
            <div class="info-content">
                <div class="info">
                    <div class="label">任务主题</div>
                    <div class="value">{{ taskData?.taskContent }}</div>
                </div>
                <div class="info">
                    <div class="label">任务目的</div>
                    <div class="value">{{ taskData?.objectiveName }}</div>
                </div>
                <div class="info">
                    <div class="label">任务时间</div>
                    <div class="value">{{ taskData?.taskBeginTime }}</div>
                </div>
                <div class="info">
                    <div class="label">紧要程度</div>
                    <div class="value">{{ taskData?.priorityGradeName }}</div>
                </div>
                <div class="info">
                    <div class="label">关联类型</div>
                    <div class="value">{{ taskData?.resourceTypeName }}</div>
                </div>
                <div class="info">
                    <div class="label">关联业务</div>
                    <div class="value">{{ taskData?.resourceName }}</div>
                </div>
                <div class="info">
                    <div class="label">任务人员</div>
                    <div class="value">{{ taskData?.ownerByName }}</div>
                </div>
                <div class="info">
                    <div class="label">任务提醒</div>
                    <div class="value">{{ taskData?.remindTypeName }}</div>
                </div>
                <div class="info">
                    <div class="label">提醒方式</div>
                    <div class="value">{{ taskData?.remindModeName }}</div>
                </div>
                <div class="info">
                    <div class="label">创建时间</div>
                    <div class="value">{{ taskData?.createTime }}</div>
                </div>
            </div>
            <template v-if="taskData?.taskStatus && taskData?.taskStatus != 0 && taskData?.taskStatus != 3">
                <p class="title bold">{{ taskData?.taskStatus==1?'处理信息':'状态信息' }}</p>
                <div class="info-content">
                    <div class="info">
                        <div class="label">任务状态</div>
                        <div class="value">{{ taskData?.taskStatusName }}</div>
                    </div>
                    <div class="info">
                        <div class="label">处理人员</div>
                        <div class="value">{{ taskData?.operatorByName }}</div>
                    </div>
                    <div class="info">
                        <div class="label">处理时间</div>
                        <div class="value">{{ taskData?.operatorTime }}</div>
                    </div>
                    <div class="info" v-if='taskData?.taskStatus==1'>
                        <div class="label">跟进信息</div>
                        <div class="value" style='color:#1874ff;cursor: pointer;' @click='followDetail(taskData?.followId)'>{{ taskData?.followSubject }}</div>
                    </div>
                    <div class="info" v-else>
                        <div class="label">备注信息</div>
                        <div class="value">{{ taskData?.remark }}</div>
                    </div>
                </div>
            </template>

            <div class="footer" v-if="taskData?.taskStatus == 0||taskData?.taskStatus == 3">
                <el-button link type="primary" @click="finish" v-if="auth.hasPermi('task:task:wcrw')">完成任务</el-button>
                <el-button link type="primary" @click="unfinish('unfinished')" v-if="auth.hasPermi('task:task:wnwc')">未能完成</el-button>
                <el-button link type="primary" @click="unfinish('canceled')" v-if="auth.hasPermi('task:task:qxrw')">取消任务</el-button>
            </div>
        </div>

    </el-dialog>

    <!-- 完成任务后新建跟进弹窗 -->
    <AddFollow ref="addFollowRef" />

    <!-- 未能完成&取消任务弹窗 -->
    <el-dialog :title="failedDialog.title" v-model="failedDialog.visible" width="650px">
        <el-form ref="taskFormRef" :model="form" label-width="100px">
            <el-form-item label="备注信息：" prop="remark">
                <el-input
                    type="textarea"
                    v-model="form.remark"
                    :rows="4"
                    resize="none"
                    show-word-limit
                    :maxlength="300"
                    placeholder="请输入备注信息"
                />
            </el-form-item>
            <!-- <el-form-item label="上传图片：" prop="remark" class="upload-item">
                <ImageUpload v-model="form.resourceList" />
            </el-form-item> -->
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="cancel">取消</el-button>
                <el-button :loading="buttonLoading" type="primary" @click="submitForm">提交</el-button>
            </div>
        </template>
    </el-dialog>
    <!-- 跟进详情 -->
    <FollowDetail ref="detail"></FollowDetail>
</template>

<script setup lang="ts">
    import { updateStatus } from '@/api/task'
    import { TaskVO } from '@/api/task/types';
    import { getTask } from '@/api/task';
    import AddFollow from '@/components/Follow/add.vue'
    import FollowDetail from '@/components/Follow/detail.vue'
    import ImageUpload from '@/components/ImageUpload/index.vue'
    import auth from '@/plugins/auth'
    import {formateNullFieldData} from "@/api/customer";

    const emits = defineEmits(['refresh'])
    const visible = ref(false)

    const taskData = ref<TaskVO>()
    const open = (data: any) => {
        getDetail(data.id)
        visible.value = true
    }
    const taskLoading = ref(false)
    const getDetail = (id) =>{
        taskLoading.value = true
        getTask(id).then(res => {
            if(res.success){
                let detailData = JSON.parse(JSON.stringify(res.result))
                taskData.value = formateNullFieldData(detailData)
                taskLoading.value = false
            }else{
                ElMessage.error(res.msg)
            }
        })
    }
    const addFollowRef = ref()
    const finish = () => {
        visible.value = false
        let obj = {
            type: 'add',
            resourceType: taskData.value?.resourceType,
            resourceTypeId: taskData.value?.resourceTypeId,
            resourceName: taskData.value?.resourceName,
            taskId: taskData.value?.id,
            taskName: taskData.value?.taskContent,
            customerId: taskData.value?.customerId,
            customerName: taskData.value?.customerName,
            resourceStageDictValue: taskData.value?.resourceStatus,
        }
        addFollowRef.value.open(obj)
    }

    // 未能完成&取消任务操作
    const failedDialog = reactive({
        type: '',
        visible: false,
        title: ''
    })

    const unfinish = (type: string) => {
        visible.value = false
        failedDialog.type = type
        failedDialog.title = type == 'unfinished' ? '未能完成' : '取消任务'
        failedDialog.visible = true
    }

    const form = reactive<{ remark: string; taskId?: number | string; resourceList: string[] }>({
        remark: '',
        taskId: '',
        resourceList: []
    })

    const buttonLoading = ref(false)

    const submitForm = () => {
        form.taskId = taskData.value?.id
        updateStatus(failedDialog.type, form).then(res => {
            if(res.success) {
                ElMessage.success('更新状态成功')
                failedDialog.visible = false
                emits('refresh')
            }
        })
    }
    const cancel = () => {
        failedDialog.visible = false
    }

    const detail = ref()
    const followDetail = (id:any) =>{
        if(id != '--') {
            let params = {
                id,
                btnRole:[]
            }
            detail.value.open(params)
        }
    }

    defineExpose({
        open
    })
</script>

<style scoped lang="scss">
    .title{
        font-size: 16px;
        color: #333;
    }
    .info-content{
        margin: 8px 0 20px;
        border: 1px solid #DCDEE2;
        border-bottom: 0;
        .info{
            display: flex;
            .label, .value{
                min-height: 45px;
                line-height: 1.5;
                padding: 5px 20px;
                border-bottom: 1px solid #DCDEE2;
                display: flex;
                align-items: center;
            }
            .label{
                width: 100px;
                border-right: 1px solid #DCDEE2;
                background: #F8FAFC;
            }
            .value{
                flex: 1;
            }
        }
    }
    .upload-item{
        :deep(.el-form-item__content) {
            flex-direction: column;
            align-items: flex-start;
        }
    }
</style>
