<template>
	<div style="background-color:#f7f7f7;padding:10px 10px;">
		<div class="zhuti">
			<div style="height:58px;line-height:58px;">
				<div style="color:#0006"> <span>媒体推广</span> <span style="padding:0 5px;">></span> <span
						style="color:#000000e6">渠道管理</span></div>
			</div>
			<!-- 搜索 -->
			<div class="formSearch">
				<div class="demo-input-suffix">
					<div style="width: 68px;height:36px;line-height:32px;">渠道名称</div>
					<el-input placeholder="请输入" v-model="channelName" style="width:168px;">
					</el-input>
				</div>
				</el-form-item>
				</el-form>
				<div style="">
					<el-button @click="onSubmit" style="background-color: #3F9B6A;color: #fff">查询
					</el-button>
					<el-button @click="chong" class="buttonHover"
						style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">重置
					</el-button>
				</div>
			</div>
			<div style="margin:20px 0;">
				<el-button icon="el-icon-circle-plus-outline" @click="addbuss(1)"
					style="background-color: #3F9B6A;color: #fff;">新增</el-button>
				<el-button style="background-color: #fff;color: #000;border: 1px solid #B1B1B1;"
					icon="el-icon-folder-add" class="buttonHover" @click="xinFenlei">渠道分类管理</el-button>
					<el-button  @click="toufang('投放周期管理')"
					  style="background-color: #3F9B6A;color: #fff;">投放周期管理</el-button>
					  <el-button  @click="toufang('投放费用管理')"
					    style="background-color: #3F9B6A;color: #fff;">投放费用管理</el-button>
			</div>
			<div class="fenlan">
				<div class="souLei">
					<div
						style="line-height:42px;height:42px;background-color:#f2f3f5;border-bottom:1px solid #d7d7d7;padding-left:12px;color:#0009">
						标签分类
					</div>
					<div calss="souList">
						<div class="souTabs">
							<div style="padding: 5px 0 0 10px;color:#000000e6;line-height:40px;cursor: pointer;">
								<span @click="getFenAll">全部分类</span>
								<span style="font-size: 15px !important;color:#606266">
									<i class="el-icon-circle-plus" @click="xinFenlei()" style="padding: 5px;"></i>
								</span>
							</div>
							<el-tree :data="xianFenlei" :props="defaultProps" @node-click="handleNodeClick"
								:expand-on-click-node="false">
								<div class="custom-tree-node" slot-scope="{ node, data }">
									<span>{{ node.label }}</span>
									<span style="font-size: 15px !important;">
										<i class="el-icon-circle-plus" v-if="node.level!=2"
											@click="xinFenlei(node,data)" style="padding-right: 5px;"></i>
										<i class="el-icon-edit" @click="editFenlei(node, data)"
											style="padding-right: 5px;"></i>
										<i class="el-icon-delete-solid" @click="() => fenDelete(node, data)"></i>
									</span>
								</div>
							</el-tree>
						</div>
					</div>
				</div>
				<!-- 搜索分类 -->

				<div class="tableList">
					<div>
						<!-- 表格 -->

						<el-table :data="tableData"
							:header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
							align="left">
							<el-table-column label="序号" min-width="100" prop="id">
								<template slot-scope="scope">
									{{scope.$index +1 }}
								</template>
							</el-table-column>
							<el-table-column label="渠道名称" prop="channelName" min-width="150" show-overflow-tooltip>
							</el-table-column>
							<el-table-column label="类型" prop="channelType" min-width="120">

							</el-table-column>
							<el-table-column label="备注" prop="notes" min-width="200">

							</el-table-column>
							<!-- <el-table-column label="创建人" prop="createUser"  min-width="150" >
          </el-table-column> -->
							<el-table-column prop="createDate" label="创建时间" min-width="200">

							</el-table-column>

							<el-table-column label="操作" min-width="130" fixed="right">
								<template slot-scope="scope">
									<div @click="addbuss(2,scope.row)" class="tableBtn greens">查看</div>
									<div @click="addbuss(3,scope.row)" class="tableBtn greens">编辑</div>
									<div @click="handleDelete(scope.row)" class="tableBtn greens">删除</div>
								</template>
							</el-table-column>
						</el-table>
						<div class="fenye">
							<el-pagination class="pagination" :hide-on-single-page="flag" background small
								:current-page="currentPage" :page-size="pageSize" layout="total,->,prev, pager,next"
								:total="total " @size-change="handleSizeChange" @current-change="handleCurrentChange" />
						</div>
					</div>
				</div>
			</div>

		</div>

		<!-- 新建商家弹框 -->
		<el-dialog :title="index == 1?'新增':index == 2?'详情':'编辑'" :visible.sync="ggXin" custom-class="dialog_css_Xq"
			style="padding: 0;" width="50%" center :close-on-click-modal="false" :show-close="false">
			<div>
				<div style="margin-bottom: 20px;">
					<el-form ref="jibenFrom" :model="formInline" :rules="rules" label-width="80px">
						<el-form-item label="渠道分类" prop="channelClassification">
							<el-cascader v-model="formInline.channelClassification" :options="cascaderList"
								@change="ADDChange" :props="{ checkStrictly: true }" :show-all-levels="false" clearable
								:disabled="index == 1?false:index == 2?true:false" style="width: 100%;"></el-cascader>

							<!-- <el-select v-model="formInline.channelClassification" placeholder="请选择"
                :disabled="index == 1?false:index == 2?true:false" style="width:100%">
                <el-option :label="item.cereClassification.classificationName" :value="item.cereClassification.classificationName" v-for="(item,index) in fenlei" :key="item.cereClassification.id"/>
              </el-select> -->
						</el-form-item>
						<el-form-item label="渠道名称" prop="channelName">
							<el-input v-model="formInline.channelName"
								:disabled="index == 1?false:index == 2?true:false" placeholder="请输入"></el-input>
						</el-form-item>
						<el-form-item label="渠道类型" prop="channelType">
							<el-select v-model="formInline.channelType" placeholder="请选择"
								:disabled="index == 1?false:index == 2?true:false" style="width:100%">
								<el-option label="APP" value="APP" />
							</el-select>
						</el-form-item>
						<el-form-item label="账号" v-if="index==1?true:false" prop="accountNumber">
							<el-input v-model="formInline.accountNumber" placeholder="请输入"></el-input>
						</el-form-item>
						<el-form-item label="APPKEY" v-if="index==1?true:false" prop="appKey">
							<el-input v-model="formInline.appKey" placeholder="请输入"></el-input>
						</el-form-item>
						<el-form-item label="APP图片" v-if="index==1?true:false" prop="coverPoster"
							style="margin-bottom:20px;">
							<upimg filePath="qudao" :value="formInline.coverPoster" inputtype="coverPoster" :limit="1"
								@changimg="e=>changimg(e,'coverPoster')"></upimg>

						</el-form-item>
						<el-form-item label="备注">
							<el-input type="textarea" v-model="formInline.notes" :rows="4"
								:disabled="index == 1?false:index == 2?true:false"></el-input>
						</el-form-item>

					</el-form>

				</div>
				<div style="display: flex;justify-content: flex-end;">
					<el-button plain @click="closeFn(1)" class="buttonHover"
						style="background-color: #fff;color: #000;border: 1px solid #dcdfe6;">返回</el-button>
					
					<el-button plain @click="addCheck(index)" v-if="index!= 2"
						style="background-color: #3F9B6A;color: #fff;border-color: #3F9B6A;">确定</el-button>
				</div>
			</div>
			<!-- <div v-if="index==1">
                      <div style="font-weiht:600">添加账号</div>
                      <div>
                         <div>
                            <image url="@/src/asssets/images/dy.png"></image>
                           <div>抖音</div>
                         </div>
                      </div>
                    </div> -->
		</el-dialog>
		<el-dialog :visible.sync="xinlei" custom-class='xiaoguo_css' style="padding: 0;" width="50%" center
			:close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
			<div
				style="padding:15px;background-color:#F9F9F9;font-size:14px;border:1px solid #ECECEC;margin-bottom:20px;display: flex;justify-content: space-between;">
				<div>{{editFen == 0 ?'新增':'编辑'}}</div>
			</div>
			<div style="padding:0 36px;">
				<el-form label-position="right" ref="fenFrom" :model="xinADD" :rules="fenrules" label-width="120px"
					style="position: relative">
					<el-form-item label="上级分类" class="grid-content bg-purple device-from" prop="parentId" v-if="editFen==0" >
						<el-cascader v-model="xinADD.parentId" :options="cascaderList" @change="fenleiChange"
							:props="{ checkStrictly: true }" :show-all-levels="false" clearable
							style="width: 100%;"></el-cascader>
					</el-form-item>
					<el-form-item label="分类名称" class="grid-content bg-purple device-from" prop="classificationName">
						<el-input v-model="xinADD.classificationName" placeholder="请输入" />
					</el-form-item>
				</el-form>
			</div>

			<div style="display: flex;justify-content: flex-end;padding: 10px 20px 10px 0">
				<el-button class="buttonHover" style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;"
					@click="fenqing">返回</el-button>
				<el-button plain @click="sevLei" style="background-color: #3F9B6A;color: #fff;">保存
				</el-button>
			</div>
		</el-dialog>
		<el-dialog  :visible.sync="touShow" :title="title" style="padding: 0;" width="75%"
		  center :close-on-click-modal="false" :close-on-press-escape="false" >
		    <div style="padding:0 20px;margin-top:20px;">
		
		              <el-table :data="tableData"
		                 :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
		                 align="left">
		                <el-table-column label="序号"   min-width="10%" prop="id" >
		                  <template slot-scope="scope">
		                    {{scope.$index +1 }}
		                    </template>
		                </el-table-column>
		                <el-table-column label="渠道名称" prop="channelName"   min-width="30%">
		                </el-table-column>
		  <el-table-column label="投放周期" prop="releaseCycle"   min-width="30%"  v-if="title=='投放周期管理'">
		  </el-table-column>
		  <el-table-column label="投放费用" prop="deliveryCost"  min-width="30%"  v-if="title=='投放费用管理'">
		  </el-table-column>
		  <el-table-column label="投放效果评价" prop="deliveryEffect"  min-width="30%" v-if="title=='投放效果评价管理'">
		  </el-table-column>
		
		                <el-table-column label="操作"   min-width="30%">
		                  <template slot-scope="scope">
		                    <div @click="addbuss(2,scope.row)" class="tableBtn greens">查看</div>
		                    <div @click="peicao('releaseCycle',scope.row)" class="tableBtn greens" v-if="title=='投放周期管理'">投放周期设置</div>
		                    <div @click="peicao('deliveryCost',scope.row)" class="tableBtn greens" v-if="title=='投放费用管理'">投放费用设置</div>
		                    <div @click="peicao('deliveryEffect',scope.row)" class="tableBtn greens" v-if="title=='投放效果评价管理'">评价</div>
		                  </template>
		                </el-table-column>
		              </el-table>
					<div class="fenye">
						<el-pagination class="pagination" :hide-on-single-page="flag" background 
							:current-page="currentPage" :page-size="pageSize" layout="total,->,prev, pager,next"
							:total="total " @size-change="handleSizeChange" @current-change="handleCurrentChange" />
					</div>
		  </div>
		</el-dialog>
		<el-dialog :visible.sync="peiShow" custom-class='bian_css' style="padding: 0;" width="45%" :title="title"
		                    :close-on-press-escape="false" center :close-on-click-modal="false" class="dialog_css_Xq" :show-close="false">
		                    <div style="padding:20px;">
		                    
		                        <el-form label-position="right" ref="jibenFrom" :model="peiForm"  label-width="140px"
		                          style="position: relative">
		                          <el-form-item label="投放周期" class="grid-content bg-purple device-from" prop="auditReminderTime"  v-if="title=='投放周期管理'">
		                            <el-date-picker style="width:240px;margin-right:5px" v-model="peiForm.auditReminderTime"
		                              value-format="yyyy-MM-dd HH:mm:ss"    type="datetime" prefix-icon="none" >
		                            </el-date-picker>
		                          </el-form-item>
		                          <el-form-item label="投放费用" class="grid-content bg-purple device-from" prop="auditReminderTime"  v-if="title=='投放费用管理'">
		                            <el-input v-model="peiForm.auditReminderTime" placeholder="请输入" />
		                          </el-form-item>
		                          <el-form-item label="评价" class="grid-content bg-purple device-from" prop="auditReminderTime"  v-if="title=='投放效果评价管理'">
		                            <el-input v-model="peiForm.auditReminderTime" placeholder="请输入"   type="textarea"
		:rows="3" />
		                          </el-form-item>
		                          </el-form>
		                      <div style="padding-top:20px;display:flex;justify-content: flex-end;">
		                        <el-button  style="background-color: #3F9B6A;color: #fff"
		                          @click="peiCheck">确定</el-button>
		                        <el-button @click="peiShow = false"  style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;" class="buttonHover">取消</el-button>
		
		                      </div>
		
		                    </div>
		
		                  </el-dialog>
	</div>

