<template>
	<div class="ValidationTemplate">
		<div class="ValidationTemplate1">
			<div class="ValidationTemplate1-L">
				<el-button type="primary" @click="addClass(0)" icon="el-icon-plus">新增分类</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" style="width: 100%;margin-bottom: 20px;" row-key="Id" border
				:tree-props="{children: 'Children', hasChildren: 'hasChildren'}">
				<el-table-column prop="T_name" label="模板分类名称">
				</el-table-column>
				<el-table-column label="操作" :show-overflow-tooltip="true">
					<template slot-scope="scope">
						<el-button size="small" @click="goTemes(scope.row)">进入分类</el-button>
						<el-button size="small" @click="addClass(scope.row)">添加分类</el-button>
						<el-button size="small" @click="setedit(scope.row)">编辑</el-button>
						<el-button size="small" @click="setDel(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<el-drawer title="验证模板" :visible.sync="drawer" direction="rtl" size="80%">
			<div class="demo-drawers">
				<div class="ValidationTemplate1" style="margin-bottom: 10px;">
					<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="searchFun" clearable>
						</el-input>
					</div>
				</div>
				<el-table :data="tempTableData" border size="small">
					<el-table-column label="模板名称" width="250">
						<template slot-scope="scope">
							<span>{{ scope.row.T_name }}</span>
						</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 size="small" @click="handleScheme(scope.row,'Scheme')">方案
								</el-button>
								<el-button size="small" @click="handleReport(scope.row,'Report')">报告
								</el-button>
								<el-button size="small" @click="handleDelete(scope.row)">删除
								</el-button>
								<el-button size="small" @click="handleCopy(scope.row)">复制
								</el-button>
							</div>
						</template>
					</el-table-column>
				</el-table>
				<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="标签列表" :visible.sync="Drawer1" direction="rtl" :append-to-body="true" ref="drawer" size="70%">
					<div class="demo-drawers">
						<el-button type="primary" icon="el-icon-plus" @click="hedEdit('add')">添加标签</el-button>
						<div style="margin-top: 10px;">
							<el-table :data="tagTableData" border size="mini">
								<el-table-column align="left" width="80px">
								    <template #header>
										<div style="display: flex;align-items: center;">
											<div style="margin-right:10px;">排序</div>
											<div @click="sortchange(pages2.T_sort,'sort')" style="display: flex;align-items: center;flex-direction: column;justify-content: center;cursor: pointer;">
												<i :class="pages2.T_sort==1?'icon-bg-on':'icon-bg-off'" class="el-icon-caret-top" style="margin-bottom: -4px;font-size: 14px;"></i>
												<i :class="pages2.T_sort==2?'icon-bg-on':'icon-bg-off'" class="el-icon-caret-bottom" style="margin-top: -4px;font-size: 14px;"></i>
											</div>
										</div>
									</template>
									<template slot-scope="scope">
										<span>{{ scope.row.T_sort }}</span>
								    </template>
								</el-table-column>
								<el-table-column align="left" width="120px">
								    <template #header>
										<div style="display: flex;align-items: center;">
											<div style="margin-right:10px;">验证流程</div>
											<div @click.stop="sortchange(pages2.T_flow_sort,'fsort')" style="display: flex;align-items: center;flex-direction: column;justify-content: center;cursor: pointer;">
												<i :class="pages2.T_flow_sort==1?'icon-bg-on':'icon-bg-off'" class="el-icon-caret-top" style="margin-bottom: -4px;font-size: 14px;"></i>
												<i :class="pages2.T_flow_sort==2?'icon-bg-on':'icon-bg-off'" class="el-icon-caret-bottom" style="margin-top: -4px;font-size: 14px;"></i>
											</div>
										</div>
									</template>
									<template slot-scope="scope">
										<span>{{ scope.row.T_flow_sort }}</span>
								    </template>
								</el-table-column>
								<el-table-column label="标签名称" width="200" :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_label | lableData(scope.row.T_label)}}</span>
									</template>
								</el-table-column>
								<el-table-column label="操作">
									<template slot-scope="scope">
										<div style="display: flex;">
											<el-button size="small" @click="hedEdit(scope.row,'edit')">编辑</el-button>
											<el-button size="small" @click="hedDel(scope.row)">删除</el-button>
										</div>
									</template>
								</el-table-column>
							</el-table>
						</div>
						<el-drawer :title="titles" :append-to-body="true" :visible.sync="innerDrawer2">
							<!-- 时间流程按钮后的编辑 -->
							<div style="padding: 20px;">
								<el-form :model="form" :rules="rules" ref="ruleForm">
									<el-form-item label="数据类型" label-width="80px" prop="T_label">
										<el-select v-model="form.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="分割线" value="5"></el-option>
											<el-option label="当期时间" 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-option label="注释-当期时间" value="12"></el-option>
											<el-option label="注释-当期时间(开始与结束)" value="13"></el-option>
										</el-select>
									</el-form-item>
									<el-form-item label="来源" label-width="80px" prop="T_source">
										<el-select v-model="form.T_source" 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="0"></el-option>
										</el-select>
									</el-form-item>
									<el-form-item label="标签名称" label-width="80px" prop="T_name">
										<el-input v-model="form.T_name" autocomplete="off"></el-input>
									</el-form-item>
									<el-form-item label="排序" label-width="80px">
										<el-input v-model="form.T_sort" autocomplete="off"></el-input>
									</el-form-item>
									<el-form-item label="描述" label-width="80px" v-if="form.T_label!=10 && form.T_label!=11">
										<el-input type="textarea" v-model="form.T_text"></el-input>
									</el-form-item>
									<el-form-item label="描述" label-width="80px" v-if="form.T_label==10 || form.T_label==11">
										<files @pdfvalue="fliValue" :accepts="'image/*'"></files>
										<div style="margin-top: 5px;line-height: 0 ;">
											<div style="height: 20px;color: #409EFF;">
												<div v-if="form.T_text!=''" style="display: flex;align-items: center;">
													<i class="el-icon-circle-check"></i>
													<div style="font-size: 12px;padding-left: 1px;">文件已上传，</div>
													<div style="font-size: 12px;cursor: pointer;text-decoration: underline;" @click="showImg">查看图片</div>
												</div>
											</div>
										</div>
									</el-form-item>
									<el-divider>验证流程</el-divider>
									<el-form-item label="排序" label-width="80px">
										<el-input v-model="form.T_flow_sort" autocomplete="off"></el-input>
									</el-form-item>
									<el-form-item label="最大时间" label-width="80px">
										<el-input v-model="form.T_max_time" autocomplete="off"></el-input>
									</el-form-item>
									<el-form-item label="最小时间" label-width="80px">
										<el-input v-model="form.T_min_time" autocomplete="off"></el-input>
									</el-form-item>
									<el-form-item label-width="80px">
										<el-button type="primary"  @click="submitForm('ruleForm')">
											确 定
										</el-button>
										<el-button @click="innerDrawer2=false">取 消</el-button>
									</el-form-item>
								</el-form>
							</div>
						</el-drawer>
					</div>
				</el-drawer>
				<el-drawer :title="draTit" :visible.sync="Drawer2" direction="rtl" :append-to-body="true" ref="drawer">
					<div class="drawer-upload">
						<el-upload
						  ref="uploadFile"
						  class="upload-demo"
						  drag
						  action="http://coldverifylocal.coldbaozhida.com/GenerateReport/upload"
						  :auto-upload='false'
						  accept=".doc, .docx"
						  :on-success="successFun"
						  :on-error="errorFun"
						  :multiple="false">
						  <i class="el-icon-upload"></i>
						  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
						  <div class="el-upload__tip" slot="tip">只能上传doc/docx文件，不支持上传其他类型文件</div>
						</el-upload>
						<!-- <yfile></yfile> -->
						<el-button type="primary" @click="submit" style="margin: 50px auto 0 auto;">立即提交</el-button>
					</div>
				</el-drawer>	
			</div>
		</el-drawer>
		<el-dialog title="图片查看" :visible.sync="dialogVisible">
		  <div>
			  <img :src="imgUrl" alt="" srcset="">
		  </div>
		</el-dialog>
	</div>
