<!-- 系统配置 - 权限配置 -->
<template>
  <div class="page">
    <el-dialog title="操作内容"
               :visible.sync="isNotice"
               width="35%"
               center
               :before-close="handleClose">
      <div v-html="noticeContent" class="img-auto"></div>
      <!--      <span slot="footer"-->
      <!--            class="dialog-footer">-->
      <!--        <el-button type="primary"-->
      <!--                   @click="isNotice = false">{{'确认'}}</el-button>-->
      <!--      </span>-->
    </el-dialog>
    <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">
            <el-form-item :label="'操作人'">
              <el-input v-model="queryParams.userName" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="'操作模块'" class="el-check_s">
              <el-select
                v-model="queryParams.operationModule"
                placeholder=""
                clearable
              >
                <el-option
                  v-for="(item, index) in moduleList"
                  :key="index"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="'操作功能'" prop="status" class="el-check_s">
              <el-select
                v-model="queryParams.operationMethod"
                placeholder=""
                clearable
              >
                <el-option
                  v-for="item in methodList"
                  :key="item"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4" style="margin-left: -20px">
            <el-form-item :label="'IP地址'">
              <el-input v-model="queryParams.ipaddr" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              :label="'操作日期'"
              prop="creationTime"
              class="el-check_s"
            >
              <el-date-picker
                v-model="queryParams.operationTime"
                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: 25px">
            <div class="searchbox">
              <el-button class="searchbtn" @click="research()"> {{ '搜索' }}</el-button>
              <el-button @click="reChongzhi"> {{ '重置' }}</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="maintop">
      <div class="mainbtn">
        <el-button
          size="small"
          @click="handleExport"
          v-hasButtons="['operationRecordExport']"
          style="background-color: #ffad41"
          class="thebtn1"
          > {{ '导出' }}</el-button
        >
        <el-button
          size="small"
          @click="handleDelete"
          v-hasButtons="['operationRecordDel']"
          style="background-color: #c8161d"
          class="thebtn1"
          v-show="user.userName == 'admin'"
        >
          {{ '删除' }}</el-button
        >
      </div>
    </div>
    <div class="main">
      <div class="maintable">
        <el-table
          :data="tableData"
          v-loading="loading"
          style="width: 100%"
          height="690px"
          :header-cell-style="{ background: '#EEEEEE' }"
          :row-class-name="tableRowClassName"
          :span-method="objectSpanMethod"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" />
          <el-table-column align="center" prop="userName" :label="'操作人'" />
          <el-table-column
            align="center"
            prop="operationModule"
            :label="'菜单'"
          />
          <el-table-column
            align="center"
            prop="operationBusiness"
            :label="'业务类型'"
          />
          <el-table-column
            align="center"
            prop="operationMethod"
            :label="'操作功能'"
          />
          <el-table-column
            align="center"
            prop="operationParam"
            :label="'操作内容'"
            :show-overflow-tooltip="true"
            width="200"
          />
          <el-table-column
            align="center"
            prop="operationTime"
            :label="'操作日期'"
          />
          <el-table-column align="center" prop="ipaddr" :label="'IP地址'" />
          <el-table-column
            align="center"
            prop="time"
            :label="'操作'"
            fixed="right"
            width="100"
          >
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="check(scope.row, tableData)"
                class="button-s"
                type="text"
                size="small"
                style="color: #48B2FD"
              >
                {{ '查看' }}
              </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>
