<template>
  <div class="role-container">
    <el-card class="flex1">
      <!-- <div class="now-name">
        当前客户: {{customerName}}
         <el-button type="primary" size="small" @click="handleSaveSort">保存顺序</el-button>
      </div> -->
      <el-table ref="roleTable"
                v-loading="loading1"
                :data="roleList"
                row-key="roleKey"
                border
                style="width: 100%">
        <el-table-column type="index"
                         width="50"></el-table-column>
        <!-- <el-table-column prop="roleId" label="角色ID"></el-table-column> -->
        <el-table-column prop="roleName"
                         label="角色名称"
                         width="160">
          <template slot-scope="scope">
            <el-input v-if="scope.row.isEdit"
                      v-model="scope.row.roleName"
                      clearable>
            </el-input>
            <span v-else>{{scope.row.constName}}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="!funcShow"
                         prop="roleKey"
                         label="角色Key"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary"
                       size="mini"
                       @click="toOperationConfig(scope.row.roleKey, scope.row.roleName)">功能权限</el-button>
            <!-- <span v-if="scope.row.isEdit" style="display: inline-block; margin-left: 10px;">
              <el-button type="primary" size="small" @click="handleSaveChange(scope.row)">保存</el-button>
              <el-button  size="small" @click="scope.row.isEdit=false">取消</el-button>
            </span>
            <el-button v-else type="primary" size="mini" @click="handleChangeName(scope.row)">修改名称</el-button> -->
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog :visible.sync="funcShow"
               :close-on-click-modal="false"
               :close-on-press-escape="false"
               width="70%"
               top="30px"
               title="功能列表"
               @closed="handleDialogClosed">
      <div class="role-flex"
           v-if="funcShow">
        <el-card class="flex1">
          <div class="now-name">当前角色: {{roleName}}</div>
          <div class="now-name">
            <el-button type="primary"
                       size="small"
                       @click="saveOperations4Role">保存功能</el-button>
          </div>
          <el-table v-loading="loading2"
                    height="580"
                    ref="opeTable"
                    :data="opeList"
                    border
                    @select="handleSelectionChange">
            <el-table-column type="selection"
                             width="55"></el-table-column>
            <!-- <el-table-column prop="operationKey" label="操作Key"></el-table-column> -->
            <el-table-column prop="operationName"
                             label="操作名称"></el-table-column>
            <!-- <el-table-column prop="brief" label="简介"></el-table-column> -->
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="primary"
                           size="small"
                           @click="toScopeConfig(scope.row.operationKey, scope.row.operationName)">范围配置</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
        <el-card v-show="roleShow"
                 style="width: 250px; margin-left: 10px;">
          <div class="now-name">当前功能: {{funcName}}</div>
          <div class="now-name">
            <el-button type="primary"
                       size="small"
                       @click="saveSettings">保存范围</el-button>
          </div>
          <div>
            <el-row :gutter="12">
              <el-col v-loading="loading3">
                <el-card shadow="hover">
                  <el-checkbox-group class="t"
                                     v-model="checkedScopes"
                                     @change="roleChange">
                    <el-checkbox v-for="scope in scopeOptions"
                                 :label="scope.scopeKey"
                                 :key="scope.scopeKey">{{scope.scopeName}}</el-checkbox>
                  </el-checkbox-group>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Sortable from 'sortablejs'
