<template>
	<div class="shop-list">
		<x-crud @load="onLoad">
			<template #table-column-gatheringCode="{scope}">
				<el-link
					type="primary"
					v-if="shopInfo.extend.wxPayInit == '1'"
					@click="download('gatheringCode', scope.row.id)"
					>下载</el-link
				>
			</template>

			<template #table-column-applyMemberCode="{scope}">
				<el-link
					type="primary"
					v-if="shopInfo.extend.miniAuth == '1'"
					@click="download('applyMemberCode', scope.row.id)"
					>下载</el-link
				>
			</template>

			<template #slot-top-add>
				<el-button size="mini" @click="shopAdd">添加门店</el-button>
				<el-button size="mini" @click="shopPic">门店图片</el-button>
			</template>
		</x-crud>
	</div>
</template>

<script>
import { imgHostUrl } from '@/config/env';
import { mapGetters } from 'vuex';

export default {
	data() {
		return {
			crud: null
		};
	},

	computed: {
		...mapGetters(['shopInfo'])
	},

	methods: {
		onLoad({ ctx, app }) {
			this.crud = app;

			ctx.service({
				page: params => {
					return this.$service.shop.list(params).then(res => {
						return {
							list: res.list,
							pagination: {
								page: params.page,
								size: 20,
								total: 0
							}
						};
					});
				},

				add: params => {
					return this.$service.shop.add({
						...params,
						openTime: params.openTime.join('-')
					});
				},

				update: params => {
					return this.$service.shop.update({
						...params,
						openTime: params.openTime.join('-')
					});
				},

				delete: params => {
					return this.$service.shop.delete({
						id: params.ids
					});
				}
			})
				.set('table', {
					columns: [
						{
							label: 'ID',
							prop: 'id',
							align: 'center'
						},
						{
							label: '门店名称',
							prop: 'shopName',
							align: 'center'
						},
						{
							label: '营业时间',
							prop: 'openTime',
							align: 'center'
						},
						{
							label: '联系电话',
							prop: 'telephone',
							align: 'center'
						},
						{
							label: '累计收入',
							prop: 'totalIncome',
							align: 'center'
						},
						{
							label: '地址',
							prop: 'fullAddress',
							align: 'center'
						},
						{
							label: '收款码',
							prop: 'gatheringCode',
							align: 'center'
						},
						{
							label: '注册会员码',
							prop: 'applyMemberCode',
							align: 'center'
						}
					]
				})
				.set('upsert', {
					items: [
						{
							label: '门店名称',
							prop: 'shopName',
							component: {
								name: 'el-input'
							},
							rules: {
								required: true,
								message: '门店名称不能为空'
							}
						},
						{
							label: '营业时间',
							prop: 'openTime',
							value: ['08:00', '22:00'],
							component: {
								name: 'el-time-picker',
								props: {
									'is-range': true,
									'arrow-control': true,
									'value-format': 'HH:mm'
								}
							},
							rules: {
								required: true,
								message: '营业时间不能为空'
							}
						},
						{
							label: '联系电话',
							prop: 'telephone',
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '联系电话'
								}
							},
							rules: {
								required: true,
								message: '联系电话不能为空'
							}
						},
						{
							label: '所在城市',
							prop: 'provinceCity',
							component: {
								name: 'shop-city',

								attrs: {
									options: []
								},

								props: {
									value: null,
									options: Array
								},

								data() {
									return {
										value2: this.value
									};
								},

								watch: {
									value(v) {
										this.value2 = v;
									}
								},

								methods: {
									change([p, c, a]) {
										app.setForm('province', p);
										app.setForm('city', c);
										app.setForm('lat', '');
										app.setForm('long', '');
										app.setForm('address', '');
									}
								},

								render() {
									return (
										<el-cascader
											v-model={this.value2}
											on-change={this.change}
											options={this.options}
											{...{
												props: {
													props: {
														label: 'name',
														value: 'name',
														children: 'children'
													}
												}
											}}></el-cascader>
									);
								}
							},
							rules: {
								required: true,
								validator: (rule, value, callback) => {
									const { province, city } = app.getForm();
									if (!province || !city) {
										return callback(new Error('所在城市不能为空'));
									}

									callback();
								}
							}
						},
						{
							label: '地址',
							prop: 'address',
							component: {
								name: 'shop-address',

								props: {
									value: null
								},

								data() {
									return {
										value2: this.value
									};
								},

								watch: {
									value(v) {
										this.value2 = v;
									}
								},

								methods: {
									querySearchAsync(qs, cb) {
										if (!app.getForm('city')) {
											this.$message.error('请先选择城市');
											cb([]);
											return false;
										}
										if (!qs) {
											cb([]);
											return false;
										}

										this.$service.single
											.mapSuggestion({
												region: app.getForm('city'),
												keyword: qs
											})
											.then(res => {
												let newArr = res.data;
												newArr = newArr.map(e => {
													e.value = e.address;
													return e;
												});
												cb(newArr);
											});
									},

									select(item) {
										app.setForm('lat', item.location.lat);
										app.setForm('long', item.location.lng);

										this.$emit('input', item.address);
									}
								},

								render() {
									return (
										<el-autocomplete
											v-model={this.value2}
											fetch-suggestions={this.querySearchAsync}
											on-select={this.select}></el-autocomplete>
									);
								}
							},
							rules: {
								required: true,
								message: '地址不能为空'
							}
						},
						{
							label: '门牌号',
							prop: 'floor',
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请填写楼号门牌号'
								}
							}
						},
						{
							label: '简介',
							prop: '',
							component: {
								name: 'el-input',
								props: {
									type: 'textarea'
								},
								attrs: {
									rows: 4
								}
							}
						}
					]
				})
				.set('layout', [['flex1', 'slot-top-add', 'refresh-btn'], ['data-table']])
				.on('info', (data, { done }) => {
					console.log(data);
					done({
						...data,
						openTime: data.openTime.split('-'),
						provinceCity: [data.province, data.city]
					});
				})
				.done();

			app.refresh();
			this.getCityData();
		},

		getCityData() {
			this.$service.order.orderRelate().then(res => {
				let region = res.region;

				let newRegion = [];
				if (region.length > 0) {
					for (let i in region) {
						newRegion.push({
							id: region[i].id,
							name: region[i].name,
							children: []
						});
						if (region[i].children && region[i].children.length > 0) {
							for (let j in region[i].children) {
								newRegion[i].children.push({
									id: region[i].children[j].id,
									name: region[i].children[j].name
								});
							}
						}
					}
				}

				this.crud.setData(
					'upsert.items[prop:provinceCity].component.attrs.options',
					newRegion
				);
			});
		},

		download(key, id) {
			let p = null;

			if (key == 'gatheringCode') {
				p = this.$service.shop.downloadGatheringCode(id);
			} else if (key == 'applyMemberCode') {
				p = this.$service.shop.downloadApplyMemberCode(id);
			}

			location.href = p;
		},

		shopAdd() {
			this.crud.add();
		},

		shopPic() {
			this.$router.push('/ad/list');
		}
	}
};
</script>

<style lang="stylus" scoped>
.shop-list {
    height 100%;
}
</style>
