<template>
  <div class="main_root">
    <div class="personal_list">
      <div class="personal_item" v-for="item in personal_list" :key="item.id">
        <div
          @click="toggle(item.id)"
          :class="[curmodel === item.id ? 'active' : '']"
        >
          {{ item.title }}
        </div>
      </div>
    </div>
    <div class="contents" v-if="curmodel === 1">
      <div class="user">
        <div class="head">
          <img src="../../assets/img/user.png" />
        </div>
        <div class="username">
          <p>{{ personalInfo.aname }}</p>
          <div>
            登录名<span>{{ personalInfo.loginname }}</span> 角色<span>{{
              personalInfo.atype === 1
                ? "平台管理员"
                : personalInfo.atype === 2
                ? "区域管理员"
                : "学校管理员"
            }}</span>
            手机号<span>{{ personalInfo.phone }}</span>
          </div>
        </div>
      </div>
      <div class="comm">
        <div class="com">
          <span>创建时间</span>{{ personalInfo.createtime }}
          <span style="margin-left: 20px">更新时间</span
          >{{ personalInfo.updatetime }}
        </div>
        <div class="com">
          <span>最后登录时间</span>{{ personalInfo.lasttime }}
          <span style="margin-left: 20px">最后登录IP</span
          >{{ personalInfo.lastip }}
        </div>
        <div class="com">
          <span style="width: 50px">描述</span>{{ personalInfo.comm }}
        </div>
      </div>
    </div>
    <div class="content" v-else-if="curmodel === 2">
      <div class="search_header">
        <div class="search_left">
          <DatePicker
            v-model="searchForm.dataRange"
            @on-change="searchList()"
            :editable="false"
            :transfer="true"
            format="yyyy-MM-dd"
            type="daterange"
            placement="bottom-start"
            placeholder="请选择时间段"
            style="margin-right: 10px; width: 220px"
          ></DatePicker>
          <Input
            v-model="searchForm.name"
            placeholder="请输入事件名称"
            search
            @on-search="searchList()"
            style="width: 180px"
          />
        </div>
      </div>
      <div class="table_wrap">
        <Table :columns="columns" :data="searchForm.list"> </Table>
      </div>
      <div class="page_wrap">
        <Page
          :transfer="true"
          :total="searchForm.total"
          :current="searchForm.page"
          :page-size="searchForm.size"
          :page-size-opts="[10, 20, 40, 60]"
          @on-change="pageChange"
          @on-page-size-change="pageSizeChange"
          show-total
          show-sizer
        ></Page>
      </div>
    </div>
    <div class="content" style="padding-top: 16px" v-else>
      <div class="table_wrap">
        <Table :columns="columns1" :data="searchForm.list"></Table>
      </div>
      <div class="page_wrap">
        <Page
          :transfer="true"
          :total="searchForm.total"
          :current="searchForm.page"
          :page-size="searchForm.size"
          :page-size-opts="[10, 20, 40, 60]"
          @on-change="pageChange"
          @on-page-size-change="pageSizeChange"
          show-total
          show-sizer
        ></Page>
      </div>
    </div>
  </div>
</template>

<script>
import { admin_detail, admin_list_lr, admin_list_re } from "@/api/admin";
import { dateFormat } from "@/utils";

