<template>
	<el-card class="form-container" shadow="never">
		<el-form :model="coupon" :rules="rules" ref="couponFrom" label-width="150px" size="small">
			<el-form-item label="优惠券类型：">
				<span>全场赠券</span>
			</el-form-item>
			<el-form-item label="优惠券名称：" prop="name">
				<el-input v-model="coupon.name" class="input-width"></el-input>
			</el-form-item>
			<el-form-item label="适用平台：">

				<span>全平台</span>
			</el-form-item>
			<el-form-item label="总发行量：" prop="publishCount">
				<el-input v-model.number="coupon.publishCount" placeholder="只能输入正整数" class="input-width"></el-input>
			</el-form-item>
			<el-form-item label="面额：" prop="amount">
				<el-input v-model="coupon.amount" @keyup.native="coupon.amount = UpNumber(coupon.amount,2)"
					placeholder="面值只能是数值，限2位小数" class="input-width">
					<template slot="append">元</template>
				</el-input>
			</el-form-item>
			<el-form-item label="每人限领：">
				<el-input v-model="coupon.perLimit" placeholder="只能输入正整数" class="input-width">
					<template slot="append">张</template>
				</el-input>
			</el-form-item>
			<el-form-item label="使用门槛：" prop="minPoint">
				<el-input v-model.number="coupon.minPoint" placeholder="只能输入正整数" class="input-width">
					<template slot="prepend">满</template>
					<template slot="append">元可用</template>
				</el-input>
			</el-form-item>
			<el-form-item label="有效期：">
				<el-date-picker type="datetime" placeholder="选择日期" v-model="coupon.startTime" default-time="00:00:00"
					style="width:200px">
				</el-date-picker>
				<span style="margin-left:5px;margin-right: 5px">至</span>
				<el-date-picker type="datetime" placeholder="选择日期" v-model="coupon.endTime" default-time="23:59:59"
					style="width: 200px">
				</el-date-picker>
			</el-form-item>

			<el-form-item label="可使用商品：">
				<el-radio-group v-model="coupon.useType">
					<el-radio-button :label="0">全场通用</el-radio-button>
					<el-radio-button :label="1">指定分类</el-radio-button>
					<el-radio-button :label="2">指定商品</el-radio-button>
				</el-radio-group>
			</el-form-item>
			<el-form-item v-show="coupon.useType===1">
				<el-cascader clearable placeholder="请选择分类名称" v-model="selectProductCate" :options="productCateOptions">
				</el-cascader>
				<el-button @click="handleAddProductCategoryRelation()">添加</el-button>
				<el-table ref="productCateRelationTable" :data="coupon.productCategoryRelationList"
					style="width: 100%;margin-top: 20px" border>
					<el-table-column label="分类名称" align="center">
						<template
							slot-scope="scope">{{scope.row.parentCategoryName}}>{{scope.row.productCategoryName}}</template>
					</el-table-column>
					<el-table-column label="操作" align="center" width="100">
						<template slot-scope="scope">
							<el-button size="mini" type="text"
								@click="handleDeleteProductCateRelation(scope.$index, scope.row)">删除
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-form-item>
			<el-form-item v-show="coupon.useType===2">
				<el-select v-model="selectProduct" filterable remote reserve-keyword placeholder="商品名称/商品货号"
					:remote-method="searchProductMethod" :loading="selectProductLoading">
					<el-option v-for="item in selectProductOptions" :key="item.productId" :label="item.productName"
						:value="item.productId">
						<span style="float: left">{{ item.productName }}</span>
						<span style="float: right; color: #8492a6; font-size: 13px">NO.{{ item.productSn }}</span>
					</el-option>
				</el-select>
				<el-button @click="handleAddProductRelation()">添加</el-button>
				<el-table ref="productRelationTable" :data="coupon.productRelationList"
					style="width: 100%;margin-top: 20px" border>
					<el-table-column label="商品名称" align="center">
						<template slot-scope="scope">{{scope.row.productName}}</template>
					</el-table-column>
					<el-table-column label="货号" align="center" width="120">
						<template slot-scope="scope">NO.{{scope.row.productSn}}</template>
					</el-table-column>
					<el-table-column label="操作" align="center" width="100">
						<template slot-scope="scope">
							<el-button size="mini" type="text"
								@click="handleDeleteProductRelation(scope.$index, scope.row)">删除
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-form-item>
			<el-form-item label="备注：">
				<el-input class="input-width" type="textarea" :rows="5" placeholder="请输入内容" v-model="coupon.note">
				</el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="onSubmit('couponFrom')">提交</el-button>
				<el-button v-if="!isEdit" @click="resetForm('couponFrom')">重置</el-button>
        <el-button type="info" size="small" @click="handleReturn()">关闭</el-button>
			</el-form-item>
		</el-form>
	</el-card>
