<template>
	<div class="temp">
		<table class="tempTable" cellspacing="0" cellpadding="0" border="1">
			<tr>
				<template v-if="lq == ''">
					<td colspan="2"><span class="table-title">权利人信息</span></td>
					<td colspan="2">共有方式</td>
				</template>
				<template v-else>
					<td colspan="2">共有方式</td>
				</template>
				<td :colspan="lq == '' ? 8 : 10">
					<el-row>
						<el-col :span="14" class="fl" style="line-height:32px">
							<el-radio-group v-model="gyfs" @change="updateGyfs">
								<el-radio :label="item.bsm" :disabled="+qszt !== 0 || item.disabled" :key="item.bsm"
									v-for="item in gyfsList">{{ item.mc }}</el-radio>
							</el-radio-group>
						</el-col>
						<el-col :span="10" class="fr">
							<!--	<div  v-show="qszt=='0'" class="fr" style="margin-right:20px">
								<el-button class="qlrBtn" size="mini" @click="addRow">
									<i class="iconfont iconxinzeng"></i> 新增
								</el-button>
								<el-button class="qlrBtn" size="mini" @click="changeRow">
									<i class="iconfont iconbianji"></i> 编辑
								</el-button>
								<el-button class="qlrBtn" size="mini" @click="delRow">
									<i class="iconfont iconshanchu"></i> 删除
								</el-button>
							</div>-->
							<div v-show="+qszt === 0" class="fr" style="margin-right:20px">
								<el-button class="qlrBtn" size="mini"
									:disabled="+qszt !== 0 || (tableData.length > 0 && gyfs === 'PSHGSBDCQJDC000000000000DC340010')"
									@click="addRow">
									<i class="iconfont iconxinzeng" :disabled="+qszt !== 0"></i> 新增
								</el-button>
								<el-button class="qlrBtn" size="mini" :disabled="+qszt !== 0" @click="changeRow">
									<i class="iconfont iconbianji"></i> 编辑
								</el-button>
								<el-button class="qlrBtn" size="mini" :disabled="+qszt !== 0" @click="delRow">
									<i class="iconfont iconshanchu"></i> 删除
								</el-button>
							</div>
						</el-col>
					</el-row>
				</td>
			</tr>
		</table>

		<el-table class="qlrTable" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange"
			@row-dblclick="rowDbclick" border>
			<el-table-column type="selection" width="40" align="center">
			</el-table-column>
			<el-table-column prop="qlrmc" label="权利人名称" align="center">
			</el-table-column>
			<el-table-column prop="qlrlxbsm_dictText" label="权利人类型" align="center">
			</el-table-column>
			<el-table-column prop="zjzlbsm_dictText" label="证件种类" align="center">
			</el-table-column>
			<el-table-column prop="zjh" label="证件号" align="center">
			</el-table-column>
			<el-table-column prop="dz" label="通讯地址" align="center">
			</el-table-column>
			<el-table-column prop="dh" label="联系电话" align="center">
			</el-table-column>
		</el-table>
		<el-dialog :close-on-click-modal="false" title="权利人信息" :visible.sync="dialogVisible" custom-class="insetDialog"
			append-to-body width="50%">
			<el-form :model="formData" class="qlrForm">
				<table class="zdjbxxTable" cellspacing="0" cellpadding="0" border="1">
					<tr>
						<td colspan="4" class="tdright"><i class="requisite">*</i>权利人名称</td>
						<td colspan="6">
							<el-input v-model="formData.qlrmc" ref="qlrmc" @blur="inputBlur($event)"></el-input>
						</td>
						<td colspan="4" class="tdright"><i class="requisite">*</i>权利人类型</td>
						<td colspan="6">
							<el-select class="formSelect" v-model="formData.qlrlxbsm" ref="qlrlxbsm">
								<el-option v-for="item in $store.state.qlrlxList" :key="item.bsm" :label="item.mc" :value="item.bsm">
								</el-option>
							</el-select>
						</td>
					</tr>
					<tr>
						<td colspan="4" class="tdright"><i class="requisite">*</i>证件类型</td>
						<td colspan="6">
							<el-select class="formSelect" v-model="formData.zjzlbsm" ref="zjzlbsm">
								<el-option v-for="item in $store.state.zjzlList" :key="item.bsm" :label="item.mc" :value="item.bsm">
								</el-option>
							</el-select>
						</td>
						<td colspan="4" class="tdright"><i class="requisite">*</i>证件号</td>
						<td colspan="6">
							<el-input maxlength="18" v-model="formData.zjh" ref="zjh" @blur="inputBlur($event)"></el-input>
						</td>
					</tr>
					<tr>
						<td colspan="4" class="tdright"><i class="requisite">*</i>电话</td>
						<td colspan="6">
							<!--							@blur="inputBlur($event)"-->
							<el-input v-model="formData.dh" ref="dh" @blur="inputBlur($event)"></el-input>
						</td>
						<td colspan="4" class="tdright"><i class="requisite">*</i>地址</td>
						<td colspan="6">
							<el-input v-model="formData.dz" ref="dz" @blur="inputBlur($event)"></el-input>
						</td>
					</tr>
					<tr>
						<td colspan="4" class="tdright">国家</td>
						<td colspan="6">
							<el-select class="formSelect" v-model="formData.gjbsm">
								<el-option v-for="item in $store.state.gjList" :key="item.bsm" :label="item.mc" :value="item.bsm">
								</el-option>
							</el-select>
						</td>
						<td colspan="4" class="tdright">户籍所在省市</td>
						<td colspan="6">
							<el-select class="formSelect" v-model="formData.hjszssbsm">
								<el-option v-for="item in $store.state.ssList" :key="item.bsm" :label="item.mc" :value="item.bsm">
								</el-option>
							</el-select>
						</td>
					</tr>
					<tr>
						<td colspan="4" class="tdright">性别</td>
						<td colspan="6">
							<el-select class="formSelect" v-model="formData.xbbsm">
								<el-option v-for="item in $store.state.xbList" :key="item.bsm" :label="item.mc" :value="item.bsm">
								</el-option>
							</el-select>
						</td>
						<td colspan="4" class="tdright">邮编</td>
						<td colspan="6">
							<el-input v-model="formData.yb" />
						</td>
					</tr>
					<tr>
						<td colspan="4" class="tdright">所属行业</td>
						<td colspan="6">
							<el-select class="formSelect" v-model="formData.sshy">
								<el-option v-for="item in $store.state.sshyList" :key="item.bsm" :label="item.mc" :value="item.bsm">
								</el-option>
							</el-select>
						</td>
						<td colspan="4" class="tdright">电子邮件</td>
						<td colspan="6">
							<el-input v-model="formData.dzyj" />
						</td>
					</tr>
					<tr>
						<th colspan="20">法人信息</th>
					</tr>
					<tr>
						<td colspan="4" class="tdright">法定代表人或负责人姓名</td>
						<td colspan="6">
							<el-input v-model="formData.fr.dlrfrmc" />
						</td>
						<td colspan="4" class="tdright">证件类型</td>
						<td colspan="6">
							<el-select class="formSelect" v-model="formData.fr.zjzlbsm">
								<el-option v-for="item in $store.state.zjzlList" :key="item.bsm" :label="item.mc" :value="item.bsm">
								</el-option>
							</el-select>
						</td>
					</tr>
					<tr>
						<td colspan="4" class="tdright">证件号码</td>
						<td colspan="6">
							<el-input v-model="formData.fr.zjh" />
						</td>
						<td colspan="4" class="tdright">电话</td>
						<td colspan="6">
							<el-input v-model="formData.fr.dh" />
						</td>
					</tr>
					<tr>
						<th colspan="20">代理人信息</th>
					</tr>
					<template v-for="(item, index) in formData.dlrList">
						<tr :key="item.index">
							<td :rowspan="(formData.dlrList.length - 1) * 2 + 2" v-if="index == 0" class="btnCol">
								<span :style="{ 'padding-top': (formData.dlrList.length - 1) * 36 + 20 + 'px' }">
									<i v-show="index == 0" class="iconfont iconicon-test2" @click="handleClick(item, index, 'add')"></i>
								</span>
								<!-- <div class="line" v-show=" index != formData.dlrList.length-1"></div> -->
							</td>
							<td rowspan="2" class="minusBtnCol">
								<span>
									<i class="iconfont icon-" @click="handleClick(item, index, 'minus')"></i>
								</span>
							</td>
							<td class="tdright" colspan="2">代理人姓名</td>
							<td colspan="6">
								<el-input v-model="item.dlrfrmc" />
							</td>
							<td colspan="4" class="tdright">证件类型</td>
							<td colspan="6">
								<el-select class="formSelect" v-model="item.zjzlbsm">
									<el-option v-for="item in $store.state.zjzlList" :key="item.bsm" :label="item.mc" :value="item.bsm">
									</el-option>
								</el-select>
							</td>
						</tr>
						<!--						<tr :key="item.dh">-->
						<tr :key="'dh' + index">
							<td class="tdright" colspan="2">证件号码</td>
							<td colspan="6">
								<el-input v-model="item.zjh" />
							</td>
							<td colspan="4" class="tdright">电话</td>
							<td colspan="6">
								<el-input v-model="item.dh" />
							</td>
						</tr>
					</template>

					<tr>
						<th colspan="20">权利信息</th>
					</tr>
					<tr>
						<td colspan="4" class="tdright">共有方式</td>
						<td colspan="6">
							<el-select class="formSelect" v-model="formData.gyfsbsm" disabled>
								<el-option v-for="item in $store.state.gyfsList" :key="item.bsm" :label="item.mc" :value="item.bsm">
								</el-option>
							</el-select>
						</td>
						<td colspan="4" class="tdright">权利比例(%)</td>
						<td colspan="6">
							<el-input v-model="formData.qlbl"></el-input>
						</td>
					</tr>
					<tr>
						<td colspan="4" class="tdright">房产证号</td>
						<td colspan="6">
							<el-input v-model="formData.fczh"></el-input>
						</td>
						<td colspan="4" class="tdright">土地证号</td>
						<td colspan="6">
							<el-input v-model="formData.tdzh"></el-input>
						</td>
					</tr>
					<tr>
						<td colspan="4" class="tdright">共有情况</td>
						<td colspan="12">
							<el-input v-model="formData.gyqk"></el-input>
						</td>
					</tr>
				</table>
			</el-form>
			<div class="dialog-footer">
				<el-button type="primary" @click="addNewQlrInfo">确 定</el-button>
				<el-button @click="dialogVisible = false">取 消</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
