<template>
    <view class="progress">
        <view 
            v-for="(item, index) in cList"
            :key="index"
            class="progress__item"
        >
            <view class="progress__item__title">
                <view class="progress__item__title-inner">
                    <view class="progress__item__title__circle c-inline-block" :class="{'progress__item__title__circle-act-bg': item.status === 1}">
                        <c-icon
                            v-if="item.status === 1"
                            name="check"
                            font-size="10px"
                        />
                    </view>
                    <view class="progress__item__title__value c-inline-block" :class="{'progress__item__title__value-act-font': item.status === 1}">{{ item.title }}</view>
                </view>
                <view class="progress__item__title__date c-font-normal">{{ item.time }}</view>
            </view>
            <view class="progress__item__desc">
                <c-parse
                    :nodes="item.desc"
                    :base-a-color="'#4E6EF2'"
                    @onTapA="onTapA(item)"
                />
            </view>
            <view
                v-if="item.tips"
                class="progress__item__tips"
                @tap.stop="onTips(index)"
            >
                <view class="progress__item__tips__text c-font-normal">{{ item.tips.text }}{{ item.tips.isShow }}</view>
                <view v-show="!hide" class="progress__item__tips__cont-box">
                    <view class="progress__item__tips__cont">{{ item.tips.content }}</view>
                </view>
            </view>
            <view class="progress__item__line"/>
        </view>
    </view>
</template>

<script>
/**
 * @file 退款进度
 * @author mayifan02
 * @categories 业务组件
 * @tags [component]
 */

import CIcon from '@baidu/med-ui/components/Icon/Icon';
import CParse from '@baidu/med-ui/components/Parse/Parse';
import {request} from '@utils/request';
import {send} from '@utils/log';

import * as conf from '@utils/conf';
export default {
    config: {
        navigationStyle: 'custom',
        component: true
    },
    options: {
        addGlobalClass: true
    },
    components: {
        CIcon,
        CParse
    },
    props: {
        /** 退款进度数据 */
        list: {
            type: Array,
            default: () => {
                return [];
            }
        },
        /** 订单ID */
        orderId: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            cList: [],
            tipsIndex: -1,
            hide: true
        };
    },
    created() {
        this.cList = this.list;
    },
    methods: {
        onTips(index) {
            this.hide = !this.hide;
        },
        onTapA(btn) {
            send({
                type: 'b',
                action: 'text-link',
                extra: {
                    type: btn.type || btn.buttonText,
                    orderId: this.orderId
                }
            });
            if (btn.behavior === 'async') {
                request({
                    url: conf.apiHost + btn.asyncUrl,
                    method: 'get',
                    isFirstScreen: false,
                    isNeedLogin: true
                })
                    .then(res => {

                        if (res.data.toast) {
                            this.$api.showToast({
                                icon: 'none',
                                duration: 2000,
                                title: res.data.toast
                            });
                        }
                    })
                    .catch(err => {
                        this.$api.showToast({
                            icon: 'none',
                            duration: 2000,
                            title: (err && err.toast) || '操作失败，请稍后重试~'
                        });
                    });
            }
        },
        onHideTips() {
            this.hide = true;
        }
        
    }
};
</script>
<style lang="less" scoped>
.progress {
    position: relative;
    color: #858585;
    &__item {
        position: relative;
        &__title {
            padding-top: 13px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            &-inner {
                display: flex;
                align-items: center;
            }
            &__circle {
                position: relative;
                top: -1px;
                z-index: 10;
                width: 13px;
                height: 13px;
                text-align: center;
                line-height: 13px;
                color: #fff;
                background: #e0e0e0;
                border-radius: 50%;
                font-weight: bold;
                margin-right: 8px;
                vertical-align: middle;
                &-act-bg {
                    background: #FD503E;
                }
            }
            &__value {
                vertical-align: middle;
                font-size: 15px;
                line-height: 25px;
                font-weight: bold;
                &-act-font {
                    color: #FD503E;
                }
            }

        }
        &__desc {
            line-height: 23px;
            font-size: 14px;
            color: #858585;
            padding-left: 21px;
        }
        &__tips {
            padding-left: 21px;
            position: relative;
            &__text {
                color: #4E6EF2;
                line-height: 23px;
            }
            &__cont {
                position: absolute;
                line-height: 20px;
                z-index: 20;
                background: #525252;
                border-radius: 10px;
                color: #fff;
                max-width: 
                89.21vw;;
                padding: 10px;
                box-sizing: border-box;
                transition: 0.3s;
                &-box {
                    position: relative;
                    bottom: -9px;
                    left: -12px;
                    z-index: 20;
                }
                &::after {
                    content: '';
                    position: absolute;
                    z-index: 10;
                    top: -13px;
                    left: 60px;
                    border: 6.5px solid transparent;
                    border-bottom-color: #525252;
                }
            }
        }
        &__line {
            position: absolute;
            left: 6px;
            top: 25.5px;
            width: 0.66px;
            height: 100%;
            background: #e0e0e0;
        }
        &:last-child {
            .progress__item__line {
                display: none;
            }
        }
    }
    
}
</style>
