<!-- 系统配置 - 权限配置 -->
<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="$t('w_0078')" prop="name">
              <el-input v-model="queryParams.name" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="$t('MN_F_T_518')" prop="code">
              <el-input v-model="queryParams.code" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="4" style="margin-left: 0px">
            <el-form-item :label="$t('MN_F_T_519')" prop="pkCreationDept">
              <el-select
                v-model="queryParams.pkCreationDept"
                clearable
              >
                <el-option
                  v-for="item in deptList"
                  :key="item.deptId"
                  :label="item.deptName"
                  :value="item.deptId"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="$t('MN_F_T_520')" prop="creatorName">
              <el-input v-model="queryParams.creatorName" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="$t('MN_F_T_521')" prop="pkReviewDept">
              <el-select v-model="queryParams.pkReviewDept" clearable>
                <el-option
                  v-for="item,index in deptList"
                  :key="index"
                  :label="item.deptName"
                  :value="item.deptId"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4" style="margin-left: -10px">
            <el-form-item :label="$t('MN_F_T_522')">
              <el-input v-model="queryParams.reviewName" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="4" style="margin-left: 0px">
            <el-form-item :label="$t('MN_F_T_523')" prop="status">
              <el-select
                v-model="queryParams.auditStatus"
                clearable
              >
                <el-option
                  v-for="item in statusList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="$t('MN_F_T_524')" prop="creationTime">
              <el-date-picker
                v-model="creationTime"
                style="width: 300px"
                value-format="yyyy-MM-dd"
                type="daterange"
                :range-separator="$t('w_0139')"
                :start-placeholder="$t('CK_KS_4')"
                :end-placeholder="$t('CK_KS_5')"
                @change="changeTime"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="$t('MN_F_Y_4')" prop="creationTime">
              <el-date-picker
                v-model="creationTime1"
                style="width: 300px"
                value-format="yyyy-MM-dd"
                type="daterange"
                :range-separator="$t('w_0139')"
                :start-placeholder="$t('CK_KS_4')"
                :end-placeholder="$t('CK_KS_5')"
                @change="changeTime1"
              />
            </el-form-item>
          </el-col>
          <el-col :span="4" style="margin-left: 0px">
            <div class="searchbox">
              <el-button class="searchbtn" @click="research()"> {{ $t('MN_T_2') }}</el-button>
              <el-button @click="reChongzhi"> {{ $t('MN_T_3') }}</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="main">
      <div class="maintop">
        <div class="mainbtn">
          <el-button size="small" style="background-color: #48B2FD;" class="thebtn1" @click="addRuless">{{$t('MN_F_12')}}</el-button>
        </div>
      </div>
      <div class="maintable">
        <el-table
          ref="multipleTable"
          :data="tableData"
          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="name" :label="$t('w_0078')" />
          <el-table-column align="center" prop="code" :label="$t('MN_F_T_518')" />
          <el-table-column align="center" prop="content" :label="$t('MN_F_T_525')" :show-overflow-tooltip="true" />
          <el-table-column align="center" prop="creationDeptName" :label="$t('MN_F_T_519')" />
          <el-table-column align="center" prop="creatorName" :label="$t('MN_F_T_520')" />
          <el-table-column align="center" prop="reviewDeptName" :label="$t('MN_F_T_521')" />
          <el-table-column align="center" prop="reviewName" :label="$t('MN_F_T_522')" />
          <el-table-column align="center" prop="reviewRemarks" :label="$t('MN_F_T_526')" />
          <el-table-column align="center" prop="auditStatus1" :label="$t('MN_F_T_523')">
            <template slot-scope="scope">
              <el-button v-if="scope.row.auditStatus1==0" style="color: #333" type="text" size="small" class="button-s" @click="stopRole(scope.row, tableData)"> {{ scope.row.auditStatus }} </el-button>
              <el-button v-if="scope.row.auditStatus1==1" style="color: #009B58" type="text" size="small" class="button-s" @click="stopRole(scope.row, tableData)"> {{ scope.row.auditStatus }} </el-button>
              <el-button v-if="scope.row.auditStatus1==2" style="color: #E41B1B" type="text" size="small" class="button-s" @click="stopRole(scope.row, tableData)"> {{ scope.row.auditStatus }} </el-button>

            </template>
          </el-table-column>
          <el-table-column align="center" prop="creationTime" :label="$t('PER_DA_9')" width="150" />
          <el-table-column align="center" prop="reviewTime" :label="$t('MN_F_Y_4')" width="150" />
          <el-table-column align="center" prop="" :label="$t('MY_ORD_14')" fixed="right" width="100">
            <template slot-scope="scope">
              <el-button v-if="scope.row.auditStatus1==0" style="color: #C73030" type="text" size="small" class="button-s" @click="addRules(scope.row, tableData)">
                {{ $t('MN_F_12') }} </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <el-dialog
      :title="$t('MN_F_T_4')"
      :visible.sync="ruleShow"
      width="40%"
      center
      :close-on-click-modal="false"
      :before-close="handleClose"
      :destroy-on-close="true"
    >
      <el-form ref="forms" :rules="rules" :model="table" label-width="80px">
        <el-form-item :label="$t('MY_CK_7')" style="margin-left: 5px">
          <el-radio v-model="table.auditStatus" :label=1>通过</el-radio>
          <el-radio v-model="table.auditStatus" :label=2 style="margin-left: 90px">驳回</el-radio>
        </el-form-item>
        <el-form-item :label="$t('MN_F_T_526')" >
          <el-input
            type="textarea"
            :rows="4"
            placeholder=""
            v-model="table.reviewRemarks">
          </el-input>
        </el-form-item>
        <div style="padding-top: 50px;display: flex;justify-content: center">
          <el-button type="text" size="small" class="button-style" @click="handleClose"> {{ $t('ENU_P_TYPE0') }}</el-button>
          <el-button v-preventReClick="3000" type="text" size="small" class="button-style" style="margin-left: 40px;background-color: #48B2FD;" @click="submitBtn()">
            {{ $t('ENU_P_TYPE4') }}
          </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/product'
