<template>
  <div class="dialog">
    <el-dialog :width="dialogWidth" :close-on-click-modal="false" :title="title" :visible.sync="dialogVisible">
      <el-form
        :model="form"
        :rules="rules"
        ref="form"
      >
        <el-form-item label="角色名称" prop="roleName" :label-width="formLabelWidth">
          <el-input v-model="form.roleName" autocomplete="off"></el-input>
        </el-form-item>
<!--        <el-form-item label="权限字符"  :label-width="formLabelWidth">-->
<!--          <el-input v-model="form.roleKey" autocomplete="off"></el-input>-->
<!--        </el-form-item>-->
        <el-form-item label="显示排序" prop="sortNum" :label-width="formLabelWidth">
          <el-input v-model.number="form.sortNum" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input v-model="form.remark" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="菜单权限" :label-width="formLabelWidth">
          <el-tree
            style="max-height: 350px;overflow:scroll;border: 1px solid #eee;"
            ref="tree"
            :data="data"
            :check-strictly="checkStrictly"
            show-checkbox
            node-key="id"
            :default-checked-keys="keys"
            :props="defaultProps">
          </el-tree>
<!--          <el-button @click="getCheckedNodes">通过 node 获取</el-button>-->
<!--          <el-button @click="getCheckedKeys">通过 key 获取</el-button>-->
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogStatus==='createClient.vue'?createData('form'):updateData('form')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

  import { getMenuTreeData2,addRole,getRoleInfo,getRoleMenuTreeData,updateRole} from '@/api/system/system.js'
  import { getMenuTree,getMenuIds} from '@/utils/getTable.js'
  export default {
    name: 'roleDialog',
    data() {
      return {
        roleId:'',
        keys:[],
        data: [],
        defaultProps: {
          children: 'children',
          label: 'title'
        },
        dialogVisible:false,
        dialogStatus:'',
        title: "",
        formLabelWidth: '80px',
        dialogWidth: '600px',
        form: {
          menuIds: '',
          remark: '',
          roleKey: '',
          roleName: '',
          sortNum: ''
        },
        checkStrictly:false,
        rules: {
          roleName: [
            { required: true, message: '请输入名称', trigger: 'blur' },
          ],
          sortNum: [
            { required: true, message: '排序不能为空', trigger: 'blur' },
            { type: 'number', message: '必须为数字值'}
          ],
        }
      }
    },
    props: {
    },
    mounted() {
    },
    methods: {
      getCheckedNodes() {
        return this.$refs.tree.getCheckedNodes()
      },
      getCheckedKeys() {
        return this.$refs.tree.getCheckedKeys()
      },
      createData(formName) {
        //增加事件确定
        const _that = this;
        // console.log('form', _that.form)
        this.$refs[formName].validate((valid) => {
          if (valid) {
            _that.form.menuIds = _that.getCheckedKeys().concat(_that.$refs.tree.getHalfCheckedKeys()).join(',');
            // console.log('form',_that.form)
            var data = {
              "role": JSON.stringify(_that.form)
            }

            addRole(data).then(response => {
              _that.dialogVisible = false
              _that.$message({
                message: '增加成功',
                type: 'success'
              });
              _that.$emit('tableRefresh',"");
            })
          }
        })
      },
      updateData(formName) {
        //修改事件确定
        const _that = this;
        // console.log('form', _that.form)
        this.$refs[formName].validate((valid) => {
          if (valid) {
            _that.form.menuIds = _that.getCheckedKeys().concat(_that.$refs.tree.getHalfCheckedKeys()).join(',');
            _that.form["id"] = _that.roleId;
            // console.log('form',_that.form)
            // return;
            var data = {
              "role": JSON.stringify(_that.form)
            }
            updateRole(data).then(response => {
              _that.dialogVisible = false
              _that.$message({
                message: '修改成功',
                type: 'success'
              });
              _that.$emit('tableRefresh',"");
            })
          }
        })
      },
      handleCreateAdd(){
        //增加
        const _that = this;
        _that.title = "增加角色";
        _that.dialogStatus = 'createClient.vue'
        _that.keys= [];
        _that.form={
          menuIds: '',
            remark: '',
            roleKey: '',
            roleName: '',
            sortNum: ''
        },
        getMenuTreeData2().then(response => {
          _that.dialogVisible = true;

          // console.log('getMenuTreeData2',response)
          const menuData = getMenuTree(response.data)
          // console.log('menuData', menuData);
          _that.data = menuData;
        })
      },
      handleUpdata(id){
        //修改
        const _that = this;
        _that.title = "修改角色";
        _that.dialogStatus = 'update'
        _that.dialogVisible = true;
        _that.checkStrictly = true
        _that.roleId = id;
        var data = {
          "roleId": id
        }
        _that.keys= [];
        getRoleInfo(data).then(response => {

          _that.dialogVisible = true;
          // console.log('getRoleInfo',response)
          var data = response.data;
          _that.form = {
            remark: data.remark,
            roleKey: data.roleKey,
            roleName: data.roleName,
            sortNum: data.sortNum
          }

        })
        getRoleMenuTreeData(id).then(response => {
          _that.dialogVisible = true;
          // console.log('getRoleMenuTreeData',response)
          const menuData = getMenuTree(response.data)
          for (let i = 0; i < menuData.length; i++) {
            var menuDataItem = menuData[i];
            if(menuDataItem.visible==0){
              _that.$set(menuDataItem, 'disabled', true);
            }else {
              _that.$set(menuDataItem, 'disabled', false);
            }
            if(menuDataItem.children!=undefined && menuDataItem.children.length>0){
              for (let j = 0; j < menuDataItem.children.length; j++) {
                var menuChildrenItem = menuDataItem.children[j]
                if(menuChildrenItem.visible==0){
                  _that.$set(menuChildrenItem, 'disabled', true);
                }else {
                  _that.$set(menuChildrenItem, 'disabled', false);
                }
              }
            }


          }
          const menuGetId= getMenuIds(response.data)
          // console.log('menuGetId',menuGetId)
          _that.data = menuData;
          _that.keys = menuGetId;
          _that.checkStrictly = false
        })
      }
    },
    watch: {
      titleDialog() {
        this.title = this.titleDialog
      },
    }
  }
</script>


<style scoped>
  .dialog {


  }

  .tree-span {
    padding-left: 15px;
  }

  .tree-span span {
    color: #E6A23C;
  }


</style>
