<template>
  <a-modal :title="add?'添加角色':'修改角色'" v-model="visible" @ok="handleOk" :maskClosable="false" destroyOnClose>
    <a-form>
      <div v-if="shuiyihu">
        <a-form-item  label="角色名称" :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}" >
          <a-input :Visibility="shuiyihu"  placeholder="请输入角色名称" v-model="modelData.name"></a-input>
        </a-form-item>
      </div>
      <div v-if="!shuiyihu">
        <a-form-item  label="角色名称" :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}" >
          <a-select placeholder="请选择" v-model="modelData.name">
            <a-select-option key="">请选择</a-select-option>
            <a-select-option v-for="data in rolename" :key="data.name">
              {{ data.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </div>

      <a-form-item  label="上级角色" :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}">
        <treecheck  ref="tree1" @select="contentSelect1" :createFun="userRoleTreeList"></treecheck>
      </a-form-item>
      <a-form-item label="所属部门" :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}">
        <treecheck ref="tree2" @select="contentSelect2" :createFun="getList"></treecheck>
      </a-form-item>
      <a-form-item label="菜单权限" :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}">
        <!--<treecheck
          ref="tree3"
          @selectcheck="contentSelectCheck"
          :treeCheckable="true"
          :createFun="selectMenuTreeList"
        ></treecheck>-->
        <wtree ref="tree3" :createFun="selectMenuTreeList" @selectChange="contentSelectCheck"></wtree>
      </a-form-item>
      <a-form-item label="备注" :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}">
        <a-input placeholder="请输入备注" v-model="modelData.tips"></a-input>
      </a-form-item>
      <a-form-item label="排序" :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}">
        <a-input placeholder="请输入排序" v-model="modelData.num"></a-input>
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script>
import { getList, userRoleTreeList, selectMenuTreeList, userdetail, userUpdate, userAdd ,findSyhList} from '@/api/system'
import treecheck from '@/components/sysmanage/treeCheck'
import { unique } from '@/utils/util'
import Wtree from "../../../components/sysmanage/Wtree";
export default {
  name: 'roleModal',
  components: {
    Wtree,
    treecheck
  },
  props: {},
  data() {
    return {
      userRoleTreeList,
      getList,
      shuiyihu:true,
      rolename:'',
      selectMenuTreeList,
      add: true, //弹窗标题
      visible: false, //弹窗是否显示
      modelData: {
        //弹窗数据
        name: '',
        tips: '',
        num: '',
        id: '',
        pid: '',
        deptid: '',
        ids: ''
      }
    }
  },
  methods: {
    //tree1下拉框选中事件
    contentSelect1(data) {
      this.modelData.pid = data.id
      if(data.id === "196"){
        findSyhList().then(res => {

          this.rolename=res.data
          this.shuiyihu=false;
        })
      }else{
        this.shuiyihu=true;
      }
    },
    //tree2下拉框选中事件
    contentSelect2(data) {
      this.modelData.deptid = data.id
    },
    //tree3下拉框选中事件
    contentSelectCheck(data) {
      console.log(unique(data).join(','))
      this.modelData.ids = unique(data).join(',');
    },
    showModal(type) {
      let that = this
      if (type === 'add') {
        that.add = true
        that.visible = true
        that.clearModal()
      } else {
        that.add = false
        that.visible = true
        that.clearModal()
        userdetail({ roleId: type }).then(res => {

          let data = res.role
          that.modelData.name = data.name
          that.modelData.tips = data.tips
          that.modelData.num = data.num
          that.modelData.id =  data.id
          that.modelData.pid = data.pid

          that.modelData.deptid = data.deptid
          that.modelData.ids = res.ids.join(",")
          that.$refs.tree1.setValue(data.pid)
          that.$refs.tree2.setValue(data.deptid)
          that.$refs.tree3.setValue(res.ids)
        })
      }
    },
    handleOk() {
      let that = this

      if (that.modelData.id == '') {
        userAdd(that.modelData).then(() => {
          that.visible = false
          that.clearModal()
          that.$emit('ok')
        })
      } else {
        userUpdate(that.modelData).then(() => {
          that.visible = false
          that.clearModal()
          that.$emit('ok')
        })
      }
    },
    //清除弹窗信息
    clearModal() {
      this.modelData.name = ''
      this.modelData.tips = ''
      this.modelData.num = ''
      this.modelData.id = ''
      this.modelData.pid = ''
      this.modelData.deptid = ''
      this.modelData.ids = '';
      this.shuiyihu=true;

    }
  }
}
</script>

