<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="60px">
					<el-row :gutter="10">
						<el-col :span="5">
							<el-form-item :label="$t('overseasPersonnelInfo.name')">
								<el-input style="width: 100%" 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('overseasPersonnelInfo.sex')" :label-width="
				                    $i18n.locale === 'zh-CN' ? '70px' : '65px'
				                ">
								<el-select v-model="searchForm.sex" :placeholder="this.$t('common.select')"
									@change="handleSearch" clearable>
									<el-option v-for="item in xbList" :key="item.value" :label="item.name"
										:value="item.value">
									</el-option>
								</el-select>
								<!-- <dict-select :dictCode="
				                        $i18n.locale === 'zh-CN' ? 'xb' : 'xb_en'
				                    " :hasDefaultOption="true" clearable v-model="searchForm.sex" style="width: 100%"
									:placeholder="$t('common.select')" /> -->
							</el-form-item>
						</el-col>
						<el-col :span="5">
							<el-form-item :label="$t('overseasPersonnelInfo.status')" :label-width="
				                    $i18n.locale === 'zh-CN' ? '70px' : '120px'
				                ">
								<el-select v-model="searchForm.status" :placeholder="this.$t('common.select')"
									@change="handleSearch" clearable>
									<el-option v-for="item in zzztList" :key="item.value" :label="item.name"
										:value="item.value">
									</el-option>
								</el-select>
								<!-- <dict-select :dictCode="
				                        $i18n.locale === 'zh-CN'
				                            ? 'zzzt'
				                            : 'zzzt_en'
				                    " :hasDefaultOption="true" clearable v-model="searchForm.status" style="width: 100%"
									:placeholder="$t('common.select')" /> -->
							</el-form-item>
						</el-col>
						<el-col :span="5">
							<el-form-item :label="$t('overseasPersonnelInfo.isImportant')" :label-width="
				                    $i18n.locale === 'zh-CN' ? '95px' : '120px'
				                ">
								<el-select v-model="searchForm.isImportant" :placeholder="this.$t('common.select')"
									@change="handleSearch" clearable>
									<el-option v-for="item in sfzyryList" :key="item.value" :label="item.name"
										:value="item.value">
									</el-option>
								</el-select>
								<!-- <dict-select :dictCode="
				                        $i18n.locale === 'zh-CN'
				                            ? 'sfzyry'
				                            : 'sfzyry_en'
				                    " :hasDefaultOption="true" clearable v-model="searchForm.isImportant" style="width: 100%"
									:placeholder="$t('common.select')" /> -->
							</el-form-item>
						</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>
				</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="name" width="120"
							:label="$t('overseasPersonnelInfo.name')">
						</el-table-column>
						<el-table-column show-overflow-tooltip prop="sex" width="100"
							:label="$t('overseasPersonnelInfo.sex')">
							<template v-if="$i18n.locale === 'zh-CN'" v-slot="{row}">
								{{ getDictName('xb', row.sex) }}
							</template>
							<template v-else v-slot="{row}">
								{{ getDictName('xb_en', row.sex) }}
							</template>
						</el-table-column>
						<el-table-column show-overflow-tooltip prop="jobName"
							:label="$t('overseasPersonnelInfo.jobName')">
						</el-table-column>
						<el-table-column show-overflow-tooltip prop="email" width="130"
							:label="$t('overseasPersonnelInfo.email')">
						</el-table-column>
						<el-table-column show-overflow-tooltip prop="isImportant"
							:label="$t('overseasPersonnelInfo.isImportant')">
							<template v-if="$i18n.locale === 'zh-CN'" v-slot="{row}">
								<span v-if="row.isImportant == 0">{{
                                    getDictName('sfzyry', row.isImportant)
                                }}</span>
								<span v-else style="color: #67c23a">{{
                                    getDictName('sfzyry', row.isImportant)
                                }}</span>
							</template>
							<template v-else v-slot="{row}">
								<span v-if="row.isImportant == 0">{{
                                    getDictName('sfzyry_en', row.isImportant)
                                }}</span>
								<span v-else style="color: #67c23a">{{
                                    getDictName('sfzyry_en', row.isImportant)
                                }}</span>
							</template>
						</el-table-column>
						<el-table-column show-overflow-tooltip prop="status"
							:label="$t('overseasPersonnelInfo.status')">
							<template v-if="$i18n.locale === 'zh-CN'" v-slot="{row}">
								<span v-if="row.status !== 0">{{
                                    getDictName('zzzt', row.status)
                                }}</span>
								<span v-else style="color: #67c23a">{{
                                    getDictName('zzzt', row.status)
                                }}</span>
							</template>
							<template v-else v-slot="{row}">
								<span v-if="row.status !== 0">{{
                                    getDictName('zzzt_en', row.status)
                                }}</span>
								<span v-else style="color: #67c23a">{{
                                    getDictName('zzzt_en', row.status)
                                }}</span>
							</template>
						</el-table-column>
						<el-table-column show-overflow-tooltip prop="leaveDate"
							:label="$t('overseasPersonnelInfo.leaveDate')">
						</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 align="center" :label="$t('common.operation')">
							<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="dialogRules" label-width="80px" label-position="top">
				<el-row :gutter="20">
					<el-col :span="8">
						<el-form-item :label="$t('overseasPersonnelInfo.name')" prop="name">
							<el-input v-model="dialogForm.name" :placeholder="
                                    $t('overseasPersonnelInfo.input') +
                                    $t('overseasPersonnelInfo.name')
                                "></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item :label="$t('overseasPersonnelInfo.sex')" prop="sex">
							<dict-select :dictCode="
                                    $i18n.locale === 'zh-CN' ? 'xb' : 'xb_en'
                                " :hasDefaultOption="true" clearable v-model="dialogForm.sex" style="width: 100%"
								:placeholder="
                                    $t('overseasPersonnelInfo.select') +
                                    $t('overseasPersonnelInfo.sex')
                                " />
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item :label="$t('overseasPersonnelInfo.jobName')" prop="jobName">
							<el-input v-model="dialogForm.jobName" :placeholder="
                                    $t('overseasPersonnelInfo.input') +
                                    $t('overseasPersonnelInfo.jobName')
                                "></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="8">
						<el-form-item :label="$t('overseasPersonnelInfo.email')" prop="email">
							<el-input v-model="dialogForm.email" :placeholder="
                                    $t('overseasPersonnelInfo.input') +
                                    $t('overseasPersonnelInfo.email')
                                "></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item :label="$t('overseasPersonnelInfo.isImportant')" prop="isImportant">
							<dict-select :dictCode="
                                    $i18n.locale === 'zh-CN'
                                        ? 'sfzyry'
                                        : 'sfzyry_en'
                                " :hasDefaultOption="true" clearable v-model="dialogForm.isImportant"
								style="width: 100%" :placeholder="
                                    $t('overseasPersonnelInfo.select') +
                                    $t('overseasPersonnelInfo.isImportant')
                                " />
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item :label="$t('overseasPersonnelInfo.status')" prop="status">
							<dict-select :dictCode="
                                    $i18n.locale === 'zh-CN'
                                        ? 'zzzt'
                                        : 'zzzt_en'
                                " :hasDefaultOption="true" clearable v-model="dialogForm.status" style="width: 100%"
								:placeholder="
                                    $t('overseasPersonnelInfo.select') +
                                    $t('overseasPersonnelInfo.status')
                                " />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20" v-if="dialogForm.status == 1">
					<el-col :span="8">
						<el-form-item :label="$t('overseasPersonnelInfo.leaveDate')" prop="leaveDate">
							<el-date-picker v-model="dialogForm.leaveDate" type="date" format="yyyy-MM-dd"
								value-format="yyyy-MM-dd" :placeholder="
                                    $t('overseasPersonnelInfo.select') +
                                    $t('overseasPersonnelInfo.leaveDate')
                                ">
							</el-date-picker>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<el-form-item :label="$t('overseasPersonnelInfo.memo')" prop="memo">
							<el-input v-model="dialogForm.memo" type="textarea" rows="4" :placeholder="
                                    $t('overseasPersonnelInfo.input') +
                                    $t('overseasPersonnelInfo.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>
	</div>
</template>

<script>
	import tree from '@/components/tree'
	import pagination from '@/components/pagination'
	import dictUtils from '@/components/dict/DictSelectUtils.js'
	import {
		TableMixin
	} from '@/mixins/tableMixin'
	import req from '@/request.js'
	import utils from '@/utils.js'
	const portal = window.context.portal
	export default {
		name: 'OverseasPersonnelInfo',
		mixins: [TableMixin],
		components: {
			tree,
			pagination,
		},
		data() {
			return {
				loading: false,
				tableMaxHeight: 400,
				treeData: [],
				searchForm: {
					name: '',
				},
				tableData: [],
				params: {
					pageBean: {
						page: 1,
						pageSize: 10,
						total: 0,
					},
				},
				pageResult: {
					page: 1,
					pageSize: 20,
					total: 0,
				},
				deleteIds: '',
				dialog: {
					visible: false,
					title: this.$t('common.add'),
				},
				dialogForm: {
					sex: 0,
					status: 0,
					isImportant: 1,
				},
				dialogRules: {
					name: {
						required: true,
						message: this.$t('overseasPersonnelInfo.input') +
							this.$t('overseasPersonnelInfo.name'),
						trigger: 'blur',
					},
					leaveDate: {
						required: true,
						message: this.$t('overseasPersonnelInfo.select') +
							this.$t('overseasPersonnelInfo.leaveDate'),
						trigger: 'blur',
					},
					status: {
						required: true,
						message: this.$t('overseasPersonnelInfo.select') +
							this.$t('overseasPersonnelInfo.status'),
						trigger: 'blur',
					},
				},
				xbList: [],
				zzztList: [],
				sfzyryList: []
			}
		},
		created() {
			if (this.$i18n.locale === 'zh-CN') {
				this.xbList = dictUtils.getDictItemsFromCache('xb')
				this.zzztList = dictUtils.getDictItemsFromCache('zzzt')
				this.sfzyryList = dictUtils.getDictItemsFromCache('sfzyry')

			} else {
				this.xbList = dictUtils.getDictItemsFromCache('xb_en')
				this.zbList = dictUtils.getDictItemsFromCache('zb_en')
				this.sfzyryList = dictUtils.getDictItemsFromCache('sfzyry_en')
			}
			this.loadData(this.params)
			this.loadDataTree()
		},
		methods: {
			//排序
			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}/qfEnterpriseUsersInfo/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.enterpriseId = data.id
				this.searchForm.enterpriseId = data.id
				this.handleSearch()
			},
			submit() {
				let api
				if (this.dialog.title == this.$t('common.add')) {
					api = '/qfEnterpriseUsersInfo/v1/insertInfo'
				} else {
					api = '/qfEnterpriseUsersInfo/v1/updateInfoById'
				}
				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.enterpriseId) {
					this.$message.warning(this.$t('common.noParentId'))
					return
				}
				this.dialogForm = {
					sex: 0,
					status: 0,
					isImportant: 1,
					enterpriseId: this.dialogForm.enterpriseId,
				}
				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 + '/qfEnterpriseUsersInfo/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.enterpriseId = ''
				})
			},
			loadData(params) {
				req.post(portal + '/qfEnterpriseUsersInfo/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,
						}
					}
				)
			},
		},
	}
</script>

<style lang="scss" scoped>
	@import '@/assets/css/common.scss';

	.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;
	}
</style>
<style scoped>
	.el-popover {
		padding: 12px !important;
	}
</style>
