<template>
    <view v-if="data" class="order-card">
        <view class="order-card__header">
            <view class="order-card__header--left">
                <c-image
                    class="order-card__header__icon"
                    has-compress
                    :src="data.avatar"
                    width="0.18rem"
                    height="0.18rem"
                    :hack-white-stroke="false"
                    :extra="{column: 1}"
                />
                <view
                    class="order-card__header__title c-font-medium c-gap-left-small c-color-title c-font-wb"
                >{{ data.storeName }}</view>
            </view>
            <view class="order-card__header--right c-font-15">
                {{ data.status }}
            </view>
        </view>
        <!-- sku卡片 -->
        <view
            v-if="data.skuInfo"
            class="order-card__sku"
            @tap="onCardTap"
        >
            <c-image
                class="order-card__sku__image"
                has-compress
                :src="data.skuInfo.img"
                width="0.86rem"
                height="0.86rem"
                :hack-white-stroke="false"
                :is-round="false"
                radius="0.08rem"
                :extra="{column: 3}"
            />
            <view class="order-card__sku__info">
                <view class="order-card__sku__info__header">
                    <view
                        class="order-card__sku__info__header__title c-font-medium c-color-title c-line-clamp2"
                    >{{ data.skuInfo.title }}</view>
                    <view class="order-card__sku__info__header__price--wrap">
                        <view class="order-card__sku__info__header__price">
                            <price
                                v-if="data.skuInfo.price"
                                :price="data.skuInfo.price"
                                u-size=".15rem"
                                i-size=".17rem"
                                d-size=".15rem"
                                :p-style="{'color': '#1f1f1f', 'font-family': 'PingFangSC-Regular'}"
                            />
                        </view>
                        <view
                            class="order-card__sku__info__header__amount c-color-gray"
                        >{{ data.skuInfo.amount }}</view>
                    </view>
                </view>
                <view
                    v-if="data.skuInfo.refundStatus"
                    class="order-card__sku__info__refundStatus"
                >{{ data.skuInfo.refundStatus }}</view>
                <!-- 添加申请退款按钮 -->
                <view v-if="data.skuInfo.cplButton" class="order-card__sku__info__footer">
                    <view
                        class="order-card__sku__info__footer__button"
                        @tap.stop="onRefund(data.skuInfo.cplButton)"
                    >
                        <text>{{ data.skuInfo.cplButton.text }}</text>
                        <!-- tooltip -->
                        <view
                            v-if="data.skuInfo.cplButton.bubble"
                            class="order-card__sku__info__footer__button__tooltip"
                        >
                            {{ data.skuInfo.cplButton.bubble }}
                            <view class="order-card__sku__info__footer__button__tooltip__triangle"/>
                        </view>
                    </view>

                </view>
                <view
                    v-if="data.skuInfo.tips"
                    class="c-font-normal c-line-clamp1 order-card__sku__info__tips"
                >{{ data.skuInfo.tips }}</view>
            </view>
        </view>
        <!-- list -->
        <view class="order-card__list--wrap">
            <!-- 检测机构 -->
            <view
                v-if="data.agency"
                class="order-card__list c-font-15 c-color-title order-card__agency"
                @tap="onAgencyPopup(true)"
            >
                <view class="order-card__list__title">{{ data.agency.title }}</view>
                <view class="order-card__list__text">
                    <text>{{ data.agency.text }}</text>
                    <c-icon
                        name="right"
                        font-size="0.12rem"
                        class="modal-title-right"
                        style="color: #858585;"
                    />
                </view>
            </view>
            <!-- 商品总价 -->
            <view v-if="data.total" class="order-card__list c-font-15 c-color-title order-card__total">
                <view class="order-card__list__title">{{ data.total.title }}</view>
                <view class="order-card__list__text">
                    <price
                        v-if="data.total.price"
                        :price="data.total.price"
                        u-size=".13rem"
                        i-size=".15rem"
                        d-size=".13rem"
                        :p-style="{'color': '#1f1f1f', 'font-family': 'PingFangSC-Regular'}"
                    />
                </view>
            </view>
            <!-- 配送方式 -->
            <view
                v-if="data.delivery"
                class="order-card__list c-font-15 c-color-title order-card__delivery"
            >
                <view class="order-card__list__title">{{ data.delivery.title }}</view>
                <view class="order-card__list__text">
                    <text>{{ data.delivery.type }}</text>
                    <template v-if="data.delivery.price">
                        <price
                            v-if="data.delivery.price"
                            :price="data.delivery.price"
                            u-size=".13rem"
                            i-size=".15rem"
                            d-size=".13rem"
                            :p-style="{'color': '#1f1f1f', 'font-family': 'PingFangSC-Regular'}"
                        />
                    </template>
                </view>
            </view>
            <!-- 订单备注 -->
            <view
                v-if="data.remark"
                class="order-card__list c-font-15 c-color-title order-card__remark"
            >
                <view class="order-card__list__title">{{ data.remark.title }}</view>
                <view class="order-card__remark__form">
                    <input
                        class="order-card__remark__form__input"
                        type="text"
                        :placeholder="data.remark.placeholder"
                        :value="formParams.remark"
                        name="remark"
                        :maxlength="20"
                        placeholder-class="order-card__remark__form__input--placeholder"
                        autocomplete="off"
                        @input="onFormInput($event, 'remark')"
                    >
                </view>
            </view>
        </view>
        <!-- 底部 -->
        <view
            v-if="data.totalAmount || data.finalPrice"
            class="order-card__bottom c-gap-top c-font-normal"
        >
            <view
                v-if="data.totalAmount"
                class="order-card__bottom__amount c-gap-right-small c-color-title"
            >
                <text>共</text>{{ data.totalAmount }}<text>件商品</text>
            </view>
            <view v-if="data.finalPrice" class="order-card__bottom__total">
                <text class="c-color-title">合计：</text>
                <price
                    v-if="data.finalPrice"
                    :price="data.finalPrice"
                    u-size=".14rem"
                    i-size=".19rem"
                    d-size=".14rem"
                    :p-style="{'color': '#FD503E'}"
                />
            </view>
        </view>
        <view v-if="data.refundInfo" class="order-card__refundDetail">
            <view
                v-for="item in data.refundInfo"
                :key="item.title"
                class="order-card__refundDetail__item"
            >
                {{ item.title }} {{ item.value }}
            </view>
        </view>

        <view v-if="data.pricesInfo" class="order-card__sku__info__bottom">
            <!-- 订单列表 价格 -->
            <view class="order-card__sku__info__bottom__price c-font-15">
                <text class="c-color-title">{{ data.pricesInfo.text }}</text>
                <price
                    v-if="data.pricesInfo.price"
                    :price="data.pricesInfo.price"
                    u-size=".14rem"
                    i-size=".18rem"
                    d-size=".14rem"
                    :p-style="{'color': '#1f1f1f'}"
                />
            </view>
        </view>
        <!-- 按钮 -->
        <view v-if="data.op && data.op.length" class="order-card__btns">
            <op-list :data="{list: data.op}"/>
        </view>

        <!-- 机构弹窗 -->
        <agency-popup
            v-if="data.agency && data.agency.popup"
            :show="isShowAgency"
            :data="data.agency.popup"
            @onClose="onAgencyPopup"
        />

        <!-- 退款超过公诉期弹窗 -->
        <c-dialog
            v-if="data.skuInfo.cplButton
                && data.skuInfo.cplButton.dialog
                && data.skuInfo.cplButton.dialog.buttons"
            :show="isShowRefund"
            :btn-opts="data.skuInfo.cplButton.dialog.buttons"
            @btntap="isShowRefund = false"
        >
            <template>
                <view class="order-card__dialogContent">
                    <view
                        v-for="t in data.skuInfo.cplButton.dialog.text"
                        :key="t"
                        :style="{lineHeight: 1.5}"
                    >
                        {{ t }}
                    </view>
                </view>
            </template>
        </c-dialog>
    </view>
