<template>
	<div class="ValidationTemplate">
		<div class="ValidationTemplate1">
			<div class="ValidationTemplate1-L">
				<el-button type="primary" icon="el-icon-plus" @click="Newtemp">新增模板</el-button>
			</div>
			<div class="ValidationTemplate1-R">
				<div class="ValidationTemplate1-Rtx">
					搜索：
				</div>
				<el-input v-model="pages.T_name" placeholder="请输入模板名称" @keyup.enter.native="search" clearable>
				</el-input>
			</div>
		</div>
		<div class="ValidationTemplate2">
			<el-table :data="tableData" border size="small">
				<el-table-column label="模板名称" width="180">
					<template slot-scope="scope">
						<span>{{ scope.row.T_name }}</span>
					</template>
				</el-table-column>
				<el-table-column label="模板排序" width="180">
					<template slot-scope="scope">
						{{ scope.row.T_sort }}
					</template>
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<div style="display: flex;">
							<el-button size="small" @click="handlelabel(scope.row)">标签</el-button>
							<el-button slot="reference" size="small" @click="handleEdit(scope.row)">编辑
							</el-button>
							<el-button slot="reference" size="small" @click="handleDelete(scope.row)">删除
							</el-button>
						</div>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="ValidationTemplate3">
			<el-pagination @current-change="handleCurrentChange" :current-page="pages.page" :page-size="pages.page_z"
				layout="total, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</div>
		<el-drawer :title="tit" :visible.sync="dialog1" direction="rtl" ref="drawer">
			<div class="demo-drawers">
				<el-form :model="form" :rules="rules" ref="ruleForm">
					<el-form-item label="模板名称" :label-width="LabelWidth" prop="T_name">
						<el-input v-model="form.T_name" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="模板序号" :label-width="LabelWidth" prop="T_sort">
						<el-input v-model="form.T_sort" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item :label-width="LabelWidth">
						<el-button type="primary" @click="submitForm('ruleForm')">
							确 定
						</el-button>
						<el-button @click="dialog1=false">取 消</el-button>
					</el-form-item>
				</el-form>
			</div>
		</el-drawer>
		<el-drawer title="标签列表" :visible.sync="Drawer" direction="rtl" ref="drawer" size="90%">
			<div class="demo-drawers">
				<el-button type="primary" icon="el-icon-plus" @click="NewinnerDrawer">添加标签</el-button>
				<div style="margin-top: 10px;">
					<el-table :data="tableData1" border size="mini">
						<el-table-column label="标签名称" width="300" :show-overflow-tooltip="true">
							<template slot-scope="scope">
								<span>{{ scope.row.T_name }}</span>
							</template>
						</el-table-column>
						<el-table-column label="数据类型" width="80" :show-overflow-tooltip="true">
							<template slot-scope="scope">
								<span>{{ scope.row.T_source }}</span>
							</template>
						</el-table-column>
						<el-table-column label="标签" width="150" :show-overflow-tooltip="true">
							<template slot-scope="scope">
								<span>{{ scope.row.T_field }}</span>
							</template>
						</el-table-column>
						<el-table-column label="排序" width="80" :show-overflow-tooltip="true">
							<template slot-scope="scope">
								<span>{{ scope.row.T_sort }}</span>
							</template>
						</el-table-column>
						<el-table-column label="操作">
							<template slot-scope="scope">
								<el-dropdown @command="commands($event,scope.row)">
									<div class="el-dropdown-link dropdown-links" style="">
										<el-button type="primary" plain size="mini">更多操作</el-button>
									</div>
									<el-dropdown-menu slot="dropdown">
										<el-dropdown-item command="a">编辑</el-dropdown-item>
										<el-dropdown-item command="b">时间流程</el-dropdown-item>
										<el-dropdown-item command="c">删除</el-dropdown-item>
									</el-dropdown-menu>
								</el-dropdown>
							</template>
						</el-table-column>
					</el-table>
				</div>
				<div style="margin-top: 10px;">
					<el-pagination @current-change="handleCurrentChange111" :current-page="pages2.page"
						:page-size="pages2.page_z" layout="total, prev, pager, next, jumper" :total="total1">
					</el-pagination>
				</div>
				<el-drawer title="时间流程" :append-to-body="true" :visible.sync="innerDrawer1" size="70%">
					<div class="demo-drawers">
						<el-button type="primary" icon="el-icon-plus" @click="TimeNew">添加流程</el-button>
						<div style="padding-top: 20px;">
							<el-table :data="tableData2" border size="small">
								<el-table-column label="排序">
									<template slot-scope="scope">
										<span>{{ scope.row.T_sort }}</span>
									</template>
								</el-table-column>
								<el-table-column label="步骤名称">
									<template slot-scope="scope">
										<span>{{ scope.row.T_step_name }}</span>
									</template>
								</el-table-column>
								<el-table-column label="对应标签">
									<template slot-scope="scope">
										<span>{{ scope.row.T_tag }}</span>
									</template>
								</el-table-column>
								<el-table-column label="最少时间(s)">
									<template slot-scope="scope">
										<span>{{ scope.row.T_min_time }}</span>
									</template>
								</el-table-column>
								<el-table-column label="最多时间(s)">
									<template slot-scope="scope">
										<span>{{ scope.row.T_max_time }}</span>
									</template>
								</el-table-column>
								<el-table-column label="操作">
									<template slot-scope="scope">
										<div style="display: flex;">
											<el-button slot="reference" size="small" @click="TimeEdit(scope.row)">编辑
											</el-button>
											<el-button slot="reference" size="small"
												@click="TimeDelete(scope.row)">删除
											</el-button>
										</div>
									</template>
								</el-table-column>
							</el-table>
						</div>
						<div style="margin-top: 10px;">
							<el-pagination @current-change="handleCurrentChange12" :current-page="pages1.page"
								:page-size="pages1.page_z" layout="total, prev, pager, next, jumper" :total="total2">
							</el-pagination>
						</div>
						<el-drawer :title="titles1" :append-to-body="true" :visible.sync="innerDrawer3">
							<!-- 时间流程按钮后的编辑 -->
							<div style="padding: 20px;">
								<el-form :model="pages3" :rules="rules3" ref="ruleForm3">
									<el-form-item label="排序" label-width="80px" prop="T_sort">
										<el-input v-model="pages3.T_sort" oninput="value=value.replace(/[^\d]/g,'')" autocomplete="off"></el-input>
									</el-form-item>
									<el-form-item label="步骤名称" label-width="80px" prop="T_step_name">
										<el-input v-model="pages3.T_step_name" autocomplete="off"></el-input>
									</el-form-item>
									<el-form-item label="对映标签" label-width="80px" prop="T_tag">
										<el-input v-model="pages3.T_tag" autocomplete="off"></el-input>
									</el-form-item>
									<el-form-item label="最小时间" label-width="80px" prop="T_min_time">
										<el-input v-model="pages3.T_min_time" oninput="value=value.replace(/[^\d]/g,'')" autocomplete="off"></el-input>
									</el-form-item>
									<el-form-item label="最大时间" label-width="80px" prop="T_max_time">
										<el-input v-model="pages3.T_max_time" oninput="value=value.replace(/[^\d]/g,'')" autocomplete="off"></el-input>
									</el-form-item>
									<el-form-item label="描述" label-width="80px" prop="T_text">
										<el-input type="textarea" v-model="pages3.T_text"></el-input>
									</el-form-item>
									<el-form-item label-width="80px">
										<el-button type="primary"   @click="submitForm3('ruleForm3')">
											确 定
										</el-button>
										<el-button @click="innerDrawer3=false">取 消</el-button>
									</el-form-item>
								</el-form>
							</div>
						</el-drawer>
					</div>
				</el-drawer>
				<el-drawer :title="titles" :append-to-body="true" :visible.sync="innerDrawer2">
					<!-- 时间流程按钮后的编辑 -->
					<div style="padding: 20px;">
						<el-form :model="form1" :rules="rules1" ref="ruleForm1">
							<el-form-item label="数据类型" label-width="80px" prop="T_label">
								<el-select v-model="form1.T_label" placeholder="请选择数据类型">
									<el-option label="文本" value="1"></el-option>
									<el-option label="数值" value="2"></el-option>
									<el-option label="设备多选" value="3"></el-option>
									<el-option label="设备单选" value="4"></el-option>
									<el-option label="当期时间（2022年01月19日）" value="7"></el-option>
									<el-option label="当期时间（开始与结束时间）" value="9"></el-option>
									<el-option label="图片" value="10"></el-option>
									<el-option label="CAD" value="11"></el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="来源" label-width="80px" prop="T_source">
								<el-select v-model="form1.T_source" placeholder="请选择来源">
									<el-option label="所有" value="0"></el-option>
									<el-option label="方案" value="1"></el-option>
									<el-option label="报告" value="2"></el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="标签名称" label-width="80px" prop="T_name">
								<el-input v-model="form1.T_name" autocomplete="off"></el-input>
							</el-form-item>
							<el-form-item label="标签" label-width="80px" prop="T_field">
								<el-input v-model="form1.T_field" autocomplete="off"></el-input>
							</el-form-item>
							<el-form-item label="排序" label-width="80px" prop="T_sort">
								<el-input v-model="form1.T_sort" autocomplete="off"></el-input>
							</el-form-item>
							<el-form-item label="上传" label-width="80px" prop="T_text">
								<flies @pdfvalue="fliValue"></flies>
								<div style="margin-top: 5px;">
									<div v-if="form1.T_text!=''" style="height: 20px;color: #409EFF;display: flex;align-items: center;">
										<i class="el-icon-circle-check"></i><span style="font-size: 12px;padding-left: 1px;">已经上传文件，点击虚线框内可更换</span>
									</div>
									<div v-else style="height: 20px;color: #C0C4CC;display: flex;align-items: center;">
										<i class="el-icon-circle-close"></i><span style="font-size: 12px;padding-left: 1px;">还未上传文件，点击虚线框内可上传</span>
									</div>
								</div>
							</el-form-item>
							<el-form-item label-width="80px">
								<el-button type="primary"  @click="submitForm1('ruleForm1')">
									确 定
								</el-button>
								<el-button @click="innerDrawer2=false">取 消</el-button>
							</el-form-item>
						</el-form>
					</div>
				</el-drawer>
			</div>
		</el-drawer>
	</div>
