<template>
	<div class="app-container calendar-list-container" v-loading.body="showLoadingBody">
		<div class="filter-container" ref="filter-container">
			<el-button
				class="filter-item"
				style="margin-left: 10px;"
				@click="handleCreate"
				type="primary"
				icon="edit"
			>添加</el-button>
		</div>
		<el-table :key="tableKey" :data="list" border fit highlight-current-row style="width: 600px">
			<el-table-column type="index" align="center" label="序号" width="98"></el-table-column>
			<el-table-column width="250" align="center" label="标题">
				<template slot-scope="scope">
					<span>{{scope.row.title}}</span>
				</template>
			</el-table-column>
			<el-table-column width="100" align="center" label="标识">
				<template slot-scope="scope">
					<span>{{scope.row.type}}</span>
				</template>
			</el-table-column>
			<el-table-column align="center" width="150" label="操作">
				<template slot-scope="scope">
					<el-button
						size="small"
						class="el-button el-button--text el-button--small"
						@click="handleUpdate(scope.row)"
					>编辑</el-button>
					<el-button
						class="el-button el-button--text el-button--small"
						style="color: red;"
						v-if="scope.row.type!=88"
						size="small"
						@click="deleteHandler(scope.row)"
					>删除</el-button>
					<!--<el-button size="small" type="danger" @click="deleteHandler(scope.row)">删除-->
					<!--</el-button>-->
				</template>
			</el-table-column>
		</el-table>
		<div v-show="!listLoading" class="pagination-container">
			<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page.sync="listQuery.page"
				:page-sizes="[10,20,30, 50]"
				:page-size="listQuery.limit"
				layout="total, sizes, prev, pager, next, jumper"
				:total="total"
			></el-pagination>
		</div>
		<!-- banner modal弹窗 -->
		<el-dialog :title="modalTitle" :visible.sync="dialogVisible" :before-close="handleDialogClose">
			<el-form :model="dialogFrom" :rules="rules" ref="dialogFrom" label-width="130px">
				<el-form-item label="标题" prop="title">
					<el-input v-model="dialogFrom.title" placeholder="请输入标题"></el-input>
				</el-form-item>
				<el-form-item label="标识" prop="type">
					<el-input type="number" v-model.number="dialogFrom.type" placeholder="1,2,3……"></el-input>
				</el-form-item>
				<el-form-item label="参数" prop="params" v-show="dialogFrom.type != '88'">
					<el-input v-model="dialogFrom.params" placeholder="请输入标题"></el-input>
				</el-form-item>
				<el-row v-if="dialogFrom.type==88">
					<el-col :span="12">
						<el-form-item label="最低提现金额" prop="minAmount">
							<el-input v-model="dialogFrom.minAmount" placeholder="请输入最低提现金额"></el-input>
							<span style="color:#bfcbd9;">钱包余额，最低提现额度，达到此金额后才能提现</span>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row v-if="dialogFrom.type==88">
					<el-col :span="12">
						<el-form-item label="提现手续费" prop="proceduReates">
							<el-input v-model="dialogFrom.proceduReates" placeholder="请输入提现手续费"></el-input>
							<span style="color:#bfcbd9;">提现收取的手续费</span>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row v-if="dialogFrom.type==88">
					<el-col :span="12">
						<el-form-item label="月额度" prop="amountOfMonth">
							<el-input v-model="dialogFrom.amountOfMonth" placeholder="请输入月额度"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row v-if="dialogFrom.type==88">
					<el-col :span="12">
						<el-form-item label="日额度" prop="amountOfDay">
							<el-input v-model="dialogFrom.amountOfDay" placeholder="请输入日额度"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row v-if="dialogFrom.type==88">
					<el-col :span="12">
						<el-form-item label="最多提现次数(月)" prop="maxNumberOfMonth">
							<el-input v-model="dialogFrom.maxNumberOfMonth" placeholder="请输入最多提现次数（月）"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row v-if="dialogFrom.type==88">
					<el-col :span="12">
						<el-form-item label="最多提现次数(日)" prop="maxNumberOfDay">
							<el-input v-model="dialogFrom.maxNumberOfDay" placeholder="请输入最多提现次数（日）"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row v-if="dialogFrom.type==88">
					<el-col :span="12">
						<el-form-item label="提现方式" prop="withdrawWay">
							<el-radio v-model="dialogFrom.withdrawWay" label="3">线上</el-radio>
							<el-radio v-model="dialogFrom.withdrawWay" label="1">线下自动</el-radio>
							<el-radio v-model="dialogFrom.withdrawWay" label="2">线下手动</el-radio>
						</el-form-item>
					</el-col>
				</el-row>

				<el-tabs v-model="activeName2" type="card">
					<el-tab-pane label="详情" name="first">
						<!--<Editor  v-if="activeName2=='first'" @input="handelContentIncrease" :value="form.content" :myQuillEditor="'myQuillEditorContent'" :activeName2="activeName2"></Editor>-->
						<div class="editor-container" v-if="activeName2=='first'">
							<UE
								:editorId="activeName2"
								:defaultMsg="dialogFrom.value"
								:config="config"
								ref="ue"
								@ready="editorReadyEvent"
							></UE>
						</div>
					</el-tab-pane>
				</el-tabs>
				<!--<el-form-item label="详情">-->
				<!--<Editor @input="handelIncrease" :value="dialogFrom.value" :myQuillEditor="'myQuillEditorContent'"></Editor>-->
				<!--</el-form-item>-->
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="cancelHandel">取 消</el-button>
				<el-button v-if="modalTitle=='创建'" type="primary" @click="create('dialogFrom')">确 定</el-button>
				<el-button v-else type="primary" @click="update('dialogFrom')">确 定</el-button>
			</div>
		</el-dialog>

		<!--多图上传-->
		<!--<el-upload-->
		<!--:multiple="multiple"-->
		<!--action="${pageContext.request.contextPath}/lookup/editEvidence/123"-->
		<!--list-type="picture-card"-->
		<!--:auto-upload="false"-->
		<!--:http-request="uploadFile"-->
		<!--ref="upload"-->
		<!--&gt;-->
		<!--<i class="el-icon-plus"></i>-->
		<!--</el-upload>-->
		<!--<el-button @click="subPicForm">提交上传</el-button>-->
	</div>
