<template>
    <common-box  name="Task List">
        <div class="task-list" v-if="taskList && taskList.length > 0">
            <div class="task-item" v-for="item in taskList" :key="item.id">
                <div class="task-title">Task ID: {{item.id}}</div>
                <div class="task-cont">
                    <div class="map-info">
                        <img class="map" src="@/assets/images/map/image.png" alt="">
                        <div class="info">
                            <div class="text">
                                <span class="label">Location ID：</span>
                                <span class="value">{{item.plantGroupId}}</span>
                            </div>
                            <div class="text">
                                <span class="label">Farm Area：</span>
                                <span class="value">{{item.area && item.area.toFixed(2)}} ha</span>
                            </div>
                        </div>
                    </div>
                    <div class="status" v-if="!item.status2d">
                        <div class="time">30 minutes left</div>
                        <el-progress :percentage="50" :show-text="false" :stroke-width="8" color="#00A342" />
                    </div>
                    <div class="completed" v-else>
                        <el-icon class="icon"><CircleCheckFilled /></el-icon>
                        <span>Task completed</span>
                    </div>
                </div>
                <div class="task-footer">
                    <div class="task-btn" @click="handleUploadImg(item)" v-show="item.status2d === 0">Upload Image</div>
                    <div class="task-btn" @click="handleStart(item)" v-show="item.status2d === 1">Start Task</div>
                </div>
            </div>
        </div>
        <div class="add-task" @click="handleAdd">
            <el-icon class="icon"><Plus /></el-icon>
            <span>New Task</span>
        </div>
      <upload-task-img v-if="dialogVisible" ref="uploadTaskRef" @updateCallback="loadTaskList" :dialogVisible="dialogVisible"  :task="curTask" :stsToken="stsToken"></upload-task-img>
      <!-- 新增任务弹窗 -->
      <add-task :show="showPopup" @addCallback="loadTaskList"></add-task>
    </common-box>
</template>

<script setup>
import commonBox from "@/components/commonBox";
import {ref,onMounted, nextTick} from 'vue'
import uploadTaskImg from "@/components/common/uploadTaskImg";
import addTask from "./addTask.vue"
import { ElMessage } from "element-plus";

/**
 * 作业状态，0：待开始，1：等待中，2：准备中，3：执行中，4：处理结果中，5：已停止，6：执行完成，7：执行失败
 * 
 * private Integer status2d = 0;
 * 
 */

onMounted(()=>{
    loadTaskList();
    loadStsToken();
})

let taskList = ref(null)
let stsToken = ref(null)
let curTask = ref(null)
const uploadTaskRef = ref(null)
let dialogVisible = ref(false)
const handleUploadImg = (item)=>{
    curTask.value = item;
    dialogVisible.value = true
    nextTick(()=>{
        uploadTaskRef.value.showDialog()
    })
}

const handleStart = (item) =>{
    VE_API.task.start({taskId:item.id}).then(({code,data})=>{
        if(code === 0){
            ElMessage.success('The task has been successfully initiated')
            loadTaskList()
        }
    })
}

/**
 * 加载任务列表
 */
const loadTaskList = ()=>{
  VE_API.task.list().then(({code,data})=>{
    if(code === 0){
        taskList.value = data;
    }
  })
}
const loadStsToken = ()=>{
  VE_API.task.getStsToken().then(({code,data})=>{
    if(code === 0){
      stsToken.value = data;
    }
  })
}

const showPopup = ref(false)
const handleAdd = () =>{
    showPopup.value = !showPopup.value
}

</script>


<style lang="scss" scoped>
.task-wrap{
    width: 376px;
    height: calc(100% - 19px * 2);
    padding: 16px 0;
    position: relative;
    ::v-deep{
        .common-title{
            padding: 0 16px;
        }
    }
    .task-list{
        width: 100%;
        height: calc(100% - 16px);
        border-radius: 0 0 8px 8px;
        padding: 10px 10px 0 10px;
        box-sizing: border-box;
        background: #F0F0F0;
        overflow: auto;
        .task-item{
            padding: 12px 16px;
            border-radius: 8px;
            background: #fff;
            .task-title{
                font-size: 16px;
                padding-bottom: 10px;
                border-bottom: 1px solid #F0F0F0;
            }
            .task-cont{
                .map-info{
                    display: flex;
                    align-items: center;
                    margin: 12px 0;
                    .map{
                        width: 68px;
                        margin-right: 10px;
                    }
                    .info{
                        .text{
                            line-height: 24px;
                            .label{
                                color: #6C6C6C;
                            }
                        }
                    }
                }
                .status{
                    background: #F7F7F7;
                    border-radius: 6px;
                    padding: 6px 10px 10px;
                    color: #00A342;
                    .time{
                        margin-bottom: 4px;
                    }
                }
                .completed{
                    display: flex;
                    align-items: center;
                    padding: 8px;
                    border-radius: 25px;
                    color: #00A342;
                    background-image: linear-gradient(60deg,#DBFAE7,#fff);
                    .icon{
                        margin-right: 8px;
                        font-size: 20px;
                    }
                }
            }
            .task-footer{
                margin-top: 12px;
                display: flex;
                justify-content: flex-end;
                .task-btn{
                    color: #00A342;
                    padding: 6px 11px;
                    cursor: pointer;
                    border-radius: 4px;
                    border: 1px solid #00A342;
                }
            }
        }
        .task-item + .task-item{
            margin-top: 12px;
        }
    }
    .add-task{
        position: absolute;
        bottom: 28px;
        left: calc(50% - 190px / 2);
        box-shadow: 0 2px 6px rgba(11, 158, 70, 0.3);
        display: flex;
        align-items: center;
        justify-content: center;
        background: #00A342;
        color: #fff;
        padding: 12px 52px;
        border-radius: 30px;
        cursor: pointer;
        .icon{
            margin-right: 6px;
            font-size: 15px;
        }
    }
}
</style>
