<template>
    <view class="entrustOrderList">
        <!-- 四个tab -->
        <view class="tab">
            <view class="item" :class="{ select: type === 0 }" @click="onChangeType(0)">{{ i18n.CurrentEntrust }}
            </view>
            <view class="item" :class="{ select: type === 1 }" @click="onChangeType(1)">{{ i18n.Position }}
            </view>
            <view class="item" :class="{ select: type === 2 }" @click="onChangeType(2)">{{ i18n.Closed }}
            </view>
            <view class="item" :class="{ select: type === 3 }" @click="onChangeType(3)">{{ i18n.Revoked }}
            </view>
        </view>
        <!-- 卡片列表 -->
        <view class="content">
            <view class="card" v-for="(item, index) in dealList" :key="index">
                <view class="header">
                    <text class="dealType" :class="{ long: item.dealType === 'long' }">long</text>
                    <text class="time">02-17 09:18:20</text>
                    <text class="closeTimeTitle" v-show="type === 2 || type === 3">{{ i18n.CloseTime }}</text>
                    <text class="closeTime" v-show="type === 2 || type === 3">02-17 16:11:35</text>
                    <view class="closeBtn" v-show="type === 0 || type === 1" @click="closeModalShow = true">{{
                            i18n.close
                    }}</view>
                </view>

                <view class="infoBody">
                    <view class="item">
                        <!-- 公共的 -->
                        <view class="left">
                            <view class="title">{{ coin }}/{{ currency }}</view>
                            <view class="value">1 * 10</view>
                            <view class="title">{{ i18n.Bond }}</view>
                            <view class="value">4070.00</view>
                            <view class="title" v-show="type !== 3">{{ i18n.StyPrice }}</view>
                            <view class="value" v-show="type !== 3">0.00</view>
                        </view>
                        <!-- 公共的 -->
                        <view class="center">
                            <view class="title">{{ i18n.AmountLeverage }}</view>
                            <view class="value">40700</view>
                            <view class="title">{{ i18n.Fee }}</view>
                            <view class="value">40.70</view>
                            <view class="title" v-show="type !== 3">{{ i18n.StsPrice }}</view>
                            <view class="value" v-show="type !== 3">0.00</view>
                        </view>
                        <!-- Current Entrust 和  Position-->
                        <view class="right" v-show="type === 0 || type === 1">
                            <view class="title">{{ i18n.CurrentPrice }}</view>
                            <view class="value" style="color:#F4506A;">39952.64</view>
                            <view class="title" v-show="type === 0">{{ i18n.status }}</view>
                            <view class="value" v-show="type === 0">Closed</view>
                            <view class="title" v-show="type === 1">{{ i18n.do }}</view>
                            <view class="value" style="color:#00E8A2;" v-show="type === 1"
                                @click="stopModalShow = true">
                                Stop/Limit</view>
                            <view class="title">{{ i18n.ExpectProfit }}</view>
                            <view class="value" style="color:#F4506A;">-730.45</view>
                        </view>
                        <!-- Closed -->
                        <view class="right" v-show="type === 2">
                            <view class="title">{{ i18n.ClosePrice }}</view>
                            <view class="value" style="color:#00E8A2;">39952.64</view>
                            <view class="title">{{ i18n.status }}</view>
                            <view class="value">Closed</view>
                            <view class="title">{{ i18n.PL }}</view>
                            <view class="value" style="color:#00E8A2;">112.02</view>
                        </view>
                        <!-- Revoked -->
                        <view class="right" v-show="type === 3">
                            <view class="title">{{ i18n.status }}</view>
                            <view class="value" style="color:#F4506A;">Closed</view>
                        </view>
                    </view>
                </view>


            </view>
        </view>

        <!-- close确认框 -->
        <u-modal :show="closeModalShow" :confirmText="i18n.Confirm" :cancelText="i18n.Cancel" :showCancelButton="true"
            :title="i18n.WarmTips" :content='i18n.WarmTipsText' @confirm="closeConfirm" @cancel="closeModalShow = false"
            confirmColor="#00E8A2">
        </u-modal>

        <!-- stop确认框 -->
        <u-modal :show="stopModalShow" :confirmText="i18n.Confirm" :cancelText="i18n.Cancel" :showCancelButton="true"
            :title="i18n.StopLimit" :content='i18n.WarmTipsText' @confirm="stopConfirm" @cancel="stopModalShow = false"
            confirmColor="#00E8A2">
            <view class="stopModel">
                <view class="title">
                    <text class="left">{{ i18n.StyPrice }}</text>
                    <text class="right">{{ i18n.ExpectProfit }} {{ 0.01 }}</text>
                </view>
                <view class="numberInput">
                    <button class="btn sub" :class="{ disabled: stySubBtnDisabled || styValue <= 0 }"
                        :disabled="stySubBtnDisabled" @click="styValueChange('sub')"></button>
                    <input class="number" type="number" v-model="styValue" />
                    <button class="btn add" @click="styValueChange('add')"></button>
                </view>
                <view class="title">
                    <text class="left">{{ i18n.StsPrice }}</text>
                    <text class="right">{{ i18n.ExpectLoss }} {{ 0.01 }}</text>
                </view>
                <view class="numberInput">
                    <button class="btn sub" :class="{ disabled: stsSubBtnDisabled || stsValue <= 0 }"
                        :disabled="stsSubBtnDisabled" @click="stsValueChange('sub')"></button>
                    <input class="number" type="number" v-model="stsValue" />
                    <button class="btn add" @click="stsValueChange('add')"></button>
                </view>
            </view>


        </u-modal>


    </view>
