<script setup>
import DYICON from "../../static/icons/dy.png";
import KSICON from "../../static/icons/ks.png";
import SPHICON from "../../static/icons/sph.png";
import XHSICON from "../../static/icons/xhs.png";
import TTICON from "../../static/icons/tt.png";
import EDITICON from "../../static/icons/Edit.png";
import DELETEICON from "../../static/icons/Delete.png";
import PLUSICON from "../../static/icons/plus.png";
import XNav from "../../components/XNav.vue";
import XNoticeBar from "../../components/XNoticeBar.vue";
import {showToast, toPage} from "../../utils/uils.js";
import {reactive, ref} from "vue";
import Api from "../../api/index.js";
import {onShow} from "@dcloudio/uni-app";
import {useSystemStore} from "../../pinia/SystemStore/index.js";
import XPrompt from "../../components/XPrompt.vue";
import XSelect from "../../components/XSelect.vue";
import SelectTimeAsync from "../../components/SelectTimeAsync.vue";

const SystemStore = useSystemStore();
const BASE = [
    {
        id: 1,
        name: '抖音',
        icon: DYICON,
    },
    {
        id: 2,
        name: '快手',
        icon: KSICON,
    },
    {
        id: 3,
        name: '小红书',
        icon: XHSICON,
    },
    {
        id: 4,
        name: '视频号',
        icon: SPHICON,
    },
    {
        id: 5,
        name: '今日头条',
        icon: TTICON,
    },
];
const SelectTimeAsyncRef = ref();
const list = reactive([]);
const dataList = reactive([]);

const getData = async () => {
    const {data} = await Api.system.myAccount(SystemStore.accountManagementPo);
    dataList.length = 0;
    dataList.push(...data);
}

const changeTab = (pid) => {
    SystemStore.accountManagementPo.pid = pid;
    getData();
}

onShow(() => {
    Api.system.getPlatform().then(({data}) => {
        data = data.filter(v => v.id !== 0);
        list.length = 0;
        data.forEach(v => {
            BASE.forEach(k => {
                if (v.id === k.id) {
                    list.push({
                        id: v.id,
                        name: v.name,
                        icon: k.icon,
                    });
                }
            })
        })

        if (!SystemStore.accountManagementPo) SystemStore.accountManagementPo.pid = list[0].id;
        getData();
    })
})

const deleteItem = async (id) => {
    const {msg} = await Api.system.delAccount(id);
    showToast(msg);
    await getData();
}

const changeStatus = async (value, item) => {
    try {
        let abnormaltime = null;
        if (value === 2) {
            abnormaltime = await SelectTimeAsyncRef.value.open();
        }
        const {msg} = await Api.system.setAccountStatus({
            ...item,
            status: value,
            abnormaltime: abnormaltime,
        });
        showToast(msg);
    } finally {
        await getData();
    }
}
</script>

