<!-- 系统配置 - 权限配置 -- 后台菜单权限 -->
<template>
  <div class="page">
    <div class="contain">
      <topBar v-if="topList.length > 0" :top-list="topList" :moren="moren" />
      <div class="thetopbox">
        <el-form ref="form" :model="queryParams" label-width="80px">
          <el-row>
            <el-col :span="4" style="margin-left: -5px">
              <el-form-item :label="'角色'" prop="roleId">
                <el-select v-model="queryParams.roleId" clearable>
                  <el-option
                    v-for="item in roleList"
                    :key="item.pkId"
                    :label="item.roleName"
                    :value="item.roleId"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="'管理名称'">
                <el-input v-model="queryParams.nickName" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="4" style="margin-left: 0px">
              <el-form-item :label="'菜单名称'" prop="status">
                <el-select v-model="queryParams.menuId" clearable>
                  <el-option
                    v-for="item in menuAllList"
                    :key="item.value"
                    :label="item.menuName"
                    :value="item.menuId"
                  />
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item :label="'创建日期'" prop="creationTime">
                <el-date-picker
                  v-model="queryParams.creationTime"
                  value-format="yyyy-MM-dd"
                  type="daterange"
                  :range-separator="'至'"
                  :start-placeholder="'开始日期'"
                  :end-placeholder="'结束日期'"
                  @change="changeTime"
                />
              </el-form-item>
            </el-col>
            <el-col :span="4" style="margin-left: 0px">
              <div class="searchbox">
                <el-button class="my_search" @click="research()">
                  {{ '搜索' }}
                </el-button>
                <el-button class="my_reset" @click="reChongzhi">
                  {{ '重置' }}
                </el-button>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="main">
        <div class="maintop">
          <div class="mainbtn">
            <el-button
              v-has-buttons="['limitsListAdd']"
              size="small"
              class="thebtn1"
              @click="addRules"
            >{{ '添加' }}
            </el-button>
            <el-button
              size="small"
              style="background-color: #ffad41"
              class="thebtn1"
              @click="handleExport"
            >
              {{ '导出' }}
            </el-button>
          </div>
        </div>
        <div class="maintable">
          <el-table
            v-loading="loading"
            :data="tableData"
            style="width: 100%"
            height="710px"
            :header-cell-style="{ background: '#EEEEEE' }"
            :row-class-name="tableRowClassName"
            :span-method="objectSpanMethod"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55" />
            <el-table-column
              align="center"
              prop="roleIdVal"
              :label="'角色'"
              width="320"
            />
            <el-table-column
              align="center"
              prop="nickName"
              :label="'管理名称'"
              width="240"
            />
            <el-table-column
              align="center"
              prop="menuIdVal"
              :label="'菜单名称'"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              align="center"
              prop="creationTime"
              :label="'创建日期'"
              width="160"
            />
            <el-table-column
              align="center"
              prop=""
              :label="'操作'"
              fixed="right"
              width="200"
            >
              <template slot-scope="scope">
                <el-button
                  v-show="user.userName == 'admin'"
                  type="text"
                  size="small"
                  class="button-s"
                  style="color: #c73030"
                  @click="toLogin(scope.row)"
                >登录
                </el-button>

                <el-button
                  v-has-buttons="['limitsListUpdate']"
                  class="button-s"
                  type="text"
                  size="small"
                  style="color: #6962f6"
                  @click="updateShow(scope.row, tableData)"
                >
                  {{ '修改' }}
                </el-button>
                <el-button
                  class="button-s"
                  type="text"
                  size="small"
                  style="color: #e70dec"
                  @click="updateShows(scope.row, tableData)"
                >
                  {{ '查看' }}
                </el-button>
                <el-button
                  v-has-buttons="['limitsListDelete']"
                  type="text"
                  size="small"
                  class="button-s"
                  style="color: #c73030"
                  @click="delRole(scope.row, tableData)"
                >
                  {{ '删除' }}
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="research"
      />
    </div>
  </div>
</template>

<script>
import topBar from '@/components/topBarRole'
import * as api from '@/api/notice'
import { Message } from 'element-ui'
import { getRouters } from '@/api/settle'
import { freeLogin } from '@/api/manage'
import { setToken } from '@/utils/auth'
import { login } from '@/api/user'
import { mapGetters } from 'vuex'

