<template>
  <basic-container>
    <avue-crud
      :option="option"
      :table-loading="loading"
      :data="data"
      ref="crud"
      v-model="form"
      :permission="permissionList"
      :before-open="beforeOpen"
      :before-close="beforeClose"
      @row-update="rowUpdate"
      @row-save="rowSave"
      @search-change="searchChange"
      @search-reset="searchReset"
      @selection-change="selectionChange"
      @refresh-change="refreshChange"
    >
      <template slot-scope="scope" slot="menu">
        <el-button
          type="text"
          size="small"
          @click.stop="rowDisable(scope.row)"
          v-if="scope.row.status === 0 && vaildData(permission.manage_cuser_stop, false)"
        >停用</el-button>
        <el-button
          type="text"
          size="small"
          @click.stop="rowEnable(scope.row)"
          v-else-if="vaildData(permission.manage_cuser_enable, false)"
        >启用</el-button>
        <el-button type="text" size="small" @click.stop="rowRemove(scope.row)">删除</el-button>
      </template>
      <template v-slot:status="{row}">
        <span v-if="row.status === 0">启用</span>
        <span v-else>停用</span>
      </template>
    </avue-crud>
  </basic-container>
</template>

<script>
import { getList, open, close, remove } from "@/api/manage/user";
import { mapGetters } from "vuex";

export default {
  components: {},
  name: "manage_cuser",
  data() {
    return {
      form: {},
      selectionList: [],
      query: {},
      loading: false,
      checkDialog: false,
      delayDialog: false,
      finishDialog: false,
      option: {
        height: "auto",
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        border: true,
        index: false,
        selection: false,
        addBtn: false,
        viewBtn: false,
        editBtn: false,
        delBtn: false,
        dialogClickModal: false,
        dialogType: "drawer",
        dialogFullscreen: true,
        column: [
          {
            label: "账号",
            prop: "account",
            type: "input",
            search: true,
          },
          {
            label: "注册时间",
            prop: "createTime",
            type: "input",
          },
          {
            label: "账号状态",
            prop: "status",
            type: "select",
            slot: true,
          },
        ],
      },
      data: [],
    };
  },
  created() {
    this.getData(this.query);
  },
  computed: {
    ...mapGetters(["userInfo", "permission"]),
    permissionList() {
      return {};
    },
    ids() {
      let ids = [];
      this.selectionList.forEach((ele) => {
        ids.push(ele.id);
      });
      return ids;
    },
  },
  methods: {
    rowEnable(row) {
      const h = this.$createElement;
      this.$confirm(
        h("p", { style: "color: #F56C6C" }, "启用账号后即可操作系统"),
        "您确定要启用此账号吗？",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          center: true,
        }
      )
        .then(() => {
          this.loading = true;
          open(row.account)
            .then((resp) => {
              this.$message({
                type: "success",
                message: resp.data.msg,
              });
              this.getData(this.query);
            })
            .catch(() => {
              this.loading = false;
            });
        })
        .catch(() => {});
    },
    rowDisable(row) {
      const h = this.$createElement;
      this.$confirm(
        h("p", { style: "color: #F56C6C" }, "一旦停用不可操作系统"),
        "您确定要停用此账号吗？",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          center: true,
        }
      )
        .then(() => {
          this.loading = true;
          close(row.account)
            .then((resp) => {
              this.$message({
                type: "success",
                message: resp.data.msg,
              });
              this.getData(this.query);
            })
            .catch(() => {
              this.loading = false;
            });
        })
        .catch(() => {});
    },
    rowRemove(row) {
      const h = this.$createElement;
      this.$confirm(
        h("p", { style: "color: #F56C6C" }, ""),
        "您确定要删除此账号吗？",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          center: true,
        }
      )
        .then(() => {
          this.loading = true;
          remove(row.account)
            .then((resp) => {
              this.$message({
                type: "success",
                message: resp.data.msg,
              });
              this.getData(this.query);
            })
            .catch(() => {
              this.loading = false;
            });
        })
        .catch(() => {});
    },
    searchReset() {
      this.query = {};
      this.getData();
    },
    searchChange(params, done) {
      this.query = params;
      this.getData(params);
      done();
    },
    selectionChange(list) {
      this.selectionList = list;
    },
    selectionClear() {
      this.selectionList = [];
      this.$refs.crud.toggleSelection();
    },
    beforeOpen(done) {
      done();
    },
    beforeClose(done) {
      done();
    },
    refreshChange() {
      this.getData(this.query);
    },
    getData(params = {}) {
      if (params.account) {
        this.loading = true;
        getList(params.account)
          .then((res) => {
            const data = res.data.data;
            this.data = data;
            this.loading = false;
          })
          .catch(() => {
            this.loading = false;
          });
      } else {
        this.data = [];
      }
    },
  },
};
</script>

<style>
</style>
