<template>
  <Modal v-model="visible" title="新增机构" class-name="v-modal org-modal" :mask-closable="false" :width="550" :footer-hide="true">
    <Form ref="org-form" :model="form" :label-width="formOptions.labelWidth" :rules="rules">
      <FormItem class="form-item-text" label="上级机构" v-if="pOrgName">
        <p>{{pOrgName}}</p>
      </FormItem>
      <FormItem label="机构全称" prop="orgName">
        <Input v-model.trim="form.orgName" clearable placeholder="请输入机构全称(1~30位)" :maxlength="30" :size="formOptions.size"></Input>
      </FormItem>
      <FormItem label="机构简称" prop="shortOrgName">
        <Input v-model.trim="form.shortOrgName" clearable placeholder="请输入机构简称(1~4位)" :maxlength="4" :size="formOptions.size"></Input>
      </FormItem>
      <FormItem label="机构类型" prop="orgType" :required="true" v-if="platId === 'general'">
        <Select v-model="form.orgType" :size="formOptions.size" placeholder="请选择机构类型">
          <Option v-for="(item, index) in orgTypeList" :key="index" :value="item.itemkey">{{item.itemval}}</Option>
        </Select>
      </FormItem>
    </Form>
    <div class="action-wrap">
      <Button class="btn-primary-reverse" @click="visible = false">取消</Button>
      <Button type="primary" @click="checkForm('org-form', addOrg)" :disabled="btnLoading" :loading="btnLoading">确定</Button>
    </div>
    <Spin size="large" fix v-if="loading"></Spin>
  </Modal>
</template>

<script>
import formMixin from '../../mixins/form'
import org from '../../apis/org'
import base from '../../apis/base'

export default {
  mixins: [formMixin],
  data () {
    return {
      platId: window.$CONFIG.platId,
      pOrgId: '',
      pOrgName: '',
      form: {
        orgName: '',
        shortOrgName: '',
        orgType: ''
      },
      orgTypeList: [],
      formOptions: {
        labelWidth: 80,
        size: 'large'
      },
      rules: {
        orgName: [
          { required: true, message: '请输入机构全称' }
        ],
        shortOrgName: [
          { required: true, message: '请输入机构简称' }
        ],
        orgType: [
          { required: true, message: '请选择机构类型' }
        ]
      },
      visible: false,
      loading: false,
      btnLoading: false
    }
  },
  created () { },
  methods: {
    openModal (data) {
      this.visible = true
      this.init(data)
      if (this.platId === 'general') {
        this.getOrgType()
      }
    },
    async getOrgType () {
      try {
        this.loading = true
        let res = await base.queryOrgType()
        this.orgTypeList = res.data
        this.loading = false
      } catch (e) {
        this.loading = false
      }
    },
    async addOrg () {
      let { orgName, shortOrgName, orgType } = this.form
      let pOrgId = this.pOrgId
      try {
        this.btnLoading = true
        let res = await org.saveOrg({ orgName, shortOrgName, orgType, pOrgId })
        this.$Message.success('新增成功')
        this.$emit('success')
        this.visible = false
      } catch (e) {
        this.btnLoading = false
      }
    },
    init ({ orgId, orgName, root }) {
      this.pOrgId = orgId
      this.pOrgName = root ? '' : orgName
      this.resetForm('org-form')
      this.btnLoading = false
    }
  }
}
</script>