<template>
	<el-container class="fullheight">
		<!--  <el-aside width="230px" style="overflow-x: hidden; border: 1px solid #eee">
      <ht-select
        v-model="selectOrgId"
        class="org-select"
        :options="orgList"
        @change="demChange"
      />
      <ht-tree
        :data="treeData"
        :props="defaultProps"
        node-key="id"
        highlight-current
        :expand-on-click-node="false"
        :support-filter="true"
        @node-click="orgTreeClick"
        @refresh="handleRefresh"
        ref="htTree"
        class="orgTree"
        @row-click="rowClick"
      >
      </ht-tree>
    </el-aside> -->
		<el-container>
			<el-main>
				<ht-table @load="loadData" :data="data" :pageResult="pageResult" :selection="true" :quick-search-props="[
            {prop: 'name', label: '岗位名称'},
            {prop: 'p.CODE_', label: '岗位编码'},
            {prop: 'j.NAME_', label: '职务名称'},
          ]" :show-custom-column="false" :show-export="false" ref="htTable" @row-click="rowClick">
					<template v-slot:toolbar>

						<el-button size="small" @click="showDialog()" icon="el-icon-plus" type='primary'>添加</el-button>
						<ht-delete-button :url="demDeleteUrl" :htTable="$refs.htTable" parameter="postCodes" pk="code"
							@after-delete="afterDelete" :style="{marginLeft: '10px'}">删除</ht-delete-button>

					</template>
					<template>
						<ht-table-column type="index" width="50" align="center" label="序号" />
						<ht-table-column prop="name" label="岗位名称" :sortable="true" :show-overflow-tooltip="true">
							<template v-slot="{row}">
								<el-link type="primary" @click="
                    handleCommand({
                      row: row,
                      command: 'assignMenu',
                    })
                  " title="点击编辑">{{ row.name }}</el-link>
							</template>
						</ht-table-column>
						<ht-table-column prop="code" label="岗位编码" :show-overflow-tooltip="true" />
						<ht-table-column prop="level " label="级别" :show-overflow-tooltip="true" />
						
						<ht-table-column label="操作" width="150">
              <template v-slot="{row}">
                <el-button
                  size="mini"
                  @click="
                    handleCommand({
                      row: row,
                      command: 'disPersonnel',
                    })
                  "
                  >分配人员</el-button
                >
              </template>
            </ht-table-column>
					</template>
				</ht-table>
			</el-main>
		</el-container>
		<ht-sidebar-dialog width="32%" :title="(diaType == 'add' ? '添加' : '编辑') + '岗位'" :visible="dialogVisible"
			:before-close="handleClose" :append-to-body="true">
			<el-form v-model="orgPost" data-vv-scope="editDemForm" v-form>
				
				<ht-form-item label="岗位名称" prop="name" label-width="100px">
					<ht-input v-model="orgPost.name" autocomplete="off" :validate="{
              required: true,
              regex: {
                exp: '^[\\s\\S]{1,21}$',
                message: '内容超出输入限制',
              },
            }" placeholder="请输入名称"></ht-input>
				</ht-form-item>
				<ht-form-item label="岗位编码" prop="code" label-width="100px">
					<ht-input v-model="orgPost.code" v-pinyin="orgPost.name" autocomplete="off" :validate="{
              required: true,
              alpha_dash: true,
              regex: {
                exp: '^[\\s\\S]{1,30}$',
                message: '内容超出输入限制',
              },
            }" placeholder="请输入别名" :disabled="diaType != 'add'"></ht-input>
				</ht-form-item>
				<ht-form-item label="岗位层级" label-width="100px">
					<el-select v-model="orgPost.level" placeholder="请选择岗位层级">
						<el-option v-for="item in xljbList" :key="item.value" :label="item.name" :value="item.value">
						</el-option>
					</el-select>
				</ht-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<ht-submit-button :url="saveRoleUrl" :model="orgPost" :isSubmit="isSubmit"
					:requestMethod="requestMethod" scopeName="editDemForm" @before-save-data="beforeSaveData"
					@after-save-data="afterSaveData">{{ $t('eip.common.save') }}</ht-submit-button>
				<el-button @click="dialogCancle('dialogVisible')">{{
          $t('eip.common.cancel')
        }}</el-button>
			</div>
		</ht-sidebar-dialog>

		<ht-sidebar-dialog width="40%" title="查看岗位详情" :visible="diaType === 'showInfo'" :before-close="handleClose">
			<table class="form-table" cellspacing="0" cellpadding="0" border="0">
				<tbody>
					<tr>
						<th width="150px">岗位名称（编码）:</th>
						<td>{{ orgPost.name }}({{ orgPost.id }})</td>
					</tr>
					<tr>
						<th width="150px">所属职务（编码）:</th>
						<td>{{ orgPost.jobName }}({{ orgPost.relDefId }})</td>
					</tr>
					<tr>
						<th width="150px">所属组织（编码）:</th>
						<td>{{ orgPost.orgName }}({{ orgPost.orgId }})</td>
					</tr>
					<tr>
						<th width="150px">岗位人员:</th>
						<td>
							<el-table :data="postUser" style="width: 100%" height="200" border="true">
								<el-table-column prop="fullName" label="姓名" width="100" />
								<el-table-column prop="pathName" label="人员所属组织全路径" />
							</el-table>
						</td>
					</tr>
				</tbody>
			</table>
		</ht-sidebar-dialog>

		<ht-load-data :url="loadDataUrl" context="uc" @after-load-data="afterLoadData" v-if="dialogVisible">
		</ht-load-data>

		<!-- 组织选择对话框  -->
		<eip-org-dialog ref="eipOrgDialog" @onConfirm="eipOrgDialogOk" single append-to-body />

		<distrubutive-user ref="distrubutiveUser"></distrubutive-user>
	</el-container>