</template>

<script>
import KeyValueRow from '../KeyValueRow/KeyValueRow.vue'
const COMPONENT_NAME = 'transaction'
let timer1 = null;
let timer2 = null;
export default {
    components: { KeyValueRow },
    name: COMPONENT_NAME,
    props: {
        coin: { // 数字货币名称
            type: String,
            default() {
                return 'BTC'
            }
        },
        currency: { // 货币名称
            type: String,
            default() {
                return 'USDT'
            }
        },
        coinAmount: { // 货币数量
            type: Number,
            default() {
                return 1
            }
        },
        bgTransparent: { // 背景是否透明
            type: Boolean,
            default() {
                return false
            }
        },
    },
    data() {
        return {
            closeModalShow: false,
            stopModalShow: false,
            type: 0,
            test: 0,
            dealList: [
                {
                    dealType: 'long'
                },
                {
                    dealType: 'long'
                },
            ],
            styValue: 2.55,
            stsValue: 0.3284974928739487,
            stySubBtnDisabled: false,
            stsSubBtnDisabled: false,

        }
    },
    computed: {
        i18n() {
            return this.$t("markets");
        },
    },
    mounted() {

    },
    onHide() {
        clearTimeout(timer2);
        clearInterval(timer2);
        timer1 = null;
        timer2 = null;
    },
    methods: {
        /**
         * 类型改变
         * @param {*} type 
         */
        onChangeType(type = 0) {
            this.type = type
        },
        /**
         * close确认弹窗
         */
        closeConfirm() {
            this.closeModalShow = false
        },
        /**
         * stop确认弹窗
         */
        stopConfirm() {
            if (this.styValue < 0 || this.stsValue < 0) {
                uni.showToast({
                    title: this.i18n.lessThan,
                    icon: 'none',
                    duration: 2000    //持续时间为
                })
                return;
            }
            this.stopModalShow = false
        },
        /**
         * styValue值变化
         */
        styValueChange(type = 'sub') {
            if (type === 'sub') {// 减操作
                this.styValue = parseInt(this.styValue) // 取整
                this.styValue -= 1;
                if (this.styValue <= 0) {
                    this.stySubBtnDisabled = true;
                    this.styValue = 0
                } else {
                    this.stySubBtnDisabled = false;
                }
            } else { // 加操作
                this.styValue = parseInt(this.styValue) // 取整
                this.styValue += 1;
                if (this.styValue <= 0) {
                    this.stySubBtnDisabled = true;
                    this.styValue = 0
                } else {
                    this.stySubBtnDisabled = false;
                }
            }
        },
        /**
         * stsValue值变化
         */
        stsValueChange(type = 'sub') {
            if (type === 'sub') {// 减操作
                this.stsValue = parseInt(this.stsValue) // 取整
                this.stsValue -= 1;
                if (this.stsValue <= 0) {
                    this.stsSubBtnDisabled = true;
                    this.stsValue = 0
                } else {
                    this.stsSubBtnDisabled = false;
                }
            } else { // 加操作
                this.stsValue = parseInt(this.stsValue) // 取整
                this.stsValue += 1;
                if (this.stsValue <= 0) {
                    this.stsSubBtnDisabled = true;
                    this.stsValue = 0
                } else {
                    this.stsSubBtnDisabled = false;
                }
            }
        },

    }
}
</script>

