<template>
  <div class="addeditUserDialog">
    <el-dialog 
      class="assignRoles"
      title="分配角色"
      :visible.sync="dialogFormVisible" 
      :before-close="cancelRegister" 
      :top="top">

      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="功能角色" name="functionPart">
          <table-form 
            ref="multipleTable1"
            v-loading.body="isLoadingTableData1"
            :colData="colData" 
            :data="tableData1" 
            :colWidth="120"
            :row-key="rowKey"
            :max-height="400"
            :submiting="submiting1"
            :isShowOper="isShowOper"
            border 
            :sortable="sortable"
            style="padding: 0 10px 20px 10px"
            @selection-change="handleSelectChange1"
            >
            <el-table-column
              v-if="reserveSelection1"
              :reserve-selection="reserveSelection1"
              type="selection"
              width="55">
            </el-table-column>
            <el-table-column
              v-for="item in colData"
              :key="item.prop"
              :prop="item.prop"
              :label="item.label"
              :width="item.width"
              :align="item.align"
              :sortable="item.sortable || sortable">
            </el-table-column>
          </table-form>
        </el-tab-pane>
        <!-- <el-tab-pane label="空间数据角色" name="dataPart">
          <table-form 
            ref="multipleTable2"
            v-loading.body="isLoadingTableData2"
            :colData="colData" 
            :data="tableData2" 
            :colWidth="120"
            :row-key="rowKey"
            :max-height="400"
            :submiting="submiting2"
            :isShowOper="isShowOper"
            border 
            :sortable="sortable"
            style="padding: 0 10px 20px 10px"
            @selection-change="handleSelectChange2"
            >
            <el-table-column
              v-if="reserveSelection2"
              :reserve-selection="reserveSelection2"
              type="selection"
              width="55">
            </el-table-column>
            <el-table-column
              v-for="item in colData"
              :key="item.prop"
              :prop="item.prop"
              :label="item.label"
              :width="item.width"
              :align="item.align"
              :sortable="item.sortable || sortable">
            </el-table-column>
          </table-form>
        </el-tab-pane> -->
      </el-tabs>

      <!-- 分页 -->
      <!-- <el-row type="flex" justify="end" style="padding-right:10px;">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="pageSizes"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </el-row> -->

      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelRegister">取 消</el-button>
        <el-button type="primary" @click="dialogSure">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import TableForm from '@/components/Table.vue'
  import Api from '@/api/index.js'

  export default { 
    name: 'AddeditUserDialog',
    components: {
      TableForm
    },
    props: { 
      top: { 
        type: String,
        default: '7%'
      },
      userSelectionData: { 
        type: String,
        default: ''
      },
      userLen: { 
        type: Boolean,
        default: true
      },
      organGuid: { 
        type: [Number, String],
        default: 1
      }
    },
    data () { 
      return {
        dialogFormVisible: true,
        activeName: 'functionPart',
        isLoadingTableData1: false,
        submiting1: false,
        reserveSelection1: true,
        tableData1: null,
        selectionData1: [],
        tableSelect1: [],

        isLoadingTableData2: false,
        submiting2: false,
        reserveSelection2: true,
        tableData2: null,
        selectionData2: [],
        tableSelect2: [],

        colData: [],
        isShowOper: false,
        sortable: true,
        rowKey: 'id',
        tableData: null
      }
    },
    computed: { 
      gisopUserInfo () {
        return this.$store.state.gisopUserInfo
      }
    },
    mounted () {
      this.initData()
    },
    methods: { 
      // 初始化数据
      initData () { 
        this.colData = [
          {prop: 'rolename', label: '角色名称', sortable: true, align: 'center'},
          {prop: 'roledescription', label: '角色描述', sortable: true, align: 'center'}
        ]

        this.assignPart('0')
      },
      // 获取用户的权限
      getRoleSelect (id, type) {
        Api.getRoleSelect(id, type)
        .then(data => { 
          if (data.status === 0) {
            if (data.data !== null) {
              var dataArr = data.data.split(',')
              var tableDatas = [],
                  dom = null
              // 默认勾选功能角色
              if (type === '0') { // 功能
                tableDatas = this.tableData1
                dom = this.$refs.multipleTable1.$children[0]
              } else {
                // 默认勾选数据角色
                tableDatas = this.tableData2
                dom = this.$refs.multipleTable2.$children[0]
                // for (var i = 0; i < dataArr.length; i++) { 
                //   for (var j = 0; j < this.tableData2.length; j++) { 
                //     if (dataArr[i] === this.tableData2[j].roleguid) { 
                //       this.$refs.multipleTable2.$children[0].toggleRowSelection(this.tableData2[j])
                //     }
                //   }
                // }
              }
              // console.log(dataArr.length)
              for (var i = 0; i < dataArr.length; i++) {
                for (var j = 0; j < tableDatas.length; j++) { 
                  if (dataArr[i] === tableDatas[j].roleguid) { 
                    dom.toggleRowSelection(tableDatas[j])
                  }
                }
              }
            } 
          } else {
            this.$message({
              type: 'error',
              message: data.message
            })
          }
        }).catch(res => {
          this.$message({
            type: 'error',
            message: '获取数据失败'
          })
        })
      },
      // 分配角色列表
      assignPart (type) {
        let userType = this.gisopUserInfo.type === '0' ? '' : '1'
        Api.getRoleViewList(1, 15, '', type, userType)
        .then(data => {
          let datas = data.data
          if (data.status === 0) {
            if (datas.total > 0) {
              if (type === '0') { // 功能
                this.tableData1 = datas.result
              } else {
                this.tableData2 = datas.result
              }
              if (this.userLen) {
                this.getRoleSelect(this.userSelectionData, type)
              }
              // this.total = data.totalcount
            } else { 
              this.tableData1 = []
              this.total = null
              this.$message({
                type: 'warning',
                message: '获取数据为空'
              })
            }
          } else { 
            this.$message({
              type: 'error',
              message: '获取数据失败'
            })
          }
        }).catch(res => { 
          this.$message({
            type: 'error',
            message: '获取数据失败'
          })
        })

        /* Api.assignPart(this.loginduserguid,type,1,15 )
        .then(data => { 
          if (data.status === 0) { 
            if (data.results.rowCount > 0) { 
              if (type === '0') { // 功能
                this.tableData1 = data.results.records
                if( this.userOnoff ){ // 分公司
                  this.getRoleSelect(this.organGuid,1)
                }else{ // 用户
                  this.getRoleSelect(this.userSelectionData[0].userguid,2)
                }
              }else{ // 数据
                this.tableData2 = data.results.records
              }
            }else{ 
              this.$message({
                type: 'success',
                message: '获取数据为空'
              });
            }
          }else{ 
            this.$message({
              type: 'error',
              message: '获取数据失败'
            });
          }
        }).catch(res => { 
          this.$message({
            type: 'error',
            message: '获取数据失败'
          });
        }) */
      },
      // tab页切换
      handleClick (val) {
      },
      // 当选项发生
      handleSelectChange1 (selection) { 
        this.selectionData1 = []
        this.selectionData1 = selection
      },
      handleSelectChange2 (selection) { 
        this.selectionData2 = []
        this.selectionData2 = selection
      },
      // 确定
      dialogSure () { 
        this.$emit('dialog-sure', [this.selectionData1, this.selectionData2])
      },
      // 取消
      cancelRegister () { 
        this.$emit('dialog-cancel')
      }
    } 
  }
</script>

<style lang="scss">
  .addeditUserDialog{ 
    .el-dialog--small{ 
      width: 40%;
    } 
    .el-dialog__header{ 
      padding: 20px 20px 0 20px;
      text-align: center;
      .el-dialog__title{ 
        color: #666;
      }
    }
    .el-dialog__body{ 
      padding: 20px 15px 10px 40px;
    }
    .el-form-item__label{ 
      width: 80px;
      float: left;
    }
    .el-form-item__content{ 
      float: left;
      width: 350px;
    }
    .el-form-item{ 
      margin-bottom: 18px;
    }
  }
</style>
