<template>
	<el-container class="userInfo">

		<el-main style="padding: 0">
			<el-card shadow="never" body-style="height:600px">
				<template #header>
					<div class="card-header">
						<span>
							<label class="person-text">入驻详情数据来源：</label>

							<el-switch
								v-model="isShow"
								@click="statusChange"
								active-value="1"
								inactive-value="0"
								active-text="商户汇总"
								inactive-text="入驻详情">
					</el-switch>
						</span>
					</div>
				</template>
				<el-tabs tab-position="top">
					<el-tab-pane label="基本信息">
						<el-form
							:model="generalForm"
							ref="generalForm"
							label-width="150px"
						>
							<el-form-item label="产品加工企业" prop="settledEnterpriseNumber"
							>
								<el-input onkeyup="value=value.replace(/[^\d]/g,0)" v-model="generalForm.settledEnterpriseNumber"></el-input>
							</el-form-item>

							<el-form-item label="农村合作社数" prop="cooperativeEnterpriseNumber"
							>
								<el-input onkeyup="value=value.replace(/[^\d]/g,0)" v-model="generalForm.cooperativeEnterpriseNumber"></el-input>
							</el-form-item>

							<el-form-item label="电商小铺(家)"  prop="commerceShopCount">
								<el-input onkeyup="value=value.replace(/[^\d]/g,0)"
										  v-model="generalForm.commerceShopCount"></el-input>
							</el-form-item>
							<el-form-item label="年交易额(万元)" prop="annualSales">
								<el-input v-on:input="generalForm.annualSales=generalForm.annualSales.replace(/[^-0-9.]/g,'')
												.replace(/^\./g,'')
												.replace(/\.{2,}/g,'.')
												.replace('.','$#$').replace(/\./g,'').replace('$#$','.')
												.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')"
									v-model="generalForm.annualSales"
								></el-input>
							</el-form-item>
							<!--<el-form-item label="网络零售额(万元)" prop="onlineRetailSales">
								<el-input v-on:input="generalForm.onlineRetailSales=generalForm.onlineRetailSales.replace(/[^-0-9.]/g,'')
												.replace(/^\./g,'')
												.replace(/\.{2,}/g,'.')
												.replace('.','$#$').replace(/\./g,'').replace('$#$','.')
												.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')"
									v-model="generalForm.onlineRetailSales"
								></el-input>
							</el-form-item>-->
							<el-form-item label="入驻产品种类(种)" prop="merchantProductCount">
								<el-input onkeyup="value=value.replace(/[^\d]/g,0)"
										  v-model="generalForm.merchantProductCount"
								></el-input>
							</el-form-item>
							<el-form-item label="入驻平台(家)" prop="enterNumber">
								<el-input onkeyup="value=value.replace(/[^\d]/g,0)"
										  v-model="generalForm.enterNumber"
								></el-input>
							</el-form-item>
							<el-form-item>
								<el-button
									el-button
									type="primary"
									@click="submitGeneralForm()"
								>保存</el-button
								>
							</el-form-item>
						</el-form>
					</el-tab-pane>

					<el-tab-pane label="修改大屏名称和视频">
						<el-form
							:model="screenForm"
							ref="screenForm"
							label-width="150px"
						>
							<el-form-item label="大屏名称" :rules="[
									{ required: true, message: '必填项不能为空', trigger: 'blur', },
								]"
								prop="name"
							>
								<el-input
									v-model="screenForm.name"
								></el-input>
							</el-form-item>

							<el-divider border-style="dashed" />

							<el-form-item
								style="width: 500px;"
								label="视频文件上传"
								prop="path"
								:rules="[
								{
									required: true,
									message: '视频文件上传不能为空，或视频文件暂未上传完成',
									trigger: 'blur',
								},
							]"
							>

								<VideoFileUpload
									v-model="screenForm.path"
									:limit="1"
									tip="最多上传1个文件,单个文件不要超过2G,请上传视频格式文件"
								></VideoFileUpload>
							</el-form-item>

							<el-form-item>
								<el-button
									type="primary"
									@click="submitScreenForm()"
								>保存</el-button
								>
							</el-form-item>
						</el-form>
					</el-tab-pane>

				</el-tabs>
			</el-card>
		</el-main>
	</el-container>
</template>