<style scoped lang="scss">
.entrustOrderList {
    .tab {
        display: flex;
        background: #211F32;

        .item {
            height: 64rpx;
            line-height: 64rpx;
            flex: 1;
            font-size: 24rpx;
            text-align: center;

            &.select {
                background: #323045;
                color: #00E8A2;
            }
        }


    }

    .content {
        padding: 32rpx;

        .card {
            position: relative;
            font-size: 24rpx;
            color: #A1A0A8;
            background: #211F32;
            border-radius: 20rpx;
            padding: 24rpx 32rpx;
            margin-bottom: 30rpx;

            .header {
                .dealType {
                    color: #00E8A2;
                    margin-right: 28rpx;
                }

                .time {
                    margin-right: 16rpx;
                }

                .closeTimeTitle {
                    margin-right: 16rpx;
                }

                .closeBtn {
                    position: absolute;
                    right: 32rpx;
                    top: 20rpx;
                    display: inline-block;
                    width: 98rpx;
                    height: 48rpx;
                    border-radius: 8rpx;
                    line-height: 48rpx;
                    background-color: rgba($color: #F4506A, $alpha: 0.1);
                    font-size: 24rpx;
                    text-align: center;
                    color: #F4506A;
                }
            }

            .infoBody {
                .item {
                    display: flex;

                    .title {
                        margin-top: 30rpx;
                        line-height: 32rpx;
                    }

                    .value {
                        color: #FFFFFF;
                    }

                    .left {
                        flex: 1;
                        text-align: left;
                    }

                    .center {
                        flex: 1;
                        text-align: center;
                    }

                    .right {
                        flex: 1;
                        text-align: right;
                    }
                }
            }


        }
    }

    /deep/.u-popup__content {
        background: #323045;

        .u-modal__title {
            color: #fff;
        }

        .u-modal__content__text {
            text-align: center;
        }
    }

    .stopModel {
        width: 560rpx;
        font-size: 24rpx;

        .title {
            display: flex;
            justify-content: space-between;
            width: 560rpx;
            margin: 24rpx 0;

            .left {}

            .right {
                color: #A1A0A8;
            }
        }

        .numberInput {
            display: flex;
            height: 88rpx;
            background: #211F32;
            border-radius: 32rpx;
            overflow: hidden;

            .btn {
                width: 80rpx;

                background: #16141f;
                padding: 0;
                border-radius: 0;

                &.sub {
                    background-image: url(../../static/maskets/sub.png);
                    background-repeat: no-repeat;
                    background-size: 32rpx;
                    background-position: 24rpx 28rpx;
                }

                &.add {
                    background-image: url(../../static/maskets/add.png);
                    background-repeat: no-repeat;
                    background-size: 32rpx;
                    background-position: 24rpx 28rpx;
                }

                &.button-hover {
                    background: #211F32;

                    &.sub::after {
                        background-image: url(../../static/maskets/sub.png);
                        background-repeat: no-repeat;
                        background-size: 64rpx;
                        background-position: 46rpx 56rpx;

                    }

                    &.add::after {
                        background-image: url(../../static/maskets/add.png);
                        background-repeat: no-repeat;
                        background-size: 64rpx;
                        background-position: 46rpx 56rpx;

                    }
                }

                &.disabled {
                    background: #211F32;

                    &.sub::after {
                        background-image: url(../../static/maskets/sub.png);
                        background-repeat: no-repeat;
                        background-size: 64rpx;
                        background-position: 46rpx 56rpx;

                    }
                }
            }

            .number {
                flex: 1;
                border-left: 2rpx solid #323045;
                border-right: 2rpx solid #323045;
                text-align: center;
                height: 88rpx;
                ;
                line-height: 88rpx;
                font-size: 24rpx;
            }
        }
    }



}
</style>
