<template>
    <el-dialog v-model="dialogVisible" title="任务详情" width="30%">
        <el-card class="box-card" v-loading="loading">

            <template #header>
                <div class="card-header">
                    <span class="tit">任务名称：</span>
                    <span>{{ taskDeatil?.detail?.title }}</span>
                </div>
            </template>

            <div style="margin-top: 1vh;display: flex;">

                <!-- town_task_type_5任务 -->
                <div v-if="taskDeatil?.detail?.task_type_value == 'town_task_type_5'"
                    style="display: flex; justify-content:space-between;width: 100%; " class="tit">
                    <div>
                        交易金额剩余池： {{ taskDeatil?.detail?.progress?.done }}
                    </div>
                    <div>
                        目标完成金额： {{ taskDeatil?.detail?.progress?.total }}
                    </div>
                </div>
                <!-- town_task_type_marketing_director_10任务 -->
                <div v-else-if="taskDeatil?.detail?.task_type_value == 'town_task_type_marketing_director_10'">


                    <div style="width: 25.5vw;" v-if="taskDeatil.detail?.progress?.stage1">
                        <div class="tit">第一阶段</div>
                        <div>
                            <el-image style="width: 100px; height: 100px;margin: 10px 5px;" :src="items" fit="fill"
                                v-for=" items in taskDeatil.detail?.progress.stage1.stage1.file" />
                        </div>
                        <div>
                            备注: {{ taskDeatil.detail?.progress.stage1.stage1.remark }}
                        </div>
                        <el-divider />
                    </div>

                    <div style="width: 25.5vw;" v-if="taskDeatil.detail?.progress?.stage2">
                        <div class="tit">第二阶段</div>
                        <div>
                            <el-image style="width: 100px; height: 100px;margin: 10px 5px;" :src="items" fit="fill"
                                v-for=" items in taskDeatil.detail?.progress.stage2.stage2.file" />
                        </div>
                        <div>
                            备注: {{ taskDeatil.detail?.progress.stage2.stage2.remark }}
                        </div>
                        <el-divider />
                    </div>
                    <div style="width: 25.5vw;" v-if="taskDeatil.detail?.progress?.stage3">
                        <div class="tit">第三阶段</div>
                        <div>
                            <el-image style="width: 100px; height: 100px;margin: 10px 5px;" :src="items" fit="fill"
                                v-for=" items in taskDeatil.detail?.progress.stage3.stage3.file" />
                        </div>
                        <div>
                            备注: {{ taskDeatil.detail?.progress.stage3.stage3.remark }}
                        </div>
                        <el-divider />
                    </div>
                    <div style="width: 25.5vw;" v-if="taskDeatil.detail?.progress?.stage4">
                        <div class="tit">第四阶段</div>
                        <div>
                            <el-image style="width: 100px; height: 100px;margin: 10px 5px;" :src="items" fit="fill"
                                v-for=" items in taskDeatil.detail?.progress.stage4.stage4.file" />
                        </div>
                        <div>
                            备注: {{ taskDeatil.detail?.progress.stage4.stage4.remark }}
                        </div>
                        <el-divider />
                    </div>


                </div>


                <!-- town_task_type_marketing_director_4 及其他任务 -->
                <div v-else-if="town_task_type_marketing_director_4TaskList.includes(taskDeatil?.detail?.task_type_value)"
                    style="width: 100%;">
                    <div class="tit"> 任务进度： {{ sue(taskDeatil?.detail?.progress, 'procure_amount') }} / {{
                        taskDeatil?.detail?.progress[0]?.total }}</div>
                    <el-table :data="taskDeatil?.detail?.progress">
                        <el-table-column label="商户名称" prop="merchant_name" show-overflow-tooltip />
                        <el-table-column label="已采购金额" prop="procure_amount" show-overflow-tooltip width="130px"
                            align="center" />
                        <el-table-column label="目标金额" prop="total" show-overflow-tooltip align="center" />
                    </el-table>
                </div>


                <!-- town_task_type_marketing_director_5 任务 -->
                <div v-else-if="taskDeatil?.detail?.task_type_value == 'town_task_type_marketing_director_5'"
                    style="width: 100%;">
                    <div class="tit"> 任务进度： {{ sue(taskDeatil?.detail?.progress, 'trade_amount') }} / {{
                        taskDeatil?.detail?.progress[0]?.total }}</div>
                    <el-table :data="taskDeatil?.detail?.progress">
                        <el-table-column label="商户名称" prop="merchant_name" show-overflow-tooltip />
                        <el-table-column label="已销售金额" prop="trade_amount" show-overflow-tooltip width="130px"
                            align="center" />
                        <el-table-column label="目标金额" prop="total" show-overflow-tooltip align="center" />
                    </el-table>
                </div>

                <!-- town_task_type_marketing_director_3任务 -->
                <div v-else-if="town_task_type_marketing_director_3TaskList.includes(taskDeatil?.detail?.task_type_value)"
                    style="width: 100%;">
                    <el-table :data="taskDeatil?.detail?.progress">
                        <el-table-column label="商户名称" prop="mer_name" show-overflow-tooltip />
                        <el-table-column label="产品上架目标数" prop="total" show-overflow-tooltip width="130px" align="center" />
                        <el-table-column label="已上架数" prop="count" show-overflow-tooltip align="center" />
                        <el-table-column label="是否更新库存" show-overflow-tooltip align="center">
                            <template #default="{ row }">
                                {{ row.is_update_stock ? '已更新' : "未更新" }}
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <!-- 其他任务 -->
                <div v-else class="tit">
                    任务进度： {{ taskDeatil?.detail?.progress?.done }} / {{ taskDeatil?.detail?.progress?.total }}
                </div>
            </div>



            <!-- town_task_type_marketing_director_2任务 -->
            <div style="margin-top: 1vh;"
                v-if="taskDeatil?.detail?.task_type_value == 'town_task_type_marketing_director_2'">
                <div class="tit"> 完成详情： </div>

                <el-table :data="taskDeatil?.detail?.done_list">
                    <el-table-column label="商户ID" prop="mer_id" show-overflow-tooltip align="center" />
                    <el-table-column label= "商户名称" prop="mer_name" show-overflow-tooltip align="center" />
                </el-table>
            </div>
            <!--town_task_type_master_5任务 -->
            <div style="margin-top: 1vh;" v-if="taskDeatil?.detail?.task_type_value == 'town_task_type_master_5'">
                <div class="tit"> 完成详情： </div>

                <el-table :data="taskDeatil?.detail?.done_list">
                    <el-table-column label="ID" prop="id" show-overflow-tooltip align="center" width="38px" />
                    <el-table-column label="公司名称" prop="company_name" show-overflow-tooltip align="center" />
                </el-table>
            </div>

        </el-card>



        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>

                <!-- 进行中的任务可以结算 -->
                <el-button type="primary" @click="settlementFn" v-if="row?.task.status == 2">
                    结算
                </el-button>
                <el-button type="primary" @click="dialogVisible = false" v-else>
                    确定
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>
  