import * as apis from '@/api/financialCase.js'
import { Message } from 'element-ui'
import { deleteAgreement, getWithdrawalList } from '@/api/configManage'
export default {
  name: 'Qxpz',
  components: {
    topBar
  },
  data() {
    return {
      value: '',
      forms: '',
      rules: {
        reviewRemarks: [
          { required: true, message: this.$t('S_C_70'), trigger: 'blur' }
        ]
      },
      table: { 'auditStatus': 1, 'reviewRemarks': '' },
      ruleShow: false,
      moren: 'goodsCheck',
      topList: [
        {
          name: this.$t('MN_F_1'),
          path: 'dashboard',
        },
        {
          name: this.$t('MN_F_T_2'),
          path: 'hasIndex',
        },
        {
          name: this.$t('MN_F_T_4'),
          path: 'goodsCheck',
        },
        {
          name: this.$t('MN_F_T_5'),
          path: 'productCheck'
        },
      ],
      defaultParams: {
        label: 'label',
        value: 'value',
        children: 'enumList'
      },
      multipleSelection: [],
      queryParams: {
        pageNum: 1,
        pageSize: 50,
        type: 0,
        creationTime: []
      },
      creationTime: [],
      creationTime1: [],
      gradeRangList: [],
      awardsList: [],
      menuOptions: [],
      tableData: [],
      total: 0,
      types: '',
      userId: '',
      statusList: [{ 'name': this.$t('MN_F_T_372'), 'id': '0' }, { 'name': '停用', 'id': '1' }], // 启用状态
      smsList: [{ 'name': this.$t('MN_F_T_372'), 'id': '0' }, { 'name': '停用', 'id': '1' }], // 短信启用状态
      authorityList: [{ 'name': this.$t('MN_F_T_372'), 'id': '0' }, { 'name': '停用', 'id': '1' }], // 审核启用状态
      vertexList: [], // 体系列表
      stateList: [], // 国家列表
      deptList: [], // 部门列表
      roleList: [] // 角色列表
    }
  },
  created() {
    this.research()
    // this.getgradeRanglist()
    // this.getAwardsListChiose()
    // this.getPubenumsList()
    this.getData()
  },
  methods: {
    getData() {
      // 获取部门
      api.deptAll().then((res) => {
        this.deptList = res.data
      })
      // 获取审核状态
      api.recordStatus().then((res) => {
        this.statusList = res.data
      })
    },
    stopRole(item) {
      // 停用管理员
      this.$confirm(`确认要${item.status === 0 ? this.$t('MN_F_T_373') : '恢复'}该管理员吗?`, this.$t('w_0034'), {
        confirmButtonText: this.$t('w_0035'),
        cancelButtonText: this.$t('ENU_P_TYPE0'),
        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'
            })
          }
        })
      })
    },
    addRuless() {
      let flags = this.verifySelect()
      if(flags){
        this.types = 1
        this.ruleShow = true
        this.table.pkId = this.$refs.multipleTable.selection[0].pkId
      }
    },
    addRules(item) {
      this.types = 1
      this.ruleShow = true
      this.table.pkId = item.pkId
    },
    submitBtn() {
      // 添加角色
      this.ruleSubmit()
    },
    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 {
          api.modifyExamine(datas).then((res) => {
            if (res.code === 200) {
              Message({
                message: res.msg,
                type: 'success'
              })
              that.ruleShow = false
              that.table = { 'auditStatus': 1, 'reviewRemarks': '' }
              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 = { 'auditStatus': 1, 'reviewRemarks': '' }
    },
    changeBox(row) {
      console.error(row)
    },
    changeTime(value) {
      this.queryParams.startCreationTime = value[0]
      this.queryParams.endCreationTime = value[1]
    },
    changeTime1(value) {
      this.queryParams.startReviewTime = value[0]
      this.queryParams.endReviewTime = 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
      })
    },
    verifySelect() {
      const len = this.$refs.multipleTable.selection.length
      if (len === 0) {
        Message({ message: this.$t('MN_F_T_527'), type: 'warning' })
      } else if (len > 1) {
        Message({ message: this.$t('MN_F_T_528'), type: 'warning' })
      } else {
        return true
      }
    },
    research() {
      // // 日期传入改为起止两个字段
      // if ("" != this.queryParams.creationTime) {
      //   this.queryParams.creationTimeStart = this.queryParams.creationTime[0];
      //   this.queryParams.creationTimeEnd = this.queryParams.creationTime[1];
      // }

      // creationTime: '', // 开始时间
      //   modifiedTime: '' // 结束时间
      api.modifyRecord(this.queryParams).then((res) => {
        res.rows.forEach((element) => {
          element.auditStatus1 = element.auditStatus
          element.auditStatus = element.auditStatus === 0 ? this.$t('ENU_APPROVE_S_2') : (element.auditStatus === 1 ? this.$t('ENU_R_A_O_2') : this.$t('ENU_R_A_O_3'))
        })
        // 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
      })
    },
    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>

.el-tooltip__popper{
  /*max-width:50%;*/
  /*padding-bottom: 5px!important;*/
  /*display: -webkit-box;*/
  /*overflow: hidden;*/
  /*text-overflow: ellipsis;*/
  /*-webkit-line-clamp: 15;*/
  /*-webkit-box-orient: vertical;*/
  /*text-align: center;*/

}
.el-tooltip__popper,.el-tooltip__popper.is-dark{
  /*background:rgb(48, 65, 86) !important;*/
  /*color: #fff !important;*/
  line-height: 20px;
}
</style>
<style lang="scss" scoped>
::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: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: 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 {
    margin-top: 20px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0px 2px 20px 0px rgba(238, 238, 238, 0.5);

    .maintop {
      display: flex;
      padding: 10px 20px;
      justify-content: space-between;
      align-items: center;
      .mainbtn {
        .thebtn1 {
          color: #ffffff;
          background: rgba(67, 145, 253, 1);
        }
      }
    }
  }
}
</style>