</template>

<script>
	import {
		quGetAll,
		quGetOne,
		quAdd,
		quEdit,
		quDel
	} from '@/api/account.js'
	import {
		cereGet,
		cereAdd,
		cereEdit,
		cereDel
	} from '../../api/activityBz'
	import upimg from "@/components/ImageUpload/index"
	export default {
		components: {
			upimg
		},
		data() {
			return {
				currentPage: 1,
				total: 100,
				flag: false,
				pageSize: 10,
				ggXin: false,
				index: 1,
				pageNum: 1, // 当前页
				fenlei: [],
				fenleiInex: 0,
				formInline: {
					channelClassification: '', //分类
					channelName: '', //渠道名称
					channelType: '', //渠道类型
					createDate: '', //创建时间
					accountNumber: '', //账号
					appKey: '', //appkey
					notes: '', //备注
				},
				planName: '',
				channelName: '', //查询
				fenrules: {
					classificationName: [{
							required: true,
							message: '请输入分类名称',
							trigger: 'blur'
						},

					],
				},
				rules: {
					channelClassification: [{
						required: true,
						message: '请选择分类',
						trigger: 'change'
					}],
					channelName: [{
						required: true,
						message: '请输入渠道名称',
						trigger: 'blur'
					}],
					channelType: [{
						required: true,
						message: '请选择类型',
						trigger: 'change'
					}],
					accountNumber: [{
						required: true,
						message: '请输入账号',
						trigger: 'blur'
					}],
					appKey: [{
						required: true,
						message: '请输入appkey',
						trigger: 'blur'
					}],
				},
				tableData: [],
				pageindex: {
					pageNumber: 1,
					pageSize: 10
				},
				xinlei: false, //分类管理框
				fentcont: true, //分类管理控制
				xinADD: {
					classificationName: '',
					classificationCode: '',
					parentId: '',
					classificationType: '2'
				},
				fenleiDelId: '',
				cascaderList: [],
				submenuId: '',
				defaultProps: {
					children: 'children',
					label: 'classificationName'
				},
				xianFenlei: [],
				editFen: 0,
				title:'',
				touShow:false,
				peiShow:false,
				peiForm:{
				  auditReminderTime:''
				},
				ziduan:'',
				editFen:0,
			}
		},
		computed: {},
		mounted() {
			this.getAll()
		},
		methods: {
			changimg(e, type) {
				this.formInline[type] = e
			},
			async getAll() {
				const res = await quGetAll(this.pageindex)
				this.tableData = res.data.content
				this.total = res.data.content.length
				let page = {
					pageNumber: 1,
					pageSize: 10,
					classificationType: '2'
				}
				const fenleis = await cereGet(page)
				this.fenlei = fenleis.data
				this.cascaderList = this.transformData(fenleis.data)
				this.xianFenlei = this.trsData(fenleis.data)
			},
			transformData(data) {
				return data.map(item => ({
					value: item.cereClassification.id,
					label: item.cereClassification.classificationName,
					children: item.childClassifications.map(child => ({
						value: child.id,
						label: child.classificationName,
					})),
				}));
			},
			trsData(data) {
				return data.map(item => ({
					...item.cereClassification,
					children: item.childClassifications || []
				}));
			},
			async getFenAll() {
				this.pageindex = {
					pageNumber: 1,
					pageSize: 10
				}
				const res = await quGetAll(this.pageindex)
				this.tableData = res.data.content
				this.total = res.data.content.length
			},
			async handleNodeClick(data) {
				this.pageindex.channelClassification = data.id
				const res = await quGetAll(this.pageindex)
				this.tableData = res.data.content
				this.total = res.data.content.length
			},
			//获取当前时间
			updateCurrentTime() {
				const now = new Date();
				const year = now.getFullYear();
				const month = (now.getMonth() + 1).toString().padStart(2, '0');
				const day = now.getDate().toString().padStart(2, '0');
				const hours = now.getHours().toString().padStart(2, '0');
				const minutes = now.getMinutes().toString().padStart(2, '0');
				const seconds = now.getSeconds().toString().padStart(2, '0');

				return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			},
			addbuss(val, item) {
				if (val == 1) {
					this.formInline = {
						channelClassification: '', //分类
						channelName: '', //渠道名称
						channelType: '', //渠道类型
						createDate: '', //创建时间
						accountNumber: '', //账号
						appKey: '', //appkey
						notes: '', //备注
					}
				} else if (val === 2 || val === 3) {
					this.formInline.id = item.id
					this.formInline = item
					this.formInline.channelClassification = Number(item.channelClassification)
				}
				this.index = val
				this.ggXin = true
			},
			bianji() {
				this.index = 3
			},
			// 确定
			addCheck(index) {
				this.$refs.jibenFrom.validate((valid) => {
						console.log(valid)
						if (valid) {
							if (index == 1) {
								this.formInline.createDate = this.updateCurrentTime()
								quAdd(this.formInline).then(res => {
									this.getAll()
									this.ggXin = false
								})
							} else {
								quEdit(this.formInline).then(res => {
									this.getAll()
									this.ggXin = false
								})
							}
						} else {
							this.$message({
								message: '请填写数据',
								type: 'error',
								offset: 100
							})
							return false;
						}
					}

				)

			},
			async onSubmit() {
				let num = this.fenleiInex
				this.pageindex.channelName = this.channelName
				// this.pageindex.channelClassification = this.fenlei[num]
				let res = await quGetAll(this.pageindex)
				this.tableData = res.data.content
				this.total = res.data.content.length
			},
			handleSizeChange() {

			},
			handleCurrentChange() {

			},
			closeFn() {
				this.ggXin = false
				this.index = 1
			},
			handleDelete(item) {
				const h = this.$createElement;
				this.$msgbox({
					title: '消息',
					message: h('p', null, [
						h('span', null, '是否删除 '),
					]),
					showCancelButton: true,
					showClose: false,
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					customClass: 'oe-dialog-btn',
					beforeClose: (action, instance, done) => {
						if (action === 'confirm') {
							quDel({
								id: item.id
							}).then(res => {
								this.$message({
									message: '删除成功',
									type: 'success'
								})
								this.getAll()
								done();
							})
						} else {
							done();
						}
					}
				})
			},
			chong() {
				this.pageindex = {
					pageNumber: 1,
					pageSize: 10
				}
				this.channelName = ''
				this.getAll()
			},
			handleClick(tab, event) {
				this.fenleiInex = Number(tab.index)
				this.pageindex = {
					pageNumber: 1,
					pageSize: 10
				}
				if (tab.index == '0') {
					this.getAll()
				} else {
					let num = Number(tab.index)
					this.pageindex.channelClassification = this.fenlei[num - 1]
					this.getAll()
				}
			},
			xinFenlei(node, data) {
				this.editFen = 0
				if (data) {
					this.xinADD.parentId = data.id
				}
				this.xinlei = true
			},
			editFenlei(node, data) {
				this.editFen = 1
				if (data) {
					this.xinADD.parentId = data.id
					this.xinADD.classificationName = data.classificationName
				}
				this.xinlei = true
			},
			fenqing() {
				this.xinADD = {
					classificationName: '',
					classificationCode: '',
					parentId: '',
					classificationType: '2'
				}
				this.xinlei = false
			},
			async sevLei() {
				this.$refs.fenFrom.validate((valid) => {
				  if (valid) {
					  if (this.editFen == 0) {
					  	this.xinADD.classificationCode = this.xinADD.classificationName
					  
					  	 cereAdd(this.xinADD)
					  } else {
					  	 cereEdit({
					  		id: this.xinADD.parentId,
					  		classificationName: this.xinADD.classificationName
					  	})
					  }
					  this.xinlei = false
					  this.xinADD = {
					  	classificationName: '',
					  	classificationCode: '',
					  	parentId: '',
					  	classificationType: '2'
					  }
					  this.getAll()
					  }else{
						this.$message({
						  message: '请填写数据',
						  type: 'error',
						  offset: 100
						})
						return false;  
					  }
				
				})

				
			},
			fenleiChange(value) {
				this.xinADD.parentId = value[value.length - 1]
			},
			ADDChange(value) {
				this.formInline.channelClassification = value[value.length - 1]
			},
			fenDelete(node, data) {
				const h = this.$createElement;
				this.$msgbox({
					title: '消息',
					message: h('p', null, [
						h('span', null, '是否当前分类和子分类删除 '),
					]),
					showCancelButton: true,
					showClose: false,
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					customClass: 'oe-dialog-btn',
					beforeClose: (action, instance, done) => {
						if (action === 'confirm') {
							cereDel({
								id: data.id
							}).then(res => {
								this.xinlei = false
								this.getAll()
								done();
							})
						} else {
							done();
						}
					}
				})
			},
			fenleiMenu(item) {
				console.log(item)
				if (item.cereClassification) {
					this.pageindex.channelClassification = item.cereClassification.classificationName
				} else {
					this.pageindex.channelClassification = item.classificationName
				}
				this.getAll()
			},
			toufang(title){
			
			  this.title = title
			  this.touShow = true
			},
			peicao(ziduan,item){
			
			   this.peiId= item.id
			   this.ziduan = ziduan
			   this.peiForm.auditReminderTime = ''
			   this.peiShow = true
			 },
			async peiCheck(){
			  if(this.ziduan == 'releaseCycle'){
			     await quEdit({id:this.peiId,releaseCycle:this.peiForm.auditReminderTime})
			  }else if(this.ziduan == 'deliveryCost'){
			     await quEdit({id:this.peiId,deliveryCost:this.peiForm.auditReminderTime})
			  }else{
			     await quEdit({id:this.peiId,deliveryEffect:this.peiForm.auditReminderTime})
			  }
			  this.peiShow =false
			  this.getAll()
			 },
		}
	}
