<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="operate">
				<el-select
					v-model="queryParams.operate"
					placeholder="请选择弹窗状态"
					:style="{ width: '100%' }"
					clearable
				>
					<el-option label="全部" value="" />
					<el-option label="开启" value="1" />
					<el-option label="关闭" value="2" />
				</el-select>
			</el-form-item>
			<el-form-item label="弹窗类型" prop="openType">
				<el-select
					v-model="queryParams.openType"
					placeholder="请选择弹窗类型"
					:style="{ width: '100%' }"
					clearable
				>
					<el-option label="全部" value="" />
					<el-option label="首页" value="1" />
					<el-option label="发现模块" value="2" />
					<el-option label="我的模块" value="3" />
				</el-select>
			</el-form-item>
			<el-form-item label="开启时间" prop="siteStartTime">
				<el-date-picker
					clearable
					v-model="queryParams.siteStartTime"
					type="datetime"
					value-format="yyyy-MM-dd HH:mm:ss"
					placeholder="请选择开启开始时间"
				>
				</el-date-picker>
			</el-form-item>
			<el-form-item label="" prop="siteEndTime">
				<el-date-picker
					clearable
					v-model="queryParams.siteEndTime"
					type="datetime"
					value-format="yyyy-MM-dd HH:mm:ss"
					placeholder="请选择开启结束时间"
				>
				</el-date-picker>
			</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="primary"
					plain
					icon="el-icon-plus"
					size="mini"
					@click="handleAdd"
					v-hasPermi="['system:siteInfo:add']"
					>新增</el-button
				>
			</el-col>
			<!--      <el-col :span="1.5">-->
			<!--        <el-button-->
			<!--          type="success"-->
			<!--          plain-->
			<!--          icon="el-icon-edit"-->
			<!--          size="mini"-->
			<!--          :disabled="single"-->
			<!--          @click="handleUpdate"-->
			<!--          v-hasPermi="['system:siteInfo:edit']"-->
			<!--        >修改</el-button>-->
			<!--      </el-col>-->
			<el-col :span="1.5">
				<el-button
					type="danger"
					plain
					icon="el-icon-delete"
					size="mini"
					:disabled="multiple"
					@click="handleDelete"
					v-hasPermi="['system:siteInfo:remove']"
					>删除</el-button
				>
			</el-col>
			<el-col :span="1.5">
				<el-button
					type="warning"
					plain
					icon="el-icon-download"
					size="mini"
					@click="handleExport"
					v-hasPermi="['system:siteInfo:export']"
					>导出</el-button
				>
			</el-col>
			<right-toolbar
				:showSearch.sync="showSearch"
				@queryTable="getList"
			></right-toolbar>
		</el-row>

		<el-table
			v-loading="loading"
			:data="infoList"
			@selection-change="handleSelectionChange"
		>
			<el-table-column type="selection" width="55" align="center" />
			<el-table-column label="序号" align="center" prop="id" />
			<el-table-column label="升序排序" align="center" prop="orderNumber">
				<template slot-scope="scope">
					<el-input
						v-model="scope.row.orderNumber"
						@blur="updateOrderNumber($event, scope.row)"
					></el-input>
				</template>
			</el-table-column>
			<el-table-column label="弹窗封面" align="center" prop="fileUrl">
				<template slot-scope="scope">
					<el-image
						:src="scope.row.fileUrl"
						style="width: 60px; height: 80px"
						:preview-src-list="[scope.row.fileUrl]"
					>
						<div slot="placeholder" class="image-slot">
							<span class="dot"></span>
						</div>
					</el-image>
				</template>
			</el-table-column>
			<el-table-column label="标题" align="center" prop="siteName" />
			<el-table-column
				label="开启时间"
				align="center"
				prop="siteStartTime"
				width="180"
			>
				<template slot-scope="scope">
					<span>{{
						parseTime(scope.row.siteStartTime, '{y}-{m}-{d} {h}:{i}')
					}}</span>
					~
					<span>{{
						parseTime(scope.row.siteEndTime, '{y}-{m}-{d} {h}:{i}')
					}}</span>
				</template>
			</el-table-column>
			<el-table-column
				label="用户注册时间"
				align="center"
				prop="userRegisterStartTime"
				width="180"
			>
				<template slot-scope="scope">
					<span>{{
						parseTime(scope.row.userRegisterStartTime, '{y}-{m}-{d} {h}:{i}')
					}}</span>
					~
					<span>{{
						parseTime(scope.row.userRegisterEndTime, '{y}-{m}-{d} {h}:{i}')
					}}</span>
				</template>
			</el-table-column>
			<el-table-column label="弹窗状态" align="center" prop="operate">
				<template slot-scope="scope">
					<span v-show="scope.row.operate == 1">开启</span>
					<span v-show="scope.row.operate == 2">关闭</span>
				</template>
			</el-table-column>
			<el-table-column label="弹窗类型" align="center" prop="openType">
				<template slot-scope="scope">
					<span v-show="scope.row.openType == 1">首页</span>
					<span v-show="scope.row.openType == 2">发现模块</span>
					<span v-show="scope.row.openType == 3">我的模块</span>
				</template>
			</el-table-column>
			<el-table-column label="推送频次" align="center" prop="pushType">
				<template slot-scope="scope">
					<span v-show="scope.row.pushType == 1">永久一次</span>
					<span v-show="scope.row.pushType == 2">每次进入</span>
					<span v-show="scope.row.pushType == 3">自定义频次</span>
				</template>
			</el-table-column>
			<el-table-column label="每天" align="center" prop="pushNumber" />
			<el-table-column label="星期" align="center" prop="pushTimer" />
			<el-table-column label="打卡显示活动" align="center" prop="signNumber" />
			<el-table-column
				label="操作"
				align="center"
				class-name="small-padding fixed-width"
			>
				<template slot-scope="scope">
					<el-button
						size="mini"
						type="text"
						icon="el-icon-edit"
						@click="handleUpdate(scope.row, 'edit')"
						v-hasPermi="['system:siteInfo:edit']"
						>修改</el-button
					>
					<el-button
						size="mini"
						type="text"
						icon="el-icon-delete"
						@click="handleDelete(scope.row)"
						v-hasPermi="['system:siteInfo:remove']"
						>删除</el-button
					>
					<el-button
						size="mini"
						type="text"
						icon="el-icon-sort"
						@click="handleUpdate(scope.row, 'copy')"
						v-hasPermi="['system:siteInfo:edit']"
						>复制</el-button
					>
					<el-button
						size="mini"
						type="text"
						icon="el-icon-s-tools"
						@click="closeWindow(scope.row, 1)"
						v-if="scope.row.operate == 2"
						v-hasPermi="['system:siteInfo:edit']"
						>开启弹窗</el-button
					>
					<el-button
						size="mini"
						type="text"
						icon="el-icon-s-tools"
						v-if="scope.row.operate == 1"
						@click="closeWindow(scope.row, 2)"
						v-hasPermi="['system:siteInfo:edit']"
						>关闭弹窗</el-button
					>
				</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" :visible.sync="open" width="680px" append-to-body>
			<el-form ref="form" :model="form" :rules="rules" label-width="80px">
				<el-image
					:src="form.fileUrl"
					style="width: 300px; height: 400px; margin-left: 20%"
				>
					<div slot="placeholder" class="image-slot">
						<span class="dot"></span>
					</div>
				</el-image>
				<el-form-item label="弹窗封面" prop="fileUrl">
					<el-upload
						ref="upload"
						:limit="1"
						accept=".jpg, .png"
						:headers="upload.headers"
						:action="upload.url"
						:disabled="upload.isUploading"
						:before-upload="handleBeforeUpload"
						:on-progress="handleFileUploadProgress"
						:on-success="handleFileSuccess"
						drag
					>
						<i class="el-icon-upload"></i>
						<div class="el-upload__text">
							将文件拖到此处，或<em>点击上传</em>
						</div>
						<div class="el-upload__tip" slot="tip">
							只能上传jpg/png图片，建议尺寸300px*400px
						</div>
					</el-upload>
				</el-form-item>
				<el-form-item label="标题" prop="siteName">
					<el-input
						v-model="form.siteName"
						placeholder="请输入标题"
						style="width: 80%"
						maxlength="21"
					/>
				</el-form-item>
				<el-form-item label="开启时间" prop="startTime">
					<el-date-picker
						v-model="form.startTime"
						type="datetimerange"
						value-format="yyyy-MM-dd HH:mm"
						format="yyyy-MM-dd HH:mm"
						range-separator="至"
						start-placeholder="开始日期"
						end-placeholder="结束日期"
					>
					</el-date-picker>
				</el-form-item>
				<el-form-item
					label="用户注册时间"
					prop="registerTime"
					label-width="100px"
				>
					<el-date-picker
						v-model="form.registerTime"
						type="datetimerange"
						value-format="yyyy-MM-dd HH:mm"
						format="yyyy-MM-dd HH:mm"
						range-separator="至"
						start-placeholder="开始日期"
						end-placeholder="结束日期"
					>
					</el-date-picker>
				</el-form-item>
				<el-form-item label="弹窗类型" prop="openType">
					<el-select v-model="form.openType">
						<el-option label="首页" :value="1" :key="1"></el-option>
						<el-option label="发现模块" :value="2" :key="2"></el-option>
						<el-option label="活动模块" :value="3" :key="3"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="推送次数" prop="pushType">
					<el-radio-group v-model="form.pushType" >
						<el-radio :label="1">永久一次</el-radio>
						<el-radio :label="2">每次进入</el-radio>
						<el-radio :label="3">自定义频次</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-row>
					<el-col :span="12">
						<el-form-item
							label="每天"
							prop="pushNumber"
							v-if="form.pushType == 3"
						>
							<el-input-number
								v-model="form.pushNumber"
								:min="1"
								:max="10"
								label="请选择多少次"
							></el-input-number>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item
							label="推送时间"
							prop="pushTimerArray"
							v-if="form.pushType == 3"
						>
							<el-select
								v-model="form.pushTimerArray"
								multiple
								placeholder="请选择"
								size="small"
							>
								<el-option label="星期一" :value="2" :key="2"></el-option>
								<el-option label="星期二" :value="3" :key="3"></el-option>
								<el-option label="星期三" :value="4" :key="4"></el-option>
								<el-option label="星期四" :value="5" :key="5"></el-option>
								<el-option label="星期五" :value="6" :key="6"></el-option>
								<el-option label="星期六" :value="7" :key="7"></el-option>
								<el-option label="星期日" :value="1" :key="1"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-form-item
					label="可见小程序标签"
					prop="showWechatTagId"
					label-width="120px"
				>
					<treeselect
						v-model="form.showWechatTagArray"
						:options="chatTagOptions"
						:multiple="true"
						:show-count="true"
						placeholder="请选择小程序标签"
						:disable-branch-nodes="true"
					/>
				</el-form-item>
				<el-form-item
					label="可见外部标签"
					prop="showCompanyTagId"
					label-width="120px"
				>
					<treeselect
						v-model="form.showCompanyTagArray"
						:options="tagOptions"
						:multiple="true"
						:show-count="true"
						placeholder="请选择外部标签"
						:disable-branch-nodes="true"
					/>
				</el-form-item>
				<el-form-item
					label="禁止小程序标签"
					prop="forbidWechatTagId"
					label-width="120px"
				>
					<treeselect
						v-model="form.forbidWechatTagArray"
						:options="chatTagOptions"
						:multiple="true"
						:show-count="true"
						placeholder="请选择小程序标签"
						:disable-branch-nodes="true"
					/>
				</el-form-item>
				<el-form-item
					label="禁止外部标签"
					prop="forbidCompanyTagId"
					label-width="120px"
				>
					<treeselect
						v-model="form.forbidCompanyTagArray"
						:options="tagOptions"
						:multiple="true"
						:show-count="true"
						placeholder="请选择外部标签"
						:disable-branch-nodes="true"
					/>
				</el-form-item>
				<el-row>
					<!--          <el-col :span = "12">-->
					<!--            <el-form-item label="所属渠道" prop="channelId">-->
					<!--              <el-select v-model="form.channelArray" multiple placeholder="请选择">-->
					<!--                <el-option-->
					<!--                  v-for="item in channelList"-->
					<!--                  :key="item.id"-->
					<!--                  :label="item.channelName"-->
					<!--                  :value="item.id">-->
					<!--                </el-option>-->
					<!--              </el-select>-->
					<!--            </el-form-item>-->
					<!--          </el-col>-->
					<el-col :span="24">
						<el-form-item label="仪器" prop="channelId">
							<el-select
								v-model="form.machineArray"
								multiple
								placeholder="请选择"
								style="width: 80%"
							>
								<el-option
									v-for="instrument in instrumentList"
									:key="instrument.id"
									:label="instrument.name"
									:value="instrument.id"
								></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="用户类型" prop="userType">
							<el-select v-model="form.userType">
								<el-option label="全部" :value="0" :key="0"></el-option>
								<el-option label="游客" :value="1" :key="1"></el-option>
								<el-option label="会员" :value="2" :key="2"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item
							label="是否开启弹窗"
							prop="operate"
							label-width="120px"
						>
							<el-switch v-model="form.operate"> </el-switch>
						</el-form-item>
					</el-col>
				</el-row>
				<el-form-item
					label="打卡显示活动 "
					prop="signNumber"
					label-width="120px"
				>
					<el-input
						v-model="form.signNumber"
						placeholder="请输入打卡多少次显示活动 "
					/>
				</el-form-item>
				<el-form-item label="排序" prop="orderNumber">
					<el-input v-model="form.orderNumber" placeholder="请输入排序" />
				</el-form-item>
				<el-row>
					<el-col :span="24">
						<el-form-item label="跳转类型" prop="type">
							<el-select v-model="form.type">
								<el-option label="无跳转" :value="0" :key="0"></el-option>
								<el-option label="跳转内部链接" :value="1" :key="1"></el-option>
								<el-option label="跳转小程序" :value="4" :key="4"></el-option>
								<el-option label="跳转外部链接" :value="3" :key="3"></el-option>
								<el-option label="导向视频号" :value="5" :key="5"></el-option>
								<el-option
									label="导向视频号直播间"
									:value="6"
									:key="6"
								></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="24" v-if="form.type == 1">
						<el-form-item label="内部链接" prop="link">
							<el-input v-model="form.link" placeholder="请输入内部链接" />
						</el-form-item>
					</el-col>
					<el-col :span="24" v-if="form.type == 1">
						<el-form-item label="跳转参数" prop="linkParams">
							<el-input
								v-model="form.linkParams"
								placeholder="请输入跳转参数"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="24" v-if="form.type == 3">
						<el-form-item label="外部链接" prop="link">
							<el-input v-model="form.link" placeholder="请输入外部链接" />
						</el-form-item>
					</el-col>
					<el-col :span="24" v-if="form.type == 4">
						<el-form-item label="APPID" prop="redirectAppid">
							<el-input
								v-model="form.redirectAppid"
								placeholder="请输入小程序APPID"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="24" v-if="form.type == 4" label-width="90px">
						<el-form-item label="小程序页面" prop="redirectUrl">
							<el-input
								v-model="form.redirectUrl"
								placeholder="请输入小程序页面"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="24" v-if="form.type == 5 || form.type == 6">
						<el-form-item label="视频号ID" prop="videoNo">
							<el-input v-model="form.videoNo" placeholder="请输入视频号ID" />
						</el-form-item>
					</el-col>
					<el-col :span="24" v-if="form.type == 5" label-width="90px">
						<el-form-item label="feedId" prop="feedId">
							<el-input
								v-model="form.feedId"
								placeholder="请输入视频号feedId"
							/>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitForm">确 定</el-button>
				<el-button @click="clickReset">重 置</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import {
	listInfo,
	getInfo,
	delInfo,
	addInfo,
	updateInfo,
} from '@/api/system/siteInfo'
import { listChannelInfo } from '@/api/system/channelInfo'
import { getToken } from '@/utils/auth'
import { tagTreeSelect } from '@/api/system/wechatTab'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { listInstrument } from '@/api/system/instrument'

