<template>
    <el-card shadow="never">
        <div>
            <el-scrollbar wrapClass="scrollbar-wrapper">
                <el-form ref="make" :model="saleModel " label-width="120px" :rules="rules"
                    style="margin-top: 80px; margin-bottom: 80px; width: 80%">
                    <el-form-item :label="nameTitle + ':'" prop="name">
                        <span style="color: #808080 !important;"> {{ saleModel.name }} </span>
                    </el-form-item>
                    <el-form-item label="权限类型: " prop="systemName">
                        <span style="color: #808080 !important;"> {{systemName}}权限 </span>
                    </el-form-item>
                    <el-form-item :label="priceTitle + ':'" prop="price">
                        <span style="font-size: 16px;color: #fb7a1b;"> {{ saleModel.price.toFixed(2) }}</span>
                        <span style="color: #333;">元/月</span>
                    </el-form-item>
                    <el-form-item label="购买时长: " prop="choose">
                        <el-radio-group v-model="choose" @change="chooseEvent">
                            <template v-for="item in chooseList">
                                <el-radio-button :label="item.label"></el-radio-button>
                            </template>
                            <el-radio-button label="自定义"></el-radio-button>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item prop="months" v-show="!disabled">
                        <el-input-number v-model="saleModel.months" :min="1" :max="1000" :disabled="disabled ">
                        </el-input-number>
                        <span>月</span>
                    </el-form-item>
                    <el-form-item label="权限数量: " prop="total">
                        <el-input-number v-model="saleModel.total" :min="1" :max="200"></el-input-number>
                        <span>个</span>
                    </el-form-item>
                    <el-form-item label="购买总价: " prop="sumPrice">
                        <span style="font-size: 24px; color: #fb7a1b;"> {{ parseInt(sumPrice) }}</span>
                        <span style="font-size: 16px;color: #fb7a1b;">. {{ (sumPrice -
                            parseInt(sumPrice)).toFixed(2).toString().replace('.0', '').replace(' ', '') }}
                        </span>
                    </el-form-item>
                </el-form>
            </el-scrollbar>
        </div>
        <el-button style="float: right; margin-bottom: 20px; margin-right: 20px;" type="primary " @click="commit">提交订单
        </el-button>
        <el-button style="float: right; margin-bottom: 20px; margin-right: 10px;" @click="back">返回</el-button>
    </el-card>
</template>

<script>
    import { commitOrder } from '@/api/management/order';
    import { PermissionType } from '@/scripts/ConstDic';

    export default {
        name: 'CommitDraft',
        props: {
            orderData: {
                type: Object,
                required: true
            },
            systemName: {
                type: String,
                required: true
            }
        },
        data() {
            return {
                disabled: true,
                choose: '一月',
                chooseList: [
                    { label: '一月', value: 1 },
                    { label: '三月', value: 3 },
                    { label: '一年', value: 12 },
                    { label: '两年', value: 24 },
                    { label: '五年', value: 60 },
                    { label: '十年', value: 120 }
                ],
                saleModel: {
                    goodsId: '',
                    name: '',
                    price: 0,
                    months: 1,
                    total: 1
                },
            }
        },
        computed: {
            sumPrice() {
                return this.saleModel.price * this.saleModel.months * this.saleModel.total || 0;
            },
            nameTitle() {
                if (this.$route.query.permissionType == PermissionType.EXAM ||
                    this.$route.query.permissionType == PermissionType.LESSON) {
                    return '课程名称';
                } else if (this.$route.query.permissionType == PermissionType.SCREEN) {
                    return '大屏名称';
                } else {
                    return '产品名称';
                }
            },
            priceTitle() {
                switch (this.$route.query.permissionType) {
                    case PermissionType.LESSON: return '课程单价';
                    case PermissionType.EXAM: return '考试单价';
                    case PermissionType.SIMULATION: return '仿真单价';
                    case PermissionType.SCREEN: return '大屏单价';
                }
            },
            rules() {
                return {
                    'name': [
                        { required: true, message: '课程名称不能为空', trigger: 'blur' }
                    ],
                    'months': [
                        { required: true, message: '请输入购买月数', trigger: 'blur' },
                        {
                            validator(rule, value, callback) {
                                if (Number.isInteger(Number(value)) && Number(value) >= 0) {
                                    callback();
                                } else {
                                    callback(new Error("请输入有效的购买月数"));
                                }
                            },
                            trigger: 'blur',
                        }
                    ],
                    'total': [
                        { required: true, message: '请输入权限数量', trigger: 'blur' },
                        {
                            validator(rule, value, callback) {
                                if (Number.isInteger(Number(value)) && Number(value) >= 0) {
                                    callback();
                                } else {
                                    callback(new Error("请输入有效的权限个数"));
                                }
                            },
                            trigger: 'blur',
                        }
                    ],
                }
            }
        },
        watch: {
            orderData: function (val) {
                if (val) {
                    this.saleModel.price = val.price;
                    this.saleModel.goodsId = val.id;
                    if (this.$route.query.permissionType == PermissionType.LESSON ||
                        this.$route.query.permissionType == PermissionType.EXAM) {
                        this.saleModel.name = val.lessonName;
                    } else if (this.$route.query.permissionType == PermissionType.SCREEN) {
                        this.saleModel.name = val.name;
                    } else {
                        this.saleModel.name = val.prdName;
                    }
                }
            }
        },
        methods: {
            //选择自定义时长，修改页面控件状态
            chooseEvent(label) {
                this.disabled = label === '自定义' ? false : true;
                this.chooseList.forEach(elem => {
                    if (label === elem.label) {
                        this.saleModel.months = elem.value;
                    }
                });
            },
            //提交订单
            commit() {
                this.$refs.make.validate((valid) => {
                    if (valid) {
                        let model = {
                            goodsId: this.saleModel.goodsId,
                            price: this.saleModel.price,
                            monthAmount: this.saleModel.months,
                            amount: this.saleModel.total,
                            permissionType: this.$route.query.permissionType,
                        }
                        commitOrder(model).then(response => {
                            this.$emit("commit", response.data);
                        }).catch(error => {
                            this.$messageBox('提交订单失败');
                        });
                    }
                });
            },
            back() {
                history.go(-1);
            }
        }
    }
</script>