export default {
  data() {
    return {
      personal_list: [
        {
          id: 1,
          title: "个人信息"
        },
        {
          id: 2,
          title: "最近事件"
        },
        {
          id: 3,
          title: "历史登录"
        }
      ],
      curmodel: 1,
      personalInfo: {},
      searchForm: {
        dataRange: [],
        name: "",
        page: 1,
        size: 10,
        list: [],
        total: 0
      },
      userInfo: {},
      columns: [
        {
          title: "序号",
          align: "center",
          width: 70,
          render: (h, params) => {
            return h(
              "span",
              params.index +
                (this.searchForm.page - 1) * this.searchForm.size +
                1
            );
          }
        },
        {
          title: "登录名",
          key: "loginname",
          align: "center"
        },
        {
          title: "所属模块",
          key: "logmodel",
          align: "center"
        },
        {
          title: "模块操作",
          key: "logaction",
          align: "center"
        },
        {
          title: "日志内容",
          key: "content",
          align: "center"
        },
        {
          title: "时间",
          key: "createtime",
          width: 190,
          align: "center"
        }
      ],
      columns1: [
        {
          title: "序号",
          align: "center",
          width: 70,
          render: (h, params) => {
            return h(
              "span",
              params.index +
                (this.searchForm.page - 1) * this.searchForm.size +
                1
            );
          }
        },
        {
          title: "登录IP",
          key: "ip",
          align: "center"
        },
        {
          title: "地址",
          key: "ipAddress",
          align: "center"
        },
        {
          title: "登录时间",
          key: "createtime",
          width: 190,
          align: "center"
        }
      ]
    };
  },
  created() {
    this.userInfo = JSON.parse(
      localStorage.getItem("xh_control_userInfo")
    ).content;
    this.getPersonal();
  },
  computed: {
    powerParams() {
      return this.$store.getters.powerParams;
    }
  },
  methods: {
    toggle(type) {
      this.curmodel = type;
      if (type === 1) {
        this.getPersonal();
      } else {
        this.searchForm.size = 10;
        this.searchForm.page = 1;
        this.searchList();
      }
    },
    // 搜索
    searchList() {
      this.searchForm.page = 1;
      this.getEvent();
    },
    // 页码改变
    pageChange(page) {
      this.searchForm.page = page;
      this.getEvent();
    },
    // 每页显示数量改变
    pageSizeChange(size) {
      this.searchForm.size = size;
      this.searchForm.page = 1;
      this.getEvent();
    },
    async getEvent() {
      let res = {
        code: null
      };
      if (this.curmodel === 2) {
        let _begindate = this.searchForm.dataRange[0];
        _begindate = _begindate ? dateFormat(_begindate, "yyyy-MM-dd") : null;
        let _enddate = this.searchForm.dataRange[1];
        _enddate = _enddate ? dateFormat(_enddate, "yyyy-MM-dd") : null;
        res = await admin_list_re({
          objectid: this.userInfo.adminid,
          begindate: _begindate,
          enddate: _enddate,
          name: this.searchForm.name,
          page: this.searchForm.page,
          size: this.searchForm.size
        });
      } else {
        res = await admin_list_lr({
          objectid: this.userInfo.adminid,
          page: this.searchForm.page,
          size: this.searchForm.size
        });
      }

      if (res.code === 0) {
        this.searchForm.list = res.obj.data;
        this.searchForm.total = res.obj.total;
      } else {
        this.$Message.error(res.msg);
      }
    },
    getPersonal() {
      admin_detail({ adminid: this.userInfo.adminid }).then((res) => {
        if (res.code === 0) {
          this.personalInfo = res.obj;
        } else {
          this.$Message.error(res.msg);
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.main_root {
  background-color: transparent;
  border: navajowhite;
  height: calc(100% - 10px);
  display: flex;
  .personal_list {
    width: 200px;
    height: 100%;
    border-radius: 15px;
    padding: 20px 10px;
    border: 1px solid #e9f0f9;
    background: #ffffff;
    margin-right: 20px;
    .personal_item {
      line-height: 30px;
      text-align: center;
      cursor: pointer;
    }
    .active {
      border-radius: 6px;
      background: #339dff;
      color: white;
    }
  }
  .contents {
    width: calc(100% - 220px);
    height: 100%;
    overflow: hidden;
    .user {
      height: 200px;
      border-radius: 15px;
      background: white;
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      .head {
        width: 100px;
        height: 100px;
        margin: 0 40px;
        border-radius: 16px;
        overflow: hidden;
        border: 2px solid #ffffff;
        box-shadow: 0 6px 14px 0 #dce0e880;
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      .username {
        p {
          color: #253a70;
          font-size: 20px;
          font-weight: 500;
          font-family: "SourceHanSansCN";
          text-align: left;
          line-height: 50px;
        }
        div {
          color: #7c8db5;
          font-size: 16px;
          font-weight: 400;
          font-family: "SourceHanSansCN";
          line-height: 50px;
          span {
            color: #253a70;
            display: inline-block;
            margin: 0 20px;
          }
        }
      }
    }
    .comm {
      height: calc(100% - 220px);
      overflow-y: auto;
      border-radius: 15px;
      background: white;
      margin-bottom: 20px;
      padding: 40px;
      .com {
        line-height: 30px;
        color: #253a70;
        font-size: 16px;
        font-weight: 400;
        margin-bottom: 10px;
        font-family: "SourceHanSansCN";
        span {
          color: #7c8db5;
          display: inline-block;
          width: 100px;
          margin-right: 20px;
        }
      }
    }
  }
  .content {
    width: calc(100% - 220px);
    height: 100%;
    overflow-y: auto;
    border-radius: 15px;
    border: 1px solid #e9f0f9;
    background: #ffffff;
    .search_header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 16px 16px;
      .search_left {
        display: flex;
        justify-content: flex-start;
        align-items: center;
      }
    }
  }
}
</style>
