<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 {onMounted, reactive} from "vue";
import Api from "../../api/index.js";

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 list = reactive([]);
const dataList = reactive([]);
const po = reactive({
    pid: null,
});

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

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

onMounted(() => {
    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,
                    });
                }
            })
        })

        po.pid = list[0].id;
        getData();
    })
})

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

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

    <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]', po.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" v-if="v.status === 1">
                    {{ v.status_text }}
                </view>
                <view class="px-[12rpx] py-[7rpx] test-24r warn" v-else-if="v.status === 0 || v.status === 3">
                    {{ v.status_text }}
                </view>
                <view class="px-[12rpx] py-[7rpx] test-24r error" v-else>
                    {{ v.status_text }}
                </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 @click="toPage(`/pages/addAccount/index?id=${v.id}`)"
                       class="!size-[72rpx] rounded-[50%] overflow-hidden !ml-auto" :src="EDITICON"></image>
                <image @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>
