<template>
	<div class="company-edit">
		<!-- Drawer抽屉 -->
		<Drawer :title="title" v-model="visible" width="500" draggable :mask-closable="type == '0'">
			<div :style="{ maxHeight: maxHeight }" class="drawer-content">
				<div class="drawer-header">
					<div style="margin-right: 16px">广告位配置</div>
				</div>
				<Form ref="form" :model="form" :rules="formValidate" label-position="top">
					<Row :gutter="32">
						<Col span="24">
						<FormItem label="广告位置" prop="position">
							<Select ref="dep" @on-change="checkStatusLine" style="width:200px">
								<Option v-for="(item, i) in dictDataLine" :key="i" :value="form.value">{{
							    item.title
							  }}</Option>
							</Select>
						</FormItem>
						</Col>
					</Row>
					<Row :gutter="32">
						<Col span="12">
						<FormItem label="商家名" prop="value">
							<Select v-model="model" filterable @on-change="checkShop" @on-query-change="sreachShop">
								<Option v-for="item in shopList" :value="item.value" :key="item.value">{{ item.label }}</Option>
							</Select>
						</FormItem>
						</Col>
					</Row>
					<Row :gutter="32">
						<Col span="24">
						<FormItem label="广告图" prop="adImage">
							<upload-pic-input v-model="form.adImage"></upload-pic-input>
						</FormItem>
						</Col>
					</Row>
					<Row :gutter="32">
						<Col span="24">
						<FormItem label="广告标题" prop="title">
							<Input v-model="form.title" placeholder="请输入广告标题" />
						</FormItem>
						</Col>
					</Row>
					<Row :gutter="32">
						<Col span="24">
						<FormItem label="排序值" prop="sortOrder">
							<Input v-model="form.sortOrder" placeholder="请输入排序值" />
						</FormItem>
						</Col>
					</Row>
					<Row :gutter="32">
						<Col span="24">
						<FormItem label="广告关联商品" prop="productList">
							<div @click="checkGoods" style="display: flex;height: 35px;width: 100%;border: 1px solid #eee;padding: 0 0 0 10px;border-radius: 5px;line-height: 35px;">
								<div style="flex: 1;">{{form.productList.productName}}</div>
								<Icon type="ios-arrow-forward" size="24" style="line-height: 35px;" />
							</div>
						</FormItem>
						</Col>
					</Row>
					<Row :gutter="32" v-if="form.productList.productName != ''">
						<Col span="12">
							<FormItem label="商品原价" prop="originalPrice">
								<Input v-model="form.productList.originalPrice" placeholder="请输入商品原价" />
							</FormItem>
						</Col>
						<Col span="12">
							<FormItem label="商品拼团价格" prop="originalPrice">
								<Input v-model="form.productList.groupPrice" placeholder="请输入商品拼团价格" />
							</FormItem>
						</Col>
						<Col span="12">
							<FormItem label="几人团" prop="originalPrice">
								<Input type="number" v-model="form.productList.groupMembers" placeholder="请输入商品拼团价格" />
							</FormItem>
						</Col>
					</Row>
				</Form>
			</div>
			<div class="drawer-footer br" v-show="type != '0'">
				<Button type="primary" :loading="submitLoading" @click="submit">提交</Button>
				<Button @click="visible = false">取消</Button>
			</div>
		</Drawer>
		<Modal :title="商品列表" v-model="aaVisiable" :mask-closable="false" :scrollabele="true" :width="1000">
			<goodsList ref="goodsPage" @on-submit1="getGoods" v-if="aaVisiable"></goodsList>
			<div slot="footer" v-show=aaVisiable>
				<Button type="text" @click="aaVisiable = false">关闭</Button>
			</div>
		</Modal>
	</div>
</template>