<script lang="ts" setup>


import { ref } from 'vue'
import { taskProgress } from "@/api/task"

const dialogVisible = ref(false)
const loading = ref(true)
const row = ref("")
const taskDeatil = ref('')

/*    狮心会的干部们对于该送什么样的花没有讨论出结果，于是决意扫光学院的花店，学院花店的鲜花不是外面运来的，而是源于基因科学系的温室，当天有整整一温室的黄色和白色的郁金香被采摘，于是被狮心会豪迈地包圆了。郁金香的花语是“博爱、体贴、高雅、富贵”，在法国人兰斯洛特想来倒也合适，不过最后这些鲜花摆在病房里的效果确实有些窘迫，于是兰斯洛特很有心地叫人再去买一些红玫瑰来放在床头。*/



// town_task_type_marketing_director_4相同类型的任务列表
const town_task_type_marketing_director_4TaskList = reactive([
    'town_task_type_marketing_director_4',
    'town_task_type_marketing_director_9',
    'town_task_type_marketing_director_8'
])




// town_task_type_marketing_director_3相同类型的任务列表
const town_task_type_marketing_director_3TaskList = reactive([
    'town_task_type_marketing_director_3',
    'town_task_type_marketing_director_7'
])

const openDeatl = (item: any) => {
    loading.value = true
    row.value = item
    dialogVisible.value = true
    taskProgress({
        task_id: item.task.id
    }).then(res => {
        taskDeatil.value = res
        loading.value = false
        console.log(taskDeatil.value)

    })


}

// town_task_type_marketing_director_4任务求和
const sue = (list: any, key: string) => {
    const sum = list.reduce((accumulator: number, currentValue: number) => accumulator + currentValue[key], 0);
    return sum
}


// 任务结算
const settlementFn = () => {
    dialogVisible.value = false
}

defineExpose({
    openDeatl,
});



</script>
<style scoped>
.dialog-footer button:first-child {
    margin-right: 10px;
}


.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

.box-card {
    width: 100%;
}

.tit {
    font-weight: bold;
}

.li {
    justify-content: space-between;
    display: flex;
    margin: 5px 0;
    padding: 3px 5px;
    border-bottom: 1px solid #F8F8F8;
}


.li:hover {
    background-color: #F8F8F8;
}
</style>
  