<template>
    <uni-section title="审核流程" type="line">
        <template v-slot:right>
            <button size="default" class="mini-btn"
                hover-class="is-hover" @click="redirectaddTaskCheckerPage()">添加</button>
        </template>
    </uni-section>
    <uni-list :border="true">
        <uni-swipe-action ref="checke_flow">
            <uni-swipe-action-item :right-options="actionOptions" :threshold="50" v-for="(item, index) in checkers"
                :key="index" @click="(e: any) => handlerChecker(e, item, index)">
                <uni-list-item class="checker">
                    <template v-slot:header>
                        <view class="slot-check-box">
                            <i class="my my-audit" style="width: 40px;height: 40px;"></i>
                            <!-- <uni-icons :size="40" type="auth" color="#fff" style="padding:3px;"></uni-icons> -->
                        </view>
                    </template>
                    <template v-slot:body>
                        <view class="slot-check-content">
                            <view class="slot-check-panel">
                                <view class="slot-check-title">
                                    {{ item.name }}
                                </view>
                                <view class="slot-check-subtitle">
                                    <view v-if="item.handlers && item.handlers.length > 0" class="tag-container">
                                        <view v-for="h in handerNames(item.handlers)" :key="h"
                                            class="tag-container__item">
                                            <uni-tag :inverted="true" :text="h"
                                                :custom-style='"font-weight:bolder;padding:2px 4px;font-size:10px;border: 1px solid transparent;background:#e8f3ff;color:rgb(22, 93, 255);"'>
                                                >
                                            </uni-tag>
                                        </view>
                                        <!-- <uni-tag :inverted="true" v-if="item.handlers.length > 4"
                                            :custom-style='"font-weight:bolder;padding:2px 4px;font-size:10px;border: 1px solid transparent;background:#e8f3ff;color:rgb(22, 93, 255);"'
                                            :text="`+${item.handlers.length - 4}...`" /> -->
                                    </view>
                                </view>
                            </view>
                            <view class="slot-check-desc">
                                超时时限：<text style="color:#dd524d; font-weight: bold;">{{ item.due_day }}</text>天
                            </view>
                        </view>
                    </template>
                </uni-list-item>
            </uni-swipe-action-item>
        </uni-swipe-action>
    </uni-list>
</template>
<script lang="ts" setup>
import { getPlanCheckFlow, setPlanCheckFlow } from '@/api/project-center/plan-task';
import { useEmitt } from '@/logics/mitt/useEmitt';
import { Checker } from '@/types/plan-task';


const props = defineProps({
    draft: {
        type: Boolean,
        required: true,
        default: () => {
            return false
        }
    },
    taskId: {
        type: String
    },
    accountList: {
        type: Array as PropType<{ id: string; name: string }[]>
    }
})
const { emitter } = useEmitt()
const checke_flow = ref()
const checkers = ref<Checker[]>([])
const actionOptions = [
    {
        text: '修改',
        style: {
            backgroundColor: '#4cd964',
            margin: "5px 0"
        }
    },
    {
        text: '删除',
        style: {
            backgroundColor: '#dd524d',
            margin: "5px 0"
        }
    }
]


const getCheckers = async (id?: string) => {
    if (id) {
        const { checkers: list } = await getPlanCheckFlow({
            task_id: id,
            draft: props.draft
        })
        checkers.value = list
    }
}




const handerNames = (ids: string[]) => {
    const arrName: string[] = []
    ids.map((item: string | number) => {
        const isFind = props.accountList?.find(p => p.id === item)
        if (isFind) {
            arrName.push(isFind.name)
        }
        return item
    })
    return arrName
}

const redirectaddTaskCheckerPage = () => {
    uni.navigateTo({ url: `/pages/project/plan-task-detail/add-task-check-flow?id=${props.taskId}&draft=${props.draft}` })
}


// 审核组左滑菜单点击
const handlerChecker = async (e: { index: number }, checker: Checker, index: number) => {
    const isEdit = e.index === 0;
    if (isEdit) {
        const handlers_id = checker.handlers.join(',');
        uni.navigateTo({ url: `/pages/project/plan-task-detail/edit-task-check-flow?name=${checker.name}&due_day=${checker.due_day}&cIndex=${index}&handlers_id=${handlers_id}` })
    } else {
        uni.showModal({
            title: '删除审核流程',
            content: `确认删除${checker.name}吗？`,
            success: async (res: { confirm: boolean }) => {
                const { confirm } = res;
                if (confirm) {
                    const list = checkers.value.splice(index, 1)
                    try {
                        await setPlanCheckFlow({
                            draft: props.draft!,
                            task_id: props.taskId!,
                            checkers: checkers.value
                        })
                        uni.showToast({
                            title: '删除成功',
                            icon: 'success',
                            mask: true
                        })
                        emitter.emit('get_task_list')
                        emitter.emit('get_task_detail')
                    } catch (_e) {
                        checkers.value = list
                    }
                }
            }
        })
    }
    checke_flow.value?.closeAll()
}

onMounted(() => {
    getCheckers(props.taskId)
})

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

// 监听子组件增加，修改，删除事件，更新列表
useEmitt({
    name: 'modify_task_checkers',
    callback: async (m: {
        cIndex: number, checker: {
            handlers: string[],
            due_day: number,
            name: string
        }
    }) => {
        const list = checkers.value.splice(m.cIndex, 1, m.checker)
        try {
            await setPlanCheckFlow({
                draft: props.draft!,
                task_id: props.taskId!,
                checkers: checkers.value
            })
            uni.showToast({
                title: '修改成功',
                icon: 'success',
                mask: true
            })
            emitter.emit('get_task_list')
            emitter.emit('get_task_detail')
        } catch (_e) {
            checkers.value = list
        }
    }
})



</script>
<style lang="less" scoped>
.slot-check-box {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: row;
    align-items: center;
    width: 45px;
    margin-right: 10px;
}


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

.slot-check-panel {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.slot-check-title {
    display: flex;
    font-size: 14px;
    color: #3b4144;
}

.slot-check-subtitle {
    display: flex;
    padding-top: 6px;
    font-size: 12px;
    color: #999
}

.slot-check-desc {
    color: #999;
    font-size: 12px;
    //   width: 200px;
    text-overflow: ellipsis;
    text-align: right;
    text-wrap: wrap;
    overflow-wrap: anywhere;
    white-space-collapse: collapse;

}

.tag-container {
    max-width: 210px;
    display: flex;
    flex-wrap: wrap;
}

.tag-container__item {
    padding: 0 6px 6px 0;
    white-space: nowrap;

}

.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;
}
</style>