<template>
  <div>
    <main-top>
      <div slot="con">
        <el-button @click="goto({ id: 'none', status: 0 })" type="primary"
          >新增</el-button
        >
      </div>
    </main-top>
    <div class="tablecon noSubmune">
      <div class="tablebody">
        <search>
          <div slot="content" class="searchslot">
            <span>注册时间：</span>
            <el-date-picker
              v-model="search.date"
              type="daterange"
              value-format="yyyy-MM-dd"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
            <span>真实姓名：</span>
            <el-input
              class="elInput paddingmore"
              :maxlength="INPUTLENGTH"
              show-word-limit
              @keydown.enter.native="getList"
              v-model="search.inputKey"
              placeholder="请输入真实姓名"
            ></el-input>

            <span>用户角色：</span>
            <el-select v-model="search.roleId" placeholder="请选择">
              <el-option label="全部" value="" key=""></el-option>
              <el-option
                v-for="(item, i) in rolelist"
                :key="i"
                :label="item.roleName"
                :value="item.id"
              >
              </el-option>
            </el-select>
            <el-button @click="getList" type="primary">查询</el-button>
            <el-button
              @click="
                (search.date = ''),
                  (search.roleId = ''),
                  (search.inputKey = ''),
                  getList()
              "
              >重置</el-button
            >
          </div>
        </search>
        <div class="table">
          <vtable
            :key="subMenu"
            :data="data"
            :page="page"
            :type="subMenu"
            @pagechange="
              (data) => {
                page.pageNum = data;
              }
            "
            @pagesizechange="
              (data) => {
                page.size = data;
              }
            "
            :tableData="list"
          >
            <el-table-column slot="operate" label="操作" width="190">
              <template slot-scope="scope">
                <template v-if="scope.row.roleKey!='sys_admin'" >
                  <span class="o-span" @click="gotoEdit(scope.row)">编辑</span>
                  <span class="o-span" @click="delSys(scope.row)">删除</span>
                </template>
                <template v-else>-</template>
              </template>
            </el-table-column>
          </vtable>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { raw } from "./data";
import { getSysList, delSys } from "@/configue/api";
import { mapGetters } from "vuex";

export default {
  data() {
    return {
      search: {
        inputKey: "",
        date: "",
        state: "",
        roleId: "",
      },
      type: "user",
      list: {},
      page: {
        size: 25,
        pageNum: 1,
      },
      rolelist: [],
    };
  },
  methods: {
    delSys(item) {
      this.confirm("删除后，信息将无法恢复，是否继续？", () => {
        delSys(
          this.type,
          {
            id: item.id,
          },
          () => {
            this.$alert("删除成功", "提示", {
              confirmButtonText: "确定",
              callback: () => {
                this.getList();
              },
            });
          }
        );
      });
    },
    gotoEdit(item) {
      let { type } = this.$route.params;
      this.$router.push({
        name: "edit-" + this.$route.name,
        params: {
          id: item.id,
          type: type,
        },
      });
    },
    getRoleList() {
      getSysList(
        "role",
        {
          pageNum: 1,
          pageSize: 1000,
        },
        (data) => {
          this.rolelist = data.data.records;
        }
      );
    },
    getList() {
      let { inputKey, roleId, date } = this.search;
      getSysList(
        this.type,
        {
          date: date,
          pageNum: this.page.pageNum,
          pageSize: this.page.size,
          searchKey: inputKey,
          roleId,
        },
        (data) => {
          this.list = data.data;
        }
      );
    },
  },
  computed: {
    ...mapGetters({
      activeMenu: "activeMenu",
      activeSub: "activeSub",
    }),
    data() {
      return raw[this.$route.params.type];
    },
    subMenu() {
      return this.$route.params.type;
    },
  },
  watch: {
    subMenu: {
      deep: true,
      immediate: true,
      handler: function() {
        this.getAuth(this.activeMenu, "用户");
        this.$route.query.roleId||this.getList();
      },
    },
    activeMenu: {
      deep: true,
      immediate: true,
      handler: function(newVal) {
        this.getAuth(newVal, "用户");
      },
    },
    page: {
      deep: true,
      handler: function() {
        this.getList();
      },
    },
    "$route.query.roleId": {
      immediate: true,
      handler: function(newVal) {
        if (newVal) {
          this.search.roleId = Number(newVal)
          this.getList();
        }
      },
    },
  },
  mounted() {
    this.getRoleList();
  },
};
</script>