</script>

<style scoped>
	.custom-tree-node {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 14px;
		padding-right: 8px;
	}

	.zhuti {
		padding: 0 20px 20px 20px;
		min-height: calc(100vh - 50px - 20px);
		background-color: #Fff;

	}




	.formSearch {
		display: flex;
		width: 100%;
		font-size: 14px;
		justify-content: space-between;
		padding-bottom: 10px;
		align-items: center;
	}

	.greens {
		color: #3F9B6A;
	}

	/deep/ .el-table__row {
		font-size: 14px;
		color: #000000e6;
	}

	.fenye {
		margin-top: 20px;
		position: relative;
	}

	/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
		background-color: #3F9B6A;
	}

	.el-row {
		margin-bottom: 20px;
	}

	:last-child {
		margin-bottom: 0;
	}

	.el-col {
		border-radius: 4px;
	}


	.grid-content {
		border-radius: 4px;
		min-height: 36px;
	}

	.row-bg {
		padding: 10px 0;
		background-color: #f9fafc;
	}

	/deep/ .el-form--label-top .el-form-item__label {
		padding: 0;
	}


	.pagination {
		text-align: right;
		line-height: 20px;
	}

	/deep/ .el-pagination__total {
		float: left;
	}

	/deep/ .bg-purple {
		background: #fff;
		height: 50px;
	}

	/deep/ .el-tabs__active-bar {
		background-color: #389865;
	}

	::v-deep .el-input__inner {
		height: 32px;
		line-height: 32px;
	}

	::v-deep .el-select .el-input.is-focus .el-input__inner {
		border-color: #3F9B6A
	}

	::v-deep .dialog_css_Xq {
		margin-top: 8vh !important;
		margin-left: 25% !important;

		.el-dialog__title {
			font-size: 14px;
			color: #000000e6;
		}

		.el-dialog__header {
			background-color: #fff;
			padding: 10px 20px;
		}
	}

	.fenlan {
		display: flex;
	}

	::v-deep .el-form-item {
		margin-bottom: 16px;
	}

	.souLei {
		border: 1px solid #d7d7d7;
		background-color: #fff;
		width: 15%;
		margin-right: 20px;

	}

	::v-deep .el-menu {
		border-right: 0px;
	}

	::v-deep .el-menu-item {
		height: 36px;
		line-height: 36px;
	}

	::v-deep .el-submenu__title {
		height: 36px;
		line-height: 36px;
		font-weight: 600;
		border-radius: 4px;
		margin: 4px 0;
	}

	::v-deep .el-menu-item-group__title {
		padding: 0px
	}

	::v-deep .fudan {
		font-weight: 600;
		border-radius: 4px;
		margin: 4px 0;
	}

	::v-deep .chinddan {
		margin: 5px 0;
	}

	::v-deep .el-tabs__item.is-active {
		color: #3F9B6A;
		opacity: 1;
	}
