<template>

    <view class="container" :class="{
        'slide-out': draft,
        'slide-in': !draft
    }">

        <view style="position: fixed;left: 10rpx;z-index: 999;right: 10rpx;">
            <uni-collapse @change="collapseValue = !collapseValue">
                <uni-collapse-item titleBorder="none" :open="collapseValue" :style="{
                    borderTop: !collapseValue ? '1px solid #ebeef5 ' : '',
                    borderBottom: !collapseValue ? '1px solid #ebeef5 ' : '',
                    boxShadow: !collapseValue ? '0px 0px 3px 1px rgba(0, 0, 0, 0.08) ' : ''
                }">
                    <template v-slot:title>
                        <view style="flex:1;align-items: center;display: flex;padding: 10rpx 20rpx;background: #fff;">
                            <view style="flex: 0 0 32px; line-height: 32px;">
                                <uni-icons :size="20" color="#323233" type="undo"
                                    @tap.stop="redirectTaskListPage()"></uni-icons>
                            </view>
                            <view style="line-height: 32px;font-weight: 600;">
                                <text>{{ detail.task?.name }}</text>
                                <text style="color: #f53f3f">{{
                                    draft ? '（草稿）' : ''
                                    }}</text>
                            </view>
                            <view style="padding-left: 10px;margin-left: auto;display: flex;">
                                <button size="default" v-for="item in detail.task?.works" :key="item.id"
                                    class="task-btn" hover-class="is-hover" @tap.stop="showProcessWorks(item)"> {{
                                        item.name
                                    }}</button>
                            </view>
                        </view>
                    </template>
                    <uni-list>
                        <uni-list-item class="overview1">
                            <template #body>
                                <view class="slot-overview-content">
                                    <view class="slot-overview-box">
                                        <view>
                                            <i class="my my-handler" style="width: 35px;height: 35px;"></i>
                                        </view>
                                        <view class="slot-overview-box-block flex-d-c">
                                            <view>{{ detail.task?.handler_name }}</view>
                                            <view class="slot-overview-box-desc">主责人</view>
                                        </view>
                                    </view>
                                    <view class="slot-overview-box">
                                        <view>
                                            <i class="my my-plan-date" style="width: 28px;height: 28px;"></i>
                                        </view>
                                        <view class="flex-d-c slot-overview-box-block">
                                            <view>{{ detail.task?.completed_at || '2024-06-12' }}</view>
                                            <view class="slot-overview-box-desc">完成时间</view>
                                        </view>
                                    </view>

                                </view>
                            </template>
                        </uni-list-item>
                        <uni-list-item class="overview">
                            <template #body>
                                <view class="slot-overview-content">
                                    <view class="slot-overview-box">
                                        <view>
                                            <i class="my my-progressing" style="width: 33px;height: 33px;"></i>
                                        </view>
                                        <view class="flex-d-c slot-overview-box-block">
                                            <view>{{ detail.task?.progress }}%</view>
                                            <view class="slot-overview-box-desc">当前进度</view>
                                        </view>
                                    </view>
                                    <view class="slot-overview-box">
                                        <view>
                                            <i class="my my-start-time" style="width: 30px;height: 30px;"></i>
                                        </view>
                                        <view class="slot-overview-box-block flex-d-c">
                                            <view>{{ detail.task?.begin_at }}</view>
                                            <view class="slot-overview-box-desc">开始时间</view>
                                        </view>
                                    </view>

                                    <view class="slot-overview-box">
                                        <view>
                                            <i class="my my-end-time" style="width: 30px;height: 30px;"></i>
                                        </view>
                                        <view class="flex-d-c slot-overview-box-block">
                                            <view>{{ detail.task?.end_at }}</view>
                                            <view class="slot-overview-box-desc">预计结束时间</view>
                                        </view>
                                    </view>

                                </view>
                            </template>
                        </uni-list-item>
                    </uni-list>
                </uni-collapse-item>
            </uni-collapse>
        </view>
        <view :style="{
            paddingTop: collapseValue ? '157px' : '45px'
        }">
            <uni-section class="mb-10" title="基本信息" type="line"></uni-section>
            <uni-list :border="true">
                <uni-list-item title="创建人" :rightText="detail.task?.creator_name" />
                <uni-list-item title="创建日期" :rightText="detail.task?.created_at" />
                <uni-list-item title="修改日期" :rightText="detail.task?.updated_at" />
                <uni-list-item title="任务描述">
                    <template #footer>
                        <view style="width:100%">
                            <EditorListItem style="width:100%" v-model="modifyParams.description" placeholder="任务描述"
                                :old-value="detail.task?.description" :components-type="ComponentsType.TEXTAREA" />
                        </view>
                    </template>
                </uni-list-item>
            </uni-list>
            <TaskCheckFlow :account-list="accountList" :task-id="task_id" :draft="draft" />
            <OutcomeLayout :account-list="accountList" :task_id="task_id" :draft="props.draft" />
        </view>
        <ProcessWork ref="processWorkRef" />
        <uni-section title="任务动态" type="line">
            <template v-slot:right>
                <button size="default" class="mini-btn" @click="redirectTaskLogsPage()" hover-class="is-hover">查看</button>
            </template>
        </uni-section>
    </view>

