<template>
  <div class="app-container">
    <el-card>
      <div style="margin: 0 auto;width: 850px">
        <span>角色名称:</span>
        <el-select v-model="roleName" placeholder="请选择" size="small" style="width:200px;margin-left:10px" filterable clearable @change="getmodule">
          <el-option
            v-for="item in roleNames"
            :key="item.value"
            :label="item.label"
            :value="item.value"/>
        </el-select>
        <el-button type="primary" size="small" style="float: right" @click="openModelWin">添加模块(开发使用)</el-button>
      </div>
    </el-card>
    <el-card>
      <div style="margin: 0 auto;width: 850px">
        <el-transfer
          :filter-method="filterMoudles"
          v-model="value1"
          :titles="['权限列表','角色对应权限列表']"
          :props="{key: 'value'}"
          :data="modelNames"
          filterable
          @change="roleChange"/>
      </div>
    </el-card>
    <el-dialog :title="title" :visible.sync="dialogFormVisible" center style="min-height: 300px" width="400px">
      <el-form ref="form" :model="form" :rules="rules" label-position="left" label-width="110px" class="demo-ruleForm">
        <el-row>
          <el-form-item label="选择模块名称" prop="选择模块名称">
            <el-select v-model="modelName" size="mini" clearable placeholder="请选择模块名称" filterable @change="getModelData" @clear="clearModel">
              <el-option
                v-for="item in modelNames"
                :key="item.value"
                :label="item.label"
                :value="item.value"/>
            </el-select>
            <div style="font-size: 12px;color: red;margin: -15px 0">选择模块名称是修改，没选择是增加</div>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="组件" prop="组件">
            <el-input
              v-model="form.组件"
              size="small"
              style="width:200px"/>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="标题" prop="标题">
            <el-input
              v-model="form.标题"
              size="small"
              style="width:200px"/>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="图标" prop="图标">
            <el-input
              v-model="form.图标"
              size="small"
              style="width:200px"/>
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel('form')">取消</el-button>
        <el-button type="primary" @click="submit('form')">确定</el-button>
        <el-button v-if="show" type="danger" @click="deleteModule()">删除模块</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getRole, getModule, addModule, deleteModule, getModelData, addModelData, editModelData } from '@/api/BasicData/UserRightsManagement'
import { arrayUnique2 } from '@/utils/tool'
export default {
  data() {
    return {
      modelNames: [],
      value4: [],
      value1: [],
      addnum: 0,
      deletenum: 0,
      roleName: null,
      roleNames: [],
      data1: [],
      dialogFormVisible: false,
      title: '',
      form: {
        组件: '',
        标题: '',
        图标: ''
      },
      rules: {
        组件: [{ required: true, message: '请输入', trigger: 'blur' }],
        标题: [{ required: true, message: '请输入', trigger: 'blur' }],
        图标: [{ required: true, message: '请输入', trigger: 'blur' }]
      },
      modelName: '',
      show: false
    }
  },
  created() {
    this.getRoleName()
    this.getAllModules()
  },
  methods: {
    clearModel() {
      this.modelName = ''
    },
    getRoleName() {
      getRole().then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.roleNames.push({
            value: response.data[i].角色编号,
            label: response.data[i].角色功能
          })
        }
      })
    },
    getAllModules() {
      this.modelName = ''
      this.modelNames = []
      getModule().then(response => {
        const data = response.data
        for (let i = 0; i < data.length; i++) {
          this.modelNames.push({
            value: response.data[i].主模块编号,
            label: response.data[i].标题,
            disabled: true
          })
          if (i === data.length - 1) {
            this.modelNames = arrayUnique2(this.modelNames, 'value')
          }
        }
      })
    },
    filterMoudles(query, item) {
      return item.label.indexOf(query) > -1
    },
    getmodule() {
      this.value1 = []
      if (this.roleName) {
        for (let i = 0; i < this.modelNames.length; i++) {
          this.modelNames[i].disabled = false
        }
        getModule(1, this.roleName).then(response => {
          for (let i = 0; i < response.data.length; i++) {
            this.value1.push(parseInt(response.data[i].主模块编号))
          }
        })
      } else {
        for (let i = 0; i < this.modelNames.length; i++) {
          this.modelNames[i].disabled = true
        }
        this.value1 = []
      }
    },
    roleChange(value, direction, movedKeys) {
      for (let i = 0; i < movedKeys.length; i++) {
        if (direction === 'right') {
          this.addnum = 0
          addModule(movedKeys[i], this.roleName).then(response => {
            this.addnum = this.addnum + parseInt(response.data[0].result)
            if (this.addnum === movedKeys.length) {
              this.$notify({
                title: '成功',
                message: '分配成功',
                type: 'success'
              })
            }
          })
        } else {
          this.deletenum = 0
          deleteModule(movedKeys[i], this.roleName).then(response => {
            this.deletenum = this.deletenum + parseInt(response.data[0].result)
            console.log(this.deletenum, movedKeys.length)
            if (this.deletenum === movedKeys.length) {
              this.$notify({
                title: '成功',
                message: '分配成功',
                type: 'success'
              })
            }
          })
        }
      }
    },
    // 开发者
    getModelData() {
      if (typeof this.modelName === 'number') {
        getModelData(this.modelName).then(response => {
          const data = response.data[0]
          this.form.组件 = data.子组件
          this.form.标题 = data.标题
          this.form.图标 = data.图标
        })
      }
    },
    openModelWin() {
      this.dialogFormVisible = true
      this.addForm('form')
    },
    cancel() { // 取消
      this.modelName = ''
      this.dialogFormVisible = false
    },
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.dialogFormVisible = false
          if (typeof this.modelName === 'string') {
            addModelData(this.form.组件, this.form.标题, this.form.图标).then(response => {
              if (response.data[0].result === '1') {
                this.$message.success('添加成功')
                this.getAllModules()
              } else {
                this.$message.error('添加失败')
              }
            })
          } else {
            editModelData(this.modelName, this.form.组件, this.form.标题, this.form.图标).then(response => {
              if (response.data[0].result === '1') {
                this.$message.success('修改成功')
                this.getAllModules()
              } else {
                this.$message.error('修改失败')
              }
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    deleteModule() {
      console.log(1)
    }
  }
}
</script>

<style>
  .el-transfer-panel {
    width:300px;
  }
.el-transfer-panel__body {
  height: 500px;
  width: 300px;
}
.el-transfer-panel__list {
  height: 500px;
  width: 300px;
}
  .el-transfer-panel__list.is-filterable{
    height: 100%;
  }
</style>