// import { getDdicByMC } from "@api/common";
// import { insertQlrDlrFr, getQlrInfoByGlbsm, updateQlrDlrFr, deleteQlrDlrFrByQlrbsm, updateGyGyQlrQk, getQlrByGlbsmAndType } from "@api/qlr";

export default {
	props: {
		qszt: {
			type: String,
			default: "0",
		},
		title: {
			type: String,
			default: "",
		},
		topHeight: {
			type: String,
			default: "15vh",
		},
		bsm: {
			type: String,
			default: "",
		},
		type: {
			type: String,
			default: "",
		},
		lq: {
			type: String,
			default: "",
		}
	},
	data () {
		return {
			update: false,
			gyfs: this.$store.state.gyfsList[0].bsm,
			tableData: [],
			gyfsList: [],
			//表格选中项
			multipleSelection: [],
			dialogVisible: false,
			formData: {
				addQjDlrFrRequest: [],
				dlrList: [
					{
						dh: "",
						dlrfrmc: "",
						qlrbsm: "",
						zjh: "",
						zjzlbsm: "",
					},
				],
				fr: {
					dh: "",
					dlrfrmc: "",
					qlrbsm: "",
					zjh: "",
					zjzlbsm: "",
				},
				bz: "",
				dh: "",
				dz: "",
				dzyj: "",
				fczh: "",
				fzjg: "",
				gjbsm: "PSHGSBDCQJDC000000000000DC350010", //默认中国
				glbsm: "",
				gyfsbsm: "",
				gyqk: "",
				gzdw: "",
				hjszssbsm: "",
				isdel: 0,
				qlbl: "",
				qlrlxbsm: "",
				qlrmc: "",
				sshy: "",
				sxh: 0,
				tdzh: "",
				xbbsm: "",
				yb: "",
				zjh: "",
				zjzlbsm: "",
				lqqlrtype: ""
			},
			glbsm: '',
			rules: [],
		};
	},
	methods: {
		inputBlur (e) {
			if (e.target.value != '') {
				e.target.style.border = ""
			} else {
				e.target.style.border = "1px solid red";
				e.target.style.boxSizing = 'border-box';
			}
		},

		//新增行数据
		addRow () {

			console.log(this.gyfs, '共有方式')

			this.update = false;
			let flag = false;
			for (let i = 0; i < this.$store.state.gyfsList.length; i++) {
				let item = this.$store.state.gyfsList[i];
				if (item.mc === "单独所有" && item.bsm === this.gyfs) {
					flag = true;
				}
			}
			if (flag) {
				if (this.tableData.length > 0) {
					this.$message({
						message: "当前方式不可再新增权利人",
						type: "warning",
					});
				} else {
					this.formData.gyfsbsm = this.gyfs;
					this.dialogVisible = true;
				}
			} else {
				this.formData.gyfsbsm = this.gyfs;
				this.dialogVisible = true;
			}
		},
		//确认权利人信息按钮；可以进行新增；可以进行更新；
		addNewQlrInfo () {

			this.rules = [
				{
					data: this.formData.qlrmc,
					name: '权利人名称',
					dom: this.$refs.qlrmc,
					rule: /^\s*$/g, //非空
				},
				{
					data: this.formData.qlrlxbsm,
					name: '权利人类型',
					dom: this.$refs.qlrlxbsm,
					rule: /^\s*$/g, //非空
				},
				{
					data: this.formData.zjzlbsm,
					name: '证件类型',
					dom: this.$refs.zjzlbsm,
					rule: /^\s*$/g, //非空
				},
				{
					data: this.formData.zjh,
					name: '证件号',
					dom: this.$refs.zjh,
					rule: /^\s*$/g, //非空
				},
				{
					data: this.formData.dh,
					name: '电话',
					dom: this.$refs.dh,
					rule: /^\s*$/g, //非空
				},
				{
					data: this.formData.dz,
					name: '地址',
					dom: this.$refs.dz,
					rule: /^\s*$/g, //非空
				},
			]
			let flag = true;
			this.rules.forEach(item => {
				if (item.rule.test(item.data) || item.data == null) {
					if (item.dom.$el) {
						item.dom.$el.style.border = '1px solid red';
						item.dom.$el.style.boxSizing = 'border-box';
					} else {
						item.dom.style.border = '1px solid red';
						item.dom.style.boxSizing = 'border-box';
					}
					flag = false;
					return false
				}
				console.log(this.tableData, '权利人信息')
				console.log(this.$store.state.gyfsList[0].bsm, '确定之后共有方式')
			})
			this.$nextTick(() => {
				if (flag) {
					//todo 权利人页面调整
					this.formData.addQjDlrFrRequest = [];
					this.formData.glbsm = this.bsm;
					//将代理人，法人数据合在一起，名称为addQjDlrFrRequest；
					//法人的type字段类型为0,
					this.formData.fr.type = 0;
					this.formData.addQjDlrFrRequest.push(this.formData.fr);
					for (let k = 0; k < this.formData.dlrList.length; k++) {
						//代理人的type字段类型为1,
						this.formData.dlrList[k].type = 1;
						this.formData.addQjDlrFrRequest.push(this.formData.dlrList[k]);
					}
					//林权权利人类型判断
					this.formData.lqqlrtype = this.lq;
					//如果是从更新按钮点击确定的则进行更新操作，如果不是，则进行添加操作
					if (this.update) {
						console.log(this.formData)
						updateQlrDlrFr(this.formData).then((res) => {
							if (res.code === 200) {
								this.dialogVisible = false;
								this.$message.success("修改完成！");
								this.getQlrInfo(this.bsm);
								this.update = false;
							}
						})
					} else {
						insertQlrDlrFr(this.formData).then((res) => {
							if (res.code === 200) {
								this.dialogVisible = false;
								this.tableData.push(this.formData);
								this.getQlrInfo(this.bsm);
								Object.assign(this.$data, this.$options.data())

							}
						})
					}
				}
			})


		},
		//修改行数据
		changeRow () {
			if (this.multipleSelection.length === 1) {
				this.dialogVisible = true;
				this.update = true;
				this.formData = this.multipleSelection[0];
				if (this.multipleSelection[0].frList.length > 0) {
					this.formData.fr = this.multipleSelection[0].frList[0];
				}
			} else {
				this.$message({
					message: "请选择一条信息后继续操作",
					type: "warning",
				});
			}
		},

		updateGyfs (val) {
			console.log(val, this.type)
			updateGyGyQlrQk(this.bsm, this.type, val).then((res) => {
				if (res.code === 200) {
					console.log("修改完成！")
					//todo 修改该建筑物的所有权利人的相关共有方式
				}
			})
		},

		//父组件改变子组件的共有方式
		changeGyfs (val) {
			this.gyfs = val;
		},

		//行双击事件
		rowDbclick (row) {
			if (+this.qszt == 0) {
				this.dialogVisible = true;
				this.update = true;
				this.formData = row;
				if (row.frList.length > 0) {
					this.formData.fr = row.frList[0];
				}
			}
		},

		// inputBlur(e){
		// 	if(e.target.value!=''){
		// 		console.log(e.target.value)
		// 		console.log(!(/^1(3|4|5|6|7|8|9)d{9}$/.test(e.target.value)))
		// 		if(!(/^1(3|4|5|6|7|8|9)d{9}$/.test(e.target.value))){
		// 			e.target.style.border="1px solid red";
		// 			e.target.style.boxSizing = 'border-box';
		// 		}else {
		// 			e.target.style.border=""
		// 		}
		// 	}else{
		// 		e.target.style.border="1px solid red";
		// 		e.target.style.boxSizing = 'border-box';
		// 	}
		// },

		//删除行数据
		delRow () {
			if (this.multipleSelection.length > 0) {
				let qlrbsms = [];
				for (let i = 0; i < this.multipleSelection.length; i++) {
					qlrbsms.push(this.multipleSelection[i].qlrbsm)
				}
				console.log(qlrbsms)
				deleteQlrDlrFrByQlrbsm(qlrbsms).then((res) => {
					if (res.code === 200) {
						this.$message.success("删除完成！")
						this.getQlrInfo(this.bsm);
					}
				})
			} else {
				this.$message({
					message: "请至少选择一条信息后继续操作",
					type: "warning",
				});
			}
		},
		//选中表格某一项
		handleSelectionChange (val) {
			this.multipleSelection = val;
		},

		//供父组件调用来获取共有方式
		getQlgyfsData () {
			return this.gyfs;
		},
		//供父组件调用来获取权利人表格数据
		getQlrxxData () {
			return this.tableData;
		},
		//增删代理人
		handleClick (obj, ind, type) {
			if (type === "add") {
				this.formData.dlrList.push({
					id: Math.random(),
					dh: "",
					dlrfrmc: "",
					qlrbsm: "",
					zjh: "",
					zjzlbsm: "",
				});
			} else {
				this.formData.dlrList.forEach((item, index) => {
					if (index == ind && this.formData.dlrList.length > 1) {
						this.formData.dlrList.splice(ind, 1);
					}
				});
			}
		},
		getQlrInfo (bsm) {
			if (this.lq == "") {
				getQlrInfoByGlbsm(bsm).then((res) => {
					if (res.code) {
						if (res.result != null) {
							this.tableData = res.result;
							if (this.tableData.length === 0) {
								this.gyfs = this.$store.state.gyfsList[0].bsm;
							} else {
								this.gyfs = res.result[0].gyfsbsm;
							}
						}
					}
				})
			} else {
				let params = {
					bsm: bsm,
					type: this.lq
				}
				getQlrByGlbsmAndType(params).then((res) => {
					if (res.code) {
						if (res.result != null) {
							this.tableData = res.result;
							if (this.tableData.length === 0) {
								this.gyfs = this.$store.state.gyfsList[0].bsm;
							} else {
								this.gyfs = res.result[0].gyfsbsm;
							}
						}
					}
				})
			}
		}
	},
	created () {
		this.gyfsList = this.$store.state.gyfsList;
	},
	mounted () {
		this.getQlrInfo(this.bsm);
	},
	watch: {
		tableData: {
			handler: function (v) {
				this.gyfsList[0].disabled = v.length > 1;
			},
			deep: true
		},
		dialogVisible (n) {
			if (n === false) {
				this.formData = {
					addQjDlrFrRequest: [],
					dlrList: [
						{
							dh: "",
							dlrfrmc: "",
							qlrbsm: "",
							zjh: "",
							zjzlbsm: "",
						},
					],
					fr: {
						dh: "",
						dlrfrmc: "",
						qlrbsm: "",
						zjh: "",
						zjzlbsm: "",
					},
					bz: "",
					dh: "",
					dz: "",
					dzyj: "",
					fczh: "",
					fzjg: "",
					gjbsm: "PSHGSBDCQJDC000000000000DC350010", //默认中国
					glbsm: "",
					gyfsbsm: "",
					gyqk: "",
					gzdw: "",
					hjszssbsm: "",
					isdel: 0,
					qlbl: "",
					qlrlxbsm: "",
					qlrmc: "",
					sshy: "",
					sxh: 0,
					tdzh: "",
					xbbsm: "",
					yb: "",
					zjh: "",
					zjzlbsm: "",
				}
			}
		},

		"formData.qlrlxbsm": function (val) {
			if (val != '') {
				this.$refs.qlrlxbsm.$el.style.border = '';
			}
		},
	}
};
</script>
<style  lang="scss">
.temp {
	width: 100%;

	table {
		border-bottom: 0;
		background-color: #fff;
		font-size: 14px;
		width: 100%;
		table-layout: fixed;

		.qlrBtn {
			border: 0;
			font-size: 14px;
		}

		.qlrBtn:hover {
			background-color: none !important;
		}

		.iconfont {
			font-size: 14px !important;
		}

		.span {
			color: #409eff;
			margin-right: 10px;
			cursor: pointer;
		}

		.noEdit {
			color: #606266;
			margin-right: 10px;
			cursor: not-allowed;
		}

		.el-radio {
			margin-right: 20px !important;
		}

		td {
			text-align: center;
			padding: 8px 0;
		}
	}

	.table-title {
		font-weight: 700;
		font-size: 15px;
	}

	.el-table th {
		background-color: #fff !important;
	}

	el-table td,
	.el-table th.is-leaf,
	.el-table--border,
	.el-table--group {
		border-color: black;
	}

	.el-table--border::after,
	.el-table--group::after,
	.el-table::before {
		background-color: rgba(0, 0, 0, 0);
	}

	.el-table--border td,
	.el-table--border th,
	.el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
		border-right: 1px solid#E6E6E6;
	}

	.el-table td,
	.el-table th {
		padding: 12px 0;
		color: #333 !important;
		font-weight: normal;
	}

	.el-table td,
	.el-table th.is-leaf {
		border-bottom: 1px solid#E6E6E6;
		border-color: #E6E6E6 !important;
	}

	.qlrTable {
		border-color: #E6E6E6 !important;
		border-bottom: 0;
		border-right: 0;
		position: relative;
		top: -1px;

		.el-input__inner {
			height: 20px;
			margin: 0;
			line-height: 20px;
			outline: none;
			border: none;
			color: #606764;
			overflow: visible;
			cursor: text;
			text-align: center;
		}
	}
}