</template>

<script>
	var arrLabel = [
		{label:1,text:'文本'},
		{label:2,text:'数量'},
		{label:3,text:'设备多选'},
		{label:4,text:'设备单选'},
		{label:5,text:'分割线'},
		{label:7,text:'当期时间'},
		{label:9,text:'当期时间（开始与结束时间）'},
		{label:10,text:'图片'},
		{label:11,text:'CAD'},
		{label:12,text:'注释-当期时间'},
		{label:13,text:'注释-当期时间(开始与结束)'},
	]
	import {
		TempList,
		TempGet,
		TempClassAdd,
		TempClassUp,
		TempClassDel,
		TempAdd,
		TempDel,
		Map_List,
		Map_Del,
		Map_Add,
		Map_Up,
		TempUp,TempCopy
	} from '@/api/ValidationTemplate'
	import {
		PDFToken
	} from "@/api/pdfToken.js";
	import files from "@/components/files"
	import yfile from "@/components/yFiles"
	import axios from "axios"
	export default {
		name: 'ValidationTemplate',
		components:{files,yfile},
		filters:{
			lableData(e){
				const resIt = arrLabel.find(item=>{
					return item.label == e
				})
				return resIt.text
			}
		},
		data() {
			return {
				imgUrl:'',
				dialogVisible:false,
				draTit:'',
				Drawer1:false,
				innerDrawer2:false,
				titles: '',
				form: { //新增编辑的提交参数
					T_VerifyTemplate_id:'',
					T_id:'',
					T_source: '',//来源 0-所有 1-方案 2-报告
					T_label: '',//数据类型
					T_name: '',//标签名称
					T_text: '',//描述图片路径
					T_sort: '',//排序
					T_flow_sort:'',//验证流程排序
					T_max_time:'',//最小时间
					T_min_time:'',//最大时间
				},
				dirform: { //方案报告提交参数
				},
				rules: {
					T_source: [{
						required: true,
						message: '请选择来源',
						trigger: 'change'
					}, ],
					T_label: [{
						required: true,
						message: '请选择数据类型',
						trigger: 'change'
					}],
					T_name: [{
						required: true,
						message: '请输入标签名称',
						trigger: 'blur'
					}, ],
				},
				Drawer2:false,
				tagTableData:[],
				pages2:{//标签列表参数
					T_VerifyTemplate_id:'',
					T_sort:1,//0默认 1升序 2降序
					T_flow_sort:0,//0默认 1升序 2降序
				},
				
				LabelWidth: "80px",
				drawer:false,
				//模板列表参数
				pages: {
					page: 1,
					page_z: 10,
					T_name: '',
					T_class:null,
				},
				//添加分类参数
				pages1:{
					T_name:'',
					T_fid:0,
				},
				total: 0,
				tableData: [],
				tempTableData:[]
			}
		},
		watch:{
			Drawer1(newVal){
				newVal ? '' : this.pages2.T_flow_sort=0;this.pages2.T_sort=1
			}
		},
		mounted() {
			this.getTempApi()
		},
		methods: {
			handleCopy(e){
				console.log('复制',e)
				this.$prompt('请输入模板名称', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					inputPattern: /\S/,
					inputErrorMessage: '模板名称不能为空'
					}).then(({ value }) => {
						TempCopy({
							T_VerifyTemplate_id:e.T_VerifyTemplate_id,
							T_name:value
						}).then(res=>{
							console.log('1111',res)
							if(res.data.Code==200) this.GetTempListApi()
						})
					}).catch(() => {
					this.$message({
						type: 'info',
						message: '取消复制'
					});       
				});
			},
			showImg(){
				this.dialogVisible = true
				this.imgUrl = this.form.T_text
			},
			//标签上次成功
			classsucFun(res){
				console.log('上传成功1',res)
			},
			// 标签上次失败
			classErrFun(err){
				console.log('上传失败1',err)
			},
			submit(){
				// axios.post({
				// 	url:'http://coldverifylocal.coldbaozhida.com/GenerateReport/upload'
				// }).then(function (response) {
				//     console.log('上传',response);
				// }).catch(function (error) {
				//     console.log(error);
				// });
				this.$refs.uploadFile.submit();
			},
			errorFun(err){
				this.$message.error('文件上传失败')
			},
			successFun(res){
				console.log('上传成功',res)
				if(this.draTit=="报告"){
					this.dirform.T_reporting = res
					this.dirform.T_scheme = ''
				}else{
					this.dirform.T_scheme = res
					this.dirform.T_reporting = ''
				}
				this.setTempupApi()
			},
			setTempupApi(){
				var _this = this
				TempUp(this.dirform).then(res=>{
					console.log('上传',res)
					if(res.data.Code==200){
						_this.$message.success('文件上传成功')
						_this.Drawer2 = false
					}
				})
			},
			fliValue(e){
				this.form.T_text = e
			},
			//提交标签
			submitForm(formName){
				this.$refs[formName].validate((valid) => {
					if (valid) {
						if(this.titles == '编辑标签'){//编辑标签
							console.log('编辑',this.form)	
							this.setMapupApi()
						}else{//新增标签
							this.setMapaddApi()
							console.log('新增',this.form)	
						}
					} else {
						return false;
					}
				});
			},
			//标签编辑
			hedEdit(e,differ){
				if(this.$refs.ruleForm!=undefined){
					this.$refs.ruleForm.clearValidate()
				}
				this.innerDrawer2 = true
				if(differ=='edit'){//编辑
					this.titles = '编辑标签'
					console.log('标签',e)
					Object.keys(this.form).forEach(key => {
						if(key=='T_source' || key=='T_label'){
							this.form[key] = JSON.stringify(e[key])
						}else{
							this.form[key] = e[key]
						}
					})
					console.log('标签',this.form)
				}else{//添加
					this.titles = '新增标签'
					Object.keys(this.form).forEach(key => {
						this.form[key] = ''
					})
				}
				this.form.T_VerifyTemplate_id = this.pages2.T_VerifyTemplate_id
				console.log('显示',this.form)
			},
			//标签编辑api
			setMapupApi(){
				Map_Up(this.form).then(res=>{
					if(res.data.Code==200){
						this.$message.success('编辑标签成功')
						this.innerDrawer2 = false
						this.getmapListApi()
					}
				})
			},
			//标签添加api
			setMapaddApi(){
				Map_Add(this.form).then(res=>{
					if(res.data.Code==200){
						this.$message.success('新增标签成功')
						this.innerDrawer2 = false
						this.getmapListApi()
					}
				})
			},
			//标签删除
			hedDel(e){
				console.log('删除',e)
				this.$confirm('此操作将永久删除该模板, 是否继续?', '提示', {
					confirmButtonText: '立即删除',
					cancelButtonText: '取消',
					type: 'warning',
					center: true
				}).then(() => {
					Map_Del({T_id: e.T_id}).then(res=>{
						if(res.data.Code==200){
							this.$message.success('删除成功!')
							this.getmapListApi()
						}
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			sortchange(e,so){
				console.log('排序',e,so)
				if(so=='fsort'){//点击验证流程
					this.pages2.T_sort=0
					e==1?this.pages2.T_flow_sort=2:this.pages2.T_flow_sort=1
				}else{//点击的排序
					this.pages2.T_flow_sort=0
					e==1?this.pages2.T_sort=2:this.pages2.T_sort=1
				}
				this.getmapListApi()
			},
			//添加标签
			NewinnerDrawer(){
				console.log('添加标签')
			},
			//标签
			handlelabel(e) {
				console.log('标签',e)
				this.pages2.T_VerifyTemplate_id = e.T_VerifyTemplate_id
				this.Drawer1 = true
				this.getmapListApi()
			},
			//报告
			handleReport(e){
				console.log('报告',e,this.$refs.uploadFile)
				this.dirform = e
				if(this.$refs.uploadFile!=undefined){
					this.$refs.uploadFile.uploadFiles = []
				}
				this.Drawer2 = true
				this.draTit = '报告'
				
			},
			//方案
			handleScheme(e){
				if(this.$refs.uploadFile!=undefined){
					this.$refs.uploadFile.uploadFiles = []
				}
				this.dirform = e
				console.log('方案',e)
				this.Drawer2 = true
				this.draTit = '方案'
			},
			getmapListApi(){
				Map_List(this.pages2).then(res => {
					console.log('标签列表1111', res)
					if (res.data.Code === 200) {
						this.tagTableData = res.data.Data.List
					}
				})
			},
			handleDelete(e){
				console.log('删除',e)
				this.$confirm('此操作将删除该模板, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
					center: true
				}).then(() => {
					TempDel({
						T_VerifyTemplate_id:e.T_VerifyTemplate_id,
						}).then(res=>{
						if(res.data.Code==200){
							this.$message.success('删除成功!')
							this.pages.page = 1
							this.GetTempListApi()
						}
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			searchFun(){
				this.pages.page = 1
				this.tempTableData = []
				this.GetTempListApi()
			},
			//分页
			handleCurrentChange(val) {
				this.pages.page = val
				this.GetTempListApi()
			},
			Newtemp() { //新增模板
				var _this = this
				this.$prompt('请输入新增模板名称', '新增', {
					inputPattern: /\S/,
					inputErrorMessage: '模板名称不能为空',
					confirmButtonText: '添加',
					cancelButtonText: '取消',
				}).then(({
					value
				}) => {
					TempAdd({
						T_class:_this.pages.T_class,
						T_name:value
					}).then(res=>{
						if(res.data.Code==200){
							_this.$message.success('新增模板成功')
							_this.GetTempListApi()
						}
					})
				}).catch(() => {
				
				});
			},
			
			//分类列表
			getTempApi(){
				TempList({}).then(res=>{
					console.log('分类列表',res)
					if(res.data.Code==200){
						this.tableData = res.data.Data
					}
				})
			},
			goTemes(e) {
				console.log('进入模板', e)
				this.pages.T_class = e.Id
				this.drawer = true
				this.GetTempListApi()
			},
			//模板列表
			GetTempListApi() {
				TempGet(this.pages).then(res => {
					console.log('列表', res)
					if (res.data.Code === 200) {
						this.tempTableData = res.data.Data.List
						this.total = res.data.Data.Num
					}
				})
			},
			//添加分类Api
			SetTempClassAddApi(){
				TempClassAdd(this.pages1).then(res => {
					console.log('添加', res)
					if (res.data.Code === 200) {
						this.$message.success('添加分类成功')
						this.getTempApi()
					}
				})
			},
			//添加分类
			addClass(e) {
				e==0?this.pages1.T_fid =e:this.pages1.T_fid = e.Id
				this.$prompt('请输入需要添加的分类名称', '添加', {
					inputPattern: /\S/,
					inputErrorMessage: '分类名称不能为空',
					confirmButtonText: '确定',
					cancelButtonText: '取消',
				}).then(({
					value
				}) => {
					this.pages1.T_name = value
					this.SetTempClassAddApi()
				}).catch(() => {

				});
			},
			////编辑分类
			setedit(e) {
				console.log('编辑', e)
				var _this = this
				this.$prompt('请输入编辑的分类名称', '编辑', {
					inputValue: e.T_name,
					inputPattern: /\S/,
					inputErrorMessage: '分类名称不能为空',
					confirmButtonText: '确定',
					cancelButtonText: '取消',
				}).then(({
					value
				}) => {
					TempClassUp({
						T_id:e.Id,
						T_name:value
					}).then(res=>{
						console.log('编辑', res)
						if (res.data.Code === 200) {
							_this.$message.success('编辑分类成功')
							_this.getTempApi()
						}
					})
				}).catch(() => {

				});
			},
			//删除分类
			setDel(e) {
				console.log('删除', e)
				var _this = this
				this.$confirm('此操作将永久删除该分类, 是否继续?', '删除提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
					center: true
				}).then(() => {
					TempClassDel({
						T_id:e.Id
					}).then(res=>{
						if (res.data.Code === 200) {
							_this.$message.success('删除分类成功')
							_this.getTempApi()
						}
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.el-upload{
		width: 100%;
	}
	.drawer-upload{
		padding: 20px;
	}
	.demo-drawers {
		padding: 20px;
	}
	.icon-bg-def{
		color: #C0C4CC;
	}
	.icon-bg-on{
		color: #409EFF;
	}
	.icon-bg-off{
		color: #C0C4CC;
	}
	/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>