<template>
  <div id="sessionManagement">
    <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>
        <Button type="primary" style="marginRight:10px;" @click="searchBtn">查询</Button>
        <Button type="primary" ghost @click="resetBtn">重置</Button>
      </li>
    </ul>
    <div style="marginBottom:10px;">
      <Button type="error" @click="batchLogout" v-if="sessionDelBtn">批量注销</Button>
    </div>
    <div>
      <Table
        border
        @on-selection-change="changeSel"
        :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>
    <!--注销会话-->
    <Modal v-model="logoutModel" :closable="false" :mask-closable="false" width="400" scrollable>
      <p
        slot="header"
        style="height:40px;lineHeight:40px;backgroundColor:#ED4014;color:#fff;text-align:center"
      >
        <span>注销会话</span>
      </p>
      <p>确定注销{{logoutMsg}}会话吗？</p>
      <div slot="footer">
        <Button type="error" ghost @click="logoutC">关闭</Button>
        <Button type="error" @click="logoutS">确定</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import axios from "../../assets/js/axios";
import { formatDate,getTableHeight } from "./../../tools/tools";
export default {
  name: "SessionManagement",
  data() {
    return {
      tableHeight: "",
      page: 1,
      totalPage: 0,
      currentPage: 1,
      pageSize: 10,
      categoryList: [], //应用类型
      userTypeList: [], //用户类型
      loginTypeList: [], //登录类型
      partnerList: [],
      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: "isp", minWidth: 120, tooltip: true },
        { title: "地址", key: "address", minWidth: 100, 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) => {
            let _this = this
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  style:{
                    display:_this.sessionDelBtn?'inline-block':'none'
                  },
                  on: {
                    click: () => {
                      _this.logoutSession(params.row.sessionId);
                    }
                  }
                },
                "注销"
              )
            ]);
          }
        }
      ],
      tableData: [],
      //注销会话
      logoutModel: false,
      logoutMsg: "",
      logoutId: "",
      tempData: [],
      tableBtn:[],
      sessionDelBtn:false,
    };
  },
  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(345)
    },
    init() {
      let _this = this;
      axios
        .post("/platform-manager/platformProject/selectPartnerList", {})
        .then(function(res) {
          if (res) {
            _this.partnerList = res.data.data;
          }
        });
      _this.tableBtn = JSON.parse(sessionStorage.getItem('nMArr'));
      for (let i of _this.tableBtn) {
        if (i.code === 'sessionManagementDel') {_this.sessionDelBtn = true}
      }
      // 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;
        }
      }
    },
    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/list", {
          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
        })
        .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");
                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;
                  }
                }
              }
            }
            _this.tableData = temp;
            _this.totalPage = res.data.data.total;
            _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.page = 1;
      this.currentPage = 1;
      this.getPage();
    },
    //注销会话
    logoutSession(id) {
      this.logoutModel = true;
      this.logoutMsg = "当前";
      this.logoutId = id;
    },
    logoutC() {
      this.logoutModel = false;
      this.logoutMsg = "";
      this.logoutId = "";
    },
    logoutS() {
      let _this = this;
      if (_this.logoutMsg === "当前") {
        axios
          .post("/passport/invalidateSession", {
            sessionId: _this.logoutId
          })
          .then(res => {
            if (res) {
              _this.logoutC();
              _this.page = 1;
              _this.currentPage = 1;
              _this.getPage();
            }
          });
      } else if (_this.logoutMsg === "选中的") {
        let ids = [];
        for (let i of _this.tempData) {
          ids.push(i.sessionId);
        }
        axios
          .post("/passport/batchInvalidateSession", {
            sessionIds: ids
          })
          .then(res => {
            if (res) {
              _this.logoutC();
              _this.page = 1;
              _this.currentPage = 1;
              _this.getPage();
            }
          });
      }
    },
    //批量注销会话
    batchLogout() {
      if (this.tempData.length === 0) {
        this.$Message.error("请选择需要注销的会话");
      } else {
        this.logoutModel = true;
        this.logoutMsg = "选中的";
      }
    },
    changeSel(change) {
      this.tempData = change;
    }
  }
};
</script>
<style scoped>
#sessionManagement .topSearch {
  display: flex;
  flex-flow: row wrap;
  margin-top: 10px;
}
#sessionManagement .topSearch > li {
  margin: 0 15px 10px 0;
}
</style>