export default {
  name: 'Qxpz',
  components: {
    topBar
  },
  data() {
    return {
      value: '',
      forms: '',
      rules: {
        nickName: [
          { required: true, message: '请输入管理姓名', trigger: 'blur' }
        ]
      },
      table: {
        nickName: '',
        status: ''
      },
      moren: 'limitsList',
      topList: [
        {
          name: '前台菜单权限',
          path: 'receptionRole',
          url: 'receptionRole',
          changed: false
        },
        {
          name: '后台菜单权限',
          path: 'limitsList',
          url: 'limitsList',
          changed: false
        }
      ],
      defaultParams: {
        label: 'label',
        value: 'value',
        children: 'enumList'
      },
      multipleSelection: [],
      queryParams: {
        creationTime: []
      },
      tableData: [],
      loading: false,
      total: 0,
      types: '',
      userId: '',
      menuAllList: [], // 菜单列表
      roleList: [] // 角色列表
    }
  },
  created() {
    this.research()
    this.getData()
    this.getUserRoute()
  },
  computed: {
    ...mapGetters(['user'])
  },
  methods: {
    getUserRoute() {
      getRouters().then((res) => {
        res.data.forEach((item) => {
          this.topList.forEach((items) => {
            if (item.routeName == items.url) {
              items.changed = true
            }
          })
        })
      })
    },
    // 导出
    handleExport() {
      this.download(
        '/system/manage/user-menu/export',
        Object.assign({}, this.queryParams),
        `${'后台菜单权限'}-${new Date().getTime()}.xlsx`
      )
    },
    getData() {
      // 获取角色列表
      api.roleAllList().then((res) => {
        this.roleList = res.data
      })
      // 获取菜单列表
      api.menuAllList().then((res) => {
        this.menuAllList = res.data
      })
    },
    addRules() {
      this.$router.push({
        path: '/system/limits/addMenuRole'
      })
    },
    updateShow(item) {
      this.$router.push({
        path: '/system/limits/addMenuRole?id=' + item.userId
      })
    },
    updateShows(item) {
      this.$router.push({
        path: '/system/limits/addMenuRole?id=' + item.userId + '&check=1'
      })
    },
    delRole(item) {
      // 删除权限菜单
      this.$confirm('确认要删除该菜单吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        api.delMenu(item.userId).then((res) => {
          if (res.code === 200) {
            Message({
              message: '删除成功',
              type: 'success'
            })
            this.research()
          } else {
            Message({
              message: res.msg,
              type: 'error'
            })
          }
        })
      })
    },
    deppClone(obj) {
      const _obj = JSON.stringify(obj)
      const _obj1 = JSON.parse(_obj)
      return _obj1
    },
    changeBox(row) {
      console.error(row)
    },
    changeTime(value) {
      // this.queryParams.creationTime = value[0]
      // this.queryParams.endCreationTime = value[1]
    },
    research() {
      this.loading = true
      // // 日期传入改为起止两个字段
      // if ("" != this.queryParams.creationTime) {
      //   this.queryParams.creationTimeStart = this.queryParams.creationTime[0];
      //   this.queryParams.creationTimeEnd = this.queryParams.creationTime[1];
      // }

      // creationTime: '', // 开始时间
      //   modifiedTime: '' // 结束时间
      api.userMenuList(this.queryParams).then((res) => {
        // res.rows.forEach((element) => {
        //   element.alist = []
        //   element.blist = []
        //   element.clist = []
        //   element.themenus = ''
        //   element.theaward = ''
        //   element.thegrade = ''
        //   element.menuList.forEach((item) => {
        //     element.alist.push(item.menuVal)
        //     element.themenus = element.alist.join('/')
        //   })
        //   element.awardList.forEach((item) => {
        //     element.blist.push(item.awardVal)
        //     element.theaward = element.blist.join('/')
        //   })
        //   element.gradeList.forEach((item) => {
        //     element.clist.push(item.gradeVal)
        //     element.thegrade = element.clist.join('/')
        //   })
        // })

        this.tableData = res.rows
        this.total = res.total
        this.loading = false
      })
    },
    reChongzhi() {
      this.queryParams = {}
      this.research()
    },

    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // if (columnIndex === 0) {
      //   if (rowIndex % 2 === 0) {
      //     return {
      //       rowspan: 2,
      //       colspan: 1,
      //     };
      //   } else {
      //     return {
      //       rowspan: 0,
      //       colspan: 0,
      //     };
      //   }
      // }
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 === 1) {
        return 'warning-row'
      } else if (rowIndex % 2 === 0) {
        return 'success-row'
      }
      return ''
    },
    // 自动登录
    toLogin(row) {
      const { userId } = row
      return new Promise((resolve, reject) => {
        freeLogin({ userId: userId }).then(response => {
          const { data } = response
          this.$store.commit('user/SET_TOKEN', data.access_token)
          setToken(data.access_token)
          resolve()

          this.$router.push({ name: 'Dashboard' })
          location.reload()
        }).catch(error => {
          reject(error)
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.button-style {
  width: 209px;
  height: 48px;
  background: #cccccc;
  border-radius: 5px 5px 5px 5px;
  opacity: 1;
  line-height: 48px;
  padding: 0 !important;
  color: #fff;
  font-size: 18px;
}

::v-deep .el-dialog__header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.button-s {
  padding: 0 2px !important;
}

::v-deep .el-button {
  padding: 10px 20px;
}

::v-deep .el-date-editor .el-range__close-icon {
  margin-top: -10px;
}

::v-deep .el-date-editor .el-range-separator {
  margin-top: -10px;
}

::v-deep .el-date-editor .el-range__icon {
  margin-top: -10px;
}

::v-deep .el-input__inner {
  //height:28px;
  //line-height: 28px;
}

::v-deep .el-form-item {
  margin-bottom: 15px;
}

::v-deep .el-form-item__label {
  color: #333;
  font-weight: inherit;
}

::v-deep .el-row {
  //margin-top: 20px;
}

::v-deep .el-table .warning-row {
  background: #f9f9f9;
}

::v-deep .el-table .success-row {
  background: #ffffff;
}

::v-deep .el-table thead {
  color: #000000;
}

.openClose {
  margin-top: 10px;
  margin-right: 10px;
  color: #666666;
  text-align: center;
}

.page {
  padding: 10px 20px;
  background: #f9f9f9;
  font-size: 14px;

  .thetopbox {
    background: #ffffff;
    border-radius: 8px;
    padding-bottom: 10px;
    padding-top: 10px;

    .searchbox {
      display: flex;
      align-items: center;

      .searchtitle {
        margin-right: 10px;
      }

      .searchbtn {
        background: #08143f;
        color: #ffffff;
      }
    }
  }

  .main {
    .maintop {
      display: flex;
      padding: 0px 0;
      justify-content: space-between;
      align-items: center;

      .mainbtn {
        .thebtn1 {
          color: #ffffff;
          background: rgba(67, 145, 253, 1);
        }
      }
    }
  }

  .maintable {
    flex: 1;
    overflow-y: auto;
  }
}

.contain {
  display: flex;
  flex-direction: column;
  height: 100%;
}
</style>