</template>
<script setup lang="ts">
import { getPlanTaskDetail } from '@/api/project-center/plan-task';
import { useEmitt } from '@/logics/mitt/useEmitt';
import { TaskDetailResParams } from '@/types/plan-task';
import ProcessWork from '@/components/process-work/index.vue'
import EditorListItem from '@/components/editor-list-item/editor-list-item.vue'
import { ComponentsType } from '@/enums/api'
import TaskCheckFlow from './task-check-flow.vue';
import OutcomeLayout from '../task-outcome/outcome-layout.vue';
const props = defineProps({
    draft: {
        type: Boolean,
        required: true,
        default: () => {
            return false
        }
    },
    task_id: {
        type: String,
        required: true
    },
    accountList: {
        type: Array as PropType<{ id: string; name: string }[]>,
        default: () => []
    }
})

const scrollTop = ref(0)
const stickyTop = ref(uni.upx2px(80))
const collapseValue = ref(true)
const { emitter } = useEmitt()
const processWorkRef = ref<any>(null)
const modifyParams = ref<{ description?: string }>({
})

const redirectTaskListPage = () => {
    emitter.emit('redirectTaskListPage')
}

const detail = reactive<{ task?: TaskDetailResParams }>({
    task: undefined
}) // 


const getDetail = async () => {
    if (props.task_id) {
        detail.task = await getPlanTaskDetail({
            draft: props.draft,
            task_id: props.task_id
        })
    }
}

// 开始处理计划work
const showProcessWorks = (item: { id: string, name: string }) => {
    processWorkRef.value?.showWorkModal(item.id)
}

// 跳转项目动态日志page
const redirectTaskLogsPage = async () => {
  uni.navigateTo({ url: `/pages/project/components/logs?prj_id=${detail.task?.prj_id}&task_id=${detail.task?.task_id}&name=${detail.task?.name}` })
}

// 监听子组件增加，修改，删除事件，更新列表
useEmitt({
    name: 'get_task_detail',
    callback: () => {
        getDetail()
    }
})


onMounted(async () => {
    await getDetail()
})
</script>

<script lang="ts">
export default {
    options: {
        styleIsolation: 'apply-shared', //解除样式隔离
    },
    onPageScroll() { }
}
</script>
<style scoped lang="less">
.container {
    // position: fixed;
    // left: 0;
    // right: 0;
    padding: 5px 5px 40px 5px;
}

:deep(.uni-list-item__content) {
    flex-direction: row;
    align-items: center;
    flex: 0 0 80px;
}

:deep(.uni-list-item__content-title) {
    font-size: 13px;
    color: #3b4144a8;
}

:deep(.uni-list-item__extra) {
    flex: 1 1 auto;
}

:deep(.uni-list-item__extra-text) {
    color: #5d5959;
    font-size: 13px;
    width: 200px;
    text-overflow: ellipsis;
    text-align: right;
    text-wrap: wrap;
    overflow-wrap: anywhere;
    white-space-collapse: collapse;
}

.arco-btn+.arco-btn {
    margin-left: 8px
}

.flex {
    display: flex;
}

.flex-d-r {
    flex-direction: row;
}

.flex-d-c {
    flex-direction: column;
}

.flex-j-c {
    justify-content: center;
}

.flex-align-c {
    align-items: center;
}

.task-btn {
    padding-right: 16rpx;
    padding-left: 16rpx;
    color: #ffffff !important;
    background-color: #007aff;
    border-color: #007aff !important;
    font-size: 24rpx !important;
    -webkit-tap-highlight-color: transparent;
    border-radius: 5px;
    box-sizing: border-box;
    cursor: pointer;
    display: block;
    line-height: 2.55555556;
    margin-left: 5rpx;
    margin-right: auto;
    overflow: hidden;
    position: relative;
    text-align: center;
    text-decoration: none;
    height: auto;
}

.mini-btn {
  color: #ffffff !important;
  background-color: #007aff;
  border-color: #007aff !important;
  font-size: 24rpx !important;
  -webkit-tap-highlight-color: transparent;
  border-radius: 5px;
  box-sizing: border-box;
  cursor: pointer;
  display: block;
  line-height: 2.55555556;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  padding-left: 28rpx;
  padding-right: 28rpx;
  position: relative;
  text-align: center;
  text-decoration: none;
  height: auto;
}

.slot-overview-content {
    display: flex;
    justify-content: space-around;
    flex-direction: row;
    align-items: center;
    width: 100%;
    /* height: 45px; */
}

.slot-overview-box {
    font-size: 12px;
    display: flex;
    flex-direction: row;
    align-items: center;
    color: #333
}

.slot-overview-box-block {
    padding-left: 5px;
}

.slot-overview-box-desc {
    color: #86909c
}

:deep(.uni-section) {
    margin-top: 5px;
}



:deep(.overview1) {
    .uni-list-item__container {
        padding: 10px 0px !important
    }

}

:deep(.checker) {
    .uni-list-item__container {
        padding: 10px !important
    }
}

:deep(.overview) {
    .uni-list-item__container {
        padding: 10px 5px !important
    }

}

@keyframes in {
    0% {
        transform: translateX(-120%);
    }

    100% {
        transform: translateX(0%);
    }
}

@keyframes out {
    0% {
        transform: translateX(120%);
    }

    100% {
        transform: translateX(0%);
    }
}

.slide-in {
    animation: in 0.5s;
}

.slide-out {
    animation: out 0.5s;
}
</style>