<template>
  <div>
    <div class="batch_button">
      <el-button class="export" @click="exportData">导出数据</el-button>
      <el-button class="activate" @click="batchActivate">批量激活</el-button>
      <el-button class="delete" @click="batchDelete">批量删除</el-button>
    </div>
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      :header-cell-style="{ textAlign: 'center' }"
      :cell-style="{ textAlign: 'center' }"
      height="405"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="50"> </el-table-column>
      <el-table-column prop="username" label="用户名"> </el-table-column>
      <el-table-column prop="phone" label="手机号"> </el-table-column>
      <el-table-column prop="email" label="邮箱"> </el-table-column>
      <el-table-column prop="role" label="角色"> </el-table-column>
      <el-table-column prop="permission" label="权限"> </el-table-column>
      <el-table-column prop="working_address" label="单位"> </el-table-column>
      <el-table-column prop="register_time" label="注册时间"> </el-table-column>
      <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
          <el-tag
            :color="scope.row.status == true ? '#06f77e' : '#757776'"
          ></el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="operation" label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            style="color: #2ea8e6"
            @click="userDetail(scope.row)"
            >查看</el-button
          >
          <el-button
            size="mini"
            type="text"
            style="color: #2ea8e6"
            @click="userInfoEdit(scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="text"
            style="color: #2ea8e6"
            @click="deleteUser(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="bottom">
      <page class="page" :paginationData="paginationData"></page>
    </div>
    <!--弹窗-->
    <user-detail ref="userDetail"></user-detail>
    <userInfoEdit ref="userInfoEdit"></userInfoEdit>
  </div>
</template>

<script>
import page from "@/components/pagination/index";
import {
  getUserList,
  deleteSingleUser,
  updateUserDetail,
} from "@/api/user/user";
import UserDetail from "../messageDialog/userInfoDetail";
import userInfoEdit from "../messageDialog/userInfoEdit";
export default {
  components: { page, UserDetail, userInfoEdit },
  data() {
    return {
      tableData: [],
      multipleSelection: [],
      currentPageSize: 10,
      currentPage: 1,
      paginationData: {
        pageSize: 10,
        pagerCount: 5,
        currentPage: 1,
        pageSizes: [5, 10, 20, 30],
        total: 30,
        currentChange: (val) => {
          this.getTableData(val);
        },
        handleSizeChange: (val) => {
          this.handleSizeChange(val);
        },
      },
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      this.getTableData(1);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleClick() {
      //
    },
    getTableData(page) {
      this.tableData = [];
      getUserList(0, page, this.currentPageSize).then((res) => {
        if (res.data.code === 0 && res.data.data.length > 0) {
          this.paginationData.total = res.data.total;
          this.tableData = res.data.data.map((e) => {
            return {
              username: e.name,
              phone: e.phone == "undefined" || !e.phone ? "--" : e.phone,
              email: e.email == "undefined" || !e.email ? "--" : e.email,
              role: e.role == "undefined" || !e.role ? "--" : e.role,
              permission:
                e.permission == "undefined" || !e.permission
                  ? e.permission
                  : "--",
              working_address:
                e.company == "undefined" || !e.company ? "--" : e.company,
              register_time: this.$dayjs(e.register_time).format(
                "YYYY-MM-DD HH:mm:ss"
              ),
              status:
                e.on_job_status == "undefined" || !e.on_job_status
                  ? "--"
                  : e.on_job_status,
            };
          });
        }
      });
    },
    handleSizeChange(val) {
      this.currentPageSize = val;
      this.getTableData(this.currentPage);
    },
    userDetail() {
      this.$refs.userDetail.dialogVisible = true;
    },
    userInfoEdit() {
      this.$refs.userInfoEdit.dialogVisible = true;
    },
    deleteUser(data) {
      let options = {
        id: data.id,
        username: data.username,
        password: data.password,
      };
      deleteSingleUser(options).then((res) => {
        if (res.data.code === 0) {
          this.$message.success("删除成功");
          this.getTableData(1);
        }
      });
    },
    userDetail(data) {},
    userInfoEdit(data) {
      let options = {
        id: data.id,
      };
      updateUserDetail(options).then((res) => {});
    },
    batchActivate() {},
    batchDelete() {},
    exportData() {},
  },
};
</script>
<style lang="less" scoped>
.el-tag {
  width: 12px;
  height: 12px;
  border-radius: 100px;
  padding: 0;
}

.el-table {
  position: relative;
  top: 50px;
  left: 0;
  border: 1px solid #f0f2f2;
  font-size: 0.95rem;
  font-family: PingFang SC;
  font-weight: 500;
  color: #b2b2b2;
  background: rgba(255, 255, 255, 0.8);

  /deep/th {
    background: #f7fbff;
  }

  /deep/.el-checkbox {
    color: #b2b2b2;

    .el-checkbox__input.is-checked + .el-checkbox__label {
      color: #2ea8e6;
    }

    .el-checkbox__input.is-checked .el-checkbox__inner::after {
      width: 70%;
      height: 70%;
      background: #2ea8e6;
      border-radius: 0;
      transform: rotate(0deg) scaleY(1);
      position: static;
      // border: 1px solid #8DD9FF;
    }

    .el-checkbox__inner {
      border: 1px solid #8dd9ff;
      background: rgba(0, 170, 255, 0);
      display: flex;
      align-items: center;
      justify-content: center;
      position: static;

      &::after {
        transition: 0ms;
      }
    }

    .el-checkbox__label {
      padding-left: 0;
      font-size: 15px;
      position: absolute;
      top: 1px;
      left: 25px;
    }
  }
}

.batch_button {
  position: relative;
  top: 50px;
  float: left;
  left: 280px;

  .export {
    padding: 3px;
    width: 80px;
    height: 30px;
    bottom: 15px;
    position: absolute;
    color: #fff;
    border-radius: 4px;
    right: 190px;
    background-color: #2ea8e6;
  }

  .activate {
    padding: 3px;
    width: 80px;
    height: 30px;
    bottom: 15px;
    position: absolute;
    color: #fff;
    border-radius: 4px;
    right: 100px;
    background-color: #2ea8e6;
  }

  .delete {
    padding: 3px;
    width: 80px;
    height: 30px;
    bottom: 15px;
    position: absolute;
    color: #fff;
    border-radius: 4px;
    right: 10px;
    background-color: #b3b3b3;
  }
}

.bottom {
  position: absolute;
  left: 20px;
  right: 16px;
  bottom: 20px;
  height: 50px;
  line-height: 20px;
  background-color: #ffffff;
  text-align: center;
}
</style>
