<template>
    <TopNavigation/>
    <div class="content">
        <div class="consignment_title">寄售上架</div>
        <div class="consignment_tip">交易成功后该藏品将会被转移</div>
        <div class="consignment_set_price">1.设置价格(元）</div>
        <van-cell-group inset>
            <van-field v-model="price" type="number" placeholder="请输入价格"/>
        </van-cell-group>
        <div class="transaction_password">
            <div class="transaction_password_title">2.请输入交易密码</div>
            <div class="transaction_password_forget" @click="$router.push('/tradingPassword')">
                忘记密码
                <van-divider />
            </div>
        </div>
        <div>
        <!-- v-if="sets" -->
        <!-- 密码输入框 -->
        <van-password-input
        :value="password"
        :focused="showKeyboard"
        :gutter="16"
        @focus="showKeyboard = true"
        />
        <!-- 数字键盘 -->
        <van-number-keyboard
        v-model="password"
        :show="showKeyboard"
        @blur="keyBlur"
        :gutter="10"
        maxlength="6"
        theme="custom"
        close-button-text="完成"
        />
        </div>
        <!-- <div v-else class="text3" @click="$router.push('/tradingPassword')">您当前没有交易密码，点击去设置</div> -->
    </div>
    <div class="consignment_confirmation" ref="bottom">
        <div class="consignment_confirmation_left" @click="$router.go(-1)">取消</div>
        <div class="consignment_confirmation_right" @click="submit">确认</div>
    </div>
    <!-- <agreement ref="agree" :info="info" @agree="agree"></agreement> -->
</template>

<script>
import { mapState } from 'vuex';
// import Agreement from '../asset/Agreement.vue';
import TopNavigation from "../../components/TopNavigation.vue"
export default {
    components: { TopNavigation },
    name: 'Top',
    inject: ['changeScroll'],
    data() {
        return {
            price: '',
            showKeyboard: false,
            password: '',
            sets: false,
            list: [
                {
                    title: '1. 作品寄售为单个作品价格'
                },
                {
                    title: '2. 用户将会看到数字藏品的权益的使用情况'
                },
                {
                    title: '3. 交易成功后数字藏品的点赞数量将会被清除'
                },
                {
                    title: '4. 平台会收取作品出售价格的 5% 作为服务费'
                },
                {
                    title: '5. 因电子支付通道限制，单笔限额20000元'
                }
            ],
            info: {},
            agreement: false
        };
    },
    computed: {
        ...mapState(['userInfo']),
        price1() {
            let price = Math.floor(this.price * 100) / 100;
            return price.toFixed(2);
        },
        price2() {
            let price = Math.floor(this.price * (this.info.royalties || 0)) / 100;
            return price.toFixed(2);
        },
        price3() {
            let price = Math.floor(this.price * 4) / 100;
            return price.toFixed(2);
        },
        price4() {
            let price = Math.floor(this.price * 1) / 100;
            return price.toFixed(2);
        },
        price5() {
            let price = Math.floor(this.price * (95 - (this.info.royalties || 0))) / 100;
            return price.toFixed(2);
        }
    },
    mounted() {
        this.passFn();
        this.$http.get('/asset/get/' + this.$route.query.id).then(res => {
            this.info = res;
        });
    },
    methods: {
        keyboardEnter() {
            this.changeScroll(1000);
            this.showKeyboard = true;
        },
        passFn() {
            this.$http
                .get('/user/tradeCodeStatus', {
                    userId: this.userInfo.id
                })
                .then(res => {
                    console.log(res);
                    this.sets = res.set;
                });
        },
        agree() {
            this.agreement = true;
            this.submit();
        },
        submit() {
            if (Number(this.price) > 20000 && !this.agreement) {
                this.$refs.agree.init();
            } else if (Number(this.price)) {
                this.$dialog
                    .confirm({
                        title: '寄售',
                        message: `商品将以<span style='color:#ff4f50;font-weight:bold;font-size:18px;margin:0 5px'>${this.price}</span>的价格上架`,
                        allowHtml: true
                    })
                    .then(() => {
                        this.$toast.loading({
                            message: '加载中...',
                            forbidClick: true
                        });
                        return new Promise((resolve, reject) => {
                            this.$http
                                .post('/user/verifyTradeCode', {
                                    tradeCode: this.password
                                })
                                .then(_ => resolve())
                                .catch(e => {
                                    reject({ error: '密码错误' });
                                });
                        });
                    })
                    .then(() => {
                        return this.$http.post('/asset/consignment', {
                            id: this.$route.query.id,
                            price: this.price
                        });
                    })
                    .catch(e => {
                        if (e.error) {
                            this.$toast(e.error || '出现错误，请稍后再试');
                        }
                        return Promise.reject('cancel');
                    })
                    .then(res => {
                        this.$toast.success('寄售成功');
                        setTimeout(() => {
                            this.$router.go(-1);
                        }, 1000);
                    })
                    .catch(e => {
                        if (e && e.error) {
                            this.$toast(e.error);
                        }
                    });
            } else {
                this.$toast('请输入价格');
            }
        },
        goRouter() {
            if (!this.showKeyboard) {
                this.$router.push('/tradingPassword');
            }
        },
        keyBlur() {
            setTimeout(() => {
                this.showKeyboard = false;
            }, 100);
        }
    }
};
</script>

<style lang="less" scoped> 
    .content{
        // margin-top: 44px;
        width: 100%;
        height: 100%;
        position: absolute;
        background: #0A0A1B;
        padding: 16px;
        box-sizing: border-box;
        .consignment_title{
            font-size: 20px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #FFFFFF;
            margin-bottom: 6px;
        }
        .consignment_tip{
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #939599;
            margin-bottom: 20px;
        }
        .consignment_set_price{
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #FFFFFF;
            margin-bottom: 10px;
        }
        /deep/ .van-cell-group{
            margin: 0;
        }
        /deep/ .van-cell{
            background: #29293F;
            border-radius: 8px;
            margin-bottom: 20px;
            .van-field__control{
                color: #ffffff;
            }
        }
        .transaction_password{
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            .transaction_password_title{
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #FFFFFF;
            }
            .transaction_password_forget{
                width: 48px;
                font-size: 12px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #939599;
            }
        }
        .van-password-input{
            margin: 0;
            /deep/ .van-password-input__security li{
                width: 44px;
                height: 44px;
                background: #29293F;
                border-radius: 8px;
                color: #ffffff;
            }
        }
    }
    .consignment_confirmation{
        width: 100%;
        height: 56px;
        background: #15152D;
        position: fixed;
        bottom: 0;
        padding: 8px 16px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
         text-align: center;
        .consignment_confirmation_left{
            width: 164px;
            height: 40px;
            border-radius: 8px;
            border: 1px solid #28B6FF;
            color: #28B6FF;
            line-height: 40px;
        }
        .consignment_confirmation_right{
            width: 164px;
            height: 40px;
            background: #28B6FF;
            border-radius: 8px;
            color: #FFFFFF;
            line-height: 40px;
        }
    }
/deep/ .van-password-input__security i{
        background-color: #fff !important;
    }
</style>
