<template>
	<div class="full-page bg wrap-page">
		<div class="page-left" style="padding: 20px">
			<tree :data="treeData" @node-click="handleNodeClick" @loadTree="loadDataTree" />
		</div>
		<div class="page-right">
			<div class="search-container">
				<el-form ref="form" :model="searchForm" label-width="68px">
					<el-row :gutter="20">
						<el-col :span="5">
							<el-form-item :label="$t('overseasEnterpriseInfo.name')">
								<el-input v-model="searchForm.name" clearable :placeholder="this.$t('common.input')">
									<el-button slot="append" icon="el-icon-search" @click="handleSearch"></el-button>
								</el-input>
							</el-form-item>
						</el-col>
						<el-col :span="5">
							<el-form-item :label="$t('overseasEnterpriseInfo.businessType')" :label-width="
				                    $i18n.locale === 'zh-CN' ? '' : '120px'
				                ">
								<el-select v-model="searchForm.businessType" :placeholder="this.$t('common.select')"  @change="handleSearch"
									 clearable>
									<el-option v-for="item in jylxList" :key="item.value" :label="item.name"
										:value="item.value">
									</el-option>
								</el-select>
								<!-- <dict-select :dictCode="
				                        $i18n.locale === 'zh-CN'
				                            ? 'jylx'
				                            : 'jylx_en'
				                    " :hasDefaultOption="true" clearable v-model="searchForm.businessType" style="width: 100%"
									@change="handleSearch" :placeholder="$t('common.select')" /> -->
							</el-form-item>
						</el-col>
						<el-col :span="5">
							<el-form-item :label="$t('overseasEnterpriseInfo.continent')" :label-width="
				                    $i18n.locale === 'zh-CN' ? '' : '80px'
				                ">
								<el-select v-model="searchForm.continent" :placeholder="this.$t('common.select')"  @change="handleSearch"
									 clearable>
									<el-option v-for="item in zbList" :key="item.value" :label="item.name"
										:value="item.value">
									</el-option>
								</el-select>
								<!-- <dict-select :dictCode="
				                        $i18n.locale === 'zh-CN' ? 'zb' : 'zb_en'
				                    " :hasDefaultOption="true" clearable v-model="searchForm.continent" style="width: 100%"
									@change="handleSearch" :placeholder="$t('common.select')" /> -->
							</el-form-item>
						</el-col>
						<el-col :span="5">
							<el-form-item :label="$t('overseasEnterpriseInfo.country')" :label-width="
				                    $i18n.locale === 'zh-CN' ? '' : '120px'
				                ">
								<el-select v-model="searchForm.country" :placeholder="this.$t('common.select')"  @change="handleSearch"
									 clearable>
									<el-option v-for="item in gjList" :key="item.value" :label="item.name"
										:value="item.value">
									</el-option>
								</el-select>
								<!-- <dict-select :dictCode="
				                        $i18n.locale === 'zh-CN' ? 'gj' : 'gj_en'
				                    " :hasDefaultOption="true" clearable v-model="searchForm.country" style="width: 100%"
									:change="handleSearch" :placeholder="$t('common.select')" /> -->
							</el-form-item>
						</el-col>
						<!-- <el-col :span="2">
							<el-button icon="el-icon-search" type="primary" class="btn btn-plus" @click="handleSearch">
								{{ this.$t('common.search') }}
							</el-button>
						</el-col> -->
					</el-row>
				</el-form>
			</div>
			<div class="page-container" ref="contentPanel" style="padding: 20px">
				<div style="margin-bottom: 10px" ref="btnPanel">
					<el-button icon="el-icon-plus" type="primary" class="btn btn-plus" @click="handleAdd">
						{{ this.$t('common.add') }}
					</el-button>
					<el-button slot="reference" icon="el-icon-delete" type="danger" class="btn btn-delete"
						:disabled="!deleteIds" @click="handleDelete">
						{{ this.$t('common.delete') }}
					</el-button>
					<el-button icon="el-icon-sort" @click="savePropertyf" type="success">
						{{ $t('common.savesort') }}
					</el-button>
					<el-button icon="el-icon-setting" @click="editTree" type="warning">
						{{ $t('international.moveCompany') }}
					</el-button>
				</div>
				<div :style="{width: '100%', height: `${tableMaxHeight}` + 'px'}">
					<el-table stripe size="mini" v-loading="loading" ref="multipleSelection" :data="tableData"
						:cell-style="{ textAlign: 'center' }" :max-height="tableMaxHeight" :style="{width: '100%'}"
						:header-cell-style="{'text-align': 'center'}" @selection-change="handleSelectionChange">
						<el-table-column type="selection" width="55" align="center"></el-table-column>
						<el-table-column show-overflow-tooltip prop="code" :label="$t('overseasEnterpriseInfo.code')">
						</el-table-column>
						<el-table-column show-overflow-tooltip prop="name" width="160"
							:label="$t('overseasEnterpriseInfo.name')">
							<template v-if="$i18n.locale === 'zh-CN'" v-slot="{row}">
								{{ row.name }}
							</template>
							<template v-else v-slot="{row}">
								{{ row.nameEn }}
							</template>
						</el-table-column>
						<el-table-column show-overflow-tooltip prop="shortName" width="160"
							:label="$t('overseasEnterpriseInfo.shortName')">

						</el-table-column>
						<el-table-column show-overflow-tooltip prop="businessType"
							:label="$t('overseasEnterpriseInfo.businessType')">
							<template v-if="$i18n.locale === 'zh-CN'" v-slot="{row}">
								{{ getDictName('jylx', row.businessType) }}
							</template>
							<template v-else v-slot="{row}">
								{{ getDictName('jylx_en', row.businessType) }}
							</template>
						</el-table-column>
						<el-table-column show-overflow-tooltip prop="continent"
							:label="$t('overseasEnterpriseInfo.continent')">
							<template v-if="$i18n.locale === 'zh-CN'" v-slot="{row}">
								{{ getDictName('zb', row.continent) }}
							</template>
							<template v-else v-slot="{row}">
								{{ getDictName('zb_en', row.continent) }}
							</template>
						</el-table-column>
						<el-table-column show-overflow-tooltip prop="country"
							:label="$t('overseasEnterpriseInfo.country')">
							<template v-if="$i18n.locale === 'zh-CN'" v-slot="{row}">
								{{ getDictName('gj', row.country) }}
							</template>
							<template v-else v-slot="{row}">
								{{ getDictName('gj_en', row.country) }}
							</template>
						</el-table-column>
						<el-table-column show-overflow-tooltip prop="city" width="100"
							:label="$t('overseasEnterpriseInfo.city')">
						</el-table-column>
						<el-table-column show-overflow-tooltip prop="liableUser"
							:label="$t('overseasEnterpriseInfo.liableUser')">
						</el-table-column>
						<el-table-column show-overflow-tooltip prop="buildDate"
							:label="$t('overseasEnterpriseInfo.buildDate')">
						</el-table-column>
						<el-table-column prop="sn" show-overflow-tooltip width="120"
							:label="$t('international.sortnumber')">
							<template slot-scope="scope">
								<el-input-number controls-position="right" size="small" @input="insort(scope.row)"
									v-model="scope.row.sn" style="width: 100px">
								</el-input-number>
							</template>
						</el-table-column>
						<el-table-column show-overflow-tooltip prop="runStatus"
							:label="$t('overseasEnterpriseInfo.runStatus')">
							<template v-if="$i18n.locale === 'zh-CN'" v-slot="{row}">
								<span v-if="row.runStatus == 0">{{
				                        getDictName('qyjyzt', row.runStatus)
				                    }}</span>
								<span v-else style="color: #67c23a">{{
				                        getDictName('qyjyzt', row.runStatus)
				                    }}</span>
							</template>
							<template v-else v-slot="{row}">
								<span v-if="row.runStatus == 0">{{
				                        getDictName('qyjyzt_en', row.runStatus)
				                    }}</span>
								<span v-else style="color: #67c23a">{{
				                        getDictName('qyjyzt_en', row.runStatus)
				                    }}</span>
							</template>
						</el-table-column>
						<el-table-column show-overflow-tooltip fixed="right">
							<template slot="header">
								{{ $t('common.operation') }}
							</template>
							<template slot-scope="scope">
								<el-link icon="el-icon-edit" type="primary" :underline="false" class="cloumn-btn"
									@click="handleDbClick(scope.row)">
									{{ $t('common.edit') }}
								</el-link>
							</template>
						</el-table-column>
					</el-table>
				</div>
				<pagination ref="paginationPanel" style="margin-top: 5px" :pageResult="params.pageBean"
					@size-change="handleSizeChange" @current-change="handleCurrentChange" />
			</div>
		</div>

		<!-- 弹层 -->
		<el-dialog :title="dialog.title" :visible.sync="dialog.visible" width="50%" :before-close="handleDialogClose"
			:close-on-click-modal="false">
			<el-form ref="form" :model="dialogForm" :rules="dialogForm.type == 1 ? dialogRules : dialogRules2"
				label-width="80px" label-position="top">
				<el-row :gutter="20">
					<el-col :span="8">
						<el-form-item :label="$t('overseasEnterpriseInfo.code')" prop="code">
							<el-input v-model="dialogForm.code" :placeholder="
                                    $t('overseasEnterpriseInfo.input') +
                                    $t('overseasEnterpriseInfo.code')
                                "></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item :label="$t('overseasEnterpriseInfo.name')" prop="name">
							<el-input v-model="dialogForm.name" :placeholder="
                                    $t('overseasEnterpriseInfo.input') +
                                    $t('overseasEnterpriseInfo.name')
                                "></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item :label="$t('overseasEnterpriseInfo.nameEn')" prop="nameEn">
							<el-input v-model="dialogForm.nameEn" :placeholder="
                                    $t('overseasEnterpriseInfo.input') +
                                    $t('overseasEnterpriseInfo.nameEn')
                                "></el-input>
						</el-form-item>
					</el-col>

				</el-row>
				<el-row :gutter="20">
					<el-col :span="8">
						<el-form-item :label="$t('overseasEnterpriseInfo.shortName')" prop="shortName">
							<el-input v-model="dialogForm.shortName" :placeholder="
					                $t('overseasEnterpriseInfo.input') +
					                $t('overseasEnterpriseInfo.shortName')
					            "></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item :label="$t('overseasEnterpriseInfo.type')" prop="type">
							<dict-select :dictCode="
                                    $i18n.locale === 'zh-CN'
                                        ? 'qylx'
                                        : 'qylx_en'
                                " :hasDefaultOption="true" clearable v-model="dialogForm.type" style="width: 100%"
								:placeholder="
                                    $t('overseasEnterpriseInfo.select') +
                                    $t('overseasEnterpriseInfo.type')
                                " />
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item :label="$t('overseasEnterpriseInfo.businessType')" prop="businessType">
							<dict-select :dictCode="
                                    $i18n.locale === 'zh-CN'
                                        ? 'jylx'
                                        : 'jylx_en'
                                " :hasDefaultOption="true" clearable v-model="dialogForm.businessType"
								style="width: 100%" :placeholder="
                                    $t('overseasEnterpriseInfo.select') +
                                    $t('overseasEnterpriseInfo.businessType')
                                " />
						</el-form-item>
					</el-col>

				</el-row>
				<el-row :gutter="20">
					<el-col :span="8">
						<el-form-item :label="$t('overseasEnterpriseInfo.liableUser')" prop="liableUser">
							<el-input v-model="dialogForm.liableUser" :placeholder="
					                $t('overseasEnterpriseInfo.input') +
					                $t('overseasEnterpriseInfo.liableUser')
					            "></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item :label="$t('overseasEnterpriseInfo.continent')" prop="continent">
							<dict-select :dictCode="
                                    $i18n.locale === 'zh-CN' ? 'zb' : 'zb_en'
                                " :hasDefaultOption="true" clearable v-model="dialogForm.continent" style="width: 100%"
								:placeholder="
                                    $t('overseasEnterpriseInfo.select') +
                                    $t('overseasEnterpriseInfo.continent')
                                " />
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item :label="$t('overseasEnterpriseInfo.country')" prop="country">
							<dict-select :dictCode="
                                    $i18n.locale === 'zh-CN' ? 'gj' : 'gj_en'
                                " :hasDefaultOption="true" clearable v-model="dialogForm.country" style="width: 100%"
								:placeholder="
                                    $t('overseasEnterpriseInfo.select') +
                                    $t('overseasEnterpriseInfo.country')
                                " />
						</el-form-item>
					</el-col>

				</el-row>
				<el-row :gutter="20">
					<el-col :span="8">
						<el-form-item :label="$t('overseasEnterpriseInfo.buildDate')" prop="buildDate">
							<el-date-picker v-model="dialogForm.buildDate" type="date" format="yyyy-MM-dd"
								value-format="yyyy-MM-dd" :placeholder="
					                $t('overseasEnterpriseInfo.select') +
					                $t('overseasEnterpriseInfo.buildDate')
					            ">
							</el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item :label="$t('overseasEnterpriseInfo.city')" prop="city">
							<el-input v-model="dialogForm.city" :placeholder="
                                    $t('overseasEnterpriseInfo.input') +
                                    $t('overseasEnterpriseInfo.city')
                                "></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item :label="$t('overseasEnterpriseInfo.runStatus')" prop="runStatus">
							<dict-select :dictCode="
                                    $i18n.locale === 'zh-CN'
                                        ? 'qyjyzt'
                                        : 'qyjyzt_en'
                                " :hasDefaultOption="true" clearable v-model="dialogForm.runStatus" style="width: 100%"
								:placeholder="
                                    $t('overseasEnterpriseInfo.select') +
                                    $t('overseasEnterpriseInfo.runStatus')
                                " />
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item :label="$t('overseasEnterpriseInfo.memo')" prop="memo">
							<el-input type="textarea" rows="4" v-model="dialogForm.memo" :placeholder="
                                    $t('overseasEnterpriseInfo.input') +
                                    $t('overseasEnterpriseInfo.memo')
                                "></el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submit">
					{{ $t('common.save') }}
				</el-button>
				<el-button @click="dialog.visible = false">
					{{ $t('common.cancel') }}
				</el-button>
			</span>
		</el-dialog>
		<EnterpriseTree ref="enterpriseTree" @getData="callData" class="enterprise-tree" />
	</div>
