<script setup>
import {computed, onMounted} from 'vue';
import messageIcon from "../static/icons/messageIcon.png";
import XActionsheet from "./XActionsheet.vue";
import OpenTypeFun from "./OpenTypeFun.js";
import {showToast, toPage} from "../utils/uils.js";
import {useSystemStore} from "../pinia/SystemStore/index.js";
import Api from "../api/index.js";

const SystemStore = useSystemStore();
const emits = defineEmits(['success']);
const {contextRow, type, data} = defineProps({
    contextRow: {
        type: String,
        default: 'ellipsis-1'
    },
    type: {
        type: Number,
        default: 0
    },
    data: {
        type: Object,
        default: null
    }
});

const itemList = computed(() => {
    const tp = SystemStore.message.find(v => v.id === data.id);
    const list = type === 0 ? [
        {text: '置顶', type: 1, hide: data.is_top === 1},
        {text: '取消置顶', type: 0, hide: data.is_top === 0},
        {text: '标记已读', type: 1, hide: data.is_read === 0},
        {text: '标记未读', type: 0, hide: data.is_read > 0},
    ] : [
        {text: '标记已读', type: 0, hide: tp.is_read},
        {text: '标记未读', type: 1, hide: !tp.is_read},
    ]
    return list.filter(v => !v.hide);
})

const selectActionsheet = async (e) => {
    if (e.text === '置顶' || e.text === '取消置顶') {
        const {msg} = await Api.system.setExchangeTop({
            id: data.id,
            type: e.type,
        });
        showToast(msg);
    } else {
        if (type === 0) {
            const {msg} = await Api.system.setChildrenRead({
                id: data.id,
                type: e.type,
            });
            showToast(msg);
        } else {
            const index = SystemStore.message.findIndex(v => v.id === data.id);
            SystemStore.message[index].is_read = !SystemStore.message[index].is_read;
        }
    }
    emits('success');
}

const openOpenTypeFun = () => {
    const index = SystemStore.message.findIndex(v => v.id === data.id);
    SystemStore.message[index].is_read = true;
    OpenTypeFun(data);
    emits('success');
}

onMounted(() => {
    if (type === 1) {
        const now = SystemStore.message.find(v => v.id === data.id);
        if (!now) SystemStore.message.push({...data, is_read: false});
    }
});
</script>

<template>
    <x-actionsheet
        @success="selectActionsheet"
        :itemList="itemList">
        <view
            @click.stop="type === 0 ? toPage(`/pages/taskDetails/index?id=${data.task_id}&task_children_id=${data.id}&tab=3`) : openOpenTypeFun()"
            class="!py-[30rpx] !px-[24rpx] bg-[#fff] rounded-[8rpx] !flex items-center gap-[20rpx] overflow-hidden relative !mb-[20rpx]">
            <view class="relative">
                <image class="!size-[72rpx] flex-shrink-0" mode="aspectFill" :src="messageIcon"></image>
                <view v-if="type === 0 ? data.is_read>0 : !SystemStore.message.find(v => v.id===data.id).is_read"
                      class="size-[20rpx] bg-[#f00] absolute right-0 top-0 rounded-[50%]"></view>
            </view>

            <view class="flex-grow !flex flex-col gap-[12rpx]">
                <view class="!flex justify-between items-center">
                    <view class="bh">{{ data.title }}</view>
                    <view class="time">{{ data.createtime }}</view>
                </view>
                <view :class="['context', contextRow]">
                    {{ data.content }}
                </view>
            </view>

            <view class="status" v-if="data.is_top === 1">置顶</view>
        </view>
    </x-actionsheet>
</template>

<style lang="scss" scoped>
.status {
    padding: 5rpx 16rpx;
    background: rgb(253, 244, 191);
    border-bottom-left-radius: 8rpx;
    position: absolute;
    right: 0;
    top: 0;
    color: rgb(162, 109, 10);
    font-size: 11px;
    font-weight: 500;
    line-height: 140%;
    letter-spacing: 0;
    text-align: center;
}

.context {
    color: rgb(78, 89, 105);
    font-size: 12px;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: 0;
    text-align: left;
}

.bh {
    color: rgb(29, 33, 41);
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
    letter-spacing: 0;
    text-align: left;
}

.time {
    color: rgb(134, 144, 156);
    font-size: 12px;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: 0;
    text-align: left;
}
</style>
