<template>
	<div class="app-container">
		<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
			label-width="68px">
			<el-form-item label="商品名称" prop="goodsName">
				<el-input v-model="queryParams.goodsName" placeholder="请输入商品名称" clearable
					@keyup.enter.native="handleQuery" />
			</el-form-item>
			<el-form-item label="商品编号" prop="id">
				<el-input v-model="queryParams.id" placeholder="请输入商品编号" clearable @keyup.enter.native="handleQuery" />
			</el-form-item>
			<el-form-item label="所属游戏" prop="gameId">
				<el-select v-model="queryParams.gameId">
					<el-option v-for="(item,index) in gameList" :key="item.id" :label="item.gameName" :value="item.id">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="商品状态" prop="goodsStatus">
				<el-select v-model="queryParams.goodsStatus">
					<el-option v-for="(item,index) in options5" :key="item.id" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
				<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
			</el-form-item>
		</el-form>

		<el-row :gutter="10" class="mb8">
			<el-col :span="1.5">
				<el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple"
					@click="handleDelete" v-hasPermi="['system:goods:remove']">删除
				</el-button>
			</el-col>
			<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
		</el-row>

		<el-table v-loading="loading" :data="goodsList" @selection-change="handleSelectionChange">
			<el-table-column type="selection" width="55" align="center" />
			<el-table-column label="商品名称" show-overflow-tooltip align="center" height="20px" prop="goodsName" />
			<el-table-column label="商品编号" height="20px" prop="id" />
			<el-table-column label="游戏名称" align="center" prop="gameId">
				<template slot-scope="scope">
					<div v-for="(item,index) in gameList" :key="item.id" :label="item.gameName" :value="item.id">
						<span v-if="item.id==scope.row.gameId">{{item.gameName}}</span>
					</div>
				</template>
			</el-table-column>
			<el-table-column label="游戏账号售价" align="center" prop="price" />
			<el-table-column label="排位状态" align="center" prop="ranking">
				<template slot-scope="scope">
					<dict-tag :options="dict.type.ranking" :value="scope.row.ranking" />
				</template>
			</el-table-column>
			<el-table-column label="实名状态" align="center" prop="identifiedName">

				<template slot-scope="scope">
					<dict-tag :options="dict.type.identified_name" :value="scope.row.identifiedName" />
				</template>
			</el-table-column>
			<el-table-column align="center" label="主营行业" prop="accountSource">
				<template slot-scope="scope">
					<dict-tag :options="dict.type.account_source" :value="scope.row.accountSource" />
				</template>
			</el-table-column>
			<el-table-column label="游戏图片" align="center">
				<template slot-scope="scope">
					<label style="color: #ff0000;" @click="openPictureDialog(scope.row)">游戏图片</label>
					<!--<el-image  :src="pictureServerPath + scope.row.gamePicture" style="width: 50px;height: 50px;"></el-image>-->
				</template>
			</el-table-column>
			<el-table-column label="联系方式" height="20px" prop="userName" />
			<el-table-column label="商品状态" align="center" prop="goodsStatus">
				<template slot-scope="scope">
					<span v-if="scope.row.goodsStatus=='goods_status_0'">已通过</span>
					<span v-if="scope.row.goodsStatus=='goods_status_1'">已预订</span>
					<span v-if="scope.row.goodsStatus=='goods_status_2'">已下架</span>
					<span v-if="scope.row.goodsStatus=='goods_status_3'">已出售</span>
					<span v-if="scope.row.goodsStatus=='goods_status_5'">待审核</span>
					<span v-if="scope.row.goodsStatus=='goods_status_6'">已驳回</span>
				</template>
			</el-table-column>
			<el-table-column label="创建时间" align="center" prop="createTime"/>


			<el-table-column label="操作" width="200px" align="center" class-name="small-padding fixed-width">
				<template slot-scope="scope">
					<div v-show="scope.row.goodsStatus=='goods_status_5'">
						<el-button type="success" size="small" @click="handleSend(scope.row)"
							v-hasPermi="['system:goods:edit1']">通过
						</el-button>
						<el-button size="small" type="primary" @click="handleUpdate(scope.row)">详情
						</el-button>
						<el-button size="small" type="danger" @click="handleBh(scope.row)"
							v-hasPermi="['system:goods:remove']">驳回
						</el-button>
					</div>
				</template>
			</el-table-column>
		</el-table>

		<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
			@pagination="getList" />

		<!-- 添加或修改商品信息对话框 -->
		<el-dialog :title="title" :before-close="handleClose1" :visible.sync="open" high="1500px" width="100%"
			append-to-body>
			<el-form ref="form" :model="form" :rules="rules" label-width="80px">
				<el-row>
					<el-col :span="24">
						<el-form-item label="商品名称" prop="goodsName">
							<el-input type="textarea" @input='fxsx' v-model="form.goodsName" placeholder="请输入商品名称" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="所属游戏" prop="gameId">
							<el-select v-model="form.gameId" @change="changeGameArea" style="width: 100%" filterable
								placeholder="请选择所属游戏">
								<el-option v-if="openGame&&openGame.find(item1 => item1 == item.id)"
									v-for="(item,index) in gameList" :key="item.id" :label="item.gameName"
									:value="item.id"></el-option>
								<el-option v-if="openGame==null" v-for="(item,index) in gameList" :key="item.id"
									:label="item.gameName" :value="item.id"></el-option>
							</el-select>

						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="游戏大区" prop="gameareaId">
							<el-cascader style="width: 100%" v-model="form.gameareaId" :options="options"
								:props="{ expandTrigger: 'hover' }"></el-cascader>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="游戏账号" prop="gameAccount">
							<el-input v-model="form.gameAccount" placeholder="请输入游戏账号" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="账号售价" prop="price">
							<el-input v-model="form.price" placeholder="请输入游戏账号售价" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="折扣价" prop="discountedPrice">
							<el-input v-model="form.discountedPrice" placeholder="请输入游戏账号折扣价" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<!-- <el-form-item v-show="block" v-for="(item,index) in type" v-if="item=='identified_name'"
							label="实名情况" prop="identifiedName">
							<el-select v-model="form.identifiedName" style="width: 100%">
								<el-option v-for="dict in dict.type.identified_name" :key="dict.value"
									:label="dict.label" :value="dict.value"></el-option>
							</el-select>
						</el-form-item> -->
					</el-col>
					<el-col :span="12" v-for="(item,index) in tableData">
						<el-form-item v-if="item.type==3" :label="item.label">
							<!-- 修改 -->
							<el-input style="width: 100%"
								v-if="item.id==item2.attributeId&&item2.attributeValue!=null&&item2.type==3&&xiugai"
								v-for="(item2,index) in form.gameAttrs" v-model="item2.attributeValue"
								placeholder="请输入内容"></el-input>
							<el-input v-if="xiugai1" style="width: 100%" v-model="input[item.id]"
								placeholder="请输入内容"></el-input>
							<el-input v-if="xiugai2" style="width: 100%" v-model="input[item.id]"
								placeholder="请输入内容"></el-input>
							<!-- 新增 -->
							<el-input v-if="xinzeng" style="width: 100%" v-model="input[item.id]"
								placeholder="请输入内容"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12" v-for="(item,index) in tableData2" :key="index">
						<el-form-item v-if="item.type==2" :label="item.label">
							<!-- 修改 -->
							<!-- 新增 -->
							<el-select style="width: 100%" v-model="selectvalue[index]" value-key="item.id"
								placeholder="请选择">
								<el-option v-for="(item1,index1) in item.children" :key="item1.id" :label="item1.label"
									:value="item1.id">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item v-show="block" v-for="(item,index) in type" v-if="item=='account_type'"
							label="账号类型" prop="accountType">
							<el-select v-model="form.accountType" style="width: 100%">
								<el-option v-for="dict in dict.type.account_type" :key="dict.value" :label="dict.label"
									:value="dict.value"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row>
					<el-col :span="12">
						<el-form-item v-show="false" label="主营行业" prop="accountSource">
							<el-select v-model="form.accountSource" placeholder="请选择主营行业" style="width: 100%" disabled>
								<el-option v-for="dict in dict.type.account_source" :key="dict.value"
									:label="dict.label" :value="dict.value"></el-option>
							</el-select>
						</el-form-item>

					</el-col>

					<el-col :span="12">
						<el-form-item v-show="block" v-for="(item,index) in type" v-if="item=='binding_psn'"
							label="绑定psn" prop="bindingPsn">
							<el-select v-model="form.bindingPsn" style="width: 100%">
								<el-option v-for="dict in dict.type.binding_psn" :key="dict.value" :label="dict.label"
									:value="dict.value"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item v-show="block" v-for="(item,index) in type" v-if="item=='binding_tap'"
							label="绑定tap" prop="bindingTap">
							<el-select v-model="form.bindingTap" style="width: 100%">
								<el-option v-for="dict in dict.type.binding_tap" :key="dict.value" :label="dict.label"
									:value="dict.value"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item v-show="block" v-for="(item,index) in type" v-if="item=='account_type_wg'"
							label="账号类型" prop="accountTypeWg">
							<el-select v-model="form.accountTypeWg" style="width: 100%">
								<el-option v-for="dict in dict.type.account_type_wg" :key="dict.value"
									:label="dict.label" :value="dict.value"></el-option>
							</el-select>
						</el-form-item>
					</el-col>

				</el-row>
				<el-row>
					<el-col :span="24">
						<el-form-item v-show="gameAttrs1" label="游戏属性" prop="gameAttributes" v-if="gameAttrs1">

						</el-form-item>
						<table v-show="gameAttrs1" v-if="gameAttrs1" width="100%" border="1"
							style="border-color: #f1f3f5;" cellspacing="0" cellpadding="0" align="center">
							  <tbody>
								<tr v-for="(item,index) in tableData" v-if="item.type==0">
									<th width="100px">{{item.label}}</th>
									<td width="750px">
								<tr v-for="(item1,index) in item.children" style="margin: 0 10px;">
									<th width="100px">{{item1.label}}</th>
									<td>
										<span v-for="(item2,index1) in item1.children" v-if="item1.type==1">
											<el-checkbox-group v-model="gameAttrs" style="display: inline;"
												@change="handleCheckedCitiesChange">
												<el-tooltip class="item" effect="dark" :content="item2.label"
													placement="top-start">
													<el-checkbox class="fxk" :label="item2.id" :value="item2.label"
														:key="item2.id">{{item2.label}}</el-checkbox>
												</el-tooltip>
											</el-checkbox-group>
										</span>
									</td>
								</tr>
								</td>
								</tr>
								<tr v-for="(item,index) in tableData" v-if="item.type==1">
									      <th width="100px">{{item.label}}</th>
									<td width="750px">
										<span v-for="(item1,index) in item.children" style="margin: 0 10px;">
											<el-checkbox-group v-model="gameAttrs" style="display: inline;"
												@change="handleCheckedCitiesChange">
												<el-tooltip class="item" effect="dark" :content="item1.label"
													placement="top-start">
													<el-checkbox class="fxk" v-if="item1.type==1" :label="item1.id"
														:value="item1.id" :key="item1.id">{{item1.label}}</el-checkbox>
												</el-tooltip>
											</el-checkbox-group>
										</span>
									</td>
								</tr>
							</tbody>
						</table>
					</el-col>
				</el-row>

			</el-form>

			<div slot="footer" class="dialog-footer">
				<el-button @click="cancel">关 闭</el-button>
			</div>
		</el-dialog>

		<el-dialog title="游戏图片" :before-close="closedialog" :visible.sync="openPicture" width="1000px" append-to-body>

			<el-form ref="form" :model="form" :rules="rules" label-width="80px">
				<div class="img_list">
					<div style="position: relative;width: 100px;height: 100px;" v-for="item in attach_list">
						<el-image @click="deletePicture(item.id)" style="width: 100px;height: 100px;"
							:src="nginx_pictures_path+item.url"></el-image>
					</div>
				</div>
				<el-upload ref="upload" :action="uploadImgUrl" list-type="picture-card"
					:before-upload="beforeAvatarUpload" :on-success="handleAvatarSuccess" :on-remove="handleRemove"
					:on-change="changeUpload" :show-file-list="true" accept="image/png, image/jpeg, application/pdf"
					:multiple="true" :headers="headers"></el-upload>
			</el-form>
			<el-button @click="addPictures">添加图片</el-button>
			<el-button @click="cancelPic">取 消</el-button>
		</el-dialog>
		<!-- 驳回信息 -->
		<el-dialog v-if="bohui" title="驳回" :visible.sync="bohui" append-to-body width="800px">
			<div style="display: flex;flex-wrap: wrap;">
				<el-form ref="form" :model="form" :rules="rules">
					<el-row>
						<el-col :span="12">
							<el-form-item label="驳回原因" prop="remark">
								<el-input style="width: 500px;" v-model="queryParams.remark" type="textarea" :rows="2"
									placeholder="请输入驳回原因" />
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="bh">确 定</el-button>
				<el-button @click="bohui=false">取 消</el-button>
			</div>
		</el-dialog>
		<el-dialog title="线下出售" :visible.sync="openRefreshRecord1" width="500px" append-to-body>
			<el-form ref="form1" :model="form1" :rules="rules" label-width="80px">
				<el-form-item label="销售渠道" prop="sellChannels">
					<el-radio-group v-model="form1.sellChannels" @change="selectSellChannels">
						<el-radio label="taohaowan">淘号玩</el-radio>
						<el-radio label="waibu">外部</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="用户登录账号" v-show="userphone" prop="userName">
					<el-input v-model="form1.userName" placeholder="请输入客户登录账号"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onSubmit">出售</el-button>
					<el-button @click="openRefreshRecord1=false">取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>


	</div>