</template>
<script>
	import {
		createCoupon,
		getCoupon,
		updateCoupon
	} from '@/api/coupon/coupon';
	import {
		fetchSimpleList as fetchProductList,
    simpleProductList as simpleProductList
	} from '@/api/product';
	import {
		fetchListWithChildren
	} from '@/api/productCate'
	const defaultCoupon = {
		type: 0,
		name: null,
		platform: 0,
		amount: null,
		perLimit: 1,
		minPoint: null,
		startTime: null,
		endTime: null,
		useType: 0,
		note: null,
		publishCount: null,
		productRelationList: [],
		productCategoryRelationList: []
	};
	const defaultTypeOptions = [{
			label: '全场赠券',
			value: 0
		},
		{
			label: '会员赠券',
			value: 1
		},
		{
			label: '购物赠券',
			value: 2
		},
		{
			label: '注册赠券',
			value: 3
		}
	];
	const defaultPlatformOptions = [{
			label: '全平台',
			value: 0
		},
		{
			label: '移动平台',
			value: 1
		},
		{
			label: 'PC平台',
			value: 2
		}
	];
	var validatePrice = (rule, value, callback) => {
		if (!value) {
			callback(new Error("面额不能为空"));
		} else if (value.split(".").length > 2) {
			callback(new Error("请输入正确格式的金额")); //防止输入多个小数点
		}
		// else if (value > add_Com.Retail_Price) {
		//   callback(new Error("金额不能大于零售价"));
		// }
		else {
			value = Math.round(value * Math.pow(10, 2)) / Math.pow(10, 2); //四舍五入
			value = Number(value).toFixed(2); //不足补位
			this.add_Com.Cost_Price = value;
			callback();
		}
	};

	export default {
		name: 'CouponDetail',
		props: {
			isEdit: {
				type: Boolean,
				default: false
			},
      dataId: {
        type: Number,
        default: 0
      }
		},
		data() {
			return {
				coupon: Object.assign({}, defaultCoupon),
				typeOptions: Object.assign({}, defaultTypeOptions),
				platformOptions: Object.assign({}, defaultPlatformOptions),
				rules: {
					name: [{
							required: true,
							message: '请输入优惠券名称',
							trigger: 'blur'
						},
						{
							min: 2,
							max: 140,
							message: '长度在 2 到 140 个字符',
							trigger: 'blur'
						}
					],
					publishCount: [{
						type: 'number',
						required: true,
						message: '只能输入正整数',
						trigger: 'blur'
					}],
					amount: [{

						required: true,
						message: '面值只能是数值，0.01-10000，限2位小数',
						trigger: 'blur'
					}],
					minPoint: [{
						type: 'number',
						required: true,
						message: '只能输入正整数',
						trigger: 'blur'
					}]
				},
				selectProduct: null,
				selectProductLoading: false,
				selectProductOptions: [],
				selectProductCate: null,
				productCateOptions: []
			}
		},
		created() {
			if (this.isEdit) {
        var dataId=this.dataId
        alert(this.dataId);
				getCoupon(dataId).then(response => {
					this.coupon = response.data;
				});
			}
			this.getProductCateList();
		},
		methods: {
      handleReturn() {
        this.$router.back();
      },
			dateChange(val) {
				console.log("val", val)
			},
			UpNumber(val, limit = 2) {
				val = val.replace(/[^\d.]/g, '') // 保留数字
				val = val.replace(/^00/, '0.') // 开头不能有两个0
				val = val.replace(/^\./g, '0.') // 开头为小数点转换为0.
				val = val.replace(/\.{2,}/g, '.') // 两个以上的小数点转换成一个
				val = val.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.'); // 只保留一个小数点
				/^0\d+/.test(val) ? val = val.slice(1) : '' // 两位以上数字开头不能为0
				const str = '^(\\d+)\\.(\\d{' + limit + '}).*$'
				const reg = new RegExp(str)
				if (limit === 0) {
					// 不需要小数点
					val = val.replace(reg, '$1')
				} else {
					// 通过正则保留小数点后指定的位数
					val = val.replace(reg, '$1.$2')
				}
				return val
			},
			onSubmit(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						if(parseFloat(this.coupon.amount)>=parseFloat(this.coupon.minPoint)){
								this.$message({
									message: '优惠券面值金额须小于使用门槛金额',
									type: 'error',
									duration: 1000
								});
								return false;
						}

						this.$confirm('是否提交数据', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
							if (this.isEdit) {
								updateCoupon(this.$route.query.id, this.coupon).then(response => {
									this.$refs[formName].resetFields();
									this.$message({
										message: '修改成功',
										type: 'success',
										duration: 1000
									});
									this.$router.back();
								});
							} else {
								createCoupon(this.coupon).then(response => {
									this.$refs[formName].resetFields();
									this.$message({
										message: '提交成功',
										type: 'success',
										duration: 1000
									});
									this.$router.back();
								});
							}
						});
					} else {
						this.$message({
							message: '验证失败',
							type: 'error',
							duration: 1000
						});
						return false;
					}
				});
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
				this.coupon = Object.assign({}, defaultCoupon);
			},
			searchProductMethod(query) {
				if (query !== '') {
					this.loading = true;
          simpleProductList({
						keyword: query
					}).then(response => {
						this.loading = false;
						let productList = response.data;
						this.selectProductOptions = [];
						for (let i = 0; i < productList.length; i++) {
							let item = productList[i];
							this.selectProductOptions.push({
								productId: item.id,
								productName: item.name,
								productSn: item.productSn
							});
						}
					});
				} else {
					this.selectProductOptions = [];
				}
			},
			handleAddProductRelation() {
				if (this.selectProduct === null) {
					this.$message({
						message: '请先选择商品',
						type: 'warning'
					});
					return
				}
				this.coupon.productRelationList.push(this.getProductById(this.selectProduct));
				this.selectProduct = null;
			},
			handleDeleteProductRelation(index, row) {
				this.coupon.productRelationList.splice(index, 1);
			},
			handleAddProductCategoryRelation() {
				if (this.selectProductCate === null || this.selectProductCate.length === 0) {
					this.$message({
						message: '请先选择商品分类',
						type: 'warning'
					});
					return
				}
				this.coupon.productCategoryRelationList.push(this.getProductCateByIds(this.selectProductCate));
				this.selectProductCate = [];
			},
			handleDeleteProductCateRelation(index, row) {
				this.coupon.productCategoryRelationList.splice(index, 1);
			},
			getProductById(id) {
				for (let i = 0; i < this.selectProductOptions.length; i++) {
					if (id === this.selectProductOptions[i].productId) {
						return this.selectProductOptions[i];
					}
				}
				return null;
			},
			getProductCateList() {
				fetchListWithChildren().then(response => {
					let list = response.data;
					this.productCateOptions = [];
					for (let i = 0; i < list.length; i++) {
						let children = [];
						if (list[i].children != null && list[i].children.length > 0) {
							for (let j = 0; j < list[i].children.length; j++) {
								children.push({
									label: list[i].children[j].name,
									value: list[i].children[j].id
								});
							}
						}
						this.productCateOptions.push({
							label: list[i].name,
							value: list[i].id,
							children: children
						});
					}
				});
			},
			getProductCateByIds(ids) {
				let name;
				let parentName;
				for (let i = 0; i < this.productCateOptions.length; i++) {
					if (this.productCateOptions[i].value === ids[0]) {
						parentName = this.productCateOptions[i].label;
						for (let j = 0; j < this.productCateOptions[i].children.length; j++) {
							if (this.productCateOptions[i].children[j].value === ids[1]) {
								name = this.productCateOptions[i].children[j].label;
							}
						}
					}
				}
				return {
					productCategoryId: ids[1],
					productCategoryName: name,
					parentCategoryName: parentName
				};
			}
		}
	}
</script>
<style scoped>
	.input-width {
		width: 60%;
	}
</style>