<script>
	import colorTool from "@/utils/color";
	import VideoFileUpload from '@/components/upload/VideoFileUpload'
	import merchantDetailsService from "@/api/wdt/merchantDetails/MerchantDetailsService";
	export default {
		data() {
			return {
				isShow: false,
				type: "1",
				colorList: [
					"#409EFF",
					"#009688",
					"#536dfe",
					"#ff5c93",
					"#c62f2f",
					"#fd726d",
				],
				config: {
					lang: this.$TOOL.data.get("APP_LANG") || this.$CONFIG.LANG,
					theme: this.$TOOL.data.get("APP_THEME") || "default",
					colorPrimary:
						this.$TOOL.data.get("APP_COLOR") ||
						this.$CONFIG.COLOR ||
						"#409EFF",
				},
				userInfo: {},
				generalForm: {
					id: "",
					settledEnterpriseNumber: "",
					cooperativeEnterpriseNumber: "",
					practitionerCount: "",
					commerceShopCount: "",
					annualSales: "",
					onlineRetailSales: "",
					merchantProductCount: "",
					enterNumber: "",
				},
				screenForm: {
					name: "",
					path: ""
				},
				tablePage: {
					total: 0,
					currentPage: 1,
					pageSize: 10,
					orders: [{ column: "a.create_time", asc: false }],
				},
				loading: false,
				rule: [
					{ required: true, message: "必填项不能为空", trigger: "blur" },
				],
			};
		},
		created() {
			this.userInfo = this.$TOOL.data.get("USER_INFO");
			merchantDetailsService.getLimit1().then((data) => {
				if(data.dataSourcesType){
					this.isShow = data.dataSourcesType
				}else{
					this.isShow = false
				}
				if(data.screenName){
					this.screenForm.name = data.screenName
				}else{
					this.screenForm.name = ''
				}
				if(data.path){
					this.screenForm.path = data.path
				}else{
					this.screenForm.path = ''
				}
				this.recover(this.generalForm, data);
			});
			this.refreshList();
		},
		watch: {
			"config.theme"(val) {
				document.body.setAttribute("data-theme", val);
				this.$TOOL.data.set("APP_THEME", val);
			},
			"config.lang"(val) {
				this.$i18n.locale = val;
				this.$TOOL.data.set("APP_LANG", val);
			},
			"config.colorPrimary"(val) {
				colorTool.setAppColors(val);
				this.$TOOL.data.set("APP_COLOR", val);
			},
		},
		components:{
			VideoFileUpload
		},
		methods: {
			async submitGeneralForm() {
				let valid = await this.$refs["generalForm"].validate();
				if (valid) {
					const loading = this.$loading();
					let data = await merchantDetailsService.save(this.generalForm);
					loading.close();
					this.$message.success(data);
				}
			},

			async submitScreenForm() {
				let valid = await this.$refs["screenForm"].validate();
				if (valid) {
					const loading = this.$loading();
					let data = await merchantDetailsService.screenSave(this.screenForm.name,this.screenForm.path);
					loading.close();
					this.$message.success(data);
				}
			},
			// 获取数据列表
			refreshList() {
				this.loading = true;
			},
			changeLog(index) {
				this.type = index;
				this.refreshList();
			},
			// 当前页
			currentChangeHandle({ currentPage, pageSize }) {
				this.tablePage.currentPage = currentPage;
				this.tablePage.pageSize = pageSize;
				this.refreshList();
			},
			// 排序
			sortChangeHandle(obj) {
				this.tablePage.orders = [];
				if (obj.order != null) {
					this.tablePage.orders.push({
						column:
							obj.column.sortBy || this.$utils.toLine(obj.property),
						asc: obj.order === "asc",
					});
				} else {
					this.tablePage.orders = [
						{ column: "a.create_time", asc: false },
					];
				}
				this.refreshList();
			},
			// 是否显示
			statusChange () {
				this.loading = true
				merchantDetailsService.saveDataSources(this.isShow).then((data) => {
					this.$message({
						message: data,
						type: 'success',
						duration: 1500
					})
					this.loading = false
					this.refreshList()
				})
			},
		},
	};
</script>

<style lang="less">
	.userInfo {
		padding: 8px 12px;
		.aside {
			width: 500px;
			margin-right: 20px;
		}
		.el-card__header {
			padding: calc(var(--el-card-padding) - 2px) var(--el-card-padding);
			border-bottom: 1px solid var(--el-card-border-color);
			box-sizing: border-box;
		}
		.person-bg {
			color: rgb(24, 144, 255);
			background-color: rgb(230, 247, 255);
			width: 24px;
			height: 24px;
			border-radius: 50%;
			text-align: center;
			vertical-align: middle;
			display: inline-block;
		}
		.person-text {
			font-size: 15px;
			margin-left: 5px;
			font-weight: 400;
		}
	}

	.adminui-topbar + .userInfo {
		padding: 12px 12px 8px 12px;
	}
</style>
