<template>
    <view class="transaction">
        <view class="tab">
			<view class="buy uni-bg-up" :class="type == 2 ? 'normal' : ''" @click="onChangeType(1)">买入</view>
			<view class="sell uni-bg-down " :class="type == 1 ? 'normal' : ''" @click="onChangeType(2)">卖出</view>
		</view>
    </view>
</template>

<script>
const COMPONENT_NAME = 'transaction'
export default {
    name: COMPONENT_NAME,
    props: {
        showBack: { // 是否显示返回按钮
            type: Boolean,
            default() {
                return true
            }
        },
        bgTransparent: { // 背景是否透明
            type: Boolean,
            default() {
                return false
            }
        },
        bgnum: {
            type: Boolean,
            default() {
                return false
            }
        },
    },
    data() {
        return {
            title: 'Show more',
            collapseFlag: false, // 折叠状态
        }
    },
    computed: {
        i18n() {
            return this.$t("markets");
        },
    },
    mounted() {

    },
    methods: {
        collapse() {
            this.collapseFlag = !this.collapseFlag;
            this.title = this.collapseFlag ? 'Pick up' : 'Show more'
        }
    }
}
</script>

<style scoped lang="scss">
.showMoreContent {
    padding-top: 16rpx;
    margin-bottom: 16rpx;
    // border-top: 2rpx solid #323045;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;

    &.up {
        max-height: 500rpx;
    }

    &.down {
        max-height: 0;

    }
}

.showMoreTool {
    position: relative;
    color: #00E8A2;
    font-size: 28rpx;

    .showMoreIcon {
        width: 32rpx;
        height: 32rpx;
        
        position: absolute;
        top: 4rpx;
        right: 8rpx;
        background-image: url(../../static/me/ic_input_arrow_down.png);
        background-repeat: no-repeat;
        background-size: 32rpx;
        transition: transform 0.3s;

        &.up {
            transform: rotate(-180deg);
        }

        &.down {
            transform: rotate(0deg);
        }
    }
}
</style>