</template>

<script>
import Price from '@commonComponents/Price';
import CIcon from '@baidu/med-ui/components/Icon/Icon';
import CImage from '@components/common/image';
import AgencyPopup from './AgencyPopup';
import OpList from './OpList';
import CDialog from '@baidu/med-ui/components/Dialog/Dialog';
import {navigate} from '@utils/navigate';

/**
 * @file 基因检测-订单卡片
 * @author mayifan02
 * @categories 业务组件
 * @tags [component]
 */
export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    components: {
        CIcon,
        Price,
        AgencyPopup,
        OpList,
        CDialog,
        CImage
    },
    props: {
        /* 数据 */
        data: {
            type: Object,
            default: () => {
                return {};
            }
        },
    },
    created() {

    },
    data() {
        return {
            // 机构弹层
            isShowAgency: false,
            // input value
            formParams: {
                remark: ''
            },
            // 退款公诉期弹窗
            isShowRefund: false,
            // 重新申请toolTip
            isShowToolTip: true,
        };
    },
    methods: {
        onCardTap() {

            const {url, toast} = this.data;

            if (toast) {
                this.$api.showToast({
                    icon: 'none',
                    title: toast
                });
            } else if (url) {
                navigate({url});
            }
        },
        onAgencyPopup(value) {
            this.isShowAgency = !!value;
        },
        onFormInput(e, name) {
            let value = e.detail.value;

            value = value.slice(0, 20);
            this.$set(this.formParams, name, value);
            /** input change */
            this.$emit('inputChange', {...this.formParams});
            if (value.length >= 20) {
                this.$api.showToast({
                    icon: 'none',
                    title: '最多可输入20个字哦~'
                });
            }
        },
        onJump(url) {
            navigate({
                url
            });
        },
        onRefund(button) {
            if (!button) {
                return;
            }

            const {dialog, toast, url} = button;

            // toast提示
            if (toast) {
                this.$api.showToast({
                    icon: 'none',
                    title: toast
                });
                return;
            }

            // 对话框提示
            if (dialog) {
                this.isShowRefund = true;
                return;
            }

            // 空url 不跳转
            if (!url) {
                return;
            }

            this.onJump(url);
        }
    },
};
</script>

