<template>
  <div id="loginLog">
    <Breadcrumb separator=">" class="bread">
      <BreadcrumbItem>系统管理</BreadcrumbItem>
      <BreadcrumbItem>登录日志</BreadcrumbItem>
    </Breadcrumb>
    <ul class="topSearch">
      <li>
        <span>手机号：</span>
        <Input :maxlength="11" v-model="top.mobile" style="width: 160px" />
      </li>
      <li>
        <span>用户名：</span>
        <Input :maxlength="32" v-model="top.userName" style="width: 160px" />
      </li>
      <li>
        <span>用户类型：</span>
        <Select v-model="top.userType" style="width:160px">
          <Option v-for="item in userTypeList" :value="item.code" :key="item.code">{{ item.name }}</Option>
        </Select>
      </li>
      <li>
        <span>登录时间：</span>
        <DatePicker v-model="top.startTime" type="date" placeholder="开始时间" style="width: 160px"></DatePicker>-
        <DatePicker v-model="top.endTime" type="date" placeholder="截止时间" style="width: 160px"></DatePicker>
      </li>
      <li>
        <span>登录类型：</span>
        <Select v-model="top.loginType" style="width:160px">
          <Option v-for="item in loginTypeList" :value="item.code" :key="item.code">{{ item.name }}</Option>
        </Select>
      </li>
      <li>
        <span>应用类型：</span>
        <Select v-model="top.appType" style="width:160px">
          <Option v-for="item in categoryList" :value="item.code" :key="item.code">{{ item.name }}</Option>
        </Select>
      </li>
      <li>
        <span>IP地址：</span>
        <Input :maxlength="32" v-model="top.ip" style="width: 160px" />
      </li>
      <li>
        <span>合作伙伴：</span>
        <Select v-model="top.partnerId" style="width:160px">
          <Option v-for="item in partnerList" :value="item.id" :key="item.id">{{ item.name }}</Option>
        </Select>
      </li>
      <li>
        <span>退出类型：</span>
        <Select v-model="top.logoutType" style="width:160px">
          <Option v-for="item in logoutTypeList" :value="item.code" :key="item.code">{{ item.name }}</Option>
        </Select>
      </li>
      <li>
        <Button type="primary" style="marginRight:10px;" @click="searchBtn">查询</Button>
        <Button type="primary" ghost @click="resetBtn">重置</Button>
      </li>
    </ul>
    <div>
      <Table border :height="tableHeight" :columns="columns" :data="tableData"></Table>
      <div class="page">
        <Page
          :total="totalPage"
          show-total
          show-elevator
          show-sizer
          @on-change="changePage"
          @on-page-size-change="changeSize"
        />
      </div>
    </div>
  </div>
</template>

