<template>
    <div class="top">
        <div class="top-content">
            <div class="title">寄售说明</div>
            <ul class="name">
                <li>1. 作品寄售为单个作品价格</li>
                <li>2. 用户将会看到数字藏品的权益的使用情况</li>
                <li>3. 交易成功后数字藏品的点赞数量将会被清除</li>
                <li>4. 平台会收取作品出售价格的 {{ serviceCharge }}% 作为服务费</li>
                <li>5. 因电子支付通道限制，单笔限额20000元</li>
            </ul>
            <div class="border border1"></div>
            <div class="content">
                <div class="title">寄售价格(元）<span>最高定价100000.00(超过20000的需要签署委托协议)</span></div>
                <!-- <van-field type="number" input-align="center" placeholder="请输入价格" v-model="price" /> -->
                <van-stepper
                    v-model="price"
                    :default-value="''"
                    :show-plus="false"
                    :show-minus="false"
                    :decimal-length="2"
                    allow-empty
                    min="0"
                    max="100000"
                    placeholder="请输入价格"
                    @change="agreement = false"
                />
                <div class="title">预计收入(元）</div>
                <div class="info-item">
                    <span>寄售定价</span>
                    <span class="val">{{ sellPrice }}</span>
                </div>
                <div class="info-item">
                    <span>版税({{ royalties }}%)</span>
                    <span class="val">{{ royaltiesAmount }}</span>
                </div>
                <div class="info-item">
                    <span>技术服务费({{ serviceCharge >= 1 ? serviceCharge - 1 : serviceCharge }}%) </span>
                    <span class="val">{{ serviceChargeAmount }}</span>
                </div>
                <div class="info-item">
                    <span>支付通道费({{ serviceCharge >= 1 ? 1 : 0 }}%)</span>
                    <span class="val">{{ payChannelAmount }}</span>
                </div>
                <div class="info-item">
                    <span>最终收入</span>
                    <span class="val prim">{{ finalIncome }}</span>
                </div>
            </div>
            <div class="border"></div>
            <div class="input">
                <div class="text1">请输入交易密码</div>
                <div v-if="sets">
                    <van-password-input :gutter="10" :value="password" :focused="showKeyboard" @focus="keyboardEnter" />
                    <van-number-keyboard
                        v-model="password"
                        :show="showKeyboard"
                        @blur="keyBlur"
                        :gutter="10"
                        maxlength="6"
                        theme="custom"
                        close-button-text="完成"
                        random-key-order
                    />
                    <div class="text2-content">
                        <div class="text2" @click="goRouter">忘记密码？</div>
                    </div>
                </div>
                <div v-else class="text3" @click="$router.push('/' + $route.params.companyId + '/tradingPassword')">
                    您当前没有交易密码，点击去设置
                </div>
            </div>
        </div>
        <div class="bottom van-safe-area-bottom" ref="bottom">
            <van-notice-bar
                text="出售成功的数字藏品将会携带数字藏品的所有信息转让于购买方，包括但不限于：权益的使用、数字藏品的区块信息等"
            />
            <div class="bottom-content">
                <div class="btn1" @click="$router.go(-1)">取消</div>
                <div class="btn2" @click="submit">确认寄售</div>
            </div>
        </div>
        <div class="border"></div>
        <agreement ref="agree" :info="info" @agree="agree"></agreement>
    </div>
</template>

<script>
import { mapState } from 'vuex';
import Agreement from '../asset/Agreement.vue';
export default {
    components: { Agreement },
    name: 'Top',
    inject: ['changeScroll'],
    data() {
        return {
            price: '',
            showKeyboard: false,
            password: '',
            sets: false,
            info: {},
            agreement: false,
            royalties: 5,
            serviceCharge: 5
        };
    },
    computed: {
        ...mapState(['userInfo']),
        sellPrice() {
            let price = Math.floor(this.price * 100) / 100;
            return price.toFixed(2);
        },
        royaltiesAmount() {
            let price = Math.floor(this.price * (this.royalties || 0)) / 100;
            return price.toFixed(2);
        },
        serviceChargeAmount() {
            let price =
                Math.floor(this.price * (this.serviceCharge >= 1 ? this.serviceCharge - 1 : this.serviceCharge)) / 100;
            return price.toFixed(2);
        },
        payChannelAmount() {
            let price = Math.floor(this.price * 1) / 100;
            return price.toFixed(2);
        },
        finalIncome() {
            let price =
                Math.floor(
                    this.price *
                        (99 -
                            (this.serviceCharge >= 1 ? this.serviceCharge - 1 : this.serviceCharge) -
                            (this.royalties || 0))
                ) / 100;
            return price.toFixed(2);
        }
    },
    mounted() {
        this.passFn();
        this.$http.get('/asset/get/' + this.$route.query.id).then(res => {
            this.info = res;
            this.royalties = res.royalties || 5;
            this.serviceCharge = res.serviceCharge || 5;

            this.$http.post('/asset/getRoyalties?id=' + this.$route.query.id).then(res => {
                this.royalties = 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.$dialog
                    .alert({
                        title: '提示',
                        message:
                            '尊敬的拍卖委托方，所有进入拍卖程序的艺术品的拍卖展示时间为120小时，如未有藏家于120小时叫价竞拍，出现流拍情况，您所委托拍卖的艺术品将自动下架。请勿频繁操作，严格抵制恶意炒作。'
                    })
                    .then(() => {
                        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,
                            tradeCode: this.password
                        });
                    })
                    .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('/' + this.$route.params.companyId + '/tradingPassword');
            }
        },
        keyBlur() {
            setTimeout(() => {
                this.showKeyboard = false;
            }, 100);
        }
    }
};
</script>

<style lang="less" scoped>
/deep/ .van-notice-bar {
    background: rgba(255, 108, 0, 0.1) !important;
}
/deep/ .van-password-input {
    margin: 0 0;
    .van-password-input__security {
        border: 1px solid @text3;
        height: 42px;
        border-radius: 2px;
        li {
            background-color: transparent;
            &:not(:last-child) {
                border-right: 1px solid @text3;
            }
        }
    }
}

.input {
    padding: 12px 0 20px;
    .text1 {
        font-size: @font2;
        color: @text0;
        line-height: 24px;
        margin-bottom: 6px;
    }
}
.top-content {
    background-color: @bg;
    padding-top: 10px;
}
.top {
    background-color: @bg3;
    /deep/ .van-password-input {
        margin: 10px 0;
        padding: 0 25px;
        .van-password-input__security {
            border-width: 0;
            height: 42px;
            border-radius: 2px;
            li {
                background-color: transparent;
                &:not(:last-child) {
                    border-right: 1px solid @text3;
                }
                border: 1px solid @text3;
            }
        }
    }
    /deep/ .van-cell {
        padding-top: 20px;
    }
    /deep/.van-cell__title {
        font-size: @font2;
        font-weight: bold;
        color: @text0;
        line-height: 24px;
    }
    padding-bottom: 280px;
    .title {
        font-size: 14px;
        color: @text0;
        // line-height: 30px;
        margin-top: 5px;
        padding: 5px 16px 5px;
    }
    .name {
        padding-left: 16px;
        font-size: 12px;
        font-weight: 400;
        color: @text3;
        line-height: 22px;
    }
    .bottom {
        position: fixed;
        bottom: 0px;
        left: 0;
        right: 0;
        background-color: @bg;
        z-index: 20;
        border-top: 1px solid @tabBorder;
        .van-notice-bar {
            color: var(--prim);
        }

        .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: @text3;
                text-align: center;
                border: 1px solid @text3;
            }
            .btn2 {
                width: 162px;
                height: 44px;
                line-height: 44px;
                text-align: center;

                color: @btnText;
                background: var(--prim);
                border-radius: 22px;
            }
            .van-button {
                flex-grow: 1;
                color: #333230 !important;
                max-width: 210px;
            }
            .text {
                font-size: @font2;
                color: @text3;
                line-height: 20px;
                word-break: keep-all;
            }
        }
    }
    .border {
        // width: 375px;
        height: 5px;
        background: @bg3;
        &.border1 {
            margin-top: 20px;
        }
    }
    .content {
        // width: 375px;
        background: @bg;

        .title {
            span {
                font-size: 12px;
                color: #ff4f50;
            }
        }

        .van-cell {
            padding: 0 16px 0px;
            margin: 10px 0 0;

            /deep/.van-cell__value {
                background-color: @bg3;
                padding: 8px;
            }
        }

        .info-item {
            padding: 3px 16px;
            .flex();
            justify-content: space-between;
            font-size: 12px;
            color: @text3;
            line-height: 24px;

            .val {
                border: 1px solid #f5f7fa;
                box-sizing: border-box;
                text-align: center;
                min-width: 72px;
                display: inline-block;

                &.prim {
                    color: var(--prim);
                }
            }
        }
    }
    .input {
        // margin-top: 20px;
        width: 100%;
        .text1 {
            font-size: @font2;
            color: @text0;
            line-height: 24px;
            margin-bottom: 6px;
            padding: 0 16px;
        }
        .text2 {
            font-size: @font2;
            text-align: right;
            font-weight: 400;
            color: @text3;
            line-height: 24px;
            margin-right: 15px;
        }
        .text3 {
            font-size: @font2;
            color: #ff4f50;
            line-height: 24px;
            margin-top: 25px;
            display: flex;
            justify-content: center;
        }
    }
}
.text2-content {
    .flex();
    justify-content: flex-end;
}
/deep/.van-stepper {
    padding: 10px 16px;
    width: 100%;
    box-sizing: border-box;
    .van-stepper__input {
        width: 100%;
        height: 40px;
        margin: 0 0;
    }
}

.van-notice-bar {
    font-size: 12px;
    height: 36px;
    line-height: 36px;
    background: var(--fadePrim) !important;
}
</style>
