<template>
  <div class="home">
    <!-- <a-card class="card" :title="'我的站点'" :bordered="false" size="small"> -->
    <!-- <div :style="{ fontSize: '18px' }"><a-icon type="ie" />我的站点：</div> -->
    <div item-layout="horizontal" :data-source="data">
      <div v-for="(item, key) in data" :key="key">
        <div @click="jumpSite(key)" class="site-item" target="_blank">
          <div class="site">
            <div class="img">
              <img :src="item.logo" alt="" />
            </div>
            <div class="title">{{ $t(`${item.name}`) }}</div>
            <div class="remark">
              {{ item.remark ? item.Remark : "" }}
            </div>
          </div>
        </div>
        <!-- <iframe :id="`myIframe${key}`" :src="item.domainUrl" style="display: none" /> -->
      </div>
    </div>
    <div class="latest-login-box">
      <a-tabs default-active-key="1" @change="callback">
        <a-tab-pane key="1" :tab="$t(`Recently the login`)">
          <a-spin :spinning="loading">
            <a-table
              class="tac-box expand-area-table"
              :columns="columns"
              :data-source="latestData"
              :expandedRowKeys="expandedRowKeys"
              row-key="id"
              :size="'small'"
              @expand="open"
              :loading="loading"
              :scroll="{
                x: 1100,
              }"
              :pagination="false"
            >
              <a-table
                slot="expandedRowRender"
                row-key="id"
                :columns="innerColumns"
                :data-source="innerData"
                :size="'small'"
                :pagination="false"
              >
                <span slot="loginPort" slot-scope="loginPort">
                  {{ loginPort == 1 ? "PC" : loginPort == 2 ? "Mobile" : "Other" }}
                </span>
              </a-table>
              <span slot="isSuccess" slot-scope="isSuccess">
                <a-tag :color="isSuccess == 1 ? 'green' : 'red'"
                  >{{ isSuccess == 1 ? "成功" : "失败" }}
                </a-tag>
              </span>
              <span slot="loginType" slot-scope="loginType">
                {{ loginType == 1 ? "本地账号" : "域账号" }}
              </span>
            </a-table>
          </a-spin>
        </a-tab-pane>
        <a-tab-pane key="2" :tab="$t(`Device Lsit`)">
          <a-spin :spinning="loading">
            <a-table
              class="tac-box expand-area-table"
              :columns="Columns2"
              :data-source="data2"
              :expandedRowKeys="expandedRowKeys"
              row-key="id"
              :size="'small'"
              @expand="open"
              :loading="loading"
              :scroll="{
                x: 1100,
              }"
              :pagination="false"
            >
              <!-- 操作 -->
              <template slot="operation" slot-scope="x, y">
                <div>
                  <a-popconfirm
                    :title="$t('site.table.content.确定删除')"
                    @confirm="() => deletedInfo(y.id)"
                  >
                    <a-button
                      type="danger"
                      :style="{ background: '#FD572B', marginRight: '5px' }"
                      
                    >
                      {{$t('删除')}}
                    </a-button>
                  </a-popconfirm>
                </div>
              </template>
            </a-table>
          </a-spin>
        </a-tab-pane>
        <!-- <a-tab-pane key="2" tab="Tab 2" force-render>
          Content of Tab Pane 2
        </a-tab-pane>
        <a-tab-pane key="3" tab="Tab 3">
          Content of Tab Pane 3
        </a-tab-pane> -->
      </a-tabs>
    </div>
    <!-- </a-card> -->
  </div>
</template>
<script>
import { getAuthedSite } from "@/homeComponents/api/user";
import { getLatestList, getDeviceList, deleteDeviceInfo } from "@/baseConfigComponents/api/record";
import { columns, innerColumns, Columns2 } from "@/baseConfigComponents/components/User/columns.js";
import {base64Encode, base64Decode, generatekey, AESEncode, AESDecode, md5Encode, timestampToTime} from "@/common/utils/encryptTools.js"
export default {
  data() {
    return {
      token:window.localStorage.getItem('Access-Token'),
      data: [],
      data2: [],
      latestData: [],
      expandedRowKeys: [],
      innerData: [],
      loading: false,
      columns,
      innerColumns,
      Columns2
    };
  },
  mounted() {
    getAuthedSite().then((res) => {
      this.data = res.data;
    });
    this.getLatestLogin();
    this.getDevice();
  },
  methods: {
    // 获取最近登录记录
    getLatestLogin() {
      getLatestList().then(res=>{
        this.latestData = res.data;
        // console.log(res);
      })
    },
    // 获取最近登录记录
    getDevice() {
      getDeviceList().then(res=>{
        // console.log(res)
        this.data2 = res.data;
        // console.log(res);
      })
    },
    // 删除广告信息
    deletedInfo(id) {
      deleteDeviceInfo(id).then(() => {
        this.$message.success("删除成功");
        this.getDevice();
      });
    },
    open(expanded, record) {
      if (expanded) {
        this.innerData = [];
        this.innerData.push(record);
        this.expandedRowKeys = [];
        this.expandedRowKeys.push(record.id);
      } else {
        this.expandedRowKeys = [];
      }
    },
    // 跳转站点
    jumpSite(val) {
      let item = this.data[val]
      let url = item.domainUrl+item.indexUrl;
      let device = localStorage.getItem("fingerprint").replace(/"/g, "");
      let time = timestampToTime();
      let pass1 = md5Encode(this.token+time+device); // md5段
      let pass2 = AESEncode(this.token+time+device+pass1); // AES段
      let pass3 = encodeURI(base64Encode(pass2)); // 最后加密段
      
      window.open(url+"?mesg="+pass3,"_blank");
/*       // 解密
      let encode = AESDecode(base64Decode(pass3));
      let _token = encode.substring(0,32);
      let _time = encode.substring(32,46);
      let _device = encode.substring(46,78);
      let newMd5 = md5Encode(_token+_time+_device);
      let _md5 = encode.substring(78);
      console.log(_md5,newMd5) */
    }
  },
};
</script>
<style lang="less">
.home {
  .site-item {
    cursor: pointer;
    color: black;
    .site {
      float: left;
      box-shadow: 0px 0px 8px #cdcdcd;
      width: 230px;
      margin: 20px 20px 10px;
      border-radius: 25px 25px 10px 10px;
      overflow: hidden;
      height: 305px;

      .img {
        width: 100%;
        height: 200px;
        display: flex;
        justify-content: center;
        img {
          height: 100%;
          width: 100%;
        }
      }
    }
    .title {
      width: 100%;
      box-sizing: border-box;
      margin: 5px 0;
      text-align: center;
      font-size: 18px;
      font-weight: 600;
    }
    .remark {
      text-indent: 1.5em;
      width: 95%;
      min-height: 40px;
      max-height: 60px;
      margin: 0 auto;
      color: #bababa;
      margin-bottom: 10px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
    }
  }
  .tac-box {
    th,
    td {
      text-align: center !important;
    }
  }
  .expand-area-table {
    tr.ant-table-expanded-row td > .ant-table-wrapper {
      margin: 0;
    }
  }
  .latest-login-box{
    // width: 50%;
    clear: both;
    padding: 5px 10px;
    border: 1px solid #e9e9e9;
    border-radius: 2px;
    background: #fff;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);
  }
}
</style>