export default {
	name: 'Info',
	components: { Treeselect },
	data() {
		return {
			// 仪器列表
			instrumentList: [],
			// 遮罩层
			loading: true,
			// opearte
			operate: 'copy',
			// 选中数组
			ids: [],
			// 非单个禁用
			single: true,
			// 非多个禁用
			multiple: true,
			// 显示搜索条件
			showSearch: true,
			// 总条数
			total: 0,
			// 站点管理表格数据
			infoList: [],
			channelList: [],
			// 弹出层标题
			title: '',
			tagOptions: [],
			chatTagOptions: [],
			// 是否显示弹出层
			open: false,
      // 文件类型, 例如['png', 'jpg', 'jpeg']
      fileType: {
        type: Array,
        default: () => ["jpg", "png"],
      },
			// 导入参数
			upload: {
				// 是否显示弹出层（用户导入）
				open: false,
				// 弹出层标题（用户导入）
				title: '',
				// 是否禁用上传
				isUploading: false,
				// 是否更新已经存在的用户数据
				updateSupport: 0,
				// 设置上传的请求头部
				headers: { Authorization: 'Bearer ' + getToken() },
				// 上传的地址
				url: process.env.VUE_APP_BASE_API + '/file/upload',
			},
			// 查询参数
			queryParams: {
				pageNum: 1,
				pageSize: 10,
				siteType: 1,
				siteName: null,
				fileUrl: null,
				siteStartTime: null,
				siteEndTime: null,
				userRegisterStartTime: null,
				userRegisterEndTime: null,
				openType: '',
				pushType: null,
				pushNumber: null,
				pushTimer: null,
				showWechatTag: null,
				showWechatTagId: null,
				showCompanyTag: null,
				showCompanyTagId: null,
				forbidWechatTag: null,
				forbidWechatTagId: null,
				forbidCompanyTag: null,
				forbidCompanyTagId: null,
				channelName: null,
				channelId: null,
				instrumentName: null,
				instrumentId: null,
				userType: null,
				operate: '',
				signNumber: null,
				orderNumber: null,
				type: null,
				link: null,
				linkParams: null,
				redirectAppid: null,
				redirectUrl: null,
				videoNo: null,
				feedId: null,
			},
			// 表单参数
			form: {},
			// 表单校验
			rules: {
				fileUrl: [
					{ required: true, message: '弹窗封面不能为空', trigger: 'blur' },
				],
				pushType: [
					{ required: true, message: '推送频次不能为空', trigger: 'blur' },
				],
				siteName: [
					{ required: true, message: '标题不能为空', trigger: 'blur' },
				],
				openType: [
					{ required: true, message: '弹窗类型不能为空', trigger: 'blur' },
				],
				userType: [
					{ required: true, message: '用户类型不能为空', trigger: 'blur' },
				],
				orderNumber: [
					{ required: true, message: '排序不能为空', trigger: 'blur' },
				],
				type: [
					{ required: true, message: '跳转类型不能为空', trigger: 'blur' },
				],
				link: [{ required: true, message: '参数不能为空', trigger: 'blur' }],
				redirectAppid: [
					{ required: true, message: 'APPID不能为空', trigger: 'blur' },
				],
				linkParams: [
					{ required: true, message: '跳转参数不能为空', trigger: 'blur' },
				],
				redirectUrl: [
					{ required: true, message: '小程序页面不能为空', trigger: 'blur' },
				],
				videoNo: [
					{ required: true, message: '视频号ID不能为空', trigger: 'blur' },
				],
				feedId: [
					{ required: true, message: '视频号feedId不能为空', trigger: 'blur' },
				],
				pushTimerArray: [
					{
						required: true,
						message: '自定义频次时间不能为空',
						trigger: 'blur',
					},
				],
				pushNumber: [
					{ required: true, message: '每天推送次数不能为空', trigger: 'blur' },
				],
			},
		}
	},
	created() {
		// this.queryParams.siteStartTime = this.dateUtil(new Date(new Date().toLocaleDateString()));
		// this.queryParams.siteEndTime = this.dateUtil(new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1));
		this.getList()
		this.getDeptTree()
		this.queryInstrumentList()
	},
	methods: {
		// 查询仪器
		queryInstrumentList() {
			listInstrument(this.queryParams).then((response) => {
				this.instrumentList = response.rows
			})
		},
		/** 查询站点管理列表 */
		getList() {
			this.form.fileUrl =
				'http://127.0.0.1:9300/statics/2023/12/16/0c49191de1ed8f91b28d9c2b12556154_20231216154804A002.mp4'
			this.loading = true
			listInfo(this.queryParams).then((response) => {
				this.infoList = response.rows
				this.total = response.total
				this.loading = false
			})
			listChannelInfo(this.queryParams).then((response) => {
				this.channelList = response.rows
			})
		},
		// 取消按钮
		cancel() {
			this.open = false
			this.reset()
		},
    clickReset(){
      this.$refs.upload.clearFiles();
      this.reset();
    },
		// 表单重置
		reset() {
			this.form = {
				id: null,
				siteType: null,
				siteName: null,
				fileUrl: null,
				siteStartTime: null,
				siteEndTime: null,
				userRegisterStartTime: null,
				userRegisterEndTime: null,
				openType: null,
				pushType: null,
				pushNumber: null,
				pushTimer: null,
				showWechatTag: null,
				showWechatTagId: null,
				showCompanyTag: null,
				showCompanyTagId: null,
				forbidWechatTag: null,
				forbidWechatTagId: null,
				forbidCompanyTag: null,
				forbidCompanyTagId: null,
				channelName: null,
				channelId: null,
				instrumentName: null,
				instrumentId: null,
				userType: null,
				operate: null,
				signNumber: null,
				orderNumber: 1000,
				type: null,
				link: null,
				linkParams: null,
				redirectAppid: null,
				redirectUrl: null,
				videoNo: null,
				feedId: null,
				createBy: null,
				createTime: null,
				updateBy: null,
				updateTime: null,
			}
			this.resetForm('form')
		},
		dateUtil(date) {
			// 获取年份、月份和日期
			const year = date.getFullYear().toString() // 四位数表示的年份
			const months = (date.getMonth() + 1).toString().padStart(2, '0') // 补零后的两位数表示的月份
			const day = date.getDate().toString().padStart(2, '0') // 补零后的两位数表示的日期
			const hours = date.getHours().toString().padStart(2, '0') // 补全两位数的小时
			const minutes = date.getMinutes().toString().padStart(2, '0') // 补全两位数的分钟
			const seconds = date.getSeconds().toString().padStart(2, '0')
			return `${year}-${months}-${day} ${hours}:${minutes}:${seconds}`
		},
		/** 搜索按钮操作 */
		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
		},
		/** 新增按钮操作 */
		handleAdd() {
			this.reset()
			this.open = true
			this.title = '添加弹窗列表'
			this.form.orderNumber = 1000
			this.form.userType = 2
		},
		/** 修改按钮操作 */
		handleUpdate(row, operate) {
			this.operate = operate
			this.reset()
			const id = row.id || this.ids
			getInfo(id).then((response) => {
				this.form = response.data
				if (this.form.operate == 1) {
					this.form.operate = true
				} else {
					this.form.operate = false
				}
				this.open = true
				this.title = '修改站点管理'
			})
		},
		// 排序
		updateOrderNumber(event, row) {
			updateInfo(row).then((response) => {
				this.$modal.msgSuccess('修改成功')
				this.open = false
				this.getList()
			})
		},
		// 关闭开启弹窗
		closeWindow(row, operate) {
			row.operate = operate
			updateInfo(row).then((response) => {
				this.$modal.msgSuccess('修改成功')
				this.open = false
				this.getList()
			})
		},
		/** 提交按钮 */
		submitForm() {
			this.$refs['form'].validate((valid) => {
				if (valid) {
					if (!this.form.fileUrl) {
						this.$modal.msgError('弹窗封面不能为空')
						return
					}
					// 处理时间
					if (this.form.startTime && this.form.startTime.length > 0) {
						this.form.siteStartTime = this.form.startTime[0]
						this.form.siteEndTime = this.form.startTime[1]
					} else {
						this.form.siteStartTime = ''
						this.form.siteEndTime = ''
					}
					if (this.form.registerTime && this.form.registerTime.length > 0) {
						this.form.userRegisterStartTime = this.form.registerTime[0]
						this.form.userRegisterEndTime = this.form.registerTime[1]
					} else {
						this.form.userRegisterStartTime = ''
						this.form.userRegisterEndTime = ''
					}
					if (this.form.operate) {
						this.form.operate = 1
					} else {
						this.form.operate = 2
					}
					this.form.siteType = 1
					this.form.startTime = []
					this.form.registerTime = []
					if (this.form.id != null && this.operate == 'edit') {
						updateInfo(this.form).then((response) => {
							this.$modal.msgSuccess('修改成功')
							this.open = false
							this.getList()
						})
					} else {
						if (this.operate == 'copy') {
							this.form.id = null
						}
						addInfo(this.form).then((response) => {
							this.$modal.msgSuccess('新增成功')
							this.open = false
							this.getList()
						})
					}
          this.$refs.upload.clearFiles();
				}
			})
		},
		// 文件上传中处理
		handleFileUploadProgress(event, file, fileList) {
			console.log('上传处理中==>file', JSON.stringify(file))
		},
    // 上传前校检格式和大小
    handleBeforeUpload(file) {
      // 校检文件类型
      if (this.fileType) {
        const fileName = file.name.split('.');
        const fileExt = fileName[fileName.length - 1];
        const isTypeOk = this.fileType.default().indexOf(fileExt) >= 0;
        if (!isTypeOk) {
          this.$modal.msgError(`文件格式不正确`);
          return false;
        }
      }
      return true;
    },
		// 文件上传成功处理
		handleFileSuccess(response, file, fileList, item) {
			console.log('上传后的结果==>', JSON.stringify(response))
			if (response.code == '200') {
				this.form.fileUrl = response.data.url
			}
		},
		/** 删除按钮操作 */
		handleDelete(row) {
			const ids = row.id || this.ids
			this.$modal
				.confirm('是否确认删除站点管理编号为"' + ids + '"的数据项？')
				.then(function () {
					return delInfo(ids)
				})
				.then(() => {
					this.getList()
					this.$modal.msgSuccess('删除成功')
				})
				.catch(() => {})
		},
		/** 查询部门下拉树结构 */
		getDeptTree() {
			tagTreeSelect({ type: 2 }).then((response) => {
				this.tagOptions = response.data
			})
			tagTreeSelect({ type: 1 }).then((response) => {
				this.chatTagOptions = response.data
			})
		},
		/** 导出按钮操作 */
		handleExport() {
			this.download(
				'system/siteInfo/export',
				{
					...this.queryParams,
				},
				`info_${new Date().getTime()}.xlsx`
			)
		}
	},
}
</script>