<template>
    <!--账号管理-->
    <x-nav></x-nav>
    <x-notice-bar status="success" :text="['提示：左滑查看更多，点击可查看该平台所有的账号']"></x-notice-bar>
    <SelectTimeAsync ref="SelectTimeAsyncRef"></SelectTimeAsync>

    <view class="p-[36rpx] bg-[#fff] !flex justify-around items-center">
        <template v-for="(item, index) in list" :key="item.id">
            <view class="!flex flex-col items-center" @click="changeTab(item.id)">
                <image class="!size-[64rpx]" :src="item.icon"></image>
                <view :class="['test-24r !mt-[10rpx]', SystemStore.accountManagementPo.pid === item.id ? 'cur' : '']">
                    {{
                        item.name
                    }}
                </view>
            </view>
            <view class="!w-[1px] !h-[48rpx] bg-[#E5E6EB]" v-if="index <= list.length - 2"></view>
        </template>
    </view>

    <view class="p-[20rpx] !flex flex-col gap-[20rpx]">
        <view
            @click="toPage(`/pages/addAccount/index`)"
            class="py-[15rpx] bg-[#E8F3FF] text-[var(--primary-color)] !flex justify-center items-center gap-[10rpx] border border-[var(--primary-color)] rounded-[4rpx]">
            <image :src="PLUSICON" class="!size-[26rpx] !mt-[2rpx]"></image>
            新增帐号
        </view>

        <view
            v-for="(v, index) in dataList"
            :key="index"
            class="p-[24rpx] bg-[#fff] rounded-[12rpx]">
            <view class="!flex items-center justify-between">
                <view>
                    <view class="test-28r">{{ v.nickname }}</view>
                    <view class="text-[#86909C] test-24r">{{ v.account }}</view>
                </view>
                <view class="px-[12rpx] py-[7rpx] test-24r success !flex items-center gap-0.5" v-if="v.status === 1">
                    {{ v.status_text }}
                    <x-select v-if="[1,2,3].includes(v.status)" v-model:model-value="v.status"
                              :api="Api.system.getAccountStatus"
                              @change="changeStatus($event, v)">
                        <tui-icon size="14" name="arrowdown"></tui-icon>
                    </x-select>
                </view>
                <view class="px-[12rpx] py-[7rpx] test-24r warn !flex items-center gap-0.5"
                      v-else-if="v.status === 0 || v.status === 3">
                    {{ v.status_text }}
                    <x-select v-if="[1,2,3].includes(v.status)" v-model:model-value="v.status"
                              :api="Api.system.getAccountStatus"
                              @change="changeStatus($event, v)">
                        <tui-icon size="14" name="arrowdown"></tui-icon>
                    </x-select>
                </view>
                <view class="px-[12rpx] py-[7rpx] test-24r error !flex items-center gap-0.5"
                      v-else-if="v.status === -2">
                    <x-prompt title="封禁原因" :info="v.check_text">
                        <template v-slot:button>
                            <tui-icon name="about" :size="15" color="#F53F3F"></tui-icon>
                        </template>
                    </x-prompt>
                    {{ v.status_text }}
                    <x-select v-if="[1,2,3].includes(v.status)" v-model:model-value="v.status"
                              :api="Api.system.getAccountStatus"
                              @change="changeStatus($event, v)">
                        <tui-icon size="14" name="arrowdown"></tui-icon>
                    </x-select>
                </view>
                <view class="px-[12rpx] py-[7rpx] test-24r error !flex items-center gap-0.5" v-else>
                    <x-prompt :title="v.status_text+'原因'" :info="v.check_text">
                        <template v-slot:button>
                            <tui-icon name="about" :size="15" color="#F53F3F"></tui-icon>
                        </template>
                    </x-prompt>
                    {{ v.status_text }}
                    <x-select v-if="[1,2,3].includes(v.status)" v-model:model-value="v.status"
                              :api="Api.system.getAccountStatus"
                              @change="changeStatus($event, v)">
                        <tui-icon size="14" name="arrowdown"></tui-icon>
                    </x-select>
                </view>
            </view>
            <view class="!w-full !h-[2rpx] bg-[#E5E6EB] !my-[20rpx]"></view>
            <view class="!flex gap-[16rpx] items-center">
                <image class="!size-[88rpx] image-bor rounded-[12rpx]" :src="v.homepage" mode="aspectFill"></image>
                <image class="!size-[88rpx] image-bor rounded-[12rpx]" :src="v.qrcode" mode="aspectFill"></image>

                <!---->
                <image v-if="v.status!==0 && v.status!==-2" @click="toPage(`/pages/addAccount/index?id=${v.id}`)"
                       class="!size-[72rpx] rounded-[50%] overflow-hidden !ml-auto" :src="EDITICON"></image>
                <image v-if="v.status!==0 && v.status!==-2" @click="deleteItem(v.id)"
                       class="!size-[72rpx] rounded-[50%] overflow-hidden"
                       :src="DELETEICON"></image>
            </view>
        </view>
    </view>
</template>

<style lang="scss" scoped>
.cur {
    color: var(--primary-color);
}

.success {
    background-color: #E8FFEA;
    color: #00B42A;
}

.warn {
    background-color: #FFF7E8;
    color: #FF7D00;
}

.error {
    background-color: #FFECE8;
    color: #F53F3F;
}

.image-bor {
    border: 1px solid rgb(229, 230, 235);
}
</style>
