<template>
    <div class="top">
        <div class="title">寄售说明</div>
        <div class="name" v-for="(item, index) in list" :key="index">
            <span>{{ item.title }}</span>
        </div>
        <div class="border border1"></div>
        <div class="content">
            <van-field type="number" label="寄售价格(元)" placeholder="请设置寄售价格" v-model="price" />
        </div>
        <div class="border"></div>
        <div class="input">
            <div class="text1">请输入交易密码，验证信息</div>
            <van-password-input :value="password" :focused="showKeyboard" @focus="showKeyboard = true" />
            <!-- 数字键盘 -->
            <van-number-keyboard v-model="password" :show="showKeyboard" @blur="showKeyboard = false" maxlength="6" />
            <div class="text2" @click="$router.push('/tradingPassword')">忘记密码？</div>
        </div>
        <div class="bottom van-safe-area-bottom" ref="bottom">
            <van-notice-bar
                color="#FDFB60"
                background="#ff6c0016"
                text="出售成功的加密作品将会携带加密作品的所有信息转让于购买方，包括但不限于：加 密空间、权益的使用、加密作品的区块信息等"
            />
            <div class="bottom-content">
                <div class="btn1" @click="$router.go(-1)">取消</div>
                <div class="btn2" @click="submit">确认寄售</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Top',
    data() {
        return {
            price: '',
            showKeyboard: false,
            password: '',
            list: [
                {
                    title: '1. 作品寄售为单个作品价格'
                },
                {
                    title: '2. 用户将会看到加密作品的权益、加密空间的使用情况'
                },
                {
                    title: '3. 交易成功后加密作品的点赞数量将会被清除'
                },
                {
                    title: '4. 平台会收取作品出售价格的 5% 作为服务费'
                },
                {
                    title: '5. 因电子支付通道限制，单笔限额20000元'
                }
            ]
        };
    },
    methods: {
        submit() {
            if (this.price != '') {
                this.$http
                    .post('/user/verifyTradeCode', {
                        tradeCode: this.password
                    })
                    .then(() => {
                        this.$http
                            .post('/asset/consignment', {
                                id: this.$route.query.id,
                                price: this.price
                            })
                            .then(res => {
                                this.$toast.success('寄售成功');
                                setTimeout(() => {
                                    this.$router.go(-1);
                                }, 1000);
                            })
                            .catch(e => {
                                if (e) {
                                    this.$toast.success(e.error);
                                }
                            });
                    })
                    .catch(e => {
                        if (e) {
                            this.$toast('密码错误');
                        }
                    });
            } else {
                this.$toast('请输入价格');
            }
        }
    }
};
</script>

<style lang="less" scoped>
/deep/ .van-password-input {
    margin: 0 0;
    .van-password-input__security {
        border: 1px solid #939599;
        height: 42px;
        border-radius: 2px;
        li {
            background-color: transparent;
            &:not(:last-child) {
                border-right: 1px solid #939599;
            }
            i {
                background-color: #fff;
            }
        }
    }
}
/deep/.van-number-keyboard__body {
    background-color: #4a4a4a;
    .van-key {
        background-color: @bg;
        &:active {
            background-color: @bg3;
        }
    }
}

.input {
    margin-top: 20px;
    .text1 {
        font-size: 14px;
        color: #ffffff;
        line-height: 24px;
        margin-bottom: 6px;
    }
}
.top {
    /deep/ .van-password-input {
        margin: 10px 0;
        padding: 0 25px;
        .van-password-input__security {
            border: 1px solid #939599;
            height: 42px;
            border-radius: 2px;
            li {
                background-color: transparent;
                &:not(:last-child) {
                    border-right: 1px solid #939599;
                }
                i {
                    background-color: #fff;
                }
            }
        }
    }
    /deep/ .van-cell {
        padding-top: 20px;
    }
    /deep/.van-cell__title {
        font-size: 14px;
        font-weight: bold;
        color: #ffffff;
        line-height: 24px;
    }
    // background-color: #0f0f0f;
    padding-bottom: 100px;
    .title {
        font-size: 20px;
        font-weight: bold;
        color: #ffffff;
        line-height: 30px;
        margin-top: 5px;
        padding-left: 16px;
    }
    .name {
        padding-left: 16px;
        span {
            font-size: 12px;
            font-weight: 400;
            color: #939599;
            line-height: 22px;
        }
    }
    .bottom {
        position: fixed;
        bottom: 0px;
        left: 0;
        right: 0;
        background-color: @bg;
        z-index: 20;
        border-top: 1px solid #313233;

        .bottom-content {
            padding: 6px 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .btn1 {
                width: 161px;
                height: 44px;
                border-radius: 22px;
                line-height: 44px;
                color: #939599;
                text-align: center;
                border: 1px solid #939599;
            }
            .btn2 {
                width: 162px;
                height: 44px;
                line-height: 44px;
                text-align: center;

                color: #333230;
                background: linear-gradient(135deg, #fdfb60 0%, #ff8f3e 100%);
                border-radius: 22px;
            }
            .van-button {
                flex-grow: 1;
                color: #333230 !important;
                max-width: 210px;
            }
            .text {
                font-size: 14px;
                color: #939599;
                line-height: 20px;
                word-break: keep-all;
            }
        }
    }
    .border {
        width: 375px;
        height: 5px;
        background: #202122;
        &.border1 {
            margin-top: 20px;
        }
    }
    .content {
        width: 375px;
        height: 70px;
        line-height: 70px;
        background: #19191b;
    }
    .input {
        margin-top: 20px;
        .text1 {
            font-size: 14px;
            color: #ffffff;
            line-height: 24px;
            margin-bottom: 6px;
            text-align: center;
        }
        .text2 {
            font-size: 14px;
            text-align: right;
            font-weight: 400;
            color: #939599;
            line-height: 24px;
            margin-right: 15px;
        }
    }
}
</style>