.insetDialog {
	.qlrForm {
		height: 500px;
		overflow-y: scroll;
	}

	.zdjbxxTable {
		margin: 10px 0;
		background-color: #fff;
		font-size: 14px;
		width: 100%;
		border-bottom: 1px solid #000;

		.btnCol,
		.minusBtnCol {
			position: relative;
			padding-right: 0;

			span {
				display: inline-block;
				width: 100%;
				height: 100%;
				position: relative;
				box-sizing: border-box;
				padding-right: 10px;
				padding-top: 20px;
			}

			.line {
				width: 100%;
				height: 2px;
				background: #fff;
			}

			i {
				color: #66b1ff;
				font-size: 30px;
				cursor: pointer;
				z-index: 1;
			}
		}

		.minusBtnCol {
			i {
				color: #FA6400;
			}
		}

		th {
			height: 36px;
			line-height: 36px;
		}

		td {
			text-align: right;
			height: 36px;
		}

		/deep/.el-input__inner {
			margin: 0;
			height: 36px;
			outline: none;
			border: none;
			color: #606764;
			overflow: visible;
			text-align: left;
			cursor: text;
		}

		.percent68 {
			width: 68% !important;
			float: left;
			position: relative;
			top: 7px;
		}

		.percent30 {
			width: 30% !important;
			float: left;
		}

		.el-input__icon {
			line-height: 37px;
		}

		.el-select {
			width: 100%;
		}
	}

	.dialog-footer {
		width: 160px;
		margin: 20px auto 0;
	}
}
</style>