export default {
  name: 'RoleList',
  props: {
    customerId: {
      type: String,
      default: ''
    },
    customerName: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      loading1: false,
      loading2: false,
      loading3: false,
      funcShow: false,
      roleShow: false,
      roleName: '',
      funcName: '',
      roleList: [],
      opeList: [],
      roleKey: '',
      operationKey: '',
      scopeOptions: [],
      settingOptions: [],
      checkedScopes: [],
      checkedSettings: [],
      operateSection: [], // 功能选择列表
      scopeSection: [] // 范围选择列表
    }
  },
  created () {
    this.listRolesByCustomerId()
  },
  mounted () {
    this.dragRoleSort()
  },
  beforeDestroy () {
    let _data = this.$data
    for (let n in _data) {
      if (typeof _data[n] === 'boolean') _data[n] = false
      if (typeof _data[n] === 'string') _data[n] = ''
      if (typeof _data[n] === 'object') _data[n] = []
    }
  },
  methods: {
    handleDialogClosed () {
      this.roleName = ''
      this.roleKey = ''
      this.funcName = ''
      this.operateSection = []
      this.scopeSection = []
      this.funcShow = false
      this.roleShow = false
    },
    listRolesByCustomerId (customerId) {
      this.loading1 = true
      this.$http
        .post('/epmetuser/govstaffrole/roletemplates')
        .then(({ data: res }) => {
          console.log('ressss', res)
          if (res.code === 0) {
            this.roleList = res.data.map(item => {
              return {
                ...item,
                constName: item.roleName,
                isEdit: false
              }
            })
          }
          setTimeout(() => {
            this.loading1 = false
          }, 500)
        })
    },
    listOperations4AccessConfig (roleKey) {
      this.roleKey = roleKey
      this.loading2 = true
      this.$http.post('/gov/access/config/roledefaultops/' + roleKey).then((resp) => {
        this.opeList = resp.data.data
        this.$nextTick(function() {
          this.defaultCheck() // 每次更新了数据，触发这个函数即可。
        })
        setTimeout(() => {
          this.loading2 = false
        }, 500)
      })
    },
    listSettingOptions (operationKey) {
      let params = {
        roleKey: this.roleKey,
        operationKey: operationKey
      }
      console.log('checkedScopes', this.checkedScopes)
      this.loading3 = true
      this.checkedScopes = []
      this.$http
        .post('/gov/access/config/opedefaultscopes/list', params)
        .then(resp => {
          console.log('scopeOptions', resp.data)
          this.scopeOptions = resp.data.data
          resp.data.data.forEach(item => {
            if (item.assigned) this.checkedScopes.push(item.scopeKey)
          })
          console.log('checkedScopes222', this.checkedScopes)
          this.settingOptions = resp.data.data
          setTimeout(() => {
            this.loading3 = false
          }, 500)
        })
    },
    defaultCheck () {
      for (var index in this.opeList) {
        let role = this.opeList[index]
        if (role.assigned) {
          this.$refs.opeTable.toggleRowSelection(role, true)
        }
      }
    },
    toOperationConfig (roleKey, roleName) {
      this.roleName = roleName
      this.funcShow = true
      this.opeList = []
      this.listOperations4AccessConfig(roleKey)
    },
    toScopeConfig (operationKey, operationName) {
      this.roleShow = true
      this.operationKey = operationKey
      this.funcName = operationName
      this.checkedScopes = []
      this.listSettingOptions(operationKey)
    },
    saveOperations4Role () {
      let param = {
        roleKey: this.roleKey,
        operationKeys: this.operateSection.map(item => item.operationKey)
      }
      this.$http.post('/gov/access/config/roledefaultopes/save', param).then(
        resp => {
          const { code, msg } = resp.data
          if (code === 0 && msg === 'success') {
            this.$message({
              message: '操作成功',
              type: 'success'
            })
            this.listOperations4AccessConfig(this.roleKey)
          } else {
            this.$message({
              message: msg,
              type: 'error'
            })
          }
        }
      )
    },
    saveSettings () {
      let param = {
        roleKey: this.roleKey,
        operationKey: this.operationKey,
        scopeKeys: this.scopeSection
      }

      this.$http.post('/gov/access/config/opedefaultscopes/save', param).then(
        resp => {
          const { code, msg } = resp.data
          if (code === 0 && msg === 'success') {
            this.$message({
              type: 'success',
              message: '保存成功'
            })
            this.listSettingOptions(this.operationKey)
          } else {
            this.$message({
              message: msg,
              type: 'error'
            })
          }
        }
      )
    },
    roleChange (val) {
      console.log('valooo', val)
      this.scopeSection = val
      // this.saveSettings(val)
    },
    handleSelectionChange (val) {
      // console.log('val', val)
      this.operateSection = val
      // this.saveOperations4Role(val)
    },
    handleChangeName (row) {
      row.isEdit = true
    },
    handleSaveChange (row) {
      let data = {
        roleKey: row.roleKey,
        roleName: row.roleName
      }
      this.$http
        .post('/epmetuser/govstaffrole/update-role', data)
        .then(({ data: res }) => {
          console.log('ressss', res)
          if (res.code === 0 && res.msg === 'success') {
            this.$message({
              type: 'success',
              message: '保存成功'
            })
            this.listRolesByCustomerId(this.customerId)
          } else {
            this.$message({
              type: 'error',
              message: res.msg
            })
          }
        })
    },
    dragRoleSort () {
      const el = this.$refs.roleTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
      this.sortTable = Sortable.create(el, {
        group: 'dragTable',
        ghostClass: 'sortable-ghost', // Class name for the drop placeholder,
        // setData: function(dataTransfer, dragEl) {
        //   dataTransfer.setData("Text", dragEl.textContent);
        // },
        delay: 0,
        onChange: evt => {
          // console.log(evt)
        },
        onEnd: evt => {
          const targetRow = this.roleList.splice(evt.oldIndex, 1)[0]
          this.roleList.splice(evt.newIndex, 0, targetRow)
        }
      })
    },
    handleSaveSort () {
      let data = {
        roleIdList: this.roleList.map(item => {
          return item.roleKey
        })
      }
      this.$http
        .post('/epmetuser/govstaffrole/save-sortorder', data)
        .then(({ data: res }) => {
          console.log('ressss', res)
          if (res.code === 0 && res.msg === 'success') {
            this.$message({
              type: 'success',
              message: '保存成功'
            })
            this.listRolesByCustomerId(this.customerId)
          } else {
            this.$message({
              type: 'error',
              message: res.msg
            })
          }
        })
    }
  }
}
</script>

<style>
.role-container,
.role-flex {
  display: flex;
}
.flex1 {
  flex: 1;
}
.now-name {
  /* display: flex;
  justify-content: space-between; */
  margin-bottom: 10px;
}
.aui-wrapper .el-card + .el-card {
  margin-top: 0;
}
.role-container .el-dialog__body {
  padding: 0 20px 20px;
}
</style>