</style>
<style lang="scss" scoped>
	::v-deep .souTabs {
		padding: 0 15px 0 12px;

		.el-submenu {
			padding: 0px;
		}

		.el-menu-item:focus,
		.el-menu-item:hover {
			background-color: #3F9B6A !important;
		}

		.el-menu-item:hover {
			background-color: #3f9b6a1a !important;
			color: #000 !important;
		}

		.el-tabs--left .el-tabs__header.is-left {
			width: 100%;
			margin-right: 0px;
		}

		.el-tabs--left .el-tabs__item.is-left {
			text-align: center;
		}

		.el-tabs__item.is-active {
			background-color: #DEEBE2;
		}
	}

	::v-deep .tableList {
		width: 84%;

		.el-button:hover {
			border: none
		}
	}

	::v-deep .demo-input-suffix {
		display: flex;
		margin-right: 20px;
		width: 75%;

		.el-input__inner {
			height: 32px;
		}
	}

	::v-deep .buttonHover:hover {
		color: #3f9b6a !important;
		border-color: #c5e1d2 !important;
		background-color: #ecf5f0 !important;
		outline: none;
	}

	::v-deep label {
		font-weight: 100
	}

	::v-deep .xiaoguo_css {
		.el-dialog__body {
			padding: 0px !important;
		}
	}
</style>