<!-- 系统配置 - 权限配置 -->
<template>
  <div class="page">
    <topBar v-if="topList.length > 0"
            :top-list="topList"
            :moren="moren" />
    <div class="thetopbox">
      <el-form ref="form"
               :model="queryParams"
               label-width="100px">
        <el-row>
          <el-col :span="4">
            <el-form-item :label="'管理姓名'">
              <el-input v-model="queryParams.nickName"
                        clearable />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="'管理编号'"
                          prop="teamCode">
              <el-input v-model="queryParams.userName"
                        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.pkCountry"
                         clearable
                         placeholder="">
                <el-option v-for="item in stateList"
                           :key="item.pkId"
                           :label="item.shortName"
                           :value="item.pkId" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="'联系方式'"
                          prop="teamCode">
              <el-input v-model="queryParams.phonenumber"
                        clearable />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="'短信验证'"
                          prop="teamCode">
              <el-select v-model="queryParams.sms"
                         clearable
                         placeholder="">
                <el-option v-for="item,index in smsList"
                           :key="index"
                           :label="item.name"
                           :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4"
                  style="margin-left: -10px">
            <el-form-item :label="'审核权限'"
                          prop="status">
              <el-select v-model="queryParams.authority"
                         clearable
                         placeholder="">
                <el-option v-for="item,index in authorityList"
                           :key="index"
                           :label="item.name"
                           :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="日常审核权限">
              <el-select v-model="queryParams.usualAuthority"
                         clearable
                         placeholder="">
                <el-option v-for="item,index in authorityList"
                           :key="index"
                           :label="item.name"
                           :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4"
                  style="margin-left: 0px">
            <el-form-item :label="'所属部门'"
                          prop="status">
              <el-select v-model="queryParams.pkDept"
                         clearable
                         placeholder="">
                <el-option v-for="item in deptList"
                           :key="item.value"
                           :label="item.deptName"
                           :value="item.deptId" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4"
                  style="margin-left: 0px">
            <el-form-item :label="'所属角色'"
                          prop="status">
              <el-select v-model="queryParams.pkRole"
                         clearable
                         placeholder="">
                <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"
                  style="margin-left: 0px">
            <el-form-item :label="'启用状态'"
                          prop="status">
              <el-select v-model="queryParams.status"
                         clearable
                         placeholder="">
                <el-option v-for="item,index in statusList"
                           :key="index"
                           :label="item.name"
                           :value="item.id" />
              </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">
            <div class="searchbox">
              <el-button class="my_search"
                         style="margin-left: 25px"
                         @click="research()"> {{ '搜索' }}</el-button>
              <el-button class="my_reset"
                         style="margin-left: 10px"
                         @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="['adminRoleAdd']"
                     size="small"
                     class="thebtn1"
                     @click="addRules">{{'添加'}}</el-button>
          <el-button v-has-buttons="['adminRoleExport']"
                     size="small"
                     style="background-color: #FFAD41;margin-left: 10px"
                     class="thebtn2"
                     @click="handleExport"> {{ '导出' }}</el-button>
        </div>
      </div>
      <div class="maintable">
        <el-table height="680px"
                  :data="tableData"
                  v-loading="loading"
                  style="width: 100%"
                  :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="countryVal"
                           :label="'结算国家'">
            <template slot-scope="scope">

              <el-popover placement="top"
                          width="300"
                          trigger="hover">
                <div>{{ scope.row.countryVal }}</div>
                <div slot="reference"> {{ scope.row.countryValStr }}</div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           prop="vertexVal"
                           :label="'查询体系'">
            <template slot-scope="scope">

              <el-popover placement="top"
                          width="300"
                          trigger="hover">
                <div>{{ scope.row.vertexVal }}</div>
                <div slot="reference"> {{ scope.row.vertexValStr }}</div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           prop="nickName"
                           :label="'管理姓名'" />
          <el-table-column align="center"
                           prop="userName"
                           :label="'管理编号'" />
          <el-table-column align="center"
                           prop="phonenumber"
                           :label="'联系方式'" />
          <el-table-column align="center"
                           prop="email"
                           :label="'邮箱'" />
          <el-table-column align="center"
                           prop="smsVal"
                           :label="'短信验证'" />
          <el-table-column align="center"
                           prop="deptName"
                           :label="'所属部门'" />
          <el-table-column align="center"
                           prop="roleVal"
                           :label="'所属角色'" />
          <el-table-column align="center"
                           prop="authorityVal"
                           :label="'审核权限'" />
          <el-table-column width="150"
                           align="center"
                           prop="usualAuthorityVal"
                           label="日常审核权限" />
          <el-table-column align="center"
                           prop="statusVal"
                           :label="'启用状态'" />
          <el-table-column align="center"
                           prop="creationTime"
                           :label="'创建日期'"
                           width="200" />
          <el-table-column align="center"
                           prop=""
                           :label="'操作'"
                           fixed="right"
                           width="200">
            <template slot-scope="scope">
              <el-button v-if="scope.row.status==0"
                         v-has-buttons="['adminRoleEnable']"
                         style="color: #C73030"
                         type="text"
                         size="small"
                         class="button-s"
                         @click="stopRole(scope.row, tableData)"> {{'禁用'}} </el-button>
              <el-button v-if="scope.row.status==1"
                         v-has-buttons="['adminRoleDisable']"
                         style="color: #009B58"
                         type="text"
                         size="small"
                         class="button-s"
                         @click="stopRole(scope.row, tableData)"> {{'启用'}} </el-button>

              <el-button v-has-buttons="['adminRoleUpdate']"
                         class="button-s"
                         type="text"
                         size="small"
                         style="color:#6962F6;"
                         @click="updateShow(scope.row, tableData)">
                {{ '修改' }}
              </el-button>
              <el-button v-has-buttons="['adminRoleDelete']"
                         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>
    <el-dialog :title="text"
               :visible.sync="ruleShow"
               width="35%"
               center
               :close-on-click-modal="false"
               :before-close="handleClose"
               :destroy-on-close="true">
      <el-form ref="forms"
               :rules="rules"
               :model="table"
               label-width="auto">
        <div style="display: flex;justify-content: space-between">
          <el-form-item :label="'结算国家'"
                        prop="countryIdList">
            <el-select v-model="table.countryIdList"
                       multiple
                       clearable
                       @change="getChange1"
                       @clear="setValueNull2">
              <el-option v-for="item in stateList"
                         :key="item.pkId"
                         :label="item.shortName"
                         :value="item.pkId" />
            </el-select>
          </el-form-item>
          <el-form-item :label="'查询体系'"
                        prop="vertexIdList">
            <el-select v-model="table.vertexIdList"
                       multiple
                       clearable
                       @change="getChange2"
                       @clear="setValueNull3">
              <el-option v-for="item in vertexList"
                         :key="item.pkId"
                         :label="item.vertexName"
                         :value="item.pkId" />
            </el-select>
          </el-form-item>
        </div>
        <div style="display: flex;justify-content: space-between">
          <el-form-item :label="'查询团队'"
                        prop="teamIdList">
            <el-select v-model="table.teamIdList"
                       multiple
                       clearable
                       @change="getChange3"
                       @clear="setValueNull2">

              <el-option v-for="item in teamIdList"
                         :key="item.pkId"
                         :label="item.teamName"
                         :value="item.pkId" />
            </el-select>
          </el-form-item>
          <el-form-item :label="'管理姓名'"
                        prop="nickName">
            <el-input v-model="table.nickName"
                      clearable
                      :placeholder="'请输入管理姓名'" />
          </el-form-item>

        </div>
        <div style="display: flex;justify-content: space-between">
          <el-form-item :label="'管理编号'"
                        prop="userName">
            <el-input v-model="table.userName"
                      clearable
                      :placeholder="'请输入管理编号'" />
          </el-form-item>
          <el-form-item :label="'密码'"
                        prop="password">
            <el-input v-model="table.password"
                      show-password
                      clearable
                      :placeholder="'请输入密码'" />
          </el-form-item>

        </div>
        <div style="display: flex;justify-content: space-between">
          <!--          <el-form-item label="密钥" prop="password">-->
          <!--            <el-input clearable-->
          <!--                      v-model="table.password"-->
          <!--                      placeholder="请输入密钥"-->
          <!--            ></el-input>-->
          <!--          </el-form-item>-->
          <el-form-item :label="'联系方式'"
                        prop="phonenumber">
            <el-input v-model="table.phonenumber"
                      clearable
                      :placeholder="'请输入联系方式'" />
          </el-form-item>
          <el-form-item :label="'短信验证'"
                        prop="sms">
            <el-select v-model="table.sms"
                       clearable>
              <el-option v-for="item in smsList"
                         :key="item.id"
                         :label="item.name"
                         :value="item.id" />
            </el-select>
          </el-form-item>

        </div>
        <div style="display: flex;justify-content: space-between">
          <el-form-item :label="'所属部门'"
                        prop="pkDept">
            <el-select v-model="table.pkDept"
                       clearable>
              <el-option v-for="item in deptList"
                         :key="item.value"
                         :label="item.deptName"
                         :value="item.deptId" />
            </el-select>
          </el-form-item>
          <el-form-item :label="'所属角色'"
                        prop="roleIdList">
            <el-select v-model="table.roleIdList"
                       multiple
                       clearable>
              <el-option v-for="item in roleList"
                         :key="item.pkId"
                         :label="item.roleName"
                         :value="item.roleId" />
            </el-select>
          </el-form-item>

        </div>
        <div style="display: flex;justify-content: space-between">
          <el-form-item :label="'审核权限'">
            <el-select v-model="table.authority"
                       clearable>
              <el-option v-for="item in authorityList"
                         :key="item.id"
                         :label="item.name"
                         :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="日常审核权限">
            <el-select v-model="table.usualAuthority"
                       clearable>
              <el-option v-for="item in authorityList"
                         :key="item.id"
                         :label="item.name"
                         :value="item.id" />
            </el-select>
          </el-form-item>
        </div>
        <div style="display: flex;justify-content: space-between">
          <el-form-item :label="'启用状态'">
            <el-select v-model="table.status"
                       clearable>
              <el-option v-for="item in statusList"
                         :key="item.id"
                         :label="item.name"
                         :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item :label="'邮箱'"
                        >
            <el-input v-model="table.email"
                      clearable
                      :placeholder="'请输入'" />
          </el-form-item>
        </div>
     
        <div style="padding-top: 10px;display: flex;justify-content: center">
          <el-button type="text"
                     size="small"
                     class="button-style"
                     @click="handleClose"> {{ '取消' }}</el-button>
          <el-button v-preventReClick="3000"
                     type="text"
                     size="small"
                     class="button-style"
                     style="margin-left: 40px;background-color: #48B2FD;"
                     @click="submitBtn()">
            {{ '确认' }}
          </el-button>
        </div>
      </el-form>
    </el-dialog>
    <pagination v-show="total > 0"
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="research" />
  </div>
