<template>
    <div class="sellConfList">
        <s-header name="卖家确认列表" :noback="false"></s-header>

        <div class="headCon l-flex-between o-plr-20 o-pt-26 o-pb-12 kBordBott">
            <div class="l-flex-RC">
                <div class="ruleIcon"></div>
                <div class="c-text-color c-text-b c-text-15">
                    共
                    <span class="c-text-20" style="color: #df5e4c">{{ patchTotal }}</span>
                    条记录
                </div>
            </div>
        </div>

        <div class="contentCon">
            <van-pull-refresh disabled v-model="refreshing" @refresh="onRefresh">
                <div v-for="(item, index) in tableData" :key="index">
                    <br />
                    <van-cell-group inset @click="toSetupAccount(item)">
                        <van-cell>
                            <template #title>
                                <div class="l-flex-RC">
                                    <span class="c-color c-text-12">姓名：</span>
                                    <span class="c-text-color c-text-12">{{ item.actualName }}</span>
                                </div>
                            </template>
                            <template #label>
                                <div class="l-flex-RC">
                                    <span class="c-color c-text-12">手机号：</span>
                                    <span class="c-text-color c-text-12">{{ item.phone }}</span>
                                </div>
                                <div class="l-flex-RC">
                                    <span class="c-color c-text-12">支付宝账号：</span>
                                    <span class="c-text-color c-text-12">{{ item.payeeCode }}</span>
                                </div>
                                <div class="l-flex-RC">
                                    <span class="c-color c-text-12">部门号：</span>
                                    <span class="c-text-color c-text-12">{{ getDeptName(item.deptId) }}</span>
                                </div>
                                <div class="l-flex-RC">
                                    <span class="c-color c-text-12">申请时间：</span>
                                    <span class="c-text-color c-text-12">{{ Format_time(item.createTime) }}</span>
                                </div>
                                <!-- 确认状态 status：0 未确认...，1 已确认✓ -->
                                <div class="itemRow" style="display: flex; justify-content: flex-end">
                                    <span v-if="item.status === '0' && user.type > 1" style="color: #FFA500"> {{
            $t('taskMessage.toBeApproved') }}</span>
                                    <span v-if="item.status === '1'" style="color: #1989fa"> {{
            $t('taskMessage.adopt') }}</span>
                                    <span v-if="item.status === '2'" style="color: #ff0000"> {{
                                        $t('taskMessage.fail') }}</span>
                                </div>

                            </template>
                            <br />

                        </van-cell>
                    </van-cell-group>
                </div>

            </van-pull-refresh>
        </div>


    </div>
</template>

<script>
import sHeader from "@/components/SimpleHeader";
import { ref, onMounted, toRefs, reactive } from "vue";
import { styleUrl } from "../../common/js/utils";
import { useRouter } from "vue-router";
import { getPageUserApply } from "@/service/taskAccount";
import { Format_time } from "@/common/js/utils";

export default {
    components: { sHeader },
    setup() {

        onMounted(() => {
            // 加载样式
            styleUrl('taskAccount');
            onRefresh();
        });

        // 多少条规则
        const patchTotal = ref(0);
        // 分页
        const pageNo = ref(1);
        const pageSize = ref(10);
        let ruleData = reactive({
            tableData: [],
        });
        // 上拉刷新
        const loading = ref(true);
        const finished = ref(false);
        // 下拉刷新
        const onRefresh = (idx) => {
            ruleData.tableData = [];
            // 解决请求两次问题
            if (!idx) {
                finished.value = false;
            }
            loading.value = true;
            // 初始化分页
            pageNo.value = 1;
            pageSize.value = 10;
            getList();
        };

        // 上拉加载
        const onLoad = () => {
            pageNo.value++;
            getList();
        };
        // 下拉刷新
        const refreshing = ref(false);
        const getList = () => {
            let param = {
                current: pageNo.value,
                size: pageSize.value,
            };
            getPageUserApply(param).then((res) => {
                const { data } = res.data;
                refreshing.value = false;
                ruleData.tableData.push(...data.records);
                // 加载状态结束
                loading.value = false;
                // 总共
                patchTotal.value = data.total;
                if (ruleData.tableData.length >= data.total) {
                    finished.value = true;
                }
            });
        };


        // 获取部门名称
        // const getDeptName = computed(() => {
        //     const deptId = {
        //         '0': '研发部',
        //         '1': '行政部',
        //     };
        //     return (item) => deptId[item.deptId] || '';
        // })

        const router = useRouter();

        const setupAccountObj = ref({});
        // 点击卡片，跳转对应的审核
        const toTaskAccount = (item) => {
            setupAccountObj.value = item;
            router.push("/taskAccount");
        }

        return {
            patchTotal,
            onRefresh,
            onLoad,
            getList,
            loading,
            finished,
            ...toRefs(ruleData),
            refreshing,
            // getTargetAreasText,
            Format_time,
            toTaskAccount
        };
    }
};
</script>

<style lang="less" scoped></style>
