<!--
 * @Author: 曹捷
 * @Date: 2019-08-19 15:24:34
 * @LastEditors: 曹捷
 * @LastEditTime: 2021-03-23 16:01:49
 * @Description: file content
 -->
<template>
  <a-modal class="obit-modal-default" v-if="showModal" :maskClosable="false" :title="showTitle" v-model:visible="showModal"
    @cancel="closeDialog" @ok="saveInfo" cancelText="取消" okText="确认" width="40%">
    <a-form :inline="true" :model="formData" :rules="rules" ref="formRef" :label-col="{span: 4}"
      :wrapper-col="{span:18}">
      <a-form-item label="上级部门" name="deptId">
        <obit-cascader :valueName="pData.id" :label="pData.label" :children="pData.children" :parentId="pData.parentId"
          :options="orgList" v-model:value="formData.deptId" placeholder="请选择上级部门" :changeOnSelect="true">
        </obit-cascader>
      </a-form-item>
      <a-form-item label="部门名称" name="deptName">
        <a-input :maxlength="20" placeholder="请输入部门名称" show-word-limit v-model:value="formData.deptName"></a-input>
      </a-form-item>
      <a-form-item label="排序" name="orderNum">
        <a-input-number id="inputNumber" placeholder="排序" v-model:value.number="formData.orderNum" :min="1"
          :max="999999999999999" style="width: 150px;" />
      </a-form-item>
      <a-form-item label="负责人">
        <a-input :maxlength="20" placeholder="请输入负责人" show-word-limit v-model:value="formData.leader"></a-input>
      </a-form-item>
      <a-form-item label="联系电话">
        <a-input :maxlength="20" placeholder="请输入联系电话" show-word-limit v-model:value="formData.phone"></a-input>
      </a-form-item>
      <a-form-item label="邮箱">
        <a-input :maxlength="20" placeholder="请输入联系邮箱" show-word-limit v-model:value="formData.email"></a-input>
      </a-form-item>
      <!-- <a-form-item label="部门状态">
        <a-radio-group name="radioGroup" v-model:value="formData.status">
          <a-radio value="0">正常</a-radio>
          <a-radio value="1">停用</a-radio>
        </a-radio-group>
      </a-form-item> -->
      <a-form-item  label="部门状态">
        <obit-dict dictCode="sys_normal_disable" type="radio" v-model:value="formData.status">
        </obit-dict>
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script>
import { computed, inject, onMounted, reactive, ref, toRefs, watch } from 'vue'
import { util } from '../../../entery'
import obitOrg from '../../../components/obit-org/obit-org.vue'
export default {
  components: { obitOrg },
  props: {
    open: {
      type: Boolean
    },
    addType: {
      type: String,
    },
    detailsInfo: {
      type: Object,
    },
  },
  setup (props, context) {
    let http = inject('http')
    let _data = reactive({
      showModal: props.open,
      formData: {
        status: '1',
      },
      superior: {},//下拉数据列表
      getlistLoading: false,//获取到下拉列表的数据前默认改选择器不可用
      formRef: null,
      orgList: {},
      pData: { label: 'label', id: 'id', children: 'children', parentId: 'parentId' },

      rules: {
        deptId: [
          { required: true, message: '请选择上级部门', trigger: 'blur' },
        ],
        deptName: [
          { required: true, message: '请输入排序', trigger: 'blur',},
        ],
        orderNum: [
          // { required: true, message: '请输入排序', trigger: 'blur', type: 'number' ,transform(value){return Number(value)} },
          { required: true, message: '请输入排序', }
        ],
      },
    })
    let _computed = {
      showTitle: computed(() => props.addType === 'add' ? '新增部门' : '修改部门')
    }
    let _methods = {
      saveInfo () {
        _data.formRef.validate().then(() => {
          let param = util.util.cloneObj(_data.formData)
          if(param.leader === undefined || param.phone === undefined || param.email === undefined){
            param.leader = ''
            param.phone = ''
            param.email = ''
          }
          let paramdept = {
            parentId: param.deptId,
            deptName: param.deptName,
            leader: param.leader,
            orderNo: param.orderNo,
            orderNum: param.orderNum,
            email: param.email,
            phone: param.phone,
          }
          // console.log('paramdept', paramdept)
          if (props.addType === 'add') {
            http.sysPost('system/dept/add', paramdept).then((res) => {
              context.emit('reload')
              _methods.closeDialog()
            })
          } else {
            paramdept.parentId = param.parentId,
            paramdept.deptId = param.deptId
            http.sysPost('system/dept/edit', paramdept).then((res) => {
              context.emit('reload')
              _methods.closeDialog()
            })
          }

        })
      },
      closeDialog () {
        util.util.cleanObj(_data.formData)
        context.emit('update:open', false)
      },
      handleSearch (value) {
        _data.handleChange(value);
      },
      handleChange (value) {
        _data.formData.parentId = value != null && value != '' ? value : [];
      },
      handleBlur (value) {
        _data.formData.parentId = value;
        if (_data.list.indexOf(value) == -1) {
          _data.list.push(value);
        }
      },
    }
    watch(() => props.open, (value) => {
      
      _data.orgList = []
      http.sysGetTreeSelect().then(data => {
        _data.orgList = util.util.cloneObj(data)
      })
      if (value) {
        // console.log(1, props.detailsInfo)
        _data.formData = util.util.cloneObj(props.detailsInfo)
        if (props.addType === 'add') {
          _data.formData.orderNo = 0
          _data.formData.status = '0'
        }
      } else {
        util.util.cleanObj(_data.formData)

      }

    })
    onMounted(() => {
      // _methods.getOrgList()
    })
    return {
      ..._computed,
      ...toRefs(_data),
      ..._methods
    }
  },
}
</script>
<style lang="less">
</style>