</template>

<script>
	import tree from '@/components/tree'
	import pagination from '@/components/pagination'
	import {
		TableMixin
	} from '@/mixins/tableMixin'
	import dictUtils from '@/components/dict/DictSelectUtils.js'
	import EnterpriseTree from './components/EnterpriseTree.vue'
	import req from '@/request.js'
	import utils from '@/utils.js'
	const portal = window.context.portal
	export default {
		name: 'OverseasEnterpriseInfo',
		mixins: [TableMixin],
		components: {
			tree,
			pagination,
			EnterpriseTree,
		},
		data() {
			return {
				loading: false,
				tableMaxHeight: 400,
				treeData: [],
				searchForm: {
					name: '',
				},
				tableData: [],
				params: {
					pageBean: {
						page: 1,
						pageSize: 20,
						total: 0,
					},
				},
				pageResult: {
					page: 1,
					pageSize: 20,
					total: 0,
				},
				deleteIds: '',
				dialog: {
					visible: false,
					title: this.$t('common.add'),
				},
				dialogForm: {
					parentId: 0,
					runStatus: 1,
					economyType: 1,
					country: 0,
					continent: 0,
					businessType: 1,
					type: 1,
				},
				dialogRules: {
					name: {
						required: true,
						message: this.$t('overseasEnterpriseInfo.input') +
							this.$t('overseasEnterpriseInfo.name'),
						trigger: 'blur',
					},
					code: {
						required: true,
						message: this.$t('overseasEnterpriseInfo.input') +
							this.$t('overseasEnterpriseInfo.code'),
						trigger: 'blur',
					},
					nameEn: {
						required: true,
						message: this.$t('overseasEnterpriseInfo.input') +
							this.$t('overseasEnterpriseInfo.nameEn'),
						trigger: 'blur',
					},
					shortName: {
						required: true,
						message: this.$t('overseasEnterpriseInfo.input') +
							this.$t('overseasEnterpriseInfo.shortName'),
						trigger: 'blur',
					},
					city: {
						required: true,
						message: this.$t('overseasEnterpriseInfo.input') +
							this.$t('overseasEnterpriseInfo.city'),
						trigger: 'blur',
					},
					country: {
						required: true,
						message: this.$t('overseasEnterpriseInfo.input') +
							this.$t('overseasEnterpriseInfo.country'),
						trigger: 'blur',
					},
					continent: {
						required: true,
						message: this.$t('overseasEnterpriseInfo.input') +
							this.$t('overseasEnterpriseInfo.continent'),
						trigger: 'blur',
					},
					runStatus: {
						required: true,
						message: this.$t('overseasEnterpriseInfo.select') +
							this.$t('overseasEnterpriseInfo.runStatus'),
						trigger: 'blur',
					},
					economyType: {
						required: true,
						message: this.$t('overseasEnterpriseInfo.select') +
							this.$t('overseasEnterpriseInfo.economyType'),
						trigger: 'blur',
					},
					businessType: {
						required: true,
						message: this.$t('overseasEnterpriseInfo.select') +
							this.$t('overseasEnterpriseInfo.businessType'),
						trigger: 'blur',
					},
					type: {
						required: true,
						message: this.$t('overseasEnterpriseInfo.select') +
							this.$t('overseasEnterpriseInfo.type'),
						trigger: 'blur',
					},
				},
				dialogRules2: {
					name: {
						required: true,
						message: this.$t('overseasEnterpriseInfo.input') +
							this.$t('overseasEnterpriseInfo.name'),
					},
					code: {
						required: true,
						message: this.$t('overseasEnterpriseInfo.input') +
							this.$t('overseasEnterpriseInfo.code'),
					},
					nameEn: {
						required: true,
						message: this.$t('overseasEnterpriseInfo.input') +
							this.$t('overseasEnterpriseInfo.nameEn'),
					},
					type: {
						required: true,
						message: this.$t('overseasEnterpriseInfo.select') +
							this.$t('overseasEnterpriseInfo.type'),
					},
				},
				sortList: {},
				jylxList:[],
				zbList:[],
				gjList:[]
			}
		},
		created() {
			if (this.$i18n.locale === 'zh-CN') {
				this.jylxList = dictUtils.getDictItemsFromCache('jylx')
				this.zbList = dictUtils.getDictItemsFromCache('zb')
				this.gjList = dictUtils.getDictItemsFromCache('gj')

			} else {
				this.jylxList = dictUtils.getDictItemsFromCache('jylx_en')
				this.zbList = dictUtils.getDictItemsFromCache('zb_en')
				this.gjList = dictUtils.getDictItemsFromCache('gj_en')
			}

			this.loadData(this.params)
			this.loadDataTree()
		},
		methods: {
			//修改树
			editTree() {
				this.$refs.enterpriseTree.add()
			},
			//排序
			insort(val) {
				let id = val.id
				let value = val.sn
				this.sortList[id] = value
			},
			// 保存排序
			savePropertyf() {
				this.$confirm(this.$t('common.sureSort'), this.$t('common.tips'), {
						confirmButtonText: this.$t('common.confirm'),
						cancelButtonText: this.$t('common.cancel'),
						type: 'warning',
					})
					.then(() => {
						this.$http
							.post(
								'${portal}/qfEnterpriseInfo/v1/updateSequence',
								this.sortList
							)
							.then((res) => {
								if (res.data.state) {
									this.$notify({
										type: 'success',
										message: res.data.message,
										duration: 2000,
									})
									this.loadData()
								} else {
									this.$message.warning(res.message)
								}
							})
					})
					.catch(() => {})
			},
			getDictName(code, value) {
				return utils.getDictName(code, value)
			},
			handleNodeClick(data) {
				this.dialogForm.parentId = data.id
				this.searchForm.parentId = data.id
				this.handleSearch()
			},
			submit() {
				let api
				if (this.dialog.title == this.$t('common.add')) {
					api = '/qfEnterpriseInfo/v1/insertInfo'
				} else {
					api = '/qfEnterpriseInfo/v1/updateById'
				}
				this.$refs.form.validate((valid) => {
					if (valid) {
						req.post(portal + api, this.dialogForm).then((res) => {
							if (!res.data.state) return
							this.$notify({
								type: 'success',
								message: res.data.message,
								duration: 2000,
							})
							this.dialog.visible = false
							this.loadData(this.params)
							this.loadDataTree()
						})
					}
				})
			},
			handleAdd() {
				if (!this.dialogForm.parentId) {
					this.$message.warning(this.$t('common.noParentId'))
					return
				}
				this.dialogForm = {
					parentId: this.dialogForm.parentId,
					runStatus: 1,
					economyType: 1,
					country: 0,
					continent: 0,
					businessType: 1,
					type: 1,
				}
				this.dialog = {
					title: this.$t('common.add'),
					visible: true,
				}
			},
			handleDbClick(row) {
				this.dialog = {
					title: this.$t('common.modify'),
					visible: true,
				}
				this.dialogForm = row
			},
			handleDialogClose() {
				this.dialog.visible = false
			},
			handleSelectionChange(currentData) {
				if (currentData.length === 0) return (this.deleteIds = '')
				let ids = []
				currentData.forEach((item) => {
					ids.push(item.id)
				})
				this.deleteIds = ids.join(',')
			},
			handleDelete() {
				this.$confirm(
					this.$t('common.sureDelete'),
					this.$t('common.tips'), {
						confirmButtonText: this.$t('common.confirm'),
						cancelButtonText: this.$t('common.cancel'),
						type: 'warning',
					}
				).then(() => {
					req.remove(
						portal + '/qfEnterpriseInfo/v1/?ids=' + this.deleteIds
					).then((res) => {
						this.loadData(this.params)
						this.loadDataTree()
					})
				})
			},
			handleSearch() {
				let obj = this.searchForm
				let querys = []
				for (let i in obj) {
					if (obj[i]) {
						querys.push({
							group: 'main',
							operation: 'EQUAL',
							parentGroup: '',
							property: i,
							relation: 'AND',
							value: obj[i],
						})
					}
				}
				this.params.querys = querys
				this.loadData(this.params)
			},
			handleSizeChange(pageSize) {
				this.params.pageBean = {
					...this.params.pageBean,
					pageSize
				}
				this.loadData(this.params)
			},
			handleCurrentChange(page) {
				this.params.pageBean = {
					...this.params.pageBean,
					page
				}
				this.loadData(this.params)
			},
			loadDataTree() {
				req.post(portal + '/qfEnterpriseInfo/v1/getTree').then((res) => {
					this.treeData = (res && res.data && res.data.value) || []
					this.dialogForm.parentId = ''
				})
			},
			loadData(params) {
				req.post(portal + '/qfEnterpriseInfo/v1/getList', params).then(
					(res) => {
						this.tableData =
							(res &&
								res.data &&
								res.data.value &&
								res.data.value.rows) || []
						this.params.pageBean = {
							page: (res &&
									res.data &&
									res.data.value &&
									res.data.value.page) ||
								1,
							pageSize: (res &&
									res.data &&
									res.data.value &&
									res.data.value.pageSize) ||
								20,
							total: (res &&
									res.data &&
									res.data.value &&
									res.data.value.total) ||
								0,
						}
					}
				)
			},
			callData() {
				this.loadDataTree()
				this.loadData()
			},
		},
	}
