<template>
    <div
        class="pay-message d-flex flex-column"
        :class="[
            messageClass,
            { 'user-side': !backend || !isChatMember, click: isChatMember },
        ]"
        @click="view"
    >
        <div class="d-flex align-items-center flex-fill pay-msg-body">
            <span :class="icon" class="icon flex-none"></span>
            <div class="texts flex-fill overflow-hidden">
                <div class="text-left text-nowrap text-truncate">
                    {{ title }}
                </div>
                <div class="d-flex justify-content-between">
                    <span>{{ amount | currency }}</span>
                    <span>{{ status }}</span>
                </div>
            </div>
        </div>
        <div class="pay-method text-left">{{ method }}</div>
    </div>
</template>

<script lang="ts">
    import {
        PayMethod,
        payMethodMapping,
        PayStatus,
        payStatusMapping,
        cardPayStatusMapping,
    } from "@/customer-service/model";
    import { PayMessageBody } from "@/customer-service/xim/models/chat";
    import { Component } from "vue-property-decorator";
    import BaseMessage from "./index";
    import Chat from "@/customer-service/xim";
    import { ChatStore, chatStore } from "@/customer-service/store/model";
    import { CustomerServiceEvent, MessageEvent } from "@/customer-service/event";

    @Component({ components: {} })
    export default class Index extends BaseMessage {
        @chatStore.State(ChatStore.STATE_CHAT_CURRENT_IS_CHAT_MEMBER)
        private readonly isChatMember!: ChatStore.STATE_CHAT_CURRENT_IS_CHAT_MEMBER;

        protected backend = Chat.isBackend();

        private get payData() {
            return this.messageBody.msg as PayMessageBody;
        }

        private get title() {
            return this.payData.itemName || this.payData.totalName;
        }

        private get amount() {
            return +this.payData.amount || this.payData.totalMoney;
        }

        private get status() {
            // 银行卡转账
            if (+this.payData.paymentFunction === PayMethod.CardTransfer) {
                return cardPayStatusMapping.get(+this.payData.status);
            }
            return payStatusMapping.get(+this.payData.status);
        }

        private get method() {
            return payMethodMapping.get(+this.payData.paymentFunction);
        }

        private get icon() {
            const m = +this.payData.paymentFunction;
            const s = +this.payData.status;
            if (m === PayMethod.Balance && s === PayStatus.UnPay) {
                return "icon-1";
            }
            if (m === PayMethod.CardTransfer && s === PayStatus.UnPay) {
                return "icon-2";
            }
            if (s === PayStatus.WaitRefund) {
                return "icon-3";
            }

            return "completed";
        }

        private get messageClass() {
            const m = +this.payData.paymentFunction;
            const s = +this.payData.status;
            if (m === PayMethod.Balance) {
                if (s === PayStatus.UnPay) {
                    return "balance-unpay";
                }
                if (s === PayStatus.Paied) {
                    return "balance-paied";
                }
            }
            if (m === PayMethod.CardTransfer) {
                if (s === PayStatus.UnPay) {
                    return "card-unpay";
                }
                if (s === PayStatus.Paied) {
                    return "card-paied";
                }
            }
            if (s === PayStatus.WaitRefund) {
                return "refund-unpay";
            }
            if (s === PayStatus.Refund) {
                return "refund-paied";
            }
            return "default";
        }

        private view() {
            this.isChatMember &&
                CustomerServiceEvent.open(
                    this,
                    MessageEvent.PayMessage,
                    +this.payData.paymentId
                );
        }
    }
</script>

<style lang="less" scoped>
    .pay-message {
        border-radius: 10px 0 10px 10px;
        width: 248px;
        height: 106px;
        color: #fff;

        &.click {
            cursor: pointer;
        }

        &.user-side {
            border-radius: 0 10px 10px 10px;
        }

        &.default,
        &.balance-unpay {
            background: linear-gradient(180deg, #f95b3c 0%, #f94623 100%);
        }
        &.balance-paied {
            background: linear-gradient(180deg, #f95b3c 0%, #f94623 100%)
                rgba(255, 255, 255, 0.3);
        }
        &.card-unpay {
            background: linear-gradient(180deg, #ff884d 0%, #ff7a38 100%);
        }
        &.card-paied {
            background: linear-gradient(180deg, #ff884d 0%, #ff7a38 100%)
                rgba(255, 255, 255, 0.3);
        }
        &.refund-unpay {
            background: linear-gradient(180deg, #faad14 0%, #faa40f 100%);
        }
        &.refund-paied {
            background: linear-gradient(180deg, #faad14 0%, #faa40f 100%)
                rgba(255, 255, 255, 0.3);
        }

        .pay-msg-body {
            padding: 20px;
        }

        .pay-method {
            background-color: #fff;
            color: #8e8d99;
            padding: 5px 10px;
            border-radius: 0 0 10px 10px;
            box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.06);
        }

        .icon {
            width: 40px;
            height: 40px;
            display: inline-block;
            margin-right: 20px;
            background-repeat: no-repeat;

            &.icon-1 {
                background-image: url("./pay-status-1.svg");
            }

            &.icon-2 {
                background-image: url("./pay-status-2.svg");
            }

            &.icon-3 {
                background-image: url("./pay-status-3.svg");
            }

            &.completed {
                background-image: url("./pay-completed.svg");
            }
        }

        .texts {
            line-height: 1.5;
            div:last-child {
                margin-left: -2px;
            }
        }
    }
</style>