</template>
<style lang="scss" scoped>
	.fxk {
		width: 140px;
		margin: 0 10px;
		overflow-x: hidden;
		// font-weight: 600;
	}

	.post-information-title {
		font-size: 15px;
		margin: -35px 10px 10px 10px;
		color: dodgerblue;

		span {
			display: inline-block;
			width: 11px;
			height: 100%;

			img {
				width: 100%;
			}
		}
	}

	.staffUpData .el-upload-list--picture-card .el-upload-list__item {
		overflow: inherit;
		float: left;
		background: rgba(255, 94, 94, 1);
		margin-top: 20px;

		img {
			display: block;
		}
	}

	.staffUpData .el-upload-list--picture-card .el-upload-list__item-name {
		display: block;
		width: 100%;
	}

	.staffUpData .el-upload--picture-card {
		margin-top: 20px;
	}

	.el-upload-list__item.is-success .el-upload-list__item-status-label {
		display: none !important;
	}

	.img_list {}

	.img_list div {
		margin: 10px;
		float: left;

	}
</style>

<script>
	import {
		listGoods,
		getGoods,
		delGoods,
		refGoods,
		addGoods,
		updateGoods,
		sell,
		getInitGoodsManager,
		getGameArea,
		getGoodsPictures,
		addGoodsPictures,
		getGoodsByShopId,
		getGameAttrib,
		goodsNoticeList,
		goodsPayment,
		goodsPaymentadd,
		getTBusShopInfo,
		getGameAttr,
		getGameAttr1,
		addAttr,
		dswAudits,
		dswBatchOffShelves
	} from "@/api/data/goods";
	import {
		getToken
	} from "@/utils/auth";
	import {
		getInfo,
		getSysDeptInfo,
	} from "@/api/data/goodsPayment";
	import {
		delAttach
	} from '@/api/data/attach'
	import Treeselect from "@riophae/vue-treeselect";
	import "@riophae/vue-treeselect/dist/vue-treeselect.css";
	import {
		deptTreeSelect
	} from '@/api/system/user';
	import Cookies from 'js-cookie';

	export default {
		name: "Goods",
		dicts: ['account_source', 'is_multiple', 'by_stages', 'ranking', 'game_platform_mapping', 'identified_name',
			'account_type', 'binding_tap',
			'binding_psn',
			'account_type_wg', 'healthy_status', 'main_industry'
		],
		components: {
			Treeselect
		},
		data() {
			var validatePass2 = (rule, value, callback) => {
				if (Number(value) >= Number(this.form.price)) {
					callback(new Error('折扣价必须小于销售价且为数字!'));
				} else {
					callback();
				}
			};
			return {
				attributeInvert: '',
				userphone: false,
				ordercode: '',
				bohui: false,
				gameAttrs: [],
				gameAttrs2: [],
				gameAttrs3: [],
				gameAttrs4: [],
				input: [],
				selectvalue: [],
				resion1: [],
				checkarr: [],
				xinzeng: false,
				xiugai: false,
				xiugai1: false,
				xiugai2: false,
				values: [],
				labels: [],
				labels1: [],
				gameAttrs1: false,
				openGame: [],
				radio: '',
				props: {
					multiple: true
				},
				uploadImgUrl: process.env.VUE_APP_BASE_API + "/file/upload", // 上传的图片服务器地址
				headers: {
					Authorization: "Bearer " + getToken(),
				},
				options: [],
				nginx_pictures_path: null,
				attach_list: [],
				pictureServerPath: null,
				// 遮罩层
				loading: true,
				sxz: false,
				lb: true,
				// 选中数组
				ids: [],
				ids1: [],
				type: [],
				block: true,
				channelid: false,
				bp1: false,
				bp2: false,
				deptName: '',
				deptName1: '',
				// 部门树选项
				deptOptions: undefined,
				// 非单个禁用
				single: true,
				// 非多个禁用
				multiple: true,
				multiple1: true,
				// 显示搜索条件
				showSearch: true,
				// 总条数
				total: 0,
				total1: 13,
				// 商品信息表格数据
				goodsList: [],
				// 弹出层标题
				title: "",
				// 是否显示弹出层
				open: false,
				send: false,
				ck: false,
				xg: false,
				openPicture: false,
				openRefreshRecord: false,
				openRefreshRecord1: false,
				Channel: false,
				Channel1: false,
				bp: false,
				dbbp: false,
				bp1: false,
				form1: {
					userName: '',
				},
				// 付款状态
				options1: [{
					value: 'Y',
					label: '已付款'
				}, {
					value: 'X',
					label: '未付款'
				}],
				// 销售渠道
				options2: [{

					value: 'zichu',
					label: '自出',
					children: [{
						value: 'taohaowan',
						label: '淘号玩'
					}]

				}, {

					value: 'fenxiao',
					label: '分销',
					children: [{
							value: 'game_platform_mapping_1',
							label: '游戏阁'
						}, {
							value: 'game_platform_mapping_3',
							label: '换号吧'
						},
						{
							value: 'game_platform_mapping_4',
							label: '氪金兽'
						},
						{
							value: 'game_platform_mapping_5',
							label: '盼之'
						},
						{
							value: 'game_platform_mapping_6',
							label: '螃蟹'
						},
						{
							value: 'game_platform_mapping_7',
							label: '神仙代售'
						},
						{
							value: 'game_platform_mapping_8',
							label: '看个号'
						}, {

							value: 'game_platform_mapping_9',
							label: '7881'
						},
						{
							value: 'game_platform_mapping_10',
							label: '聚幻游'
						},
						{
							value: 'game_platform_mapping_11',
							label: '破晓网'
						},
						{
							value: 'all',
							label: '其他'
						},
					]

				}],

				options4: [{
					value: 'Y',
					label: '是'
				}, {
					value: 'N',
					label: '否'
				}],
				options5: [{
						value: 'goods_status_5',
						label: '待审核'
					},
					{
						value: 'goods_status_6',
						label: '已驳回'
					},
					{
						value: 'goods_status_3',
						label: '已出售'
					}
				],
				// disabled:false,

				// 查看表格
				tableData: [],
				tableData1: [],
				tableData2: [],
				tableData3: [],
				tableData4: [],
				// 修改参数
				form: {
					name: '',
					region: '',
					date1: '',
					date2: '',
					delivery: false,
					type: [],
					resource: '',
					desc: '',
					selectvalue: [],
				},
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					goodsName: null,
					gameId: null,
					gameName: null,
					gameareaId: null,
					gameareaName: null,
					price: null,
					healthyStatus: null,
					accountSource: null,
					gamePicture: null,
					goodsStatus: 'goods_status_5',
					shopId: null,
					sort: null,
					id: null
				},
				gameList: [],
				electronicDataList1: [],
				electronicDataList2: [],
				// 表单参数
				form: {
					electronicDataList: [],
					gamePicture: [],
					//创建一个游戏属性数值
					arrayLIst: [],
					sort: null,
				},
				form1: {
					identifiedNames: '',
				},
				// 表单校验
				rules: {
					discountedPrice: [{
						validator: validatePass2,
						trigger: 'blur'
					}],

					sellChannels: [{
						required: true,
						message: "销售渠道不能为空",
						trigger: "blur"
					}],
					gameareaId: [{
						required: true,
						message: "大区不能为空",
						trigger: "blur"
					}],

					gameAccount: [{
						required: true,
						message: "游戏账号不能为空",
						trigger: "blur"
					}],
					selectvalue: [{
						required: true,
						message: "属性不能为空",
						trigger: "blur"
					}],
					ranking: [{
						required: true,
						message: "排位不能为空",
						trigger: "blur"
					}],
					accountType: [{
						required: true,
						message: "账户类型不能为空",
						trigger: "blur"
					}],
					accountTypeWg: [{
						required: true,
						message: "账号类型不能为空",
						trigger: "blur"
					}],
					bindingTap: [{
						required: true,
						message: "绑定tap不能为空",
						trigger: "blur"
					}],
					bindingPsn: [{
						required: true,
						message: "绑定psn不能为空",
						trigger: "blur"
					}],
					originalPrice: [{
						required: true,
						message: "商品原价不能为空",
						trigger: "blur"
					}],
					price: [{
						required: true,
						message: "账号售价不能为空",
						trigger: "blur"
					}, ],
					distributionChannel: [{
						required: true,
						message: "销售渠道不能为空",
						trigger: "blur"
					}],
					securityPrice: [{
						required: true,
						message: "包赔费用不能为空",
						trigger: "blur"
					}],
					securityRate: [{
						required: true,
						message: "包赔费率不能为空",
						trigger: "blur"
					}],
					isMultiple: [{
						required: true,
						message: "多倍包赔不能为空",
						trigger: "blur"
					}],
					byStages: [{
						required: true,
						message: "分期购买不能为空",
						trigger: "blur"
					}],

					paymentChannels: [{
						required: true,
						message: "付款渠道不能为空",
						trigger: "blur"
					}],
					paymentNumber: [{
						required: true,
						message: "付款流水号不能为空",
						trigger: "blur"
					}],
					isSecurity: [{
						required: true,
						message: "是否包赔不能为空",
						trigger: "blur"
					}],
					channelId: [{
							required: true,
							message: "分销编号不能为空",
							trigger: "blur"
						},
						{
							validator(rule, value, callback) {
								if (/(^[1-9]\d*$)/.test(value)) {
									callback()
								} else {
									callback(new Error('请输入正整数'))
								}
							},
							trigger: 'blur'
						}
					]






				}
			};
		},
		watch: {
			'$route.query.shopId': {
				handler: function(newValue, oldValue) {
					if (newValue != undefined) {
						this.queryParams.shopId = newValue
					}
					if (oldValue != undefined) {
						this.queryParams.shopId = oldValue
					}
					this.getList();
				}
			}
		},
		created() {
			this.form.shopId = 'e9e38ddf4ea04a28bcf025458df119bd';
			this.attributeInvert = this.$route.query.attributeInvert;
			if (this.$route.query.openGame) {
				this.openGame = this.$route.query.openGame.split(',');
			} else {
				this.openGame = null
			}
			this.queryParams.shopId = 'e9e38ddf4ea04a28bcf025458df119bd';
			this.queryParams.sort = this.$route.query.sort;
			this.initGoodsManager();
			this.getList();
		},
		methods: {
			//班次循环遍历
			gettimes(postcode) {
				let times = [];
				//当当前postcode的值与总List中某一条的postcode的值相等时，拿出来push到list中
				for (let i = 0; i < this.tableData.length; i++) {
					if (this.tableData[i].id == postcode) {
						times.push(this.tableData[i])
					}
				}
				return times;
			},
			fxsx() {
				if (this.attributeInvert == 'A') {
					let goodsName = this.form.goodsName.split(/,|，|【|】|、|:|[/]|：|·|!|[ ]|[+]/);
					this.values = [];
					goodsName.forEach(arr => {
						let reasult = this.tableData1.find(item => {
							return item.label.includes(arr)
							// return item.label == arr
						})
						if (reasult) {
							if (reasult.type != 2) {
								this.values.push(reasult.id);
							}
						}
					});
					if (this.title == '添加商品信息,添加完请记得添加商品图片') {
						if (this.values.length != 0) {
							this.gameAttrs = this.values;
						}
					}
				}
			},
			handleCheckedCitiesChange() {
				if (this.attributeInvert == 'B') {
					this.find(this.gameAttrs)
					this.labels = [...new Set(this.labels)];
					if (this.values.length == 0) {
						this.form.goodsName = this.labels.map(item => item);
						this.form.goodsName = this.form.goodsName.join('/'); //属性label添加到名称当中
					}
				}
			},
			handleClose1() {
				this.gameAttrs1 = false;
				this.open = false;
				this.gameAttrs = [];
				this.selectvalue = [];
				this.tableData2 = [];
				this.tableData3 = [];
				this.tableData4 = [];
				this.xiugai = false;
				this.xiugai1 = false;
				this.xiugai2 = false;
			},
			deletePicture(id) {
				let that = this
				this.$modal.confirm("确定删除此图片吗？").then(function() {
					delAttach(id).then(r => {
						getGoodsPictures({
							goodsId: that.form.id
						}).then(resp => {
							that.nginx_pictures_path = resp.nginx_pictures_path
							that.attach_list = resp.attachlist
						})
					})
				})
			},

			rowClass() {
				return "text-align: rigth;";
			},

			addPictures() {
				let that = this
				this.form.gamePicture = null
				addGoodsPictures(this.form).then(resp => {
					// this.openPictureDialog()
					this.openPicture = false
					location.reload();
				})
			},


			openPictureDialog(rows) {
				this.openPicture = true
				this.form = rows
				this.form.electronicDataList = []
				let that = this
				getGoodsPictures({
					goodsId: this.form.id
				}).then(resp => {
					that.nginx_pictures_path = resp.nginx_pictures_path
					that.attach_list = resp.attachlist
				})
			},

			closedialog(done) {
				this.openPicture = false;
				this.$refs.upload.clearFiles()
			},

			uploadSumit() { // 上传文件
				this.isloading = true
				uploadElectronicData(this.form).then((res) => {
					this.$emit('getUploadSuccess')
					this.$message({
						message: '上传成功',
						type: 'success'
					})
					this.isshow = false
					this.isloading = false
				}).catch((e) => {
					this.$message({
						message: '上传失败',
						type: 'error'
					})
					this.form.electronicDataList = []
					this.isshow = false
					this.isloading = false
				})
			},
			openDialog(employeeId) {
				this.isshow = true
				this.form.employeeId = employeeId
				// employeeId && this.editEmployeeStatusDetail()
			},
			handlePictureCardPreview(file) {
				this.dialogImageUrl = file.url
				this.dialogVisible = true
			},
			handleDownload(file) {},
			// 删除
			handleRemove(file, fileList) {},
			// 上传之前
			beforeAvatarUpload(file) {
				const isJPG = file.type === 'image/jpeg'
				const isPng = file.type === 'image/png'
				const isPdf = file.type === 'application/pdf'
				const isLt50M = file.size / 1024 / 1024 < 50
				if (!isLt50M) {
					this.$message.warning('上传文件大小不能超过 50MB!')
					return false
				}
				if (!isJPG && !isPng && !isPdf) {
					this.$message.warning('只能上传 JPG/PNG/PDF/JPEG 格式!')
					return false
				}
			},
			// 上传成功
			handleAvatarSuccess(res) {
				this.form.gamePicture = res.data.url
			},
			// 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
			changeUpload(file, fileList) {

				if (file.status === 'success') {
					this.$refs.upload.uploadFiles = this.$refs.upload.uploadFiles.filter((item) => {
						return item.raw.size / 1024 / 1024 < 50
					})
					this.tobase64(file)
				}
			},
			tobase64(file) {
				let that = this
				var reader = new FileReader()
				reader.readAsDataURL(file.raw)
				reader.onload = (e) => {
					const tempobj = {
						data: file.response.data.webUrl,
						suffix: '.' + file.raw.type.split('/')[1],
						fileName: file.name,
						uid: file.uid,
					}
					if (tempobj.uid == null) {
						this.$message.error('图片uid为空,请稍后重新上传图片!');
					} else if (tempobj.data == null) {
						this.$message.error('图片data为空,请稍后重新上传图片!');
					} else if (tempobj.suffix == null) {
						this.$message.error('图片suffix为空,请稍后重新上传图片!');
					} else if (tempobj.fileName == null) {
						this.$message.error('图片fileName为空,请稍后重新上传图片!');
					} else {
						this.form.electronicDataList.push(tempobj)
					}
				}
			},

			// 强制重新渲染
			forceUpdate() {
				this.$forceUpdate()
			},

			changeGameArea() {
				this.form.arrayList = []
				this.gameAttrs = []
				this.selectvalue = []
				this.tableData2 = []
				this.tableData3 = []
				this.tableData4 = []
				let that = this
				let gm = {
					gameId: this.form.gameId
				}
				getGameArea(gm).then(res => {
					that.options = res.gameArea
				})
				getGameAttrib(gm.gameId).then(res => {

					if (res.data.gameProperties != null) {
						this.block = true;
						let data = res.data.gameProperties.split(",")
						this.type = data
					} else {
						this.block = false
					}
				})
				let query = {
					gameId: gm.gameId
				}
				getGameAttr(query).then(res => {
					if (res.data[0].children) {
						this.gameAttrs1 = true
						this.tableData = res.data[0].children;
						this.tableData.forEach(res => {
							if (res.type == 2) {
								this.tableData2.push(res)
							}
						});
					} else {
						this.gameAttrs1 = false
					}
				})
				getGameAttr1(query).then(res => {
					if (res.data[0].children) {
						this.gameAttrs1 = true;
						this.treeToArr(res.data[0].children);
						this.fxsx();
					} else {
						this.gameAttrs1 = false
					}

				})
			},
			changeGameArea(id) {
				this.form.arrayList = []
				this.gameAttrs = []
				this.selectvalue = []
				this.tableData2 = []
				this.tableData3 = []
				this.tableData4 = []
				let that = this
				let gm = {
					gameId: id
				}
				getGameArea(gm).then(res => {

					that.options = res.gameArea
				})
				getGameAttrib(gm.gameId).then(res => {

					if (res.data.gameProperties != null) {
						this.block = true;
						let data = res.data.gameProperties.split(",")
						this.type = data
					} else {
						this.block = false
					}
				})
				let query = {
					gameId: gm.gameId
				}
				getGameAttr(query).then(res => {
					if (res.data[0].children) {
						this.gameAttrs1 = true
						this.tableData = res.data[0].children;
						this.tableData.forEach(res => {
							if (res.type == 2) {
								this.tableData2.push(res)
							}
						});
					} else {
						this.gameAttrs1 = false
					}

				})
				getGameAttr1(query).then(res => {
					if (res.data[0].children) {
						this.gameAttrs1 = true;
						this.treeToArr(res.data[0].children);
						this.fxsx();
					} else {
						this.gameAttrs1 = false
					}

				})
			},
			/**
			 * 过滤数组 将树状结构转换为平铺数组
			 * @param data 树形结构的数据
			 */
			//将树形结构数据转换为平铺数据
			treeToArr(arr) {
				let result = [];
				let node = [];
				node = node.concat(arr);
				while (node.length) {
					let first = node.shift();
					if (first.children) {
						node = node.concat(first.children);
						delete first.children;
					}
					result.push(first);
				}
				this.tableData1 = result;
				// return result;
			},
			// An highlighted block
			getTree(data, firstId) {
				let temp = [];
				const result = [];
				data.forEach(function(item) {
					if (item.pid === firstId) { // 当递归第一次时创建新对象
						const newObj = {
							'name': item.name,
							'id': item.id
						}; // 重新定义obj
						temp = getTree(data, item.id); // 递归开始
						if (temp.length) { // 多层children
							newObj.children = temp;
						}
						result.push(newObj)
					}
				});
				return result
			},

			find(arr) {
				this.labels = [];
				arr.forEach(arr => {
					let reasult = this.tableData1.find(item => {
						return item.id == arr
					})
					this.labels.push(reasult.label);
				});
			},
			initGoodsManager() {
				getInitGoodsManager().then(res => {
					this.pictureServerPath = res.pictureServerPath
					this.gameList = res.gameList
				})
			},

			/** 查询商品信息列表 */
			getList() {
				this.loading = true;
				this.queryParams.channelNumber='DS'
				listGoods(this.queryParams).then(response => {
					this.goodsList = response.rows;
					this.total = response.total;
					this.loading = false;
				});
			},
			// 取消按钮
			cancelPic() {
				this.$refs.upload.clearFiles()
				this.openPicture = false;
				this.reset();
				location.href = location.href + "#reloaded";
			},


			cancel() {
				this.open = false;
				this.send = false;
				this.bp = false;
				this.dbbp = false;
				this.bp1 = false;
				this.bp2 = false;
				this.gameAttrs = [];
				this.selectvalue = [];
				this.tableData2 = [];
				this.tableData3 = [];
				this.tableData4 = [];
				this.xiugai = false;
				this.xiugai1 = false;
				this.xiugai2 = false;
				this.gameAttrs1 = false;
				this.channelid = false;
				this.reset();
			},
			// 表单重置
			reset() {
				this.form = {
					id: null,
					goodsName: null,
					gameId: null,
					gameName: null,
					gameareaId: null,
					gameareaName: null,
					createTime: null,
					price: null,
					healthyStatus: null,
					accountSource: null,
					gamePicture: null,
					goodsStatus: null,
					shopId: this.form.shopId,
					electronicDataList: [],
					arrayList: [],
				};
				this.resetForm("form");
			},
			/** 搜索按钮操作 */
			handleQuery() {
				this.queryParams.pageNum = 1;
				this.getList();
			},
			/** 重置按钮操作 */
			resetQuery() {
				this.resetForm("queryForm");
				this.handleQuery();
			},
			// 多选框选中数据
			handleSelectionChange(selection) {
				this.ids = selection.map(item => item.id)
				this.single = selection.length !== 1
				this.multiple = !selection.length
				this.multiple1 = !selection.length
			},
			/** 新增按钮操作 */
			handleAdd() {
				this.block = false
				this.form.arrayList = [];
				const shopId = this.$route.query.shopId;
				getGoodsByShopId(shopId).then(response => {
					if (response.msg == "true") { //说明 之前上传的号  图片都已经传了
						this.reset();
						this.open = true;
						this.xiugai = false;
						this.xiugai1 = false;
						this.xiugai2 = false;
						this.xinzeng = true;
						// this.treeToArr(this.tableData)
						this.title = "添加商品信息,添加完请记得添加商品图片";
						// this.$refs.upload.clearFiles();
						this.form.accountSource = this.$route.query.accountSource
					} else {
						this.$modal.notice("(" + response.msg + "....)订单没有传图片，请完善之后在操作!").then(function() {

						})
					}
				});
			},
			//出售按钮
			handleSend(row) {
				let query = {
					id: row.id,
					goodsStatus: 'goods_status_0'
				}
				dswAudits(query).then(res => {
					if (res.code == 200) {
						this.$message({
							type: 'success',
							message: '已通过!'
						})
						this.getList();
					}
				})
			},
			selectSellChannels(e) {
				if (e == 'taohaowan') {
					this.userphone = true;
				} else {
					this.form1.userName = null;
					this.userphone = false;
				}
			},
			onSubmit() {
				this.$refs["form1"].validate(valid => {
					if (valid) {
						if (this.form1.sellChannels == 'taohaowan') {
							if (this.form1.userName) {
								this.getsell();
							} else {
								alert('登录账号不能为空!')
							}
						} else {
							this.getsell();
						}
					}
				})
			},
			getsell() {
				let id = Cookies.get('id')
				this.orderCode();
				let query = {
					sellChannels: this.form1.sellChannels,
					userName: this.form1.userName,
					orderCode: this.ordercode,
					id: id,
				}
				sell(query).then(res => {
					this.openRefreshRecord1 = false;
					this.form1.userName = null;
					this.form1.sellChannels = null;
					this.$modal.msgSuccess("出售成功");
					this.getList();
				})
			},
			orderCode() {
				const now = new Date()
				let month = now.getMonth() + 1
				let day = now.getDate()
				let hour = now.getHours()
				let minutes = now.getMinutes()
				let seconds = now.getSeconds()
				month = month < 10 ? "0" + month : month;
				day = day < 10 ? "0" + day : day;
				hour = hour < 10 ? "0" + hour : hour;
				minutes = minutes < 10 ? "0" + minutes : minutes;
				seconds = seconds < 10 ? "0" + seconds : seconds;
				let orderCode = now.getFullYear().toString() + month.toString() + day + hour + minutes + seconds + (Math
					.round(Math.random() * 10000000000)).toString();
				this.ordercode = orderCode
				return orderCode;
			},
			changeGameArea2(id) {
				this.form.arrayList = []
				this.gameAttrs = []
				this.selectvalue = []
				this.tableData2 = []
				this.tableData3 = []
				this.tableData4 = []
				let that = this
				let gm = {
					gameId: id
				}
				getGameArea(gm).then(res => {
			
					that.options = res.gameArea
				})
				getGameAttrib(gm.gameId).then(res => {
			
					if (res.data.gameProperties != null) {
						this.block = true;
						let data = res.data.gameProperties.split(",")
						this.type = data
					} else {
						this.block = false
					}
				})
				let query = {
					gameId: gm.gameId
				}
				getGameAttr(query).then(res => {
					if (res.data[0].children) {
						this.gameAttrs1 = true
						this.tableData = res.data[0].children;
						this.tableData.forEach(res => {
							if (res.type == 2) {
								this.tableData2.push(res)
								this.tableData4.push(res.children)
							}
							if (res.type == 3) {
								this.tableData3.push(res.id)
							}
						});
						this.getHxData();
					} else {
						this.gameAttrs1 = false
					}
			
				})
				getGameAttr1(query).then(res => {
					if (res.data[0].children) {
						this.gameAttrs1 = true;
						this.treeToArr(res.data[0].children);
						this.fxsx();
					} else {
						this.gameAttrs1 = false
					}
			
				})
			},
			getHxData() {
				let id = Cookies.get('idXiu');
				getGoods(id).then(response => {
					this.form = response.data;
					this.open = true;
					if (this.form.gameAttrs.length == 0) {
						this.xiugai1 = true;
						this.xiugai = false;
						this.xiugai2 = false;
					} else {
						let type = this.form.gameAttrs.find(res => {
							return res.type == 3;
						});
						if (type) {
							this.xiugai2 = false;
							this.xiugai1 = false;
							this.xiugai = true;
							//输入框补全
							let inputs = []
							this.form.gameAttrs.forEach(item => {
								if (item.type == 3) {
									inputs.push(Number(item.attributeId))
									return;
								}
							})
							// 赋值
							let reasult = this.getArrDifference(inputs, this.tableData3);
							if (reasult.length != 0) {
								let resu1 = [];
								reasult.forEach(item => {
									let query = {
										attributeId: '',
										attributeValue: '',
										type: 3,
										sxType: 'new',
									}
									query.attributeId = item;
									this.form.gameAttrs.push(query)
								})
							}
						} else {
							this.xiugai2 = true;
							this.xiugai1 = false;
							this.xiugai = false;
						}
					}
					this.xinzeng = false;
					this.title = "查看商品信息";
					let jsonstr = response.data.verticalProperties;
					//获取查询数据中的下拉框
					let selects = []
					this.form.gameAttrs.forEach(item => {
						if (item.type == 2) {
							selects.push(Number(item.attributeId))
							return;
						}
					})
					// 获取下拉框原数组id
					let query = []
					this.tableData4.forEach((res,index) => {
						let query1=[]
						res.forEach((item,index1)=>{
							query1.push(item.id)
						})
						query[index]=query1
					})
					let selectvalues=[]
					query.forEach(res=>{
						let resualt=selects.find(item=>{
							return res.includes(item);
						})
						if(resualt==undefined){
							resualt=''
						}
						selectvalues.push(resualt)
					})
					this.selectvalue = selectvalues
					this.form.gameAttrs.forEach(item => {
						if (item.type != 2) {
							this.gameAttrs.push(Number(item.attributeId))
							return;
						}
					})
			
					//非空判断，转换json集合
					if (jsonstr != null) {
						let attribute = JSON.parse(jsonstr);
						//回填游戏属性
						this.form.arrayList = attribute;
					}
				});
			},
			getArrDifference(arr1, arr2) {
				return arr1.concat(arr2).filter(function(v, i, arr) {
					return arr.indexOf(v) === arr.lastIndexOf(v);
				});
			},
			/** 修改按钮操作 */
			handleUpdate(row) {
				this.form.arrayList = [];
				this.form.electronicDataList = [];
				Cookies.set('idXiu', row.id || this.ids);
				this.changeGameArea2(row.gameId);
			},
			/** 删除按钮操作 */
			handleDelete(row) {
				const ids = row.id || this.ids;
				this.$modal.confirm('是否确认删除商品信息编号为"' + ids + '"的数据项？').then(function() {
					return dswBatchOffShelves(ids);
				}).then(() => {
					this.getList();
					this.$modal.msgSuccess("删除成功");
				}).catch(() => {});
			},
			/** 驳回按钮操作 */
			handleBh(row) {
				this.bohui = true;
				Cookies.set('id', row.id);
			},
			bh() {
				let id = Cookies.get('id')
				let query = {
					id: id,
					goodsStatus: 'goods_status_6',
					remark: this.queryParams.remark
				}
				dswAudits(query).then(res => {
					if (res.code == 200) {
						this.$message({
							type: 'success',
							message: '已驳回!'
						})
						this.bohui = false;
						this.queryParams.remark='';
						this.getList();
					}
				})
			},
			/** 刷新按钮操作 */
			handleRefresh(row) {},
			/** 导出按钮操作 */
			handleExport() {},
		}
	};
</script>