</script>

<style lang="scss" scoped>
	.cqlt-container {
		height: 100%;
		box-sizing: border-box;
	}

	.cqlt-main,
	.cqlt-aside {
		border-radius: 20px;
		box-sizing: border-box;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		margin-top: 10px;
		background-color: #ffffff;
	}

	.cqlt-main {
		margin-left: 10px;
	}

	.cqlt-aside {
		padding: 20px;
	}

	.cqlt-header {
		padding: 0;
	}

	.head-search {
		width: 100%;
		height: 60px;
		line-height: 60px;
		padding-left: 20px;
		background-color: #ffffff;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		border-radius: 20px;
		box-sizing: border-box;

		/deep/.el-form-item {
			margin: 0;
			display: inline-block;
		}
	}

	.main-container {
		width: 100%;
		height: 100%;
		background-color: #ffffff;
		border-radius: 16px;
		// padding: 20px;
		box-sizing: border-box;

		.operation-btn {
			margin-bottom: 24px;
		}

		.cloumn-btn {
			width: 76px;
			height: 32px;
		}
	}

	.container-pagination {
		display: flex;
		justify-content: flex-end;
		margin-top: 20px;

		/deep/ .el-pagination {
			margin-right: 30px;
		}
	}

	.btn-plus {
		//   background-color: #0147eb;
	}

	.enterprise-tree /deep/ .el-tree {
		height: 90%;
		overflow-y: auto;
		border: none;
	}
</style>
<style scoped lang='scss'>
	.el-popover {
		padding: 12px !important;
	}
</style>
