<template>
    <view
        v-if="data"
        class="order-item"
    >
        <view
            class="order-item__title"
        >
            <view
                class="order-item__title__company c-font-medium c-color-title c-font-wb"
            >
                {{ data.company }}
            </view>
            <view
                class="order-item__title__status c-color-mall c-font-medium-less"
            >
                {{ data.statusText }}
            </view>
        </view>
        <view
            class="order-item__detail"
            @tap="onItemTap(data)"
        >

            <view class="order-item__detail__img">
                <c-image
                    has-compress
                    :src="data.imgUrl"
                    width="100%"
                    height="100%"
                    :hack-white-stroke="false"
                    :is-round="false"
                />
            </view>
            <view
                class="order-item__detail__infor"
            >
                <view
                    class="order-item__detail__infor__des"
                >
                    <view
                        class="order-item__detail__infor__des__title c-line-clamp2 c-color-title c-font-medium"
                    >
                        {{ data.title }}
                    </view>
                    <view
                        class="c-font-big-less c-color-title c-font-medium-less"
                    >
                        ￥<text class="c-font-big-less" style="line-height: 0.22rem;">{{ data.unitIntegerPrice }}</text>
                        <text class="c-font-medium-less">.{{ data.unitDecimalPrice }}</text>
                    </view>
                </view>
                <view
                    v-if="data.insureInfo && data.insureInfo.length"
                    class="order-item__detail__infor__price c-font-medium-less c-color-title"
                >
                    <view
                        v-for="(item, index) in data.insureInfo"
                        :key="index"
                        class="order-item__detail__infor__price__insurance-people c-font-medium-less c-color-gray"
                    >
                        {{ item.title }}：{{ item.value }}
                    </view>
                </view>
            </view>


        </view>
        <view
            class="order-item__pay c-color-title c-font-medium-less c-font-wb"
        >
            实付款￥<text class="order-item__pay__price c-font-big-less c-font-wb">{{ data.payIntegerPrice }}</text>
            <text class="order-item__pay__price c-font-medium-less c-font-wb">.{{ data.payDecimalPrice }}</text>
        </view>
        <view v-if="data.opList && data.opList.length" class="op">
            <view class="op__list">
                <view
                    v-for="(item,index) in data.opList"
                    :key="'btn_' + index"
                    :style="{position: 'relative', margin: '0 0 0 0.12rem'}"
                    @tap.stop="onOpItemTap(item, index)"
                >
                    <view
                        class="op__list__item c-font-medium-less c-color-title"
                        :class="item.color"
                    >
                        <text class="op__list__item__text">{{ item.text }}</text>
                    </view>
                    <view :class="[item.color, 'bordermini']"/>
                </view>

            </view>
        </view>
    </view>
</template>

<script>
/**
 * @file 保险商城订单
 * @author yinlejia
 * @categories 业务组件
 * @tags [component]
 */
import CImage from '@components/common/image';
import {navigate} from '@utils/navigate';

export default {
    config: {
        component: true,
    },
    options: {
        addGlobalClass: true,
    },
    components: {
        CImage
    },
    props: {
        /* 数据 */
        data: {
            type: Object,
            default: () => {
                return {};
            },
        },
        /* 索引 */
        index: {
            type: Number,
            default: -1,
        },
    },
    data() {
        return {

        };
    },
    methods: {
        onOpItemTap(btn) {
            // 页面跳转
            if (btn.h5Url) {
                navigate({
                    url: btn.h5Url,
                    urlType: 2,
                    log: {
                        type: 'clk',
                        value: 'policy-product-btn',
                        ext: {
                            pd: 'bx',
                            value_type: btn.text || '',
                            value_id: this.index + 1,
                            page_type: 'bx-order',
                        },
                    },
                });
            }
            else if (btn.tel) {
                // 拨打电话
                this.$api.makePhoneCall({
                    phoneNumber: `${btn.tel}`,
                    fail(err) {
                        this.$api.showModal({
                            title: '拨打失败',
                            content: '请检查是否输入了正确的电话号码',
                            showCancel: false,
                        });
                    },
                });
            }
        },
        onItemTap(data) {
            // 订单详情页面跳转
            if (data.tcUrl) {
                navigate({
                    url: data.tcUrl,
                    urlType: 2,
                    log: {
                        type: 'clk',
                        value: 'policy-product',
                        ext: {
                            pd: 'bx',
                            value_id: this.index + 1,
                            page_type: 'bx-order',
                        },
                    },
                });
            }
        },
    },
};
</script>

<style lang="less" scoped>
.order-item {
    border-radius: 0.13rem;
    padding: 0 0.13rem 0.15rem 0.13rem;
    background-color: #fff;

    &__title {
        width: 100%;
        height: 0.45rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    &__detail {
        display: flex;

        &__img {
            height: 0.86rem;
            flex: 0 0 0.86rem;
            margin-right: 0.08rem;
        }

        &__infor {
            flex: 1;

            &__des {
                display: flex;
                justify-content: space-between;

                &__title {
                    flex: 1 1 1.8rem;
                    line-height: 0.22rem;
                    margin-right: 0.25rem;
                }

                &__int-price {
                    font-size: 0.18rem;
                    line-height: 0.22rem;
                }
            }

            &__price {
                &__insurance-time {
                    white-space: nowrap;
                }
            }
        }
    }

    &__pay {
        width: 100%;
        text-align: end;
        margin-top: 0.11rem;
    }
}

.op {
    margin-top: 0.12rem;
    display: flex;
    justify-content: flex-end;

    &__list {
        display: flex;

        &__item {
            box-sizing: border-box;
            padding: 0 0.17rem;
            height: 0.32rem;
            line-height: 0.32rem;
            border-radius: 333px;

            &:first-child {
                margin-left: 0;
            }

            &__text {
                min-width: 0.6rem;
                text-align: center;
                display: inline-block;
            }
        }
    }
}

.bordermini {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 300%;
    height: 300%;
    transform: scale(0.33);
    transform-origin: left top;
    box-sizing: border-box;
    border: 1px solid #858585;
    border-radius: 0.48rem;
}

.gray {
    color: #1f1f1f;
    border-color: #858585;
}

.red {
    color: #fd503e;
    border-color: #fd503e;
}

.fullRed {
    color: #fff;
    background-color: #fd503e;
    border: none;
}

.white {
    color: white;
    border-color: #fd503e;
}
</style>
