<!-- 组织机构人员 职位维护 -->
<template>
  <div>
    <dialog-edit :visible.sync="dialogVisible" :editModel="editModel" :form="form" :api="api" :width="width" :autoSave="autoSave"
                 :title="$t('enterpriseInfoManage.organization.positionEditTitle')" :formRules="formRules" @onSaved="onSaved" labelWidth="110px">
      <div class="treeselect-class">
        <!-- 组织机构 -->
        <el-form-item :label="$t('enterpriseInfoManage.organization.organizationName')" prop="orgId">
          <treeselect v-model="form.orgId" :options="options" :placeholder="$t('common.pleaseSelect')" :disabled="disabled"
                      :noResultsText="$t('enterpriseInfoManage.organization.noResultsText')"
                      :normalizer="normalizer" :clearable="clearable" @select="treeSelect"></treeselect>
        </el-form-item>
      </div>
      <dym-form :componentList="componentList" :formValue.sync="form">
      </dym-form>
    </dialog-edit>
  </div>
</template>

<script>
import BaseEdit from '@/pages/baseEditPage'
import { DialogEdit, dymForm, SelectDictionary } from 'newepoch-components'
import organizationApi from '@/api/enterpriseInfoManage/organizationApi.js'
// import the component
import Treeselect from '@riophae/vue-treeselect'
// import the styles
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
  extends: new BaseEdit(),
  name: 'positionEdit',
  components: {
    dymForm,
    DialogEdit,
    Treeselect,
    SelectDictionary
  },
  data () {
    return {
      width: '550px',
      autoSave: false,
      clearable: false,
      disabled: false,
      options: [],
      componentList: [
        // 职位名称
        {
          value: 'positionName',
          disabled: false,
          componentName: 'el-input',
          maxlength: 100,
          label: this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.organization.positionName,
          placeholder: this.$i18n.messages[this.$i18n.locale].common.pleaseInput,
          cols: [24, 24, 24, 24],
          prop: 'positionName'
        },
        // 职级编号
        {
          value: 'positionCode',
          disabled: false,
          componentName: SelectDictionary,
          dictTypeCode: 'ZDORGP01',
          label: this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.organization.positionNumber,
          placeholder: this.$i18n.messages[this.$i18n.locale].common.pleaseInput,
          cols: [24, 24, 24, 24],
          prop: 'positionCode'
        },
        // 职位描述
        {
          value: 'positionDesc',
          disabled: false,
          componentName: 'el-input',
          maxlength: 2000,
          type: 'textarea',
          label: this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.organization.positionDesc,
          placeholder: this.$i18n.messages[this.$i18n.locale].common.pleaseInput,
          cols: [24, 24, 24, 24],
          prop: 'positionDesc'
        }
      ],
      formRules: {
        // 组织机构名称
        orgId: [{ required: true, message: this.$i18n.messages[this.$i18n.locale].regMsg.organization.pleaseOrgName, trigger: 'blur' }],
        // 职位名称
        positionName: [{ required: true, message: this.$i18n.messages[this.$i18n.locale].regMsg.organization.positionName, trigger: 'blur' }],
        // 职位描述
        // positionDesc: [{ required: true, message: this.$i18n.messages[this.$i18n.locale].regMsg.organization.positionDesc, trigger: 'blur' }]
        // 职级编号
        positionCode: [{ required: true, message: this.$i18n.messages[this.$i18n.locale].regMsg.organization.pleasePositionNumber, trigger: 'blur' }]
      }
    }
  },
  computed: {
    api () {
      return organizationApi.position
    },
    treeApi () {
      return organizationApi.organTree
    }
  },
  methods: {
    // 加载下拉组织机构树组件 数据
    loadTreeSelect (orgId) {
      let $this = this
      $this.treeApi.getChild({ keyId: orgId }).then(res => {
        if (res && res.data) {
          $this.options = res.data
          if ($this.editModel === 'C') {
            if ($this.form.showChild) {
              if ($this.options && $this.options.length > 0 && $this.options[0].deptList.length === 0) {
                $this.disabled = true
              } else {
                $this.disabled = false
              }
            } else {
              $this.disabled = true
            }
          }
        }
      })
    },
    treeSelect (node) {
      let $this = this
      $this.form.orgName = node.orgName
    },
    normalizer (node) {
      return {
        id: node.keyId,
        label: node.orgName,
        children: node.deptList
      }
    },
    // 保存
    onSaved (submitForm) {
      let $this = this
      if ($this.editModel === 'C') {
        $this.api.create(submitForm).then(res => {
          if (res && res.data) {
            $this.success(this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.organization.positionCreateS)
            $this.dialogVisible = false
            $this.$emit('positionSuccess')
          } else {
            $this.success(this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.organization.positionCreateF)
          }
        })
      } else if ($this.editModel === 'E') {
        $this.api.updatePositionByOrgan(submitForm).then(res => {
          if (res && res.data) {
            $this.success(this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.organization.positionUpdateS)
            $this.dialogVisible = false
            $this.$emit('positionSuccess')
          } else {
            $this.success(this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.organization.positionUpdateF)
          }
        })
      }
    }
  },
  watch: {
    visible (val) {
      let $this = this
      if (val) {
        $this.$nextTick(() => {
          let orgId = this.form.firstOrgId
          $this.loadTreeSelect(orgId)
          if ($this.editModel === 'C') {
            $this.form.orgId = $this.form.firstOrgId
          } else if ($this.editModel === 'E') {
            $this.disabled = true
          }
        })
      }
    }
  }
}
</script>

<style scoped lang="scss">
</style>
