<template>
	<div>
		<el-tabs v-model="activeName" @tab-click="handleClick">
			<el-tab-pane label="全局系统配置" name="first">
				<el-table v-loading="tableDataLoading" :data="tableData">
					<el-table-column fixed prop="type" label="编号" align="center" width="80">
					</el-table-column>
					<el-table-column prop="min" label="类型">
					</el-table-column>
					<el-table-column prop="value" label="内容" width="500">
						<template slot-scope="scope">
							<div
								style="display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;max-height:80px;">
								{{ scope.row.value }}</div>
						</template>
					</el-table-column>
					<el-table-column prop="createAt" label="创建时间">
					</el-table-column>
					<el-table-column label="操作" prop="id" width="120">
						<template slot-scope="scope">
							<el-button size="mini" type="primary" :disabled="!isAuth('allocationList:update')"
								@click="amend(scope.$index, scope.row)">编辑
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-tab-pane>
			<el-tab-pane label="服务费配置" name="second">
				<el-table v-loading="tableDataLoading" :data="tableData">
					<el-table-column fixed prop="type" label="编号" align="center" width="80">
					</el-table-column>
					<el-table-column prop="min" label="类型">
					</el-table-column>
					<el-table-column prop="value" label="内容" width="500">
						<template slot-scope="scope">
							<div
								style="display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;max-height:80px;">
								{{ scope.row.value }}</div>
						</template>
					</el-table-column>
					<el-table-column prop="createAt" label="创建时间">
					</el-table-column>
					<el-table-column label="操作" prop="id" width="120">
						<template slot-scope="scope">
							<el-button size="mini" type="primary" :disabled="!isAuth('allocationList:update')"
								@click="amend(scope.$index, scope.row)">编辑
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-tab-pane>
			<!-- <el-tab-pane label="首页配置" name="thirdly">
				<el-table
					v-loading="tableDataLoading"
					:data="tableData">
					<el-table-column
					  fixed
						prop="type"
					  label="编号"
					  align="center"
					  width="80">
					</el-table-column>
					<el-table-column
					  prop="min"
					  label="类型">
					</el-table-column>
					<el-table-column
					  prop="value"
					  label="是否启用"
					  width="500">
					</el-table-column>
					<el-table-column
						prop="createAt"
						label="创建时间">
					</el-table-column>
					<el-table-column
						label="操作"
						prop="id"
						width="120">
						<template slot-scope="scope">
							<el-button
							  size="mini"
							  type="primary"
								:disabled="!isAuth('allocationList:update')"
							  @click="amendWhether(scope.$index, scope.row)">编辑
							</el-button>
						</template>
					</el-table-column>
				</el-table>
				 修改弹框
				<el-dialog title="修改" :visible.sync="dialogFormVisible1" center>
					<el-form :model="form2">
					  <el-form-item label="配置类型：" :label-width="formLabelWidth" >
						<el-input v-model="form2.min" style="width:65%;" readonly ></el-input>
					  </el-form-item>
					  <el-form-item label="是否启用：" :label-width="formLabelWidth" >
						<el-select v-model="form2.value" placeholder="请选择类型" style="width:65%;">
						  <el-option v-for="item in values" :key="item.value" :label="item.label" :value="item.label">
						  </el-option>
						</el-select>
					  </el-form-item>
					</el-form>
				  <div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisible1 = false">取 消</el-button>
					<el-button type="primary" @click="WhetherNoticeTo()">确 定</el-button>
				  </div>
				</el-dialog>
			</el-tab-pane> -->
			<el-tab-pane label="客服配置" name="kefu">
				<el-table v-loading="tableDataLoading" :data="tableData">
					<el-table-column fixed prop="type" label="编号" align="center" width="80">
					</el-table-column>
					<el-table-column prop="min" label="类型" width="250">
					</el-table-column>
					<el-table-column prop="value" label="内容">
					</el-table-column>
					<el-table-column prop="createAt" label="创建时间" width="180">
					</el-table-column>
					<el-table-column label="操作" prop="id" width="120">
						<template slot-scope="scope">
							<el-button size="mini" type="primary" :disabled="!isAuth('allocationList:update')"
								@click="amend(scope.$index, scope.row)">编辑
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-tab-pane>
			<el-tab-pane label="微信配置" name="fifth">
				<el-table v-loading="tableDataLoading" :data="tableData">
					<el-table-column fixed prop="type" label="编号" align="center" width="80">
					</el-table-column>
					<el-table-column prop="min" label="类型">
					</el-table-column>
					<el-table-column prop="value" label="内容" width="500">
						<template slot-scope="scope">
							<div
								style="display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;max-height:80px;">
								{{ scope.row.value }}</div>
						</template>
					</el-table-column>
					<el-table-column prop="createAt" label="创建时间">
					</el-table-column>
					<el-table-column label="操作" prop="id" width="120">
						<template slot-scope="scope">
							<el-button size="mini" type="primary" :disabled="!isAuth('allocationList:update')"
								@click="amend(scope.$index, scope.row)">编辑
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-tab-pane>
			<el-tab-pane label="支付宝配置" name="sixth">
				<el-table v-loading="tableDataLoading" :data="tableData">
					<el-table-column fixed prop="type" label="编号" align="center" width="80">
					</el-table-column>
					<el-table-column prop="min" label="类型">
					</el-table-column>
					<el-table-column prop="value" label="内容" width="500">
						<template slot-scope="scope">
							<div
								style="display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;max-height:80px;">
								{{ scope.row.value }}</div>
						</template>
					</el-table-column>
					<el-table-column prop="createAt" label="创建时间">
					</el-table-column>
					<el-table-column label="操作" prop="id" width="120">
						<template slot-scope="scope">
							<el-button size="mini" type="primary" :disabled="!isAuth('allocationList:update')"
								@click="amend(scope.$index, scope.row)">编辑
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-tab-pane>
			<el-tab-pane label="短信配置" name="seventh">
				<el-table v-loading="tableDataLoading" :data="tableData">
					<el-table-column fixed prop="type" label="编号" align="center" width="80">
					</el-table-column>
					<el-table-column prop="min" label="类型">
					</el-table-column>
					<el-table-column prop="value" label="内容" width="500">
						<template slot-scope="scope">
							<div
								style="display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;max-height:80px;">
								{{ scope.row.value }}</div>
						</template>
					</el-table-column>
					<el-table-column prop="createAt" label="创建时间">
					</el-table-column>
					<el-table-column label="操作" prop="id" width="120">
						<template slot-scope="scope">
							<el-button size="mini" type="primary" :disabled="!isAuth('allocationList:update')"
								@click="amend(scope.$index, scope.row)">编辑
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-tab-pane>
			<el-tab-pane label="协议配置" name="xieyi">
				<el-table v-loading="tableDataLoading" :data="tableData">
					<el-table-column fixed prop="type" label="编号" align="center" width="80">
					</el-table-column>
					<el-table-column prop="min" label="类型">
					</el-table-column>
					<el-table-column prop="value" label="内容" width="500">
						<template slot-scope="scope">
							<div
								style="display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;max-height:80px;">
								{{ scope.row.value }}</div>
						</template>
					</el-table-column>
					<el-table-column prop="createAt" label="创建时间">
					</el-table-column>
					<el-table-column label="操作" prop="id" width="120">
						<template slot-scope="scope">
							<el-button size="mini" type="primary" :disabled="!isAuth('allocationList:update')"
								@click="amend(scope.$index, scope.row)">编辑
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-tab-pane>
			<el-tab-pane label="APP消息推送配置" name="app">
				<el-table v-loading="tableDataLoading" :data="tableData">
					<el-table-column fixed prop="type" label="编号" align="center" width="80">
					</el-table-column>
					<el-table-column prop="min" label="类型">
					</el-table-column>
					<el-table-column prop="value" label="内容" width="500">
						<template slot-scope="scope">
							<div
								style="display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;max-height:80px;">
								{{ scope.row.value }}</div>
						</template>
					</el-table-column>
					<el-table-column prop="createAt" label="创建时间">
					</el-table-column>
					<el-table-column label="操作" prop="id" width="120">
						<template slot-scope="scope">
							<el-button size="mini" type="primary" :disabled="!isAuth('allocationList:update')"
								@click="amend(scope.$index, scope.row)">编辑
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-tab-pane>
			<el-tab-pane label="文件上传配置" name="wenjian">
				<el-table v-loading="tableDataLoading" :data="tableData">
					<el-table-column fixed prop="type" label="编号" align="center" width="80">
					</el-table-column>
					<el-table-column prop="min" label="类型">
					</el-table-column>
					<el-table-column prop="value" label="内容" width="500">
						<template slot-scope="scope">
							<div
								style="display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;max-height:80px;">
								{{ scope.row.value }}</div>
						</template>
					</el-table-column>
					<el-table-column prop="createAt" label="创建时间">
					</el-table-column>
					<el-table-column label="操作" prop="id" width="120">
						<template slot-scope="scope">
							<el-button size="mini" type="primary" :disabled="!isAuth('allocationList:update')"
								@click="amend(scope.$index, scope.row)">编辑
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-tab-pane>
			<el-tab-pane label="开关配置" name="kaiguan">
				<el-table v-loading="tableDataLoading" :data="tableData">
					<el-table-column fixed prop="type" label="编号" align="center" width="80">
					</el-table-column>
					<el-table-column prop="min" label="类型" width="250">
					</el-table-column>
					<el-table-column prop="value" label="内容">
					</el-table-column>
					<el-table-column prop="createAt" label="创建时间" width="180">
					</el-table-column>
					<el-table-column label="操作" prop="id" width="120">
						<template slot-scope="scope">
							<el-button size="mini" type="primary" :disabled="!isAuth('allocationList:update')"
								@click="amend(scope.$index, scope.row)">编辑
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-tab-pane>
			<el-tab-pane label="图片配置" name="image">
				<el-table v-loading="tableDataLoading" :data="tableData">
					<el-table-column fixed prop="type" label="编号" align="center" width="80">
					</el-table-column>
					<el-table-column prop="min" label="类型" width="250">
					</el-table-column>
					<el-table-column prop="value" label="内容">
						<template slot-scope="scope">
							<div
								style="display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;max-height:80px;">
								{{ scope.row.value }}
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="createAt" label="创建时间" width="180">
					</el-table-column>
					<el-table-column label="操作" prop="id" width="120">
						<template slot-scope="scope">
							<el-button size="mini" type="primary" :disabled="!isAuth('allocationList:update')"
								@click="amend(scope.$index, scope.row)">编辑
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-tab-pane>
			<!-- 修改与取消服务配置 -->
			<el-tab-pane label="修改与取消服务配置" name="v3_order_form">
				<el-table v-loading="tableDataLoading" :data="tableData">
					<el-table-column fixed prop="type" label="编号" align="center" width="80">
					</el-table-column>
					<el-table-column prop="min" label="类型">
					</el-table-column>
					<el-table-column prop="value" label="内容" width="500">
						<template slot-scope="scope">
							<div
								style="display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;max-height:80px;">
								{{ scope.row.value }}
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="createAt" label="创建时间">
					</el-table-column>
					<el-table-column label="操作" prop="id" width="120">
						<template slot-scope="scope">
							<el-button size="mini" type="primary" :disabled="!isAuth('allocationList:update')" @click="amend(scope.$index, scope.row)">
								编辑
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-tab-pane>
			<!-- 出行配置(新) -->
			<el-tab-pane label="出行配置" name="v3_travel_conf">
				<el-table v-loading="tableDataLoading" :data="tableData">
					<el-table-column fixed prop="type" label="编号" align="center" width="80">
					</el-table-column>
					<el-table-column prop="min" label="类型">
					</el-table-column>
					<el-table-column prop="value" label="内容" width="500">
						<template slot-scope="scope">
							<div
								style="display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;max-height:80px;">
								{{ scope.row.value }}
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="createAt" label="创建时间">
					</el-table-column>
					<el-table-column label="操作" prop="id" width="120">
						<template slot-scope="scope">
							<el-button size="mini" type="primary" :disabled="!isAuth('allocationList:update')" @click="amend(scope.$index, scope.row)">
								编辑
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-tab-pane>

			<!-- <el-tab-pane label="商家配置" name="shop">
				<el-table v-loading="tableDataLoading" :data="tableData">
					<el-table-column fixed prop="type" label="编号" align="center" width="80">
					</el-table-column>
					<el-table-column prop="min" label="类型">
					</el-table-column>
					<el-table-column prop="value" label="内容" width="500">
						<template slot-scope="scope">
						  <div style="display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;max-height:80px;">{{scope.row.value}}</div>
						</template>
					</el-table-column>
					<el-table-column prop="createAt" label="创建时间">
					</el-table-column>
					<el-table-column label="操作" prop="id" width="120">
						<template slot-scope="scope">
							<el-button size="mini" type="primary" :disabled="!isAuth('allocationList:update')"
								@click="amend(scope.$index, scope.row)" v-if="scope.row.type!=333">编辑
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-tab-pane> -->
			<!-- <el-tab-pane label="出行配置" name="chuxing">
				<el-table v-loading="tableDataLoading" :data="tableData">
					<el-table-column fixed prop="type" label="编号" align="center" width="80">
					</el-table-column>
					<el-table-column prop="min" label="类型" width="250">
					</el-table-column>
					<el-table-column prop="value" label="内容">
						<template slot-scope="scope">
							<div
								style="display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;max-height:80px;">
								{{scope.row.value}}
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="createAt" label="创建时间" width="180">
					</el-table-column>
					<el-table-column label="操作" prop="id" width="120">
						<template slot-scope="scope">
							<el-button size="mini" type="primary" :disabled="!isAuth('allocationList:update')"
								@click="amend(scope.$index, scope.row)">编辑
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-tab-pane> -->
			<!-- <el-tab-pane label="语音配置" name="video">
				<el-table v-loading="tableDataLoading" :data="tableData">
					<el-table-column fixed prop="type" label="编号" align="center" width="80">
					</el-table-column>
					<el-table-column prop="min" label="类型" width="250">
					</el-table-column>
					<el-table-column prop="value" label="内容">
						<template slot-scope="scope">

							<audio v-if="scope.row.value!=''&&scope.row.value!=null"
								:src="scope.row.value" type="audio/wav" controls="controls"></audio>

							<span v-else>暂无语音</span>
						</template>
					</el-table-column>
					<el-table-column prop="createAt" label="创建时间" width="180">
					</el-table-column>
					<el-table-column label="操作" prop="id" width="120">
						<template slot-scope="scope">
							<el-button size="mini" type="primary" :disabled="!isAuth('allocationList:update')"
								@click="amend(scope.$index, scope.row)">编辑
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-tab-pane> -->
		</el-tabs>
		<!-- 修改弹框 -->
		<el-dialog title="修改" :visible.sync="dialogFormVisible" center>
			<el-form :model="form">
				<el-form-item label="配置类型：" :label-width="formLabelWidth">
					<el-input v-model="form.min" style="width:65%;" readonly></el-input>
				</el-form-item>
				<el-form-item label="内容：" :label-width="formLabelWidth">
					<quill-editor v-if="form.conditionFrom == 'xieyi'" ref="myTextEditor" v-model="form.value"
						:options="quillOption"
						style="padding-bottom: 50px;height: 300px;width: 72%;display: inline-table;margin-bottom: 60px;">
					</quill-editor>
					<div v-else-if="form.conditionFrom == 'image'"
						style=" width:148px;height:148px;border: 1px dashed #c0ccda;border-radius: 6px;text-align: center;line-height: 148px;">
						<el-upload class="avatar-uploader" v-model="form.value"
							:action="uploadUrl" :show-file-list="false"
							:on-success="handleAvatarSuccess">
							<img v-if="form.value" :src="form.value" class="avatar"
								style="border-radius: 6px;width: 140px;height: 140px;" />
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
					</div>
					<div v-else-if="form.conditionFrom == 'yuyin'">
						<el-upload class="upload-demo" v-model="form.value"
							:action="uploadMusicUrl" :show-file-list="false"
							:on-success="handleSuccess" :before-upload="beforeAvatarUpload"
							:on-progress="handlePreview">
							<el-button size="small" type="primary" v-loading="tableDataLoading6">点击上传</el-button>
							<el-input v-model="form.value" style="width:300px;">
							</el-input>
						</el-upload>
					</div>
					<div v-else-if="form.conditionFrom == 'kaiguan'">
						<div>
							<el-radio-group v-model="form.value">
								<el-radio label="是">是</el-radio>
								<el-radio label="否">否</el-radio>
							</el-radio-group>
						</div>
					</div>
					<div v-else-if="form.type == 330">
						<div>
							<el-input v-model="address" @keydown.enter.native="select" style="width:65%;"></el-input>
							<div>
								<div id="container1" style="width:80%;height:500px;margin-top: 10px;"></div>
							</div>
						</div>
					</div>
					<div v-else-if="form.conditionFrom == 'v3_order_form'">
						<template v-if="form.type == 437">
							<!-- 三个数据，数字 -->
							<el-input-number :controls="false" :precision="1" :min="0" :step="1" :value="getSplitValue(0,0)" @change="(v) => form.value = `${v || 0},${getSplitValue(1,0)},${getSplitValue(2,0)}`"/>分钟
							<el-input-number :controls="false" :precision="1" :min="0" :step="1" :value="getSplitValue(1,0)" @change="(v) => form.value = `${getSplitValue(0,0)},${v || 0},${getSplitValue(2,0)}`"/>分钟
							<el-input-number :controls="false" :precision="2" :min="0" :step="1" :value="getSplitValue(2,0)" @change="(v) => form.value = `${getSplitValue(0,0)},${getSplitValue(1,0)},${v}`"/>元
						</template>
						<template v-else-if="form.type == 438">
							<!-- //两个数据，数字 -->
							<el-input-number :controls="false" :precision="1" :min="0" :step="1" :value="getSplitValue(0,0)" @change="(v) => form.value = `${v},${getSplitValue(1,0)}`"/>分钟
							<el-input-number :controls="false" :precision="2" :min="0" :step="1" :value="getSplitValue(1,0)" @change="(v) => form.value = `${getSplitValue(0,0)},${v || 0}`"/>元
						</template>
						<template v-else-if="form.type == 439">
							<!-- //三个数据，1个数字，两个百分比 -->
							<el-input-number :controls="false" :precision="0" :min="0" :step="1"            :value="getSplitValue(0,0)" @change="(v) => form.value = `${v || 0},${getSplitValue(1,0)},${getSplitValue(2,0)}`"/>分钟
							<el-input-number :controls="false" :precision="0" :min="0" :max="100" :step="1" :value="getSplitValue(1,0)" @change="(v) => form.value = `${getSplitValue(0,0)},${v || 0},${getSplitValue(2,0)}`"/>%
							<el-input-number :controls="false" :precision="2" :min="0" :max="100" :step="1" :value="getSplitValue(2,0)" @change="(v) => form.value = `${getSplitValue(0,0)},${getSplitValue(1,0)},${v || 0}`"/>%
						</template>
						<template v-else>
							<!-- 纯数字，最小为0, -->
							<el-input-number :precision="2" :min="0" :step="1" v-model="form.value" style="width:65%;" @change="(v) => form.value = v || 0"></el-input-number>
						</template>
					</div>
					<div v-else-if="form.conditionFrom == 'v3_travel_conf'">
						<template v-if="form.type == 443 || form.type == 444">
							<!-- 两个日期 -->
							<!-- <el-date-picker style="width: 160px;margin-left: 10px;" align="right" type="datetime" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="选择开始时间"/> -->
							<!-- <el-date-picker :value="[getSplitValue(0,'0521'), getSplitValue(1,'0823')]" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd" value-format="MMdd" @changerange="log"/> -->
							<el-date-picker v-model="form.value2" type="daterange" style="width:65%;" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" format="MM-dd" value-format="MMdd" @change="(vs) => form.value = (vs || ['','']).join(',')"/>
						</template>
						<template v-else-if="form.type == 445 || form.type == 446">
							<!-- 两个时间 -->
							<el-time-picker v-model="form.value2" style="width:65%;" format="HH:mm:ss" value-format="HHmmss" is-range range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围" @change="(vs) => form.value = (vs || ['','']).join(',')"/>
						</template>
						<template v-else-if="form.type == 447">
							<!-- 是否 -->
							<el-switch v-model="form.value" active-value="true" inactive-value="false" active-text="动态价格" inactive-text="固定价格"/>
						</template>
						<template v-else-if="form.type == 450">
							<!-- 是否 -->
							<el-switch v-model="form.value" active-value="true" inactive-value="false" active-text="往返" inactive-text="单程"/>
						</template>
						<template v-else>
							<el-input v-model="form.value" style="width:65%;"></el-input>
						</template>
					</div>
					<el-input v-else v-model="form.value" style="width:65%;"></el-input>
					<!-- <el-input v-model="form.value" style="width:65%;"></el-input> -->
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="amendNoticeTo()">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import {
	quillEditor
} from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { serverPaths } from '@/utils/enumData'
import quillConfig from '../mission/quill-config.js'
import {
	provinceAndCityData,
	regionData,
	provinceAndCityDataPlus,
	regionDataPlus,
	CodeToText,
	TextToCode
} from 'element-china-area-data'
var cityOptions = []
var geocoder, map, markersArray = [];
import axios from 'axios';
import {
	jsonp
} from 'vue-jsonp'
export default {
	name: 'news',
	components: {
		quillEditor
	},
	data() {
		let clockRate = (rule, value, callback) => {
			console.log(value);
			if (value && value > 1 || value < 0) {
				callback(new Error('请输入0-1之间的数字'));
			}
		}
		let depositRate = (rule, value, callback) => {
			console.log(value);
			if (value && value > 1 || value < 0) {
				callback(new Error('请输入0-1之间的数字'));
			}
		}
		let proportionalSharing = (rule, value, callback) => {
			console.log(value);
			if (value && value > 1 || value < 0) {
				callback(new Error('请输入0-1之间的数字'));
			}
		}
		return {
			uploadUrl: serverPaths.uploadUrl,
			uploadMusicUrl: serverPaths.uploadMusicUrl,
			openValue: '是',
			closeValue: '否',
			limit: 10,
			page: 0,
			min: '',
			value: '',
			id: '',
			condition: 'xitong',
			activeName: 'first',
			dialogFormVisible: false,
			dialogFormVisible1: false,
			tableDataLoading6: false,
			tableDataLoading: true,
			formLabelWidth: '200px',
			form: {
				id: '',
				min: '',
				value: '',
				value2: '',
				type: '',
			},
			form2: {
				id: '',
				min: '',
				value: '',
				type: '',
			},
			values: [{
				value: 1,
				label: '是'
			},
			{
				value: 2,
				label: '否'
			}
			],
			tableData: [],
			checkBoxData: [], //多选框选择的值
			sec: 0, //语音时长

			// 地图相关
			loadingMap: true,
			BMap: '',
			map: '',
			geoc: '',
			keyword: '',
			showMap: false,
			pointLngLat: '',
			center: {
				lng: 109.45744048529967,
				lat: 36.49771311230842
			},
			longitude: '', //纬度
			latitude: '', //经度
			address: '',
			serverList: [],
			serverValue: "",
			ruleForm: {
				id: "",
				grade: "",
				outstandingAchievement: "",
				clockRate: "",
				durationOnline: "",
				integral: "",
				proportionalSharing: "",
				depositRate: "",
			},
			rules: {
				clockRate: [
					{ trigger: 'change', validator: clockRate },
				], depositRate: [
					{ trigger: 'change', validator: depositRate },
				],
				proportionalSharing: [
					{ trigger: 'change', validator: proportionalSharing },
				],
			}
		}
	},
	methods: {
		log(...d) {
			console.log('log ->',...d);
		},
		getSplitValue(index = 0, defTxt = '', splitTxt = ',') {
			return this.getSplitOtherValue(null,index,defTxt,splitTxt);
		},
		getSplitOtherValue(v, index = 0, defTxt = '', splitTxt = ',') {
			let value = v;
			if(!value) value = this.form.value || '';
			let txts = value.split(splitTxt);
			return txts[index] || defTxt;
		},
		//上传成功
		handleAvatarSuccess(file) {
			this.form.value = file.data
		},
		handleSizeChange(val) {
			this.limit = val;
			this.dataSelect();
		},
		handleCurrentChange(val) {
			this.page = val - 1;
			this.dataSelect();
		},
		handleClick(tab, event) {
			if (tab._props.label == '全局系统配置') {
				this.condition = 'xitong'
				this.dataSelect()
			} else if (tab._props.label == '首页配置') {
				this.condition = 'shouye'
				this.dataSelect()
			} else if (tab._props.label == '微信配置') {
				this.condition = 'weixin'
				this.dataSelect()
			} else if (tab._props.label == '支付宝配置') {
				this.condition = 'zhifubao'
				this.dataSelect()
			} else if (tab._props.label == '短信配置') {
				this.condition = 'duanxin'
				this.dataSelect()
			} else if (tab._props.label == '任务系统配置') {
				this.condition = 'renwu'
				this.dataSelect()
			} else if (tab._props.label == '协议配置') {
				this.condition = 'xieyi'
				this.dataSelect()
			} else if (tab._props.label == 'APP消息推送配置') {
				this.condition = 'push'
				this.dataSelect()
			} else if (tab._props.label == '文件上传配置') {
				this.condition = 'oss'
				this.dataSelect()
			} else if (tab._props.label == '开关配置') {
				this.condition = 'kaiguan'
				this.dataSelect()
			} else if (tab._props.label == '图片配置') {
				this.condition = 'image'
				this.dataSelect()
			} else if (tab._props.label == '出行配置-') {
				this.condition = 'chuxing'
				this.dataSelect()
			} else if (tab._props.label == '语音配置') {
				this.condition = 'yuyin'
				this.dataSelect()
			} else if (tab._props.label == '服务费配置') {
				this.condition = 'fuwufei'
				this.dataSelect()
			} else if (tab._props.label == '客服配置') {
				this.condition = 'kefu'
				this.dataSelect()
			} else if (tab._props.label == '商家配置') {
				this.condition = 'shop'
				this.dataSelect()
			} else if (tab._props.label == '修改与取消服务配置') {
				this.condition = 'v3_order_form'
				this.dataSelect()
			} else if (tab._props.label == '出行配置') {
				this.condition = 'v3_travel_conf'
				this.dataSelect()
			}
		},
		// 修改弹框
		amend(index, rows) {
			this.dialogFormVisible = true;
			this.form.id = rows.id;
			this.form.type = rows.type
			this.form.min = rows.min;
			this.form.value = rows.value;
			this.form.max = rows.max;
			this.form.createAt = rows.createAt;
			this.form.conditionFrom = rows.conditionFrom;
			if (this.form.type == 330) {
				this.address = rows.value
				this.select()
			} else if(this.form.type == 443 || this.form.type == 444 || this.form.type == 445 || this.form.type == 446) {
				this.form.value2 = [ this.getSplitOtherValue(rows.value,0), this.getSplitOtherValue(rows.value,1) ];
			}
		},
		// 修改
		amendNoticeTo() {
			if (this.form.type == 330) {
				this.form.value = this.address
			} else if (this.form.conditionFrom == "xitong" && this.form.type == 433) {
				if (this.form.value) window.localStorage.setItem("ringOrderId", this.form.value);
			} else if (this.form.conditionFrom == "xitong" && this.form.type == 100000) {
				let regRule = new RegExp("^[0-9]*[1-9][0-9]*$");
				if (!regRule.test(this.form.value)) {
					this.form.value = "10";
					this.$message.error('当前值只能输入正整数');
					return;
				}
			} else if(this.form.type == 443) {
				//判断不能为空
				if(!this.form.value || this.form.value == ','){
					this.$message.error('请选择日期');
					return;
				}

			}
			console.log(this.form);
			this.$http({
				url: this.$http.adornUrl('common/update'),
				method: 'post',
				data: this.$http.adornData({
					'id': this.form.id,
					'type': this.form.type,
					'value': this.form.value,
					'min': this.form.min,
					'max': this.form.max,
					'createAt': this.form.createAt,
					'conditionFrom': this.form.conditionFrom
				})
			}).then(({
				data
			}) => {
				if (data && data.code === 0) {
					this.dialogFormVisible = false
					this.$message({
						message: '操作成功',
						type: 'success',
						duration: 1500,
						onClose: () => {
							this.dataSelect()
							if (this.form.type == 330) {
								this.amendNoticeToJw()
							}
						}
					})
				} else {
					this.$message.error(data.msg)
				}
			})
		},
		// 修改经纬度
		amendNoticeToJw() {
			var values = this.latitude + ',' + this.longitude
			this.$http({
				url: this.$http.adornUrl('common/update'),
				method: 'post',
				data: this.$http.adornData({
					'id': 333,
					'type': 333,
					'value': values,
					'min': '商家经纬度',
					'max': 'null',
					'createAt': this.form.createAt,
					'conditionFrom': 'shop'
				})
			}).then(({
				data
			}) => {
				this.dataSelect()
			})
		},
		// 修改首页
		amendWhether(index, rows) {
			this.dialogFormVisible1 = true;
			this.form2.id = rows.id;
			this.form2.type = rows.type
			this.form2.min = rows.min;
			this.form2.value = rows.value;
			this.form2.max = rows.max;
			this.form2.createAt = rows.createAt;
			this.form2.conditionFrom = rows.conditionFrom

		},
		WhetherNoticeTo() {
			this.$http({
				url: this.$http.adornUrl('common/update'),
				method: 'post',
				data: this.$http.adornData({
					'id': this.form2.id,
					'type': this.form2.type,
					'value': this.form2.value,
					'min': this.form2.min,
					'max': this.form2.max,
					'createAt': this.form2.createAt,
					'conditionFrom': this.form2.conditionFrom
				})
			}).then(({
				data
			}) => {
				if (data && data.code === 0) {
					this.dialogFormVisible1 = false
					this.$message({
						message: '操作成功',
						type: 'success',
						duration: 1500,
						onClose: () => {
							this.dataSelect()
						}
					})
				} else {
					this.$message.error(data.msg)
				}
			})
		},
		// 获取数据列表
		dataSelect() {
			this.tableDataLoading = true
			console.log(this.condition, "12312hhh");
			this.$http({
				url: this.$http.adornUrl(`common/type/condition/${this.condition}`),
				method: 'get',
				params: this.$http.adornParams({})
			}).then(({
				data
			}) => {
				if (data && data.code === 0) {
					this.tableDataLoading = false
					let returnData = data.data;
					//将【开关配置】中id为394"是否开启打车费扣提成"隐藏
					if (this.condition == "kaiguan") {
						returnData.splice(data.data.findIndex((item) => item.id == 394), 1);
						this.tableData = returnData;
						return;
					} if (this.condition == 'xitong') {
						let hasItemStaus = returnData.some((item) => item.id == 433);
						if (hasItemStaus) {
							let ringOrderArr = returnData.filter((item) => item.id == 433);
							if (ringOrderArr) window.localStorage.setItem("ringOrderId", ringOrderArr[0].value);
						}
						console.log(returnData);
					}
					this.tableData = returnData
				}
			})
		},
		handleSuccess(file) {
			console.log(file)
			this.form.value = file.data.url;
			this.sec = file.data.sec
			console.log(file.data, this.form.value)
			this.tableDataLoading6 = false
		},
		handlePreview(file) {
			this.tableDataLoading6 = true
		},
		// 验证只能上传音频
		beforeAvatarUpload(file) {
			var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
			const extension = testmsg === 'mp3'
			if (!extension) {
				this.$message({
					message: "上传文件只能是mp3格式！",
					type: 'error'
				})
			}
			return extension;
		},
		//定位获得当前位置信息
		getMyLocation() {
			var geolocation = new qq.maps.Geolocation("WYJBZ-BOVK2-QZSU2-CJHY2-7BFHE-JEFNP", "来点小收入");
			geolocation.getIpLocation(this.showPosition, this.showErr);
			// geolocation.getLocation(this.showPosition, this.showErr);//或者用getLocation精确度比较高
		},
		showPosition(position) {
			console.log(position);
			// this.latitude = position.lat;
			// this.longitude = position.lng;
			// this.city = position.city;
			this.setMap();
		},
		showErr(e) {
			console.log("定位失败", e);
			this.getMyLocation(); //定位失败再请求定位，测试使用
		},
		//位置信息在地图上展示
		setMap() {
			//步骤：定义map变量 调用 qq.maps.Map() 构造函数   获取地图显示容器
			//设置地图中心点
			var myLatlng = new qq.maps.LatLng(this.latitude, this.longitude);
			//定义工厂模式函数
			var myOptions = {
				zoom: 13, //设置地图缩放级别
				center: myLatlng, //设置中心点样式
				mapTypeId: qq.maps.MapTypeId.ROADMAP //设置地图样式详情参见MapType
			}
			// //获取dom元素添加地图信息
			var map = new qq.maps.Map(document.getElementById("container1"), myOptions);
			//给地图添加点击事件

			//给定位的位置添加图片标注
			var marker = new qq.maps.Marker({
				position: myLatlng,
				map: map
			});
			// `````````````
			var that = this;
			if (that.longitude == '') {
				var center = new qq.maps.LatLng(34.34281541842994, 108.93970884382725);
			} else {
				var center = new qq.maps.LatLng(that.latitude, that.longitude);
			}

			var map = new qq.maps.Map(document.getElementById("container1"), {
				center: center,
				zoom: 13
			});
			var marker = new qq.maps.Marker({
				position: center,
				map: map
			});
			var latlngBounds = new qq.maps.LatLngBounds();
			qq.maps.event.addListener(map, "click", function (event) {
				console.log(event, qq.maps);
				that.longitude = event.latLng.getLng(); // 经度
				that.latitude = event.latLng.getLat(); // 纬度
				jsonp('https://apis.map.qq.com/ws/geocoder/v1/?location=' + event.latLng.getLat() + ',' + event.latLng
					.getLng() + '&key=WYJBZ-BOVK2-QZSU2-CJHY2-7BFHE-JEFNP&get_poi=1&output=jsonp', {
					myCustomUrlParam: 'veryNice'
				}).then(response => {
					console.log('response', response.result.address, response.result.formatted_addresses.recommend)
					that.address = response.result.address + '(' + response.result.formatted_addresses.recommend + ')'

				}).catch(error => {
					// handle error
				}).then(() => {
					// always executed
				});
				if (markersArray) {
					for (let i in markersArray) {
						markersArray[i].setMap(null);
					}
				}
				var marker = new qq.maps.Marker({
					map: map,
					position: event.latLng
				});
				markersArray.push(marker);

			});
			geocoder = new qq.maps.Geocoder({
				complete: function (result) {
					console.log(result);
					that.longitude = result.detail.location.lng;
					that.latitude = result.detail.location.lat;
					map.setCenter(result.detail.location);
					var marker = new qq.maps.Marker({
						map: map,
						position: result.detail.location
					});
					markersArray.push(marker);
				}
			});
		},
		// 地图定位
		select() {
			console.log(this.address)
			// this.address = this.province+ this.city+this.district+this.address
			var addr = this.address
			let that = this
			jsonp('https://apis.map.qq.com/ws/geocoder/v1/?address==' + addr +
				'&key=WYJBZ-BOVK2-QZSU2-CJHY2-7BFHE-JEFNP&get_poi=1&output=jsonp', {
				myCustomUrlParam: 'veryNice'
			}).then(response => {
				// handle success
				console.log('response', response)
				that.longitude = response.result.location.lng; // 经度
				that.latitude = response.result.location.lat; // 纬度
				// that.address = response.result.title
				that.setMap()
			}).catch(error => {
				// handle error
			}).then(() => {
				// always executed
			});
		},
	},
	mounted() {
		this.dataSelect()
	}
}
</script>

<style scoped="scoped">
.eit {
	height: 120px;
}
</style>