</template>

<script>
import { getcountryAllList } from '@/api/exchangerate'
import topBar from '@/components/topBar'
import { getbdmenuList, getPubenumsList } from '@/api/system'
import { getgradeRanglist, getAwardsListChiose } from '@/api/level'
import * as api from '@/api/notice'
import * as apis from '@/api/financialCase.js'
import { Message } from 'element-ui'
import { deleteAgreement, getWithdrawalList } from '@/api/configManage'
import { findCountry, findVertex } from '@/api/financialCase.js'
export default {
  name: 'Qxpz',
  components: {
    topBar,
  },
  data() {
    return {
      value: '',
      forms: '',
      teamIdList: [],
      rules: {
        countryIdList: [
          { required: true, message: '请选择结算国家', trigger: 'change' },
        ],
        vertexIdList: [
          {
            required: false,
            message: '请选择查询体系',
            trigger: 'change',
          },
        ],
        nickName: [
          { required: true, message: '请输入管理姓名', trigger: 'blur' },
        ],
        userName: [
          { required: true, message: '请输入管理编号', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
        ],
        phonenumber: [
          { required: true, message: '请输入联系方式', trigger: 'blur' },
        ],
        // phonenumber: [
        //   { required: true, message: '请输入密钥', trigger: 'blur' }
        // ],
        sms: [
          { required: true, message: '请选择短信验证', trigger: 'change' },
        ],
        pkDept: [
          { required: true, message: '请选择所属部门', trigger: 'change' },
        ],
        roleIdList: [
          { required: true, message: '请选择所属角色', trigger: 'change' },
        ],
      },
      table: {
        userName: '',
        nickName: '',
        password: '',
        phonenumber: '',
        sms: '',
        authority: '',
        usualAuthority: '',
        status: '',
        roleIdList: [],
        vertexIdList: [],
        teamIdList: [],
        countryIdList: [],
        pkDept: '',
      },
      ruleShow: false,
      moren: 'adminRole',
      topList: [
        {
          name: '系统管理员',
          path: 'adminRole',
        },
      ],
      defaultParams: {
        label: 'label',
        value: 'value',
        children: 'enumList',
      },
      multipleSelection: [],
      queryParams: {
        pageNum: 1,
        pageSize: 50,
        creationTime: [],
      },
      gradeRangList: [],
      awardsList: [],
      menuOptions: [],
      tableData: [],
      loading:false,
      total: 0,
      types: '',
      userId: '',
      text: '',
      statusList: [
        { name: '启用', id: 0 },
        { name: '停用', id: 1 },
      ], // 启用状态
      smsList: [
        { name: '启用', id: 0 },
        { name: '停用', id: 1 },
      ], // 短信启用状态
      authorityList: [
        { name: '允许', id: 0 },
        { name: '禁止', id: 1 },
      ], // 审核启用状态
      vertexList: [], // 体系列表
      stateList: [], // 国家列表
      deptList: [], // 部门列表
      roleList: [], // 角色列表
    }
  },
  created() {
    this.research()
    // this.getgradeRanglist()
    // this.getAwardsListChiose()
    // this.getPubenumsList()
    this.getData()
  },
  methods: {
    setValueNull() {
      this.vertexList = ''
      this.table.vertexIdList = ''
    },
    getChange1(value) {
      const arr = value.toString()
      if (value == false) {
        this.countryIdList = ''
        this.table.countryIdList = []
        this.teamIdList = ''
        this.table.teamIdList = []
        this.vertexIdList = ''
        this.table.vertexIdList = []
      }
      if (arr) {
        findCountry({ pkCountryList: arr }).then((res) => {
          this.vertexList = res.data
        })
      }
      this.$forceUpdate()
    },
    setValueNull1() {
      // this.vertexIdList = ''
      // this.table.vertexIdList = ''
    },
    setValueNull2() {
      console.error(11)
      // this.countryIdList = ''
      // this.table.countryIdList = ''
      // this.teamIdList = ''
      // this.table.teamIdList = ''
      // this.vertexIdList = ''
      // this.table.vertexIdList = ''
    },
    setValueNull3(value) {
      // const arr = value.toString()
      // if (arr) {
      //   findVertex({ 'pkVertexList': arr }).then((res) => {
      //     this.teamIdList = res.data
      //   })
      // }
      // this.$forceUpdate()
    },
    getChange3(value) {
      let list = this.table.vertexIdList
      if (list) {
        const arr = list.toString()
        findVertex({ pkVertexList: arr }).then((res) => {
          this.teamIdList = res.data
        })
      }
      // const arr = value.toString()
      // console.error(this.table.teamIdList)
      // this.table.teamIdList=[2,312,1]
      // this.table.teamIdList = arr
      if (value == false) {
        this.teamIdList = ''
        this.table.teamIdList = []
      }
      this.$forceUpdate()
    },
    getChange2(value) {
      console.error(value)
      const arr = value.toString()
      if (value == false) {
        this.vertexIdList = ''
        this.table.vertexIdList = []
        this.teamIdList = ''
        this.table.teamIdList = []
      }
      if (arr) {
        findVertex({ pkVertexList: arr }).then((res) => {
          this.teamIdList = res.data
        })
      }
      this.$forceUpdate()
    },
    // 导出
    handleExport() {
      this.download(
        '/system/manage/user/export',
        { ...this.params },
        `${'系统管理员'}${new Date().getTime()}.xlsx`
      )
    },
    getData() {
      // 获取体系
      // apis.getvertexValue().then((res) => {
      //   this.vertexList = res.data
      // })
      // 获取国家
      getcountryAllList().then((res) => {
        this.stateList = res.data
      })
      // 获取角色
      api.roleAllList().then((res) => {
        this.roleList = res.data
      })
      // 获取部门
      api.deptAllList().then((res) => {
        this.deptList = res.data
      })
    },
    stopRole(item) {
      // 停用管理员
      this.$confirm(
        `确认要${
          item.status === 0 ? '禁用' : '恢复'
        }该管理员吗?`,
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).then(() => {
        api
          .stopAdmin({ userId: item.userId, status: item.status === 1 ? 0 : 1 })
          .then((res) => {
            if (res.code === 200) {
              Message({
                message: res.msg,
                type: 'success',
              })
              this.research()
            } else {
              Message({
                message: res.msg,
                type: 'error',
              })
            }
          })
      })
    },
    addRules() {
      this.types = 1
      this.ruleShow = true
      this.text = '添加'
      this.rules.password[0].required = true
    },
    submitBtn() {
      // 添加角色
      this.ruleSubmit()
    },
    updateShow(item) {
      this.types = 2
      this.text = '修改'
      this.rules.password[0].required = false
      // 更新角色信息
      this.userId = item.userId
      api.userDetails(item.userId).then((res) => {
        if (res.code === 200) {
          this.ruleShow = true
          this.table = res.data
          // this.table = {
          //   userName: res.data.userName,
          //   nickName: res.data.nickName,
          //   password: '',
          //   phonenumber: res.data.phonenumber,
          //   sms:
          //     res.data.sms == 0
          //       ? '启用'
          //       : '停用',
          //   status:
          //     res.data.status == 0
          //       ? '启用'
          //       : '停用',
          //   roleIdList: res.data.roleIdList,
          //   // 'vertexIdList': res.data.vertexIdList,'teamIdList': res.data.teamIdList,
          //   countryIdList: res.data.countryIdList ? res.data.countryIdList : [],
          //   authority: res.data.authority == 0 ? '允许' : '禁止',
          //   usualAuthority: res.data.usualAuthority == 0 ? '允许' : '禁止',
          //   pkDept: res.data.pkDept
          // }
          if (res.data.countryIdList) {
            const arr = []
            res.data.countryIdList.forEach((item) => {
              arr.push(item)
            })
            findCountry({ pkCountryList: arr.toString() }).then((res) => {
              this.vertexList = res.data
            })
            this.table.vertexIdList = res.data.vertexIdList
          }
          if (res.data.teamIdList) {
            const arr = []
            res.data.vertexIdList.forEach((item) => {
              arr.push(item)
            })
            findVertex({ pkVertexList: arr.toString() }).then((res) => {
              this.teamIdList = res.data
            })
            this.table.teamIdList = res.data.teamIdList
          }
          // console.error(this.table)

          // vertexIdList

          // teamIdList
        } else {
          Message({
            message: res.msg,
            type: 'error',
          })
        }
      })
    },
    delRole(item) {
      // 删除角色信息
      this.$confirm('确认要删除该管理员吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        api.delUser(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
    },
    ruleSubmit() {
      const datas = this.table
      const that = this
      this.$refs['forms'].validate((valid) => {
        if (!valid) {
          return false
        } else {
          if (this.types === 1) {
            api.addUser(datas).then((res) => {
              if (res.code === 200) {
                Message({
                  message: '添加成功',
                  type: 'success',
                })
                that.ruleShow = false
                that.table = {
                  userName: '',
                  nickName: '',
                  password: '',
                  phonenumber: '',
                  sms: '',
                  authority: '',
                  usualAuthority: '',
                  status: '',
                  roleIdList: [],
                  vertexIdList: [],
                  teamIdList: [],
                  countryIdList: [],
                  pkDept: '',
                }
                that.research()
              } else {
                Message({
                  message: res.msg,
                  type: 'error',
                })
              }
            })
          }
          if (this.types === 2) {
            const datas1 = this.deppClone(datas)
            if (datas.sms === '启用') {
              datas1.sms = ''
              datas1.sms = 0
            } else if (datas.sms === '停用') {
              datas1.sms = ''
              datas1.sms = 1
            }
            if (datas1.authority === '启用') {
              datas1.authority = ''
              datas1.authority = 0
            } else if (datas.authority === '停用') {
              datas1.authority = ''
              datas1.authority = 1
            }
            if (datas1.status === '启用') {
              datas1.status = ''
              datas1.status = 0
            } else if (datas.status === '停用') {
              datas1.status = ''
              datas1.status = 1
            }
            datas1.userId = this.userId
            api.putUser(datas1).then((res) => {
              if (res.code === 200) {
                Message({
                  message: '修改成功',
                  type: 'success',
                })
                that.ruleShow = false
                that.table = {
                  userName: '',
                  nickName: '',
                  password: '',
                  phonenumber: '',
                  sms: '',
                  authority: '',
                  usualAuthority: '',
                  status: '',
                  roleIdList: [],
                  vertexIdList: [],
                  teamIdList: [],
                  countryIdList: [],
                  pkDept: '',
                }
                that.research()
              } else {
                Message({
                  message: res.msg,
                  type: 'error',
                })
              }
            })
          }
        }
      })
    },
    statusChange(value) {
      if (this.table.status.length > 1) {
        this.table.status.splice(0, 1)
      }
    },
    handleClose() {
      this.ruleShow = false
      this.table = {
        userName: '',
        nickName: '',
        password: '',
        phonenumber: '',
        sms: '',
        authority: '',
        status: '',
        roleIdList: [],
        vertexIdList: [],
        teamIdList: [],
        countryIdList: [],
        pkDept: '',
      }
    },
    changeBox(row) {
      console.error(row)
    },
    addFrom() {},
    addRule() {},
    changeTime(value) {
      // this.queryParams.creationTime = value[0]
      // this.queryParams.endCreationTime = value[1]
    },
    handleChangeMunu(value) {
      console.log('🌈', value[value.length - 1])
      this.queryParams.menuId = value[value.length - 1]
    },
    // 菜单下拉选
    getPubenumsList() {
      getPubenumsList().then((res) => {
        this.menuOptions = res.data
      })
    },
    // 等级范围选择
    getgradeRanglist() {
      getgradeRanglist().then((res) => {
        this.gradeRangList = res.data
      })
    },
    // 奖衔下拉列表
    getAwardsListChiose() {
      getAwardsListChiose().then((res) => {
        this.awardsList = res.rows
      })
    },
    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.userList(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('/')
        //   })
        // })
        res.rows.forEach((item) => {
          if (item.countryVal.length > 7) {
            item.countryValStr = item.countryVal.substring(0, 8) + '...'
          } else {
            item.countryValStr = item.countryVal
          }
          if (item.vertexVal && item.vertexVal.length > 7) {
            item.vertexValStr = item.vertexVal.substring(0, 8) + '...'
          } else {
            item.vertexValStr = item.vertexVal
          }
        })
        this.tableData = res.rows
        this.total = res.total
        this.loading = false
      })
    },
    reChongzhi() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 50,
        userName: '', // 角色姓名
        roleString: '', // 权限字符
        status: '', // 状态
        startDate: '', // 开始时间
        endDate: [], // 结束时间
      }
      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 ''
    },
  },
}
</script>
<style lang="scss" scoped>
.thebtn1 {
  background: #3181e5 !important;
  color: #ffffff;
  width: 68px;
  border-color: #3181e5;
}
.thebtn2 {
  background: #ffad41;
  color: #ffffff;
  border-color: #ffad41;
}
::v-deep .el-input__inner {
  width: 100%;
}
::v-deep .el-dialog__title {
  font-weight: bold;
}
.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: 32px;
  line-height: 32px;
}
::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;
    .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);
        }
      }
    }
  }
}
</style>