</template>
<script>
	import org from '@/api/org.js'
	import utils from '@/hotent-ui-util.js'
	const eipOrgDialog = () => import('@/components/dialog/EipOrgDialog.vue')
	const EipJobSelector = () => import('@/components/selector/EipJobSelector.vue')
	import distrubutiveUser from '@/views/uc/org/DistrubutiveUser'
	import dictUtils from '@/components/dict/DictSelectUtils.js'
	export default {
		components: {
			eipOrgDialog,
			distrubutiveUser,
			EipJobSelector,
		},
		computed: {
			demDeleteUrl: function() {
				return window.context.uc + '/api/org/v1/orgPost/deleteOrgPost'
			},
			saveRoleUrl: function() {
				let preUrl = window.context.uc + '/api/org/v1/orgPost'
				if (this.orgPost.id) {
					preUrl += '/updateOrgPost'
				} else {
					preUrl += '/saveOrgPost'
				}
				return preUrl
			},
			requestMethod: function() {
				return 'POST'
			},
		},
		data() {
			return {
				dialogVisible: false,
				dialogVisibleMenuPerm: false,
				orgPost: {
					name: '',
					code: '',
					jobCode: '',
					jobName: '',
					 level: '',
					orgCode: '',
				},
				isSubmit: true,
				data: [],
				pageResult: {
					page: 1,
					pageSize: 50,
					total: 0,
				},
				loadDataUrl: '',
				menuPerm: {},
				allowRoles: [],
				diaType: '',
				jobs: [],
				postUser: [],
				readOnly: true,
				tempOrgPost: {},
				// 树
				selectOrgId: '',
				selectOrgName: '',
				orgList: [], //下拉框待选择的组织
				demList: [], //下拉框待选择的维度
				treeData: [], //树形菜单展示的数组
				defaultProps: {
					children: 'children',
					label: 'name',
				},
				xljbList:[]
			}
		},
		mounted() {
			this.xljbList = dictUtils.getDictItemsFromCache('xljb')
			this.getAllDemList()
			this.$validator = this.$root.$validator
		},
		methods: {
			// 树
			getAllDemList() {
				org
					.getDescAll()
					.then((resp) => {
						for (let i = 0; i < resp.length; i++) {
							this.orgList.push({
								key: resp[i].id,
								value: resp[i].demName,
							})
							this.demList.push({
								key: resp[i].code,
								value: resp[i].demName,
							})
							this.dimenList = resp
							if (resp[i].isDefault === 1) {
								this.selectOrgId = resp[i].id
							}
						}
					})
					.then((params) => {
						var dem = {
							demId: this.selectOrgId,
						}
						org.getByParentAndDemToTree(dem).then((data) => {
							this.treeData = utils.tile2nest(data)
						})
					})
			},
			getOrgTrees(node, ids) {
				ids.push(node.id)
				let arr = node.children
				if (arr) {
					for (var i = 0; i < arr.length; i++) {
						this.getOrgTrees(arr[i], ids)
					}
				}
			},
			loadTreeData(cb) {
				var param = {
					demId: this.selectOrgId,
				}
				org.getByParentAndDemToTree(param).then((data) => {
					this.treeData = utils.tile2nest(data)
					cb && cb()
				})
			},
			demChange(data) {
				this.selectOrgId = data
				this.orgPost.orgCode = ''
				this.loadTreeData()
			},
			orgTreeClick(orgbytree) {
				//重置数据
				let ary = this.$refs.htTable.querys
				for (var i = 0; i < ary.length; i++) {
					if (ary[i].group && ary[i].group == 'orgTree') {
						ary.remove(ary[i])
					}
				}
				let quickSearchEl = document.querySelector('.quick-search input')
				if (quickSearchEl && !quickSearchEl.value) {
					this.$refs.htTable.querys = []
				}
				if (!orgbytree.code) {
					this.orgPost.orgCode = ''
					this.$refs.htTable.querys.push({
						property: 'DEM_ID_',
						value: orgbytree.demId,
						group: 'orgTree',
						relation: 'AND',
						operation: 'EQUAL',
					})
				} else {
					this.orgPost.orgCode = orgbytree.code
					let ids = []
					let trees = ''
					this.getOrgTrees(orgbytree, ids)
					trees = ids.join(',')
					if (trees != '') {
						this.$refs.htTable.querys.push({
							property: 'ORG_ID_',
							value: trees,
							group: 'orgTree',
							relation: 'AND',
							operation: 'IN',
						})
					}
				}
				this.$refs.htTable.load()
			},
			handleRefresh(cb) {
				this.orgPost.orgCode = ''
				this.loadTreeData(cb)
				//重置数据
				let ary = this.$refs.htTable.querys
				for (var i = 0; i < ary.length; i++) {
					if (ary[i].group && ary[i].group == 'orgTree') {
						ary.remove(ary[i])
					}
				}
				this.$refs.htTable.load()
			},
			// 树
			rowClick(row, column, event) {
				this.$refs.htTable.$refs.htTable.toggleRowSelection(row)
			},
			selectOrg() {
				this.$refs['eipOrgDialog'].showDialog()
			},
			setDemDefault(row) {
				org.setDemDefault(row.code).then(() => {
					this.$refs.htTable.load()
				})
			},
			handleClose() {
				this.dialogVisible = false
				this.orgPost={}
				this.diaType = 'close'
				this.loadDataUrl = ''
			},
			handleCloseMenuPerm() {
				this.dialogVisibleMenuPerm = false
			},
			showDialog(row) {

				this.dialogVisible = true
				if (row) {
					this.orgPost = this.$options.data().orgPost
					this.loadDataUrl = `/api/org/v1/orgPost/getOrgPost?postCode=${encodeURIComponent(
            row.code
          )}`
				} else {
					this.loadDataUrl = ''
					this.diaType = 'add'
				}
				if (this.diaType === 'showInfo') {
					this.dialogVisible = false
				}
			},
			dialogCancle(dialogVisible) {
				this[dialogVisible] = false
			},
			loadData(param, cb) {
				console.log(param);
				org
					.getOrgPostPage(param)
					.then((response) => {
						this.data = response.rows
						this.pageResult = {
							page: response.page,
							pageSize: response.pageSize,
							total: response.total,
						}
					})
					.finally(() => cb())
			},
			handleCommand(params) {
				this.readOnly = false
				switch (params.command) {
					case 'showInfo':
						this.diaType = 'showInfo'
						// this.showDialog(params.row)
						this.orgPost = params.row
						org.getFullname(params.row.id).then((resp) => {
							this.postUser = resp
						})
						break
					case 'assignMenu':
						this.diaType = 'edit'
						this.showDialog(params.row)
						break
					case 'disPersonnel':
						this.$refs.distrubutiveUser.showDialog(params.row.id, params.row.code)
						break
					default:
						break
				}
			},
			async beforeSaveData() {
				this.isSubmit = true
			},
			afterSaveData() {
				this.dialogVisible = false
				this.$refs.htTable.load()
			},
			afterDelete() {
				this.$refs.htTable.load()
			},
			afterLoadData(data) {
				// 编辑角色
				if (this.dialogVisible || this.diaType === 'showInfo') {
					this.orgPost = data.value
					this.tempOrgPost = JSON.parse(JSON.stringify(this.orgPost))
					setTimeout(() => this.$validator.validateAll('editDemForm'))
				}
			},
			eipOrgDialogOk(data) {
				if (data.length > 1) {
					this.$message.error('岗位组织不能选择多个')
					return
				}
				if (this.tempOrgPost.orgId && this.tempOrgPost.orgId != data[0].id) {
					let this_ = this
					this.$confirm(
						'修改所属组织，保存后当前岗位下的人员会一并转移到新组织下',
						'提示', {
							cancelButtonText: '取消',
							confirmButtonText: '确定',
							type: 'warning',
							closeOnClickModal: false,
						}
					).then(() => {
						this_.orgPost.orgCode = data[0].code
						this_.$set(this.orgPost, 'orgName', data[0].name)
					})
				} else {
					this.orgPost.orgCode = data[0].code
					this.$set(this.orgPost, 'orgName', data[0].name)
				}
			},
		},
	}
</script>
<style scoped>
	div[aria-invalid='true']>>>.el-input__inner,
	div[aria-invalid='true']>>>.el-input__inner:focus {
		border-color: #f56c6c;
	}

	.zhiwu>>>.el-form-item__label::before {
		content: "*" !important;
		color: #f56c6c !important;
		margin-right: 4px !important;
	}
</style>
