<template>
  <el-row class="back_container">
    <el-row>
      <!-- <el-image :src="Background" /> -->
      <header>
        <div class="width_1200">
          <div class="header_container">
            <p>
              您好，{{
                dmUser.user.nickName
              }}&nbsp;&nbsp;&nbsp;&nbsp;｜&nbsp;&nbsp;&nbsp;&nbsp;
            </p>
            <p>
              {{
                dmUser.user.dept.name
              }}&nbsp;&nbsp;&nbsp;&nbsp;｜&nbsp;&nbsp;&nbsp;&nbsp;
            </p>
            <p @click="open">注销</p>
          </div>
        </div>
      </header>
    </el-row>
    <el-row class="routerCardPar">
      <el-col :span="24">
        <div class="header">
          <img src="../assets/images/header.png">
          <p class="company_name">中国东信智慧楼宇</p>
        </div>
        <div class="demo-basic--circle">
          <div
            class="block"
            :style="{
              'background-image': 'url(' + dmUser.user.dmUser.faceid + ')',
              'background-size': 'contain',
              'background-position': 'center',
              border: '1px solid #ebebeb',
              'background-color': '#f1f1f1',
            }"
            style="background-repeat: no-repeat"
          >
            <!--            <img :src="dmUser.user.dmUser.faceid" alt="">-->
          </div>
          <div class="userInfo">
            <div class="name">
              <span>{{ dmUser.user.nickName }}</span>
            </div>
            <el-divider />
            <div class="departmeny">
              <div class="icon_right">
                <img src="../assets/images/avatar.png" alt="" srcset="">
                <div class="world">
                  <p>部门:</p>
                  <p>{{ dmUser.user.dept.name }}</p>
                </div>
              </div>
              <div class="icon_right">
                <img src="../assets/images/phone.png" alt="" srcset="">
                <div class="world">
                  <p>手机:</p>
                  <p>{{ dmUser.user.phone }}</p>
                </div>
              </div>
              <div class="icon_right">
                <img src="../assets/images/money.png" alt="" srcset="">
                <div class="world">
                  <p>余额</p>
                  <p>{{ balance }}元</p>
                </div>
              </div>
              <div class="icon_right">
                <img src="../assets/images/che.png" alt="" srcset="">
                <div class="world">
                  <p>已录入车牌</p>
                  <p>{{ plate }}</p>
                </div>
              </div>
            </div>
            <div class="icon" />
          </div>
        </div>
      </el-col>
      <el-col :span="24" class="mt_20 table_box">
        <div class="each_card_box">
          <el-card class="box-card">
            <div class="clearfix">
              <h3 class="title_class">最近通行记录</h3>
            </div>
            <el-table
              :data="currentTableData"
              :header-cell-style="rowClass"
              style="width: 100%; margin-top: 12px"
              height="300"
            >
              <el-table-column prop="NO" label="序号" width="50" />
              <el-table-column prop="dmRoomDevice.name" label="通行地点" />
              <el-table-column prop="accessTime" label="时间" />
            </el-table>
          </el-card>
        </div>
        <div class="each_card_box">
          <el-card class="box-card">
            <div class="clearfix">
              <h3 class="title_class">最近消费记录</h3>
            </div>
            <el-table
              :data="consumptionTableData"
              :header-cell-style="rowClass"
              style="width: 100%; margin-top: 12px"
              height="300"
            >
              <el-table-column prop="NO" label="序号" width="50" />
              <el-table-column prop="termName" label="消费设备" width="80" />
              <el-table-column prop="money" label="金额" width="60" />
              <el-table-column prop="createDate" label="时间" />
            </el-table>
          </el-card>
        </div>
        <div class="each_card_box">
          <el-card class="box-card">
            <div class="clearfix">
              <h3 class="title_class">最近访客预约记录</h3>
            </div>
            <el-table
              :data="visitorTableData"
              :header-cell-style="rowClass"
              style="width: 100%; margin-top: 12px"
              height="300"
            >
              <el-table-column prop="NO" label="序号" width="50" />
              <el-table-column prop="visitor_name" label="访客名称" />
              <el-table-column prop="start_time" label="到访时间" />
            </el-table>
          </el-card>
        </div>
      </el-col>
      <el-col :span="24" class="">
        <el-card class="box-card" style="margin-top: 10px">
          <div slot="header" class="clearfix">
            <h3 class="title_class">快捷功能入口</h3>
          </div>
          <div class="fastEnter">
            <ul>
              <li
                v-for="item in systemListOne"
                :key="item.id"
                @click="sso2(item.systemUrl, item.menuPath)"
              >
                <img :src="item.storage.url">
                <p>{{ item.systemName }}</p>
              </li>
            </ul>
          </div>
        </el-card>
      </el-col>
      <!--  -->
      <el-col :span="24" class="mt_20 system">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <h3 class="title_class">系统功能入口</h3>
          </div>
          <ul>
            <li
              v-for="item in systemList"
              :key="item.id"
              @click="sso(item.systemUrl)"
            >
              <img :src="item.storage.url">
              <p>{{ item.systemName }}</p>
            </li>
          </ul>
        </el-card>
        <!-- <template v-for="(system, index) in ">
          <el-card
            :key="system.id"
            class="routerCard"
            @click.native="sso(system.systemUrl)"
          >
            <img :src="system.storage.url" />
            <img src="@/assets/images/hyxt.png" />
            <span>{{ system.systemName }}</span>
          </el-card>
        </template> -->
      </el-col>
    </el-row>
    <el-row>
      <footer>
        <div class="footer_container">
          <div class="footer_left">
            <div class="img_container">
              <img src="../assets/images/footer.png">
            </div>
            <div class="company_info_container">
              <p>中国—东盟信息港股份有限公司 技术支持</p>
              <div class="police">
                <img src="../assets/images/police.png" alt="">
                <p>桂公网安备45010802000099号 桂ICP备16005301号-7</p>
              </div>
            </div>
          </div>
          <div class="footer_right">
            <p>
              <a>插件下载 </a>| <a> 联系管理员</a>| <a> 用户手册</a>|
              <a> 版本说明</a>
            </p>
          </div>
        </div>
      </footer>
    </el-row>
  </el-row>
