<template>
    <el-scrollbar height="600px">
        <el-collapse v-model="activeNames">
            <el-collapse-item title="任务信息" name="1">
                <template #title>
                    <strong>任务信息</strong>
                </template>
                <el-descriptions border :column="2">
                    <el-descriptions-item label="任务派单号" :span="2">{{ detail.no }}</el-descriptions-item>
                    <el-descriptions-item label="路线名称" :span="2">{{ detail.name }}</el-descriptions-item>
                    <el-descriptions-item label="开始时间">{{ detail.beginTime }}</el-descriptions-item>
                    <el-descriptions-item label="结束时间">{{ detail.endTime }}</el-descriptions-item>
                    <el-descriptions-item label="计划巡检人">{{ detail.taskDistributiUser }}</el-descriptions-item>
                    <el-descriptions-item label="任务状态">{{ taskStatusFilters(detail.status) }}</el-descriptions-item>
                </el-descriptions>
            </el-collapse-item>
            <el-collapse-item title="任务取消信息" name="1" v-if="detail.cancelReason || detail.status == 7">
                <template #title>
                    <strong>任务取消信息</strong>
                </template>
                <el-descriptions border :column="2" size="large">
                    <el-descriptions-item label="取消人员" :min-width="150">{{ detail.cancelReason.cancelUser }}
                    </el-descriptions-item>
                    <el-descriptions-item label="取消时间" :min-width="150">{{ detail.cancelReason.createTime }}
                    </el-descriptions-item>
                    <el-descriptions-item label="取消原因" :span="2">{{ detail.cancelReason.cancelReason }}
                    </el-descriptions-item>
                    <el-descriptions-item label="详细原因" :span="2">{{ detail.cancelReason.detailReason }}
                    </el-descriptions-item>

                </el-descriptions>
            </el-collapse-item>
            <el-collapse-item title="任务进度" name="2">
                <template #title>
                    <strong>任务进度</strong>
                </template>
                <el-timeline>
                    <template v-for="item, index in detail.taskInspectScenes">
                        <el-timeline-item :timestamp="item.modifyTime" placement="top"
                            :color="item.isCheck == 0 ? 'grey' : item.status == 5 ? 'green' : 'red'"
                            :icon="item.status == 6 ? 'Warning' : 'CircleCheck'" size="large">
                            <el-card>
                                <template #header>
                                    <div class="card-header">
                                        <span>{{ item.name }}</span>
                                        <div>

                                            <el-tag class="ml-2" :type="item.reportStatus == 1 ? 'success' : 'danger'">
                                                {{ reportStautusFilters(item.reportStatus) }}
                                            </el-tag>
                                        </div>
                                    </div>
                                </template>
                                <el-descriptions :column="1" v-if="item.isCheck == 1">
                                    <el-descriptions-item>{{ item.modifyName }} {{ item.modifyNameMobile }}
                                    </el-descriptions-item>
                                    <el-descriptions-item>
                                        <span>巡检结果评分：</span>
                                        <el-rate v-model="item.score" disabled show-score text-color="#ff9900" />
                                    </el-descriptions-item>
                                    <el-descriptions-item label="" v-if="item.content">
                                        <el-input type="textarea" :rows="5" v-model="item.content" placeholder=""
                                            :maxlength="500" :show-word-limit="true" disabled
                                            :autosize="{ minRows: 2, maxRows: 4 }">
                                        </el-input>

                                    </el-descriptions-item>
                                    <el-descriptions-item v-if="item.inspectPicList && item.inspectPicList.length != 0">

                                        <el-scrollbar style="width: 1050px;">
                                            <div style="display: flex;">
                                                <el-image style="width: 100px; height: 100px" :src="img.url"
                                                    :preview-src-list="item.inspectPicList.map(item => item.url)"
                                                    :initial-index="index" fit="cover" class="scrollbar-item"
                                                    v-for="(img, index) in item.inspectPicList" :key="index" />
                                            </div>

                                        </el-scrollbar>
                                    </el-descriptions-item>

                                </el-descriptions>
                            </el-card>
                        </el-timeline-item>
                    </template>
                </el-timeline>
            </el-collapse-item>
            <el-collapse-item title="任务积分" name="3" v-if="detail.taskPoint">
                <template #title>
                    <strong>任务积分</strong>
                </template>
                <el-descriptions border :column="1">
                    <el-descriptions-item label="任务积分" :span="2">+{{ detail.taskPoint.point }}</el-descriptions-item>
                    <el-descriptions-item label="积分时间" :span="2">{{ createTimeFilters(detail.taskPoint.createTime) }}
                    </el-descriptions-item>

                </el-descriptions>
            </el-collapse-item>

        </el-collapse>
    </el-scrollbar>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
import $common from '@/Utils/commonUtils'
const props = defineProps({
    detail: Object
})
const activeNames = ref(['1', '2', '3', '4', '5'])
const taskStatusFilters = (val) => {
    const taskStatusobj = {
        4: '作业中', 5: '按时完成', 6: '超时完成', 7: '人工取消', 9: '未完成'
    }
    return taskStatusobj[val]
}
const reportStautusFilters = (val) => {
    const reportStautusObj = {
        0: '未上报', 1: '已上报'
    }
    return reportStautusObj[val]
}
const createTimeFilters = (val) => {
    const timeString = val ? $common.fomatDateTime(val) : ''
    return timeString
}
</script>
<script >
export default {
    name: 'patrolTaskDetail'
}
</script>
<style lang="scss">
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.scrollbar-flex-content {
    display: flex;
}

.scrollbar-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    margin: 10px;
    text-align: center;
    border-radius: 4px;
    background: var(--el-color-danger-light-9);
    color: var(--el-color-danger);
}
</style>