<template>
  <div class="app-container">
    <el-dialog
      :title="title"
      :close-on-click-modal="false"
      :visible.sync="visible"
      width="80%"
      top="4%"
    >
      <el-form  ref="form"  class="app-form" v-loading="loading" :model="formItem" label-width="120px" :rules="getRules()">
        <Ec-line></Ec-line>
        <el-row :gutter="18">
          <el-col :span="12">
            <el-form-item
              :label="$t('ec.table.shortName')"
              prop="shortName"
              :rules="[
                {required: true, message: $t('ec.table.shortName') + $t('ec.table.emptyError'), trigger:'blur'}
              ]"
            >
              <el-input v-model="formItem.shortName" type="text" :placeholder="$t('ec.table.shortName')" maxlength="32" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              :label="$t('ec.table.fullName')"
              prop="fullName"
              :rules="[
              ]"
            >
              <el-input v-model="formItem.fullName" type="text" :placeholder="$t('ec.table.fullName')" maxlength="64" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="18">
          <el-col :span="12">
            <el-form-item
              :label="$t('ec.table.code')"
              prop="code"
              :rules="[
                {required: true, message: $t('ec.table.code') + $t('ec.table.emptyError'), trigger:'blur'}
              ]"
            >
              <el-input v-model="formItem.code" type="text" :placeholder="$t('ec.table.code')"  maxlength="32" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('ec.tree.parent')" prop="parent.id">
              <span v-if="parent && parent.id">{{ parent.name }}</span>
              <ec-dept-select v-else v-model="formItem.parent.id" check-strictly :data="{ tenantId: formItem.tenantId, appId: formItem.appId }" :params="{ excludeId: record.id }" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="18">
          <el-col :span="12">
            <el-form-item v-if="superAdmin && enableTenant===true" :label="$t('ec.user.tenant')" prop="tenantId">
              <ec-tenant v-model="formItem.tenantId" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="18">
          <el-col :span="12">
            <el-form-item
              v-if="superAdmin"
              :label="$t('ec.app.app')"
              prop="appId"

              :rules="[
                {required: true, message: $t('ec.app.app') + $t('ec.table.emptyError'), trigger:'blur'}
              ]"
            >
              <ec-register-app
                v-model="formItem.appId"
                :tenantId="formItem.tenantId"
                :disabled="method !== 'add'" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              v-if="enableSysrDeptType || getDeptPageOptionsSwitch('showDeptType')"
              :label="$t('ec.user.deptType')"
              prop="deptType"
              :rules="[
                { required: enableSysrDeptType, message:'部门类型不允许为空', trigger:'blur' }
              ]"
            >
              <ec-select v-model="formItem.deptType" dict-type="deptType"/>
            </el-form-item>
          </el-col>
        </el-row>

        <Ec-line :title="'公司信息'"></Ec-line>
        <el-row :gutter="18">
          <el-col :span="12">
            <el-form-item :label="$t('ec.dept.nature')" prop="deptNature">
              <el-input v-model="formItem.deptNature" type="text" :placeholder="$t('ec.dept.nature')" maxlength="16"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('ec.dept.legal')" prop="deptLegal">
              <ec-user-modal v-model="formItem.deptLegal" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="18">
          <el-col :span="12">
            <el-form-item :label="$t('ec.dept.phone1')" prop="telphone1">
              <el-input v-model="formItem.telphone1" type="text" :placeholder="$t('ec.dept.phone1')" maxlength="15" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('ec.dept.phone2')" prop="telphone2">
              <el-input v-model="formItem.telphone2" type="text" :placeholder="$t('ec.dept.phone2')" maxlength="15" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item :label="$t('ec.dept.address')" prop="address">
            <el-input v-model="formItem.address" type="text" :placeholder="$t('ec.dept.address')" maxlength="125" />
          </el-form-item>
        </el-row>
        <el-row :gutter="18">
          <el-col :span="12">
            <el-form-item :label="$t('ec.area.cityCode')" prop="areaCode">
              <el-input v-model="formItem.areaCode" type="text" :placeholder="$t('ec.area.cityCode')" maxlength="8" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('ec.dept.tradecType')" prop="typeTradec">
              <el-input v-model="formItem.typeTradec" type="text" :placeholder="$t('ec.dept.tradecType')" maxlength="4" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="18">
          <el-col :span="12">
            <el-form-item :label="$t('ec.dept.equityType')" prop="typeRI">
              <el-input v-model="formItem.typeRI" type="text" :placeholder="$t('ec.dept.equityType')" maxlength="8" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('ec.dept.benchmark')" prop="benchmark">
              <el-input v-model="formItem.benchmark" type="text" :placeholder="$t('ec.dept.benchmark')" maxlength="4" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item :label="$t('ec.date.startEndTime')">
            <ec-date-range
              v-model="formItem"
              begin-key="beginDate"
              end-key="endDate"
              format="yyyy-MM-dd HH:mm:ss"
              :start-placeholder="$t('ec.date.startDate')"
              :end-placeholder="$t('ec.date.endDate')" />
          </el-form-item>
        </el-row>
        <Ec-line :title="'其它'"></Ec-line>
        <el-row :gutter="18">
          <el-col :span="12">
            <el-form-item :label="$t('ec.table.sort')" prop="sortNum">
              <el-input-number v-model="formItem.sortNum" :placeholder="$t('ec.table.sort')" />
            </el-form-item>
          </el-col>
          <!-- <el-col :span="12">
            <el-form-item :label="$t('ec.table.version')" prop="rsvn">
              <el-input v-model="formItem.rsvn" type="text" :placeholder="$t('ec.table.version')" />
            </el-form-item>
          </el-col> -->
        </el-row>
        <el-row :gutter="18">
          <el-col :span="12">
            <el-form-item
              :label="$t('ec.table.enableStatus')"
              prop="status"
              :rules="[
                {required: true, message: $t('ec.table.enableStatus') + $t('ec.table.emptyError'), trigger:'blur'}
              ]"
            >
              <ec-radio-group v-model="formItem.status" dict-type="enableState" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('ec.dept.runStatus')" prop="runStatus">
              <ec-radio-group v-model="formItem.runStatus" dict-type="enableState" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item :label="$t('ec.table.remarks')" prop="remark">
            <el-input v-model="formItem.remark" type="textarea" :autosize="{minRows: 3, maxRows: 5}" maxlength="125" />
          </el-form-item>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">{{ $t('ec.table.close') }}</el-button>
        <el-button v-if="method !== 'view'" type="primary" :loading="confirmLoading" @click="save">{{ $t('ec.table.confirm') }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import mixin from 'ecip-web/utils/common-mixin'
import { getById, save, update } from 'ecip-web/api/vue/dept/sysrDeptApi'
import Vue from 'vue'
const enableTenant = window._CONFIG['enableTenant'] === undefined ? true : window._CONFIG['enableTenant']
const enableSysrDeptType = window._CONFIG['enableSysrDeptType'] === undefined ? false : window._CONFIG['enableSysrDeptType']
const deptPageOptions = window._CONFIG['deptPageOptions'] === undefined ? {} : window._CONFIG['deptPageOptions']

export default {
  name: 'VueDeptSysrDeptForm',
  mixins: [...mixin],
  data() {
    return {
      enableTenant,
      enableSysrDeptType,
      deptPageOptions,
      visible: false,
      loading: false,
      confirmLoading: false,
      method: '',
      title: '',
      record: {},
      parent: {},
      formItem: {
        tenantId: '',
        appId: '',
        pid: '',
        code: '',
        shortName: '',
        fullName: '',
        sortNum: 30,
        remark: '',
        rsvn: '',
        deptLegal: '',
        telphone1: '',
        telphone2: '',
        address: '',
        deptNature: '',
        areaCode: '',
        typeTradec: '',
        typeRI: '',
        status: '1',
        runStatus: '1',
        beginDate: '',
        endDate: '',
        benchmark: '',
        deptType: null,
        parent: {}
      }
    }
  },
  methods: {
    getRules() {
      if (deptPageOptions.getRules === undefined) {
        return []
      }
      return deptPageOptions.getRules(this.formItem);
    },
    init(method, tenantId, appId, row, parent) {
      this.parent = parent
      this.method = method
      this.record = row
      if (method === 'add') {
        this.title = `新增组织`
      } else if (method === 'edit') {
        this.title = `编辑-${row.shortName}`
      } else if (method === 'view') {
        this.title = `查看-${row.shortName}`
      }
      this.visible = true
      this.loading = false
      this.$nextTick(async() => {
        // 清空初始化
        this.$refs.form.clearValidate()
        this.$refs.form.resetFields()
        Object.assign(this.$data.formItem, this.$options.data().formItem)
        this.formItem.tenantId = tenantId
        this.formItem.appId = appId
        if (method === 'edit' || method === 'view') { // 修改或者查看
          try {
            this.loading = true
            const { data } = await getById(row.id)
            this.formItem = data
            Vue.set(this.formItem, 'parent', { id: this.formItem.parentId, name: this.formItem.parentName })
          } finally {
            this.loading = false
          }
        }
      })
    },
    save() {
      this.$refs.form.validate(async valid => {
        if (valid) {
          try {
            if (this.parent && this.parent.id) {
              this.formItem.pid = this.parent.id
            } else {
              this.formItem.pid = this.formItem.parent.id
            }

            if (this.method === 'edit') {
              await update(this.record.id, this.formItem)
            } else {
              await save(this.formItem)
            }
            this.$notify.success(this.$t('ec.message.saveSuccess'))
            this.$emit('refreshData')
            this.visible = false
          } finally {
            this.confirmLoading = false
          }
        }
      })
    },
    getDeptPageOptionsSwitch(option) {
      if (option === 'showDeptType') {
        return deptPageOptions.showDeptType === undefined ? false : deptPageOptions.showDeptType
      }
    }
  }
}
</script>

<style scoped lang="scss">
.app-container{
  .app-form{
    /*max-height: 60vh;*/
    /*overflow-y: scroll;*/
    /*overflow-x: hidden;*/
  }
 .el-dialog__body{
    padding-top: 0;
  }
}
</style>