</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 { mapGetters } from "vuex";
export default {
  name: "Qxpz",
  components: {
    topBar,
  },
  data() {
    return {
      noticeContent:'',
      isNotice:false,
      value: "",
      forms: "",
      rules: {
        countryIdList: [
          { required: true, message: '请选择结算国家', trigger: "change" },
        ],
        vertexIdList: [
          { required: true, 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: "",
        status: "",
        roleIdList: [],
        vertexIdList: [],
        countryIdList: [],
        pkDept: "",
      },
      ruleShow: false,
      moren: "operationRecordList",
      topList: [
        {
          name: '操作记录',
          path: "operationRecordList",
        },
      ],
      defaultParams: {
        label: "label",
        value: "value",
        children: "enumList",
      },
      multipleSelection: [],
      queryParams: {
        pageNum: 1,
        pageSize: 50,
        creationTime: [],
      },
      gradeRangList: [],
      awardsList: [],
      menuOptions: [],
      loading:false,
      tableData: [],
      total: 0,
      types: "",
      userId: "",
      statusList: [
        { name: '启用', id: "0" },
        { name: "停用", id: "1" },
      ], // 启用状态
      smsList: [
        { name: '启用', id: "0" },
        { name: "停用", id: "1" },
      ], // 短信启用状态
      authorityList: [
        { name: '启用', id: "0" },
        { name: "停用", id: "1" },
      ], // 审核启用状态
      methodList: [],
      moduleList: [],
    };
  },
  created() {
    this.research();
    // this.getgradeRanglist()
    // this.getAwardsListChiose()
    // this.getPubenumsList()
    this.getData();
  },
  computed: {
    ...mapGetters(["user"]),
  },
  methods: {
    handleDelete() {
      this.$confirm('是否删除' + "?").then((_) => {
        let pkIdList = this.multipleSelection.map((item) => {
          return item.pkId;
        });
        api.deleteBusinessList({ pkIdList: pkIdList }).then((res) => {
          if (res.code == 200) {
            this.$message({
              message: res.msg,
              type: "success",
            });
            this.research();
          }
        });
      });
    },
    check(data){
      this.noticeContent = data.operationParam
      this.isNotice =true
    },
    // 导出
    handleExport() {
      this.download(
        "/system/manage/operation-log/export",
        Object.assign({}, this.queryParams, this.select),
        `操作记录${new Date().getTime()}.xlsx`
      )
    },
    getData() {
      // 获取功能
      api.methodType().then((res) => {
        this.methodList = res.data;
      });
      // 获取模块
      api.moduleType().then((res) => {
        this.moduleList = 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;
    },
    submitBtn() {
      // 添加角色
      this.ruleSubmit();
    },
    updateShow(item) {
      this.types = 2;
      // 更新角色信息
      this.userId = item.userId;
      api.userDetails(item.userId).then((res) => {
        if (res.code === 200) {
          this.ruleShow = true;
          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,
            countryIdList: res.data.countryIdList,
            authority: res.data.authority == 0 ? "启用" : "停用",
            pkDept: res.data.pkDept,
          };
        } 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: "",
                  status: "",
                  roleIdList: [],
                  vertexIdList: [],
                  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: "",
                  status: "",
                  roleIdList: [],
                  vertexIdList: [],
                  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.isNotice =false
    },
    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.operationLogList(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.loading = false

        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:45%;
  text-align: center;
}
</style>
<style lang="scss" scoped>
.img-auto {
  text-align: center;
  height: 660px;
  overflow-y: auto;
  ::v-deep p {
    font-size: 14px;
  }
  ::v-deep img {
    max-width: 100%;
    height: auto;
  }
}
.title {
  color: #333;
  font-weight: bold;
  margin: 10px auto 10px 0;
  font-size: 16px;
  text-align: center;
}
::v-deep .el-dialog__header {
  text-align: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding-bottom: 20px;
}
::v-deep .el-dialog__title {
  font-size: 32px;
  color: #333;
  font-weight: bold;
}
::v-deep .el-select {
  width: 100%;
}
::v-deep .el-check_s .el-input__inner {
  width: 100%;
}

::v-deep .el-dialog__header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.button-s {
  padding: 0 2px !important;
}

::v-deep .el-row {
  //margin-top: 10px;
}
::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: #c8161d;
        color: #ffffff;
      }
    }
  }
  .maintop {
    display: flex;
    //padding: 10px 0;
    justify-content: space-between;
    align-items: center;
    .mainbtn {
      .thebtn1 {
        color: #ffffff;
        background: rgba(67, 145, 253, 1);
      }
    }
  }
  .main {
    // margin-top: 20px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0px 2px 20px 0px rgba(238, 238, 238, 0.5);
    .maintable {
      overflow: auto;
    }
  }
}
</style>