<script>
	import {
		addAD,
		updateAD,
		getShopData
	} from "@/api/app";
	import goodsList from "./dictManage.vue";
	import uploadPicInput from "@/views/my-components/hiver/upload-pic-input";
	export default {
		name: "company",
		components: {
			uploadPicInput,
			goodsList
		},
		props: {
			value: {
				type: Boolean,
				default: false,
			},
			data: {
				type: Object,
			},
			type: {
				type: String,
				default: "0",
			},
		},
		data() {
			return {
				aaVisiable:false,
				shopList:[],
				dictDataLine: [{
					title: "首页顶部大广告位",
					value: 'home_top'
				}, {
					title: "首页中位左上",
					value: 'home_center_left_top'
				}, {
					title: "首页中位左下",
					value: 'home_center_left_bottom'
				}, {
					title: "首页中位右上",
					value: 'home_center_right_top'
				}, {
					title: "首页中位右下",
					value: 'home_center_right_bottom'
				}],
				roleList: [],
				visible: this.value,
				title: "",
				data: [],
				passColor: "",
				submitLoading: false,
				maxHeight: 510,
				form1:{},
				form: {
					position: '',
					sortOrder:"",
					title:'',
					adImage:'',
					status:1,
					regionId:JSON.parse(this.getStore("user")).departmentId,
					merchantName:'',
					merchantId:'',
					merchantImage:'',
					linkUrl:'/package1/group/groupBuySingle?type=shop&item=',
					linkParams:'',
					productList:{
						adId: "",
						productImage: "",
						productName: "",
						originalPrice: "",
						groupPrice: "",
						groupMembers: ""
					}
				},
				searchForm: {
					regionId:JSON.parse(this.getStore("userInfo")).departmentId,
					shopType: "",
					shopArea: "",
					pageNumber: 1,
					keyWord: "",
					pageSize: 100,
					sort: "",
					order: "",
					sortOrder: "",
					orderOrder: "",
					sortScore: "",
					orderScore: "",
					sortSale: "",
					orderSale: "",
				},
			};
		},
		methods: {
			init() {
				console.log(this.form1)
				this.form.productList = {}
				this.form.productList.adId = this.form1.id
			},
			submit() {
				this.$refs.form.validate((valid) => {
					if (valid) {
						if (this.type == "1") {
							// 编辑
							this.submitLoading = true;
							updateAD(this.form).then((res) => {
								this.submitLoading = false;
								if (res.success) {
									this.$Message.success("操作成功");
									this.$emit("on-submit", true);
									this.visible = false;
								}
							});
						} else {
							// 添加
							this.submitLoading = true;
							addAD(this.form).then((res) => {
								this.submitLoading = false;
								if (res.success) {
									this.$Message.success("操作成功");
									this.$emit("on-submit", true);
									this.visible = false;
								}
							});
						}
					}
				});
			},
			checkGoods(){
				if(this.form.merchantId == ''){
					this.$Message.warning("您还未选择商家");
					return
				}
				this.aaVisiable = true;
				this.$nextTick(() => {
					this.$refs.goodsPage.init(this.form.linkParams);
				});
			},
			getGoods(v){
				console.log('11111',v)
				this.form.productList.productImage = v.productPicture
				this.form.productList.productName = v.productName
				console.log('22222',this.form)
				this.aaVisiable = false
			},
			sreachShop(v){
				
				this.searchForm.keyWord = v
				// 多条件搜索用户列表
				this.loading = true;
				getShopData(this.searchForm).then((res) => {
					this.loading = false;
					if (res.success) {
						this.shopList = res.result.content;
						for(let i=0;i<this.shopList.length;i++){
							this.shopList[i].label = this.shopList[i].shopName
							this.shopList[i].value = this.shopList[i].id
						}
					}
				});
			},
			checkShop(v){
				console.log("数据",v)
				for(let i=0;i<this.shopList.length;i++){
					if(this.shopList[i].id == v){
						let data = {
							products:this.shopList[i].products,
							id:this.shopList[i].id,
							shopName:this.shopList[i].shopName,
							shopPhone:this.shopList[i].shopPhone,
							shopAddress:this.shopList[i].shopAddress,
							shopIcon:this.shopList[i].shopIcon,
							shopScore:this.shopList[i].shopScore,
							shopTypeTitle:this.shopList[i].shopTypeTitle,
							saleCount:this.shopList[i].saleCount,
							remark:this.shopList[i].remark,
						}
						this.form.linkParams = JSON.stringify(data)
						this.form.merchantName = this.shopList[i].shopName
						this.form.merchantId = v
						this.form.merchantImage = this.shopList[i].shopIcon
					}
				}
			},
			checkStatusLine(v){
				this.form.position = v
				console.log(v)
			},
			handleSelectRegion(v) {
				this.form.region = v;
			},
			setCurrentValue(value) {
				if (value === this.visible) {
					return;
				}
				if (this.type == "1") {
					this.title = "编辑广告位";
					this.maxHeight =
						Number(document.documentElement.clientHeight - 121) + "px";
				} else if (this.type == "2") {
					this.title = "添加广告位";
					this.maxHeight =
						Number(document.documentElement.clientHeight - 121) + "px";
				} else {
					this.title = "广告位详情";
					this.maxHeight = "100%";
				}
				// 清空数据
				this.$refs.form.resetFields();
				if (this.type == "0" || this.type == "1") {
					// 回显数据
					let data = this.data;
					
					// 回显
					this.form = data;
				}
				this.visible = value;
			},
		},
		watch: {
			value(val) {
				this.setCurrentValue(val);
			},
			visible(value) {
				this.$emit("input", value);
			},
		},
		mounted() {
			this.init();
		},
	};
</script>

<style lang="less">
	@import "@/styles/drawer-common.less";
</style>