</template>
<style>
.el-table__header {
	width: 100% !important;
}
</style>
<script>
import 'static/css/uploadImg.css' // 引入图片上传组件对话框
//  import Editor from "../modal/editorTool";//富文本
import UE from '../modal/Ueditor' //百度ue富文本
import { formatDate } from 'utils/dateFormattor'

import {
	toEast8Date,
	deepCopyDate,
	newEast8Date,
	convertDate2Str
} from 'utils/dateUtils'

import {
	page,
	addGeneral,
	editGeneral,
	delGeneral,
	uploadFiles
} from 'api/base_info/general'

import rsCode from '../../utils/rsCode'

import { mapGetters } from 'vuex'
import { getToken } from '../../utils/auth'

import Element1 from '../admin/menu/components/element'
import ElRow from 'element-ui/packages/row/src/row'
import ElCol from 'element-ui/packages/col/src/col'

export default {
	name: 'tourManage',
	components: {
		ElCol,
		ElRow,
		Element1,
		UE
		//      Editor
	},
	data() {
		return {
			multiple: true,
			formDate: '',
			listQuery: {
				page: 1,
				limit: 20
			},
			config: {
				initialFrameWidth: null,
				initialFrameHeight: 350
			},
			tableKey: 0,
			activeName2: '',
			modalTitle: '创建',
			BASE_API: process.env.BASE_API,
			dialogVisible: false, //添加、编辑弹框
			showLoadingBody: false,
			dialogFrom: {
				title: '',
				type: undefined,
				value: '',
				minAmount: 100,
				proceduReates: 0.001,
				amountOfMonth: '',
				amountOfDay: '',
				maxNumberOfMonth: '',
				maxNumberOfDay: '',
				withdrawWay: 1,
				params: ''
			},
			rules: {
				title: {
					type: 'string',
					required: true,
					message: '请输入标题',
					trigger: 'blur'
				},
				type: {
					required: true,
					message: '请输入数字标识'
				},
				proceduReates: {
					required: true,
					message: '请输入提现手续费'
				},
				minAmount: {
					required: true,
					message: '请输入最低提现金额'
				},
				amountOfMonth: {
					required: true,
					message: '请输入月额度'
				},
				amountOfDay: {
					required: true,
					message: '请输入日额度'
				},
				maxNumberOfMonth: {
					required: true,
					message: '请输入最多提现次数（月）'
				},
				maxNumberOfDay: {
					required: true,
					message: '请输入最多提现次数（日）'
				},
				withdrawWay: {
					required: true,
					message: '请选择提现方式'
				}
			},
			list: null,
			total: null,
			listLoading: true,
			inline: true
		}
	},
	created() {
		this.getList()
	},
	computed: {
		...mapGetters(['elements', 'belong2Type'])
	},
	methods: {
		/**
		 * 添加
		 * */
		handleCreate() {
			this.cleanDialogFrom()
			this.modalTitle = '创建'
			this.activeName2 = 'first'
			this.dialogVisible = true
		},
		/**
		 * 操作-删除
		 * */
		deleteHandler(row) {
			this.$confirm('确定删除吗?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				delGeneral(row.id).then(response => {
					if (response.status === 200) {
						this.$notify({
							title: '成功',
							message: '删除成功',
							type: 'success',
							duration: 2000
						})
						this.getList()
					} else {
						this.$notify({
							title: '删除失败',
							message: rsCode.msg[response.code]
								? rsCode.msg[response.code]
								: '操作失败！',
							type: 'error',
							duration: 2000
						})
					}
				})
			})
		},
		/**
		 * 点击 X 关闭对话框的回调
		 **/
		handleDialogClose() {
			this.activeName2 = ''
			this.dialogVisible = false
		},
		/**
		 * 操作-编辑
		 * */
		handleUpdate(row) {
			this.modalTitle = '编辑'
			this.dialogVisible = true
      this.cleanDialogFrom()
			typeof row.params == 'object' ? delete row.params : row
			this.dialogFrom = row
			this.activeName2 = 'first'
		},
		/**
		 * 弹框-取消
		 * */
		cancelHandel() {
			this.cleanDialogFrom()
			this.dialogVisible = false
			this.activeName2 = ''
		},
		/**
		 * 新建、编辑清空表单
		 * */
		cleanDialogFrom() {
			this.dialogFrom = {
				title: '',
				type: undefined,
				value: '',
				minAmount: 100,
				proceduReates: 0.001,
				amountOfMonth: '',
				amountOfDay: '',
				maxNumberOfMonth: '',
				maxNumberOfDay: '',
				withdrawWay: 1,
				params: ''
			}
			this.activeName2 = ''
		},
		handleSizeChange(val) {
			this.listQuery.limit = val
			this.getList()
		},
		handleCurrentChange(val) {
			this.listQuery.page = val
			this.getList()
		},
		/**
		 * 获取通用设置列表数据
		 * */
		getList() {
			this.listLoading = true
			page(this.listQuery).then(response => {
				let totalCountRs = undefined
				let listRs = undefined
				if (
					!this.$utils.isEmpty(response.data.rows) &&
					this.$utils.isInteger(response.data.total)
				) {
					response.data.rows.map(function(item) {
						item.visible2 = false
						if (item.type == 88) {
							//提现规则
							item.params = JSON.parse(item.params)
							item.minAmount = item.params.minAmount
							item.proceduReates = item.params.proceduReates
							item.amountOfMonth = item.params.amountOfMonth
							item.amountOfDay = item.params.amountOfDay
							item.maxNumberOfMonth = item.params.maxNumberOfMonth
							item.maxNumberOfDay = item.params.maxNumberOfDay
							item.withdrawWay = item.params.withdrawWay
						}
					})
					listRs = response.data.rows
					totalCountRs = response.data.total
				}
				//          "{"minAmount":"11","proceduReates":"0.02"}"
				this.listLoading = false
				this.list = listRs
				this.total = totalCountRs
			})
		},
		/**
		 * 创建
		 * */
		create(formName) {
			this.$refs.dialogFrom.validate(valid => {
				if (valid) {
					let params = {
						title: this.dialogFrom.title,
						type: this.dialogFrom.type,
						value: this.dialogFrom.value,
						params: this.dialogFrom.params
					}
					if (this.dialogFrom.type == 88) {
						//提现规则
						let p = {
							minAmount: this.dialogFrom.minAmount,
							proceduReates: this.dialogFrom.proceduReates,
							amountOfMonth: this.dialogFrom.amountOfMonth,
							amountOfDay: this.dialogFrom.amountOfDay,
							maxNumberOfMonth: this.dialogFrom.maxNumberOfMonth,
							maxNumberOfDay: this.dialogFrom.maxNumberOfDay,
							withdrawWay: this.dialogFrom.withdrawWay
						}
						params.params = JSON.stringify(p)
					} else {
						params.params = this.dialogFrom.params
					}
					addGeneral(params).then(response => {
						if (response.status === 200) {
							this.cleanDialogFrom()
							this.dialogVisible = false
							this.$notify({
								title: '成功',
								message: '添加成功',
								type: 'success',
								duration: 2000
							})
							this.getList()
						} else {
							this.$notify({
								title: '添加失败',
								message: rsCode.msg[response.code]
									? rsCode.msg[response.code]
									: '操作失败！',
								type: 'error',
								duration: 2000
							})
						}
					})
				} else {
					return false
				}
			})
		},
		/**
		 * 编辑-更新
		 * */
		update(formName) {
			this.$refs.dialogFrom.validate(valid => {
				if (valid) {

					let params = {
						id: this.dialogFrom.id,
						title: this.dialogFrom.title,
						type: this.dialogFrom.type,
						value: this.dialogFrom.value,
						params: this.dialogVisible.params
					}
					if (this.dialogFrom.type == 88) {
						//提现规则
						let p = {
							minAmount: this.dialogFrom.minAmount,
							proceduReates: this.dialogFrom.proceduReates,
							amountOfMonth: this.dialogFrom.amountOfMonth,
							amountOfDay: this.dialogFrom.amountOfDay,
							maxNumberOfMonth: this.dialogFrom.maxNumberOfMonth,
							maxNumberOfDay: this.dialogFrom.maxNumberOfDay,
							withdrawWay: this.dialogFrom.withdrawWay
						}
            params.params = JSON.stringify(p)
					} else {
						params.params = this.dialogFrom.params
          }


					editGeneral(params).then(response => {
						if (response.status === 200) {
							this.cleanDialogFrom()
							this.dialogVisible = false
							this.$notify({
								title: '成功',
								message: '编辑成功',
								type: 'success',
								duration: 2000
							})
							this.getList()
						} else {
							this.$notify({
								title: '编辑失败',
								message: rsCode.msg[response.code]
									? rsCode.msg[response.code]
									: '操作失败！',
								type: 'error',
								duration: 2000
							})
						}
					})
				} else {
					return false
				}
			})
		},
		/**
		 * 富文本  营地详情
		 * */
		editorReadyEvent(instance) {
			let t = this
			instance.addListener('contentChange', () => {
				if (t.activeName2 == 'first') {
					t.dialogFrom.value = instance.getContent()
				}
			})
		},
		uploadFile(file) {
			this.formDate.append('files', file.file)
		},
		subPicForm() {
			this.formDate = new FormData()
			this.$refs.upload.submit()
			this.formDate.append('WS_CODE', '12133')
			let config = {
				headers: {
					'Content-Type': 'multipart/form-data'
				}
			}
			uploadFiles(this.formDate)
				.then(res => {
				})
				.catch(res => {
				})
		}
	}
}
</script>
<style>
.v-modal {
	z-index: 1000 !important;
}
.el-dialog__wrapper {
	z-index: 1008 !important;
}
</style>
