<template>
  <el-card shadow="never">
    <div>
      <el-scrollbar wrap-class="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="$t('global.permissionType')" prop="systemName">
            <span style="color: #808080 !important;"> {{ systemName }}{{ $t('global.permissions') }} </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;">{{ $t('global.yuanMonth') }}</span>
          </el-form-item>
          <el-form-item :label="$t('global.purchaseDuration')" prop="choose">
            <el-radio-group v-model="choose" @change="chooseEvent">
              <template v-for="(item,idx) in chooseList">
                <el-radio-button :key="idx" :label="item.label" />
              </template>
              <el-radio-button :label="$t('global.custom')" />
            </el-radio-group>
          </el-form-item>
          <el-form-item v-show="!disabled" prop="months">
            <el-input-number v-model="saleModel.months" :min="1" :max="1000" :disabled="disabled " />
            <span>{{ $t('global.month') }}</span>
          </el-form-item>
          <el-form-item :label="$t('global.permissionNum')" prop="total">
            <el-input-number v-model="saleModel.total" :min="1" :max="200" />
            <span>{{ $t('global.indexA') }}</span>
          </el-form-item>
          <el-form-item :label="$t('global.purchasePrice')" 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">{{ $t('global.submitOrders') }}
    </el-button>
    <el-button style="float: right; margin-bottom: 20px; margin-right: 10px;" @click="back">{{ $t('global.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: this.$t('global.january'),
			chooseList: [
				{ label: this.$t('global.january'), value: 1 },
				{ label: this.$t('global.march'), value: 3 },
				{ label: this.$t('global.year'), value: 12 },
				{ label: this.$t('global.twoYears'), value: 24 },
				{ label: this.$t('global.fiveYears'), value: 60 },
				{ label: this.$t('global.tenYears'), 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 this.$t('global.courseName');
			} else if (this.$route.query.permissionType == PermissionType.SCREEN) {
				return this.$t('global.screenName');
			} else {
				return this.$t('global.productName');
			}
		},
		priceTitle() {
			switch (this.$route.query.permissionType) {
			case PermissionType.LESSON: return this.$t('global.coursePrice');
			case PermissionType.EXAM: return this.$t('global.testPrice');
			case PermissionType.SIMULATION: return this.$t('global.simulationPrice');
			case PermissionType.SCREEN: return this.$t('global.timeUnitPrice');
			}
			return '';
		},
		rules() {
			return {
				'name': [
					{ required: true, message: this.$t('rules.courseNameEmpty'), trigger: 'blur' }
				],
				'months': [
					{ required: true, message: this.$t('rules.purchaseMonth'), trigger: 'blur' },
					{
						validator(rule, value, callback) {
							if (Number.isInteger(Number(value)) && Number(value) >= 0) {
								callback();
							} else {
								callback(new Error(this.$t('tip.purchaseMonth')));
							}
						},
						trigger: 'blur'
					}
				],
				'total': [
					{ required: true, message: this.$t('rules.accessNumber'), trigger: 'blur' },
					{
						validator(rule, value, callback) {
							if (Number.isInteger(Number(value)) && Number(value) >= 0) {
								callback();
							} else {
								callback(new Error(this.$t('tip.permissionsNumber')));
							}
						},
						trigger: 'blur'
					}
				]
			};
		}
	},
	watch: {
		orderData: function (val) {
			if (val) {
				this.saleModel.price = val.price;
				this.saleModel.goodsId = val.id;
				this.saleModel.name = val.name;
				// if (this.$route.query.permissionType == PermissionType.LESSON ||
				//         this.$route.query.permissionType == PermissionType.EXAM) {
				// 	this.saleModel.name = val.name;
				// } 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 !== this.$t('global.custom');
			this.chooseList.forEach(elem => {
				if (label === elem.label) {
					this.saleModel.months = elem.value;
				}
			});
		},
		// 提交订单
		commit() {
			this.$refs.make.validate((valid) => {
				if (valid) {
					const 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(() => {
						this.$messageBox(this.$t('tip.failedSubmitOrder'));
					});
				}
			});
		},
		back() {
			history.go(-1);
		}
	}
};
</script>