</template>

<script>
import { ssoGetUser } from '@/api/login'
import { mapGetters } from 'vuex'
import crudDmSystem from '@/api/dm/system/dmSystem'
import Background from '@/assets/images/bg.png'
import { encrypt } from '@/utils/rsaEncrypt'
import axios from 'axios'

export default {
  name: 'Sso',
  data() {
    const token = this.$route.query.token
    return {
      token: token,
      systemList: [],
      Background: Background,
      circleUrl:
        'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
      squareUrl:
        'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      currentTableData: [], // 通行记录(字段需改)
      consumptionTableData: [], // 消费记录(字段需改)
      visitorTableData: [], // 访客记录(字段需改)
      systemListOne: [], // 快捷功能入口列表(字段需改,暂用的系统功能入口)
      balance: null,
      plate: null,
      dmUser: { user: { dmUser: {}, dept: {}}}
    }
  },
  computed: {
    ...mapGetters(['user', 'userPassword'])
  },
  created() {
    this.getUser(this.token)
  },
  methods: {
    /** 表头颜色 */
    rowClass() {
      return 'background: rgba(0,0,0,0.03);'
    },
    getUser(token) {
      if (!localStorage.getItem('dmUser')) {
        ssoGetUser(token).then((res) => {
          // console.log(111)
          localStorage.setItem('dmUser', JSON.stringify(res.data.data))
          this.dmUser = res.data.data
          this.allDate()
        })
      } else {
        // console.log(222)
        this.dmUser = JSON.parse(localStorage.getItem('dmUser'))
        this.allDate()
      }
    },
    allDate() {
      // console.log(this.dmUser)
      const user = {
        username: this.dmUser.user.username,
        password: this.dmUser.user.ossPassword
      }
      this.$store.dispatch('Sso', user).then(() => {
        const roles = []
        for (let i = 0; i < this.dmUser.user.roles.length; i++) {
          roles.push(this.dmUser.user.roles[i].id)
        }
        crudDmSystem.queryByRoleId(roles, 0).then((res) => {
          this.systemList = res
        })
        crudDmSystem.queryByRoleId(roles, 1).then((res) => {
          this.systemListOne = res
        })
      })
      this.getBalance(this.dmUser.user.dmUser.cardid)
      this.getPlate(
        this.dmUser.token,
        this.dmUser.nonce,
        this.dmUser.timestamp,
        this.dmUser.user.id
      )
      this.getAccessTraffic(
        this.dmUser.token,
        this.dmUser.nonce,
        this.dmUser.timestamp,
        this.dmUser.user.id
      )
      this.orderRecord(
        this.dmUser.token,
        this.dmUser.nonce,
        this.dmUser.timestamp,
        this.dmUser.user.dmUser.cardid
      )
      this.getVisitors(
        this.dmUser.token,
        this.dmUser.nonce,
        this.dmUser.timestamp,
        this.dmUser.user.id
      )
    },
    getBalance(card) {
      axios
        .get(
          'https://smartpark.caih.com/dxapi/dxtop/staff/cardBalance?card=' +
            card
        )
        .then((res) => {
          this.balance = res.data.data
        })
    },
    getPlate(accToken, nonce, timestamp, userId) {
      const data = {
        nonce: nonce,
        timestamp: timestamp,
        query: {
          userNumber: userId
        }
      }
      axios
        .post(
          'https://smartpark.caih.com/ykt/api/thirdparty/v1/openInterface/getPlateNumber',
          data,
          { headers: { XYTACCESSTOKEN: accToken }}
        )
        .then((res) => {
          this.plate = res.data.data[0].plateNumber
        })
    },
    getAccessTraffic(accToken, nonce, timestamp, userId) {
      const data = {
        nonce: nonce,
        timestamp: timestamp,
        query: {
          userNumber: userId
        }
      }
      axios
        .post(
          'https://smartpark.caih.com/ykt/api/thirdparty/v1/openInterface/getAccessTraffic?page=0&size=5&sort=id,desc',
          data,
          { headers: { XYTACCESSTOKEN: accToken }}
        )
        .then((res) => {
          this.currentTableData = res.data.data.content
          this.currentTableData.forEach((element, index) => {
            element.NO = index + 1
          })
        })
    },
    orderRecord(accToken, nonce, timestamp, cardId) {
      const data = {
        nonce: nonce,
        timestamp: timestamp,
        query: {
          card: cardId
        }
      }
      axios
        .post(
          'https://smartpark.caih.com/zhcy/api/thirdparty/v1/open/orderRecord?page=0&size=5&sort=id,desc',
          data,
          { headers: { XYTACCESSTOKEN: accToken }}
        )
        .then((res) => {
          this.consumptionTableData = res.data.data.content
          this.consumptionTableData.forEach((element, index) => {
            element.NO = index + 1
          })
        })
    },
    getVisitors(accToken, nonce, timestamp, userId) {
      const data = {
        nonce: nonce,
        timestamp: timestamp,
        query: userId
      }
      axios
        .post(
          'https://smartpark.caih.com/ykt/api/thirdparty/v1/openInterface/getVisitant?page=0&size=5',
          data,
          { headers: { XYTACCESSTOKEN: accToken }}
        )
        .then((res) => {
          this.visitorTableData = res.data.data
          this.visitorTableData.forEach((element, index) => {
            element.NO = index + 1
          })
        })
    },
    sso(url) {
      const username = encrypt(this.user.username)
      const password = this.userPassword
      // location.href = `${url}/#/sso?username=${encodeURIComponent(username)}&password=${encodeURIComponent(password)}`
      const aEle = document.createElement('a')
      aEle.href = `${url}?username=${encodeURIComponent(
        username
      )}&password=${encodeURIComponent(password)}`
      aEle.target = '_blank'
      aEle.click()
    },
    sso2(url, menuPath) {
      console.log(url, menuPath)
      const username = encrypt(this.user.username)
      const password = this.userPassword
      // location.href = `${url}/#/sso?username=${encodeURIComponent(username)}&password=${encodeURIComponent(password)}`
      const aEle = document.createElement('a')
      aEle.href = `${url}?username=${encodeURIComponent(
        username
      )}&password=${encodeURIComponent(password)}&redirect=${menuPath}`
      aEle.target = '_blank'
      aEle.click()
    },
    open() {
      this.$confirm('确定注销并退出系统吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.logout()
        localStorage.clear()
      })
    },
    logout() {
      this.$store.dispatch('LogOut').then(() => {
        this.$router.push({ path: this.redirect || '/login' })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}

> .el-col:nth-child(5n + 1) {
  margin-left: 0;
}

> .el-col:nth-child(n + 6) {
  margin-top: 1;
}

.back_container {
  background-color: #f7f7f7;

  header {
    height: 34px;
    background: #444444;

    // padding: 0 50px 0 20px;
    .width_1200 {
      width: 1200px;
      margin: 0 auto;
      display: flex;
      justify-content: flex-end;

      .header_container {
        display: flex;
        font-family: MicrosoftYaHeiUI;
        font-size: 15px;
        color: #ffffff;
        font-weight: 400;
        line-height: 34px;
        text-align: right;
      }
    }
  }

  .routerCardPar {
    /*padding: 0 20%;*/
    width: 1200px;
    margin: 20px auto 0 auto;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;

    .header {
      padding: 0 0 20px;
      display: flex;

      img {
        height: 60px;
        margin-right: 15px;
      }

      p {
        line-height: 60px;
      }

      .company_name {
        font-size: 24px;
        color: rgba(0, 0, 0, 0.85);
        font-weight: 700;
      }
    }

    .demo-basic--circle {
      display: flex;
      background-color: #fff;
      padding: 20px;
      box-sizing: border-box;

      .block {
        width: 120px;
        height: 160px;
        margin-right: 30px;
        // background-size: contain;
        // background-repeat: no-repeat;
        // background-position: center;
        // border: 1px solid #ebebeb;
        background-color: #f1f1f1;
        img {
          width: 120px;
          height: 130px;
        }
      }

      .userInfo {
        width: 100%;

        .name {
          font-family: MicrosoftYaHeiUI;
          font-size: 18px;
          color: rgba(0, 0, 0, 0.85);
          font-weight: 400;
          padding-bottom: 20px;
        }

        .departmeny {
          margin-top: 25px;
          display: flex;
          font-size: 16px;

          p {
            margin-right: 50px;

            span {
              margin-right: 5px;
            }
          }

          // .icon_left {
          //   display: flex;
          //   img {
          //     width: 15px;
          //     height: 15px;
          //   }
          //   .world {
          //     margin-left: 20px;
          //     p:nth-child(2) {
          //       margin-top: 8px;
          //     }
          //   }
          // }
          .icon_right {
            display: flex;

            img {
              width: 25px;
              height: 25px;
              margin-right: 5px;
              padding: 3px;
              border-radius: 50%;
            }

            .world {
              // margin-left: 20px;
              font-size: 12px;
              color: rgba(0, 0, 0, 0.65);
              font-weight: 400;

              p:nth-child(2) {
                margin-top: 8px;
                font-size: 15px;
                color: rgba(0, 0, 0, 0.85);
                font-weight: 400;
              }
            }
          }

          .icon_right:nth-child(n + 3) {
            img {
              width: 32px;
              height: 32px;
              margin-right: 5px;
              padding: 3px;
              border-radius: 50%;
            }

            .world {
              // margin-left: 20px;
              font-size: 12px;
              color: rgba(0, 0, 0, 0.65);
              font-weight: 400;

              p:nth-child(2) {
                margin-top: 8px;
                font-size: 15px;
                color: rgba(0, 0, 0, 0.85);
                font-weight: 700;
              }
            }
          }
        }

        .icon {
          margin-top: 25px;
          display: flex;
        }
      }
    }

    .table_box {
      background-color: #fff;
      display: flex;
      padding: 10px;
      box-sizing: border-box;

      .each_card_box {
        width: 33.33%;
        padding: 5px;
        box-sizing: border-box;
      }
    }

    .fastEnter {
      width: 100%;

      ul {
        // margin-top: 20px;
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        background-color: #fff;
        padding: 00px 0 20px;
        box-sizing: border-box;

        li {
          // margin-top: 20px;
          width: calc(100% / 8);
          text-align: center;

          img {
            width: 75px;
            height: 75px;
          }

          p {
            // margin-top: 10px;
            font-family: MicrosoftYaHeiUI;
            font-size: 15px;
            color: rgba(0, 0, 0, 0.45);
            font-weight: 400;
          }
        }
      }
    }

    .system {
      .box-card {
        margin-top: 5px;

        ul {
          // margin-top: 20px;
          list-style: none;
          display: flex;
          flex-wrap: wrap;
          padding: 0px 0 10px;
          box-sizing: border-box;

          li {
            img {
              width: 75px;
              height: 75px;
            }

            // margin-top: 20px;
            width: calc(100% / 8);
            text-align: center;

            p {
              // margin-top: 10px;
              font-family: MicrosoftYaHeiUI;
              font-size: 15px;
              color: rgba(0, 0, 0, 0.45);
              font-weight: 400;
            }
          }
        }
      }
    }

    .routerCard {
      cursor: pointer;
      width: calc(900px / 8);
      display: inline-block;
      margin-bottom: 20px;
      // &:not(:nth-child(4n)) {
      //   margin-right: 30px;
      // }
      .el-card__body {
        background-color: none;
      }

      ::v-deep .el-card__body {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        img {
          width: 60px;
        }

        span {
          display: block;
          margin-top: 15px;
        }
      }
    }
  }

  footer {
    width: 100%;
    height: 128px;
    background: #323232;
    color: rgba(255, 255, 255, 0.65);

    .footer_container {
      width: 1600px;
      height: 100%;
      margin: 20px auto;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .footer_left {
        display: flex;

        .img_container {
          img {
            height: 60px;
          }
        }

        .company_info_container {
          font-family: MicrosoftYaHeiUI;
          font-size: 14px;
          color: rgba(255, 255, 255, 0.65);
          font-weight: 400;
          padding: 10px 0 0 20px;

          .police {
            display: flex;
            margin-top: 5px;

            p {
              line-height: 20px;
              margin-left: 5px;
            }
          }
        }
      }

      .footer_right {
        font-family: MicrosoftYaHeiUI;
        font-size: 14px;
        color: rgba(255, 255, 255, 0.65);
        line-height: 22px;
        font-weight: 400;
      }
    }
  }
}

.title_class {
  font-size: 15px;
  color: rgba(0, 0, 0, 0.85);
  font-weight: 700;
}

.mt_20 {
  margin-top: 10px;
}

.content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;

  span {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 15px;
  }

  ::v-deep .el-button {
    width: 60%;
  }
}

.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

> .el-card__header {
  padding: 15px 15px 10px;
}
</style>