</template>

<script>
	import {
		TempGet,
		TempAdd,
		TempUp,TempDel,Map_List,Map_Add,Map_Up,Map_Del,Time_List,Time_Add,Time_Up,Time_Del
	} from '@/api/ValidationTemplate'
	import flies from "@/components/files.vue"
	export default {
		name: 'ValidationTemplate',
		components: {
			flies
		},
		data() {
			return {
				LabelWidth: "80px",
				form: { //新增编辑的提交参数
					T_name: '',
					T_sort: null
				},
				rules: {
					T_name: [{
						required: true,
						message: '请输入模板名称',
						trigger: 'blur'
					}, ],
					T_sort: [{
						required: true,
						message: '请输入模板序号',
						trigger: 'blur'
					}],
				},
				form1: { //新增编辑的提交参数
					T_source: '',//来源 0-所有 1-方案 2-报告
					T_label: '',//数据类型
					T_name: '',//标签名称
					T_field: '',//标签
					T_text: '',//描述图片路径
					T_sort: '',//排序
				},
				rules1: {
					T_source: [{
						required: true,
						message: '请选择来源',
						trigger: 'blur'
					}, ],
					T_label: [{
						required: true,
						message: '请选择数据类型',
						trigger: 'blur'
					}],
					T_name: [{
						required: true,
						message: '请输入标签名称',
						trigger: 'blur'
					}, ],
					T_field: [{
						required: true,
						message: '请输入标签',
						trigger: 'blur'
					}],
					T_text: [{
						required: true,
						message: '请上传资源文件',
						trigger: 'blur'
					}, ],
					T_sort: [{
						required: true,
						message: '请输入排序',
						trigger: 'blur'
					}],
				},
				
				TempNum:0,//验证是点击新增还是点击的编辑
				titles: '',
				titles1: '',
				Drawer: false, //标签
				dialog1: false, //新增/编辑
				tit: '新增模板',
				innerDrawer1: false, //时间流程
				innerDrawer2: false, //时间流程界面的编辑新增
				innerDrawer3: false, //时间流程新增

				total: 0,
				total1: 0,
				total2: 0,
				pages: {
					page: 1,
					page_z: 10,
					T_name: ''
				},
				pages2: {
					page: 1,
					page_z: 10,
					T_VerifyTemplate_id: ''
				},
				pages1: {
					page: 1,
					page_z:10,
					T_VerifyTemplateMap_id: ''
				},
				pages3: {
					T_tag: '',
					T_step_name: '',
					T_min_time: '',
					T_max_time: '',
					T_text: '',
					T_sort: '',
				},
				rules3: {
					T_step_name: [{
						required: true,
						message: '请输入步骤名称',
						trigger: 'blur'
					}, ],
					T_tag: [{
						required: true,
						message: '请输入对应标签',
						trigger: 'blur'
					}, ],
					T_min_time: [{
						required: true,
						message: '请输入最小时间 单位s',
						trigger: 'blur'
					}],
					T_max_time: [{
						required: true,
						message: '请输入最大时间 单位s',
						trigger: 'blur'
					}, ],
					T_text: [{
						required: true,
						message: '请输入描述',
						trigger: 'blur'
					}],
					T_sort: [{
						required: true,
						message: '请输入排序',
						trigger: 'blur'
					}, ],
				},
				tableData: [],
				tableData1: [],
				tableData2: [],
			}
		},
		mounted() {
			this.GetTempGetApi()
		},
		methods: {
			TimeDelete(e) {
				this.$confirm('此操作将永久删除操作, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
					center: true
				}).then(() => {
					Time_Del({T_id: e.T_id}).then(res=>{
						if(res.data.Code==200){
							this.$message.success('删除成功!')
							this.pages1.page = 1
							this.GetTime_ListApi()
						}
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			TimeEdit(e) {
				if(this.$refs.ruleForm3!=undefined){
					this.$refs.ruleForm3.clearValidate()
				}
				console.log('编辑',e)
				this.innerDrawer3 = true
				this.titles1 = '编辑时间流程'
				this.TempNum = 2
				this.pages3.T_id = e.T_id
				this.pages3.T_tag = e.T_tag
				this.pages3.T_step_name = e.T_step_name
				this.pages3.T_min_time = e.T_min_time
				this.pages3.T_max_time = e.T_max_time
				this.pages3.T_text = e.T_text
				this.pages3.T_sort = e.T_sort
			},
			TimeNew() {
				if(this.$refs.ruleForm3!=undefined){
					this.$refs.ruleForm3.clearValidate()
				}
				for (let key in this.pages3) {
				    this.pages3[key] = ''
				}
				
				this.innerDrawer3 = true
				this.TempNum = 1
				this.pages3.T_VerifyTemplateMap_id = this.pages1.T_VerifyTemplateMap_id
				this.titles1 = '新增时间流程'
			},
			GetTime_ListApi(){
				Time_List(this.pages1).then(res=>{
					console.log('时间流程',res)
					if(res.data.Code==200){
						this.tableData2 = res.data.Data.List
						this.total2 = res.data.Data.Num
					}
				})
			},
			submitForm3(formName) {
				this.$refs[formName].validate((valid) => {
			 	if (valid) {
						console.log('新增',this.pages3)
						if(this.TempNum==1){//1是新增
							Time_Add(this.pages3).then(res=>{
								if(res.data.Code===200){
									this.$message.success('新增成功')
									this.innerDrawer3 = false
									this.pages1.page = 1
									this.GetTime_ListApi()
								}
							})
						}else{//2是编辑
							Time_Up(this.pages3).then(res=>{
								if(res.data.Code===200){
									this.$message.success('编辑成功')
									this.innerDrawer3 = false
									this.pages1.page = 1
									this.GetTime_ListApi()
								}
							})
							console.log('编辑',this.form1)	
						}
					} else {
						return false;
					}
				});
			},
			submitForm1(formName) {
				this.$refs[formName].validate((valid) => {
			 	if (valid) {
						if(this.TempNum==1){//1是新增
							console.log('新增',this.form1)
							Map_Add(this.form1).then(res=>{
								if(res.data.Code===200){
									this.$message.success('新增成功')
									this.innerDrawer2 = false
									this.pages2.page = 1
									this.GetMaplistApi()
								}
							})
						}else{//2是编辑
							Map_Up(this.form1).then(res=>{
								if(res.data.Code===200){
									this.$message.success('编辑成功')
									this.innerDrawer2 = false
									this.pages2.page = 1
									this.GetMaplistApi()
								}
							})
							console.log('编辑',this.form1)	
						}
					} else {
						return false;
					}
				});
			},
			fliValue(e){//上传
				console.log('上传',e)
				this.form1.T_text = e
			},
			handleCurrentChange111(val) {
				this.pages2.page = val
				this.GetMaplistApi()
			},
			handleCurrentChange12(val) {
				this.pages1.page = val
				this.GetTime_ListApi()
			},
			handlelabel(val) {
				this.Drawer = true
				this.pages2.T_VerifyTemplate_id = val.T_VerifyTemplate_id
				this.GetMaplistApi()
			},
			GetMaplistApi(){
				Map_List(this.pages2).then(res=>{
					console.log('列那边',res)
					if(res.data.Code==200){
						this.tableData1 = res.data.Data.List
						this.total1 = res.data.Data.Num
					}
				})
			},
			
			GetTempGetApi() {
				TempGet(this.pages).then(res => {
					console.log('列表', res)
					if (res.data.Code === 200) {
						this.tableData = res.data.Data.List
						this.total = res.data.Data.Num
					}
				})
			},
			Newtemp() { //新增模板
				if(this.$refs.ruleForm!=undefined){
					this.$refs.ruleForm.clearValidate()
				}
				this.tit = '新增模板'
				this.dialog1 = true
				this.TempNum=1
				
				this.form.T_name = ""
				this.form.T_sort = ""
			},
			handleEdit(val) { //编辑模板
				if(this.$refs.ruleForm!=undefined){
					this.$refs.ruleForm.clearValidate()
				}
				this.form.T_name = val.T_name
				this.form.T_sort = val.T_sort
				this.form.T_VerifyTemplate_id = val.T_VerifyTemplate_id
				
				this.tit = '编辑模板'
				this.dialog1 = true
				this.TempNum=2
				console.log('编辑sss', val)
			},
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						if(this.TempNum==1){//1是新增
							TempAdd(this.form).then(res=>{
								if(res.data.Code==200){
									this.dialog1 = false
									this.pages.page = 1
									this.GetTempGetApi()
								}
							})
						}else{//2是编辑
							TempUp(this.form).then(res=>{
								if(res.data.Code==200){
									this.dialog1 = false
									this.pages.page = 1
									this.GetTempGetApi()
								}
							})
						}
					} else {
						return false;
					}
				});
			},
			search() { //回车搜索
				this.pages.page = 1
				this.GetTempGetApi()
			},
			
			
			NewinnerDrawer() {
				if(this.$refs.ruleForm1!=undefined){
					this.$refs.ruleForm1.clearValidate()
				}
				this.form1.T_source = ""
				this.form1.T_label = ""
				this.form1.T_name = ""
				this.form1.T_field = ""
				this.form1.T_text = ""
				this.form1.T_sort = ""
				
				this.form1.T_VerifyTemplate_id = this.pages2.T_VerifyTemplate_id
				this.titles = '添加'
				this.TempNum = 1
				this.innerDrawer2 = true
			},
			commands(e,obj) {
				console.log('嘻嘻嘻',e,obj.T_id)
				var that = this
				switch (e) {
					case 'a':
						that.titles = '编辑'
						that.innerDrawer2 = true
						that.TempNum = 2
						if(that.$refs.ruleForm1!=undefined){
							that.$refs.ruleForm1.clearValidate()
						}
						that.form1.T_source = JSON.stringify(obj.T_source)
						that.form1.T_label = JSON.stringify(obj.T_label)
						that.form1.T_name = obj.T_name
						that.form1.T_field = obj.T_field
						that.form1.T_text = obj.T_text
						that.form1.T_sort = obj.T_sort
						that.form1.T_id =  obj.T_id
						break
					case 'b':
						this.innerDrawer1 = true
						this.pages1.T_VerifyTemplateMap_id = obj.T_id
						this.GetTime_ListApi()
						break
					default:
						this.$confirm('此操作将永久删除该模板, 是否继续?', '提示', {
							confirmButtonText: '立即删除',
							cancelButtonText: '取消',
							type: 'warning',
							center: true
						}).then(() => {
							Map_Del({T_id: obj.T_id}).then(res=>{
								if(res.data.Code==200){
									this.$message.success('删除成功!')
									this.pages2.page = 1
									this.GetMaplistApi()
								}
							})
						}).catch(() => {
							this.$message({
								type: 'info',
								message: '已取消删除'
							});
						});
				}
			},
			
			handleDelete(val) {
				this.$confirm('此操作将永久删除该模板, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
					center: true
				}).then(() => {
					TempDel({T_VerifyTemplate_id:val.T_VerifyTemplate_id}).then(res=>{
						if(res.data.Code==200){
							this.$message.success('删除成功!')
							this.pages.page = 1
							this.GetTempGetApi()
						}
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			handleCurrentChange(val) {
				this.pages.page = val
				this.GetTempGetApi()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.demo-drawers {
		padding: 20px;
	}

	/deep/.el-upload-dragger {
		width: 100% !important;
		padding: 0 30px !important;
	}

	.ValidationTemplate {
		.ValidationTemplate1 {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.ValidationTemplate1-L {}

			.ValidationTemplate1-R {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.ValidationTemplate1-Rtx {
					min-width: 45px;
					font-size: 14px;
					color: #909399;
					user-select: none;
				}
			}
		}

		.ValidationTemplate2 {
			margin-top: 20px;
		}

		.ValidationTemplate3 {
			margin-top: 40px;
		}
	}
</style>
