<template>
    <!-- 分销申请审批 -->
    <div class="taskMessagePage flex-col">
        <s-header name="分销管理" :noback="false"></s-header>
        <div class="taskMessageBox flex-col">
            <van-list v-model:loading="loading" v-model:error="error" :error-text="$t('common.reqFailClkReload')"
                :finished="finished" :finished-text="$t('common.noMoreTxt')" offset="300" :immediate-check="false"
                @load="onLoad">
                <div class="searchRow flex-row justify-between">
                    <div class="flex-col">
                        <div class="flex-row justify-between bd3">
                            <div class="flex-col outer4 proportionIcon"></div>
                            <span class="flex-col txt2">{{ $t('taskMessage.total') }}<span class="discountNumber">{{
            checkListTotal
        }}</span>{{ $t('taskMessage.recordsInTotal') }}</span>
                        </div>
                    </div>
                    <div class="l-flex-RC">
                        <div @click="reviewedClk" class="label3 o-mr-10">{{
            $t('taskMessage.toViewAppro')
        }}</div>
                    </div>
                </div>
                <div class="listBox">
                    <div v-for="(item, index) in checkList" :key="index" class="listItem">
                        <div class="itemBox">
                            <div class="itemRow">
                                <span class="itemTitle">终端编号:&nbsp;</span>
                                {{ item.terminalNo }}
                            </div>
                            <!-- 平台的 -->
                            <div class="itemRow">
                                <span class="itemTitle">手续费:&nbsp;</span>
                                <!-- <span class="itemTitle discount">手续费:&nbsp;</span> -->
                                {{ item.proportion }}%
                            </div>
                            <!-- 机主的 -->
                            <div class="itemRow">
                                <span class="itemTitle">分销人:&nbsp;</span>
                                终端商户
                                <span class="itemTitle discount">{{ $t('taskMessage.proportion') }}:&nbsp;</span>
                                {{ item.adminProportion }}%
                            </div>
                            <!-- 分账方的 -->
                            <div class="itemRow" v-if="item.type >= 2">
                                <span class="itemTitle">分销人:&nbsp;</span>
                                {{ item.agencyName }}
                                <span class="itemTitle discount">{{ $t('taskMessage.proportion') }}:&nbsp;</span>
                                {{ item.agencyProportion }}%
                            </div>
                            <!-- 分账方4个 -->
                            <div class="itemRow" v-if="item.type >= 3">
                                <span class="itemTitle">分销人:&nbsp;</span>
                                {{ item.merchantName }}
                                <span class="itemTitle discount">{{ $t('taskMessage.proportion') }}:&nbsp;</span>
                                {{ item.merchantProportion }}%
                            </div>
                            <!-- 分账方5个以上 -->
                            <div class="itemRow" v-if="item.type >= 4">
                                <span class="itemTitle">分销人:&nbsp;</span>
                                {{ item.personageName }}
                                <span class="itemTitle discount">{{ $t('taskMessage.proportion') }}:&nbsp;</span>
                                {{ item.personageProportion }}%
                            </div>
                            <div class="itemRow">
                                <span class="itemTitle">{{ $t('taskMessage.applicationTime') }}:&nbsp;</span>
                                {{ showDateTime(item.createDate) }}
                            </div>
                            <div class="itemRow" v-if="item.status != 0 && item.status != 2">
                                <span class="itemTitle">{{ $t('taskMessage.approvalTime') }}:&nbsp;</span>
                                {{ showDateTime(item.modifyDate) }}
                            </div>
                            <div class="itemRow" style="display: flex; justify-content: flex-end"
                                v-if="item.status === 0 && user.type == 0">
                                <van-button span="5" round type="primary" style="
                      height: 2em;
                      padding: 0 1em;
                      margin: 0 0.5em;
                      background: rgb(255 0 0 / 20%);
                      color: #ff0000;
                      border-color: #ff0000;
                    " @click="changeStatusFun(item, 3)">
                                    {{ $t('taskMessage.fail') }}
                                </van-button>
                                <van-button span="5" round type="primary" style="
                      height: 2em;
                      padding: 0 1em;
                      margin: 0 0.5em;
                      background: rgb(25 137 250 / 20%);
                      color: #1989fa;
                    " @click="changeStatusFun(item, 1)">
                                    {{ $t('taskMessage.adopt') }}
                                </van-button>
                            </div>
                            <div class="itemRow" style="display: flex; justify-content: flex-end">
                                <span v-if="item.status === 0 && (user.type > 1 && user.type < 4)"
                                    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: #ff0033"> {{ $t('taskMessage.cancel')
                                    }}</span>
                                <span v-if="item.status === 3" style="color: #ff0000"> {{ $t('taskMessage.fail')
                                    }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </van-list>
        </div>
    </div>
</template>
<script>
import { onMounted, reactive, ref, toRefs } from "vue";
import sHeader from "../../../components/SimpleHeader.vue";
import { getProportionCheckList } from "../../../service/terminal";
import { getLoginUser } from "@/common/js/utils";
import dateUtil from "@/utils/dateUtil";
import { showFailToast } from "vant";


export default {
    components: { sHeader },
    setup() {
        const user = getLoginUser();
        const loading = ref(false); // 加载状态
        const error = ref(false); // 错误状态
        const finished = ref(false); // 结束翻页状态
        const checkListTotal = ref(0); // 列表总数
        const checkList = ref([]); // 列表集合
        let searchParams = reactive({
            adminId: "", // 当前登录账户的id
            terminalNo: "", // 设备编号
            current: 1, // 当前页
            size: 20, // 页大小
            status: null, // 审核状态
        });
        // 获取审核记录
        const getProportionCheckListFun = async () => {
            const { data } = await getProportionCheckList(
                Object.assign({}, searchParams)
            );
            if (data.code === "00000") {
                // 列表值叠加
                checkList.value = checkList.value.concat(
                    data.data.records
                );
                checkListTotal.value = data.data.total;
                if (checkList.value.length === data.data.total) {
                    finished.value = true;
                }
                loading.value = false;
            } else {
                showFailToast(data.message);
            }
        }

        // 滚动加载
        const onLoad = () => {
            if (!finished.value) {
                searchParams.current = searchParams.current + 1;
                getProportionCheckListFun();
            }
        };

        const showDateTime = (date) => {
            return date
                ? dateUtil.formateDate(new Date(date), "yyyy/MM/dd hh:mm:ss")
                : "";
        };
        // 点击查看待审核
        const reviewedClk = () => {
            // 改为未审核状态
            searchParams.status = 0;
            searchParams.current = 1;
            checkList.value = [];
            getProportionCheckListFun();
        };
        onMounted(async () => {
            if (user && user.type > 1 && user.type < 4) {
                searchParams.adminId = user.id;
            }
            getProportionCheckListFun();
        });
        return {
            loading,
            error,
            finished,
            checkList,
            checkListTotal,
            onLoad,
            getProportionCheckListFun,
            showDateTime,
            user,
            reviewedClk,
            ...toRefs(searchParams),
        };
    }
};

</script>

<style lang="less" scoped>
@import "../../../common/style/common.less";

.taskMessagePage {
    width: 100%;

    .taskMessageBox {
        width: 100%;
        height: calc(100% - 60px);
        overflow: auto;

        .searchRow {

            padding: 0.5rem 0.5rem;
            background: rgba(255, 255, 255, 1) url("../../../assets/home/line.png") bottom center no-repeat;
            background-size: 100%;
            align-items: center;

            .bd3 {

                .outer4 {
                    width: 19px;
                    height: 19px;
                    margin-right: 5px;
                    background: url("../../../assets/alarmHistory/icon.png") top center no-repeat;
                    background-size: 100%;

                    &.proportionIcon {
                        background: url("../../../assets/taskMessage/retailIcon.png") top center no-repeat;
                        background-size: 100%;
                    }
                }

                .txt2 {
                    overflow-wrap: break-word;
                    color: rgba(64, 77, 116, 1);
                    font-size: 15px;
                    font-family: PingFangSC-Semibold;
                    text-align: left;
                    white-space: nowrap;
                    display: block;
                    font-weight: bold;

                    .discountNumber {
                        font-size: 18px;
                        color: #df5e4c;
                    }
                }
            }

            .label3 {
                color: #4d6add;
            }

            .main5 {
                width: auto;

                .label2 {
                    width: 0.5rem;
                    height: 0.5rem;
                    margin-right: 5px;
                    cursor: pointer;
                }
            }
        }

        .van-tabs__line {
            background-color: #4d6add !important;
        }

        .van-tab--active .van-tab__text--ellipsis {
            color: #4d6add;
        }

        .listBox {
            .listItem {
                width: 100%;
                background: url("../../../assets/home/line.png") bottom center no-repeat;
                background-size: 100%;
                position: relative;
                display: inline-block;

                .itemBox {
                    width: 92%;
                    margin: 20px auto;
                    font-size: 12px;
                    line-height: 1.64;

                    .itemRow {
                        width: 100%;
                    }

                    .itemTitle {
                        color: #8787a6;
                    }

                    .discount {
                        padding-left: 2em;
                    }
                }
            }
        }
    }
}
</style>