<script>
import axios from "../../assets/js/axios";
import { formatDate,getTableHeight } from "./../../tools/tools";
export default {
  name: "LoginLog",
  data() {
    return {
      tableHeight: "",
      page: 1,
      totalPage: 0,
      currentPage: 1,
      pageSize: 10,
      categoryList: [], //应用类型
      userTypeList: [], //用户类型
      loginTypeList: [], //登录类型
      partnerList: [],
      abnormalStatusList: [],
      logoutTypeList: [],
      top: {
        mobile: "",
        userName: "",
        userType: "",
        startTime: "",
        endTime: "",
        loginType: "",
        appType: "",
        ip: "",
        partnerId: ""
      },
      columns: [
        // {type: 'selection',width:50,align: 'center'},
        { title: "手机号", key: "mobile", minWidth: 100, tooltip: true },
        { title: "用户名称", key: "userName", minWidth: 100, tooltip: true },
        { title: "用户类型", key: "userType", minWidth: 90, tooltip: true },
        { title: "应用类型", key: "appType", minWidth: 80, tooltip: true },
        { title: "登录类型", key: "loginType", minWidth: 100, tooltip: true },
        { title: "登录时间", key: "loginTime", minWidth: 130, tooltip: true },
        { title: "登录IP", key: "ip", minWidth: 120, tooltip: true },
        { title: "登录地址", key: "address", minWidth: 100, tooltip: true },
        { title: "网络服务提供商", key: "isp", minWidth: 120, tooltip: true },
        { title: "退出类型", key: "logoutType", minWidth: 100, tooltip: true },
        { title: "退出时间", key: "logoutTime", minWidth: 130, tooltip: true },
        { title: "退出IP", key: "logoutIp", minWidth: 120, tooltip: true },
        {
          title: "退出地址",
          key: "logoutAddress",
          minWidth: 100,
          tooltip: true
        },
        {
          title: "异常状态",
          key: "abnormalStatus",
          minWidth: 80,
          tooltip: true
        },
        {
          title: "父用户名称",
          key: "parentUserName",
          minWidth: 90,
          tooltip: true
        },
        
        {
          title: "合作伙伴名称",
          key: "partnerName",
          minWidth: 120,
          tooltip: true
        },
        {
          title: "医院名称",
          key: "hospitalName",
          minWidth: 180,
          tooltip: true
        },
        { title: "组织名称", key: "orgName", minWidth: 150, tooltip: true },
        // {title:'国家',key:'country',minWidth:80,tooltip:true},
        // {title:'省份',key:'province',minWidth:90,tooltip:true},
        // {title:'地市',key:'city',minWidth:80,tooltip:true},
        // {title:'区县',key:'county',minWidth:80,tooltip:true},
        { title: "设备类型", key: "deviceClass", minWidth: 90, tooltip: true },
        { title: "设备品牌", key: "deviceBrand", minWidth: 90, tooltip: true },
        { title: "设备名称", key: "deviceName", minWidth: 120, tooltip: true },
        { title: "操作系统", key: "os", minWidth: 120, tooltip: true },
        { title: "浏览器", key: "browser", minWidth: 150, tooltip: true },
        { title: "创建时间", key: "createTime", minWidth: 130, tooltip: true },
        {
          title: "创建人姓名",
          key: "creatorName",
          minWidth: 100,
          tooltip: true
        }
        // {title:'操作',key:'action',width:80,align:'center',fixed: 'right',
        //   render: (h, params) => {
        //       return h('div', [
        //           h('Button', {
        //               props: {
        //                   type: 'error',
        //                   size: 'small'
        //               },
        //               on: {
        //                   click: () => {
        //                     this.logoutSession(params.row.id)
        //                   }
        //               }
        //           }, '注销'),
        //       ]);
        //   }
        // },
      ],
      tableData: [],
      
    };
  },
  created(){
    window.addEventListener('resize',this.getHeight)
    window.onbeforeunload = this.getHeight()
  },
  destroyed(){
    window.removeEventListener('resize', this.getHeight)
  },
  mounted() {
    this.init();
    this.getMenu();
    this.getPage();
  },
  methods: {
    getHeight () {
      this.tableHeight = getTableHeight(310)
    },
    init() {
      let _this = this;
      axios
        .post("/platform-manager/platformProject/selectPartnerList", {})
        .then(function(res) {
          if (res) {
            _this.partnerList = res.data.data;
          }
        });
    
      // let myDate = new Date();
      // let year = myDate.getFullYear();
      // let month = myDate.getMonth();
      // let d = myDate.getDate();
      // _this.top.startTime = new Date(year,month,d)
      // _this.top.endTime = new Date(year,month,d)
    },
    getMenu() {
      let selectList = JSON.parse(localStorage.getItem("selectList"));
      for (let m of selectList) {
        if (m.t == "category") {
          this.categoryList = m.list;
        }
        if (m.t == "userType") {
          this.userTypeList = m.list;
        }
        if (m.t == "loginType") {
          this.loginTypeList = m.list;
        }
        if (m.t == "logoutType") {
          this.logoutTypeList = m.list;
        }
        if (m.t == "sessionAbnormalStatus") {
          this.abnormalStatusList = m.list;
        }
      }
    },
    changePage(page) {
      this.page = page;
      this.getPage();
    },
    changeSize(size) {
      this.pageSize = size;
      this.page = 1;
      this.currentPage = 1;
      this.getPage();
    },
    getPage() {
      let _this = this;
      if (_this.top.startTime && _this.top.endTime) {
        let d1 = new Date(_this.top.startTime);
        let d2 = new Date(_this.top.endTime);
        if (d1 > d2) {
          _this.$Message.error("开始时间不能大于结束时间！");
          return false;
        }
      }
      axios
        .post("/passport/session/listLog", {
          current: _this.page,
          size: _this.pageSize,
          mobile: _this.top.mobile,
          userName: _this.top.userName,
          userType: _this.top.userType,
          startTime: formatDate(_this.top.startTime, "01", "01"),
          endTime: formatDate(_this.top.endTime, "01", "01"),
          loginType: _this.top.loginType,
          appType: _this.top.appType,
          ip: _this.top.ip,
          partnerId: _this.top.partnerId,
          logoutType: _this.top.logoutType
        })
        .then(res => {
          if (res) {
            if (res.data.data.records) {
              var temp = res.data.data.records;
              for (let i of temp) {
                i.loginTime = formatDate(i.loginTime, "01", "03");
                i.createTime = formatDate(i.createTime, "01", "03");
                i.updateTime = formatDate(i.updateTime, "01", "03");
                i.logoutTime = formatDate(i.logoutTime, "01", "03");
                for (let j of _this.categoryList) {
                  if (i.appType == j.code) {
                    i.appType = j.name;
                  }
                }
                for (let j of _this.userTypeList) {
                  if (i.userType == j.code) {
                    i.userType = j.name;
                  }
                }
                for (let j of _this.loginTypeList) {
                  if (i.loginType == j.code) {
                    i.loginType = j.name;
                  }
                }
                for (let j of _this.logoutTypeList) {
                  if (i.logoutType == j.code) {
                    i.logoutType = j.name;
                  }
                }
                for (let j of _this.abnormalStatusList) {
                  if (i.abnormalStatus == j.code) {
                    i.abnormalStatus = j.name;
                  }
                }
              }
            }
            _this.tableData = temp;
            _this.totalPage = res.data.data.total;
            // _this.tableData = res.data.data.records
            _this.tempData = [];
          }
        });
    },
    searchBtn() {
      this.page = 1;
      this.currentPage = 1;
      this.getPage();
    },
    resetBtn() {
      this.top.mobile = "";
      this.top.userName = "";
      this.top.userType = "";
      this.top.loginType = "";
      this.top.appType = "";
      this.top.startTime = "";
      this.top.endTime = "";
      this.top.ip = "";
      this.top.partnerId = "";
      this.top.logoutType = "";
      this.page = 1;
      this.currentPage = 1;
      this.getPage();
    }
  }
};
</script>
<style scoped>
#loginLog .topSearch {
  display: flex;
  flex-flow: row wrap;
  margin-top: 10px;
}
#loginLog .topSearch > li {
  margin: 0 15px 10px 0;
}
</style>