<style lang="less" scoped>
.order-card {
    padding: 0.1rem 0.13rem;
    border-radius: 0.12rem;
    background-color: #fff;

    &__header {
        display: flex;
        justify-content: space-between;
        margin-bottom: 0.18rem;

        &--left {
            display: flex;
            align-items: center;
        }

        &--right {
            color: #fd503e;

            &__image {
                width: 0.24rem;
                height: 0.24rem;
                margin-left: 0.04rem;
                vertical-align: middle;
                background-color: #bfa;
            }
        }

        &__icon {
            width: 0.18rem;
            height: 0.18rem;
            border-radius: 50%;
        }

        &__title {
            // font-weight: bold;
        }
    }

    &__sku {
        position: relative;
        display: flex;
        margin-bottom: 0.11rem;

        &__image {
            width: 0.86rem;
            height: 0.86rem;
            border-radius: 0.08rem;
            flex-shrink: 0;
            display: block;
            margin-right: 0.07rem;
        }

        &__info {
            flex: 1;
            position: relative;

            &__tips {
                color: #fd503e;
            }

            &__header {
                display: flex;
                justify-content: space-between;
                margin-top: -0.04rem;

                &__title {
                    margin-right: 0.6rem;
                    margin-bottom: 0;
                }

                &__price--wrap {
                    padding-top: 0.02rem;
                    text-align: right;
                }
            }

            &__bottom {
                display: flex;
                justify-content: flex-end;

                &__price {
                    font-weight: bold;
                }
            }

            &__refundStatus {
                color: #faa90e;
                font-size: 0.15rem;
                line-height: 0.18rem;
                text-align: right;
            }

            // 退款按钮
            &__footer {
                display: flex;
                justify-content: flex-end;
                margin-top: 0.575rem;
                position: relative;

                &__button {
                    min-width: 0.96rem;
                    box-sizing: border-box;
                    padding: 0 0.17rem;
                    text-align: center;
                    line-height: 0.30rem;
                    height: 0.32rem;
                    border: 1px solid #858585;
                    border-radius: 0.16rem;
                    color: #1f1f1f;
                    font-size: 0.15rem;

                    &__tooltip {
                        position: absolute;
                        text-align: center;
                        padding: 0 0.08rem;
                        height: 0.26rem;
                        line-height: 0.26rem;
                        top: -0.32rem;
                        right: 0.01rem;
                        color: white;
                        font-size: 0.14rem;
                        border-radius: 0.08rem;
                        background-color: #1f1f1fcc;

                        &__triangle {
                            @width: 0.04rem;
                            position: absolute;
                            right: 50%;
                            transform: translateX(50%);
                            bottom: -@width * 2;
                            border: @width solid transparent;
                            border-top-color: #1f1f1fcc;
                        }
                    }
                }
            }
        }
    }

    &__list {
        display: flex;
        justify-content: space-between;
        margin-top: 0.06rem;

        &:nth-child(1) {
            margin-top: -0.04rem;
        }
    }

    &__remark {
        &__form {
            width: 75%;
            text-align: right;

            &__input {
                text-align: right;
                font-size: 0.15rem;
                color: #1f1f1f;
                order: none;
                outline: none;

                &::placeholder {
                    font-size: 0.15rem;
                    color: #858585;
                }

                &--placeholder {
                    font-size: 0.15rem;
                    color: #858585;
                }
            }
        }
    }

    &__bottom {
        display: flex;
        justify-content: flex-end;
        font-weight: bold;
        padding-top: 0.11rem;
        position: relative;

        &::after {
            content: '';
            position: absolute;
            background-color: #e0e0e0;
            display: block;
            width: 100%;
            height: 1px; /* no */
            transform: scale(1, 0.5);
            top: 0;
            left: 0;
        }
    }

    &__dialogContent {
        font-size: 0.16rem;
        line-height: 1;
        text-align: center;
        color: #1f1f1f;
    }

    &__refundDetail {
        color: #525252;
        font-size: 0.14rem;
        line-height: 1.5;
        font-weight: 400;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-content: flex-start;
        margin: 0.15rem 0;
        padding: 0.09rem 0;
        text-indent: 0.1rem;
        background-color: #f5f5f5;
        border-radius: 0.09rem;

        &__item {
            width: 100%;
        }
    }
}
</style>
