<!-- 指派订单 弹出组件-->
<template>
  <a-form ref="form" v-bind="formItemLayout" :form="form">
    <a-form-item label="指派法务老师">
      <a-select
        v-decorator="[
          'role',
          {
            rules: [
              { required: true, message: '请选择法务老师!', type: 'string' },
            ]
          }
        ]"
        @change="handleRoleChange"
        placeholder="请选择指派法务老师">
        <a-select-option
          :value="item.key+''"
          v-for="item in permission"
          :key="item.key">
          <a-icon
            type="user"
            :style="{ fontSize: '14px', color: '#1890ff', padding: '6px 16px 6px 0' }" />{{ item.title }}</a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item label="指派法务助理">
      <a-select
        v-decorator="[
          'parent_id',
          {
            rules: [
              { required: true, message: '请选择指派法务助理!', type: 'string' },
            ]
          }
        ]"
        placeholder="请选择指派法务助理">
        <a-select-option
          :value="item.staff_id + ''"
          v-for="item in users"
          :key="item.staff_id">
          <a-icon
            type="user"
            :style="{ fontSize: '14px', color: '#1890ff', padding: '6px 16px 6px 0' }"
          />
          {{ item.name }}({{ item.type }}){{ item.username }}
        </a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item label="备注信息">
      <a-textarea
        :rows="4"
        v-decorator="[
          'remark',
          {
            rules: [
              { required: false, message: '请输入备注信息!', type: 'string' },
            ]
          }
        ]"
        placeholder="请输入备注信息" />
    </a-form-item>
  </a-form>
</template>

<script>
import { addPreDepartUser, addDepartsUser } from '@/api/permissions'
import moment from 'moment'
export default {
  name: 'DispatchOrder',
  data: () => ({
    formItemLayout: {
      labelCol: { span: 6 },
      wrapperCol: { span: 14 }
    },
    loading: false,
    permission: [],
    users: []
  }),
  beforeCreate () {
    this.form = this.$form.createForm(this)
  },
  created () {
    this.getBase('')
  },
  methods: {
    moment,
    getBase (key) {
      addPreDepartUser({ key: key }).then(res => {
        if (key === '') {
          this.permission = res.permission
        } else {
          this.users = res.users
        }
      })
    },
    handleRoleChange (value) {
      this.getBase(value + '')
    },
    onOk () {
      return new Promise(resolve => {
        this.form.validateFields((errors, values) => {
          values.password = values.password || '111111'
          if (!errors) {
            addDepartsUser(values).then((res) => {
              this.$notification.success({
                message: '成功',
                description: '添加成功'
              })
              resolve(true)
            }).catch((err) => {
              this.$notification.error({
                message: '失败',
                description: err.message
              })
              resolve(false)
            })
          }
        })
      })
    }
  }
}
</script>

<style scoped>
.flexrow {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
</style>
@/api/permissions