<template>
  <div class="dashboard-container">
    <div class="dashboard-editor-container">
      <div class="dashboard-editor-container__top">
        <el-card class="box-card">
          <div slot="header" class="box-card__header">
            <span>一卡通用户</span>
          </div>
          <div class="box-card__body">
            <div class="user">
              <div class="value">{{ cardUser.userPicture }}<span class="unit">人</span></div>
              <div class="label">人脸识别用户</div>
            </div>
            <div class="user">
              <div class="value">{{ cardUser.userCard }}<span class="unit">人</span></div>
              <div class="label">园区卡用户</div>
            </div>
            <div class="user">
              <div class="value">{{ cardUser.userCardLs }}<span class="unit">人</span></div>
              <div class="label">临时卡用户</div>
            </div>
          </div>
        </el-card>
        <el-card class="box-card">
          <div slot="header" class="box-card__header">
            <span>本月新增</span>
          </div>
          <div class="box-card__body">
            <div class="company">
              <div class="value">{{ monthAdd.getDept }}<span class="unit">个</span></div>
              <div class="label">企业数量</div>
            </div>
            <div class="person">
              <div class="value">{{ monthAdd.addUser }}<span class="unit">人</span></div>
              <div class="label">用户数量</div>
            </div>
          </div>
        </el-card>
        <el-card class="box-card">
          <div slot="header" class="box-card__header">
            <span>入驻企业({{ companyList.length }})</span>
          </div>
          <div class="box-card__body">
            <div class="company-names">
              <template v-for="(item, index) in companyList">
                <div
                  :key="index"
                  class="company-name"
                >
                  <span class="shenglue">{{ item.name }}</span>
                  <span class="shenglue">总人数：{{ item.subPersonCount }}</span>
                  <span class="shenglue">一月内新增：{{ item.subMonthPersonCount }}</span>
                </div>
              </template>
            </div>
          </div>
        </el-card>
      </div>
      <div class="dashboard-editor-container__middle">
        <el-card class="box-card">
          <div slot="header" class="box-card__header">
            <span>今日消费情况</span>
          </div>
          <div class="box-card__body">
            <div class="total">
              <div class="person-total">
                <span class="label">总计人数</span>
                <span class="value">{{ expense.totalPerson }}</span>
              </div>
              <div class="money-total">
                <span class="label">总计金额</span>
                <span class="value">{{ expense.totalMoney }}</span>
              </div>
            </div>
            <div class="chart">
              <PieChart :data="expense.leftData" />
            </div>
            <div class="chart">
              <PieChart :data="expense.rightData" />
            </div>
          </div>
        </el-card>
      </div>
      <div class="dashboard-editor-container__bottom">
        <el-card class="box-card">
          <div slot="header" class="box-card__header">
            <span>一卡通使用情况</span>
          </div>
          <div class="box-card__body">
            <div class="traffic-total">
              <span class="label">通行总数</span>
              <span class="value">{{ cardUse.trafficTotal }}</span>
            </div>
            <div class="chart">
              <PieChart :data="cardUse.leftData" />
            </div>
            <div class="chart">
              <PieChart :data="cardUse.rightData" />
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import api from '@/api/home'
import PieChart from '@/components/MyChart/PieChart'

export default {
  name: 'Dashboard',
  components: {
    PieChart
  },
  data() {
    return {
      // 一卡通用户
      cardUser: {
        userCard: null,
        userCardLs: null,
        userPicture: null
      },
      // 本月新增
      monthAdd: {
        addUser: null,
        getDept: null
      },
      // 入驻企业
      companyList: [],
      // 今日消费情况
      expense: {
        // 总计人数
        totalPerson: null,
        // 总计金额
        totalMoney: null,
        // 左边图表数据
        leftData: [],
        // 右边图表数据
        rightData: []
      },
      // 一卡通使用情况
      cardUse: {
        // 通行总数
        trafficTotal: null,
        leftData: [],
        rightData: []
      }
    }
  },
  created() {
    // 获取一卡通用户
    this.getUser()
    // 获取本月新增
    this.getMonthAdd()
    // 入驻企业
    this.getCompany()
    // 今日消费情况
    this.getExpense()
    // 一卡通使用情况
    this.getCardUse()
  },
  methods: {
    // 获取一卡通用户
    getUser() {
      api.homePageYktUser().then(res => {
        this.cardUser = res
      })
    },
    // 获取本月新增
    getMonthAdd() {
      api.homePageYueAdd().then(res => {
        this.monthAdd = res
      })
    },
    // 入驻企业
    getCompany() {
      api.getDept({
        pid: null
      }).then(res => {
        this.companyList = res.content
      })
    },
    // 今日消费情况
    getExpense() {
      api.homePageYktExpense().then(res => {
        this.expense.totalPerson = res.getSumExpense
        this.expense.totalMoney = res.getSumAmOut == null ? 0 : res.getSumAmOut
        this.expense.leftData = [{
          value: res.getContentCt,
          name: '餐厅',
          itemStyle: {
            color: '#82f3e2'
          }
        }, {
          value: res.getContentQt,
          name: '其他',
          itemStyle: {
            color: '#f66c7c'
          }
        }]
        this.expense.rightData = [{
          value: res.getPatternRl,
          name: '人脸识别',
          itemStyle: {
            color: '#7ac5f9'
          }
        }, {
          value: res.getPatternCt,
          name: '园区卡',
          itemStyle: {
            color: '#f9874e'
          }
        }, {
          value: res.getPatternQt,
          name: '其他',
          itemStyle: {
            color: '#f4d564'
          }
        }]
      })
    },
    // 一卡通使用情况
    getCardUse() {
      api.homePageYkt().then(res => {
        this.cardUse.trafficTotal = res.getCountAccess
        this.cardUse.leftData = [{
          value: res.getAccessGo,
          name: '入园',
          itemStyle: {
            color: '#82f3e2'
          }
        }, {
          value: res.getAccessOut,
          name: '出园',
          itemStyle: {
            color: '#f66c7c'
          }
        }]
        this.cardUse.rightData = [{
          value: res.getAccessRl,
          name: '人脸识别',
          itemStyle: {
            color: '#7ac5f9'
          }
        }, {
          value: res.getAccessCt,
          name: '园区卡',
          itemStyle: {
            color: '#f9874e'
          }
        }, {
          value: res.getAccessQt,
          name: '其他',
          itemStyle: {
            color: '#f4d564'
          }
        }]
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .dashboard-editor-container {
    padding: 32px;
    background-color: rgb(240, 242, 245);
    position: relative;

    ::v-deep .el-card {
      .el-card__header {
        padding: 10px;
      }
      .el-card__body {
        padding: 10px 20px;
      }
    }

    .box-card__header {
      span {
        color: rgb(84,120,207);
        font-size: 14px;
        font-weight: 600;
      }
    }

    .dashboard-editor-container__top {
      width: 100%;
      // height: 200px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;

      .box-card {
        &:nth-child(1) {
          width: calc(37.5% - 15px);
          height: 100%;
        }
        &:nth-child(2) {
          width: calc(25% - 10px);
          height: 100%;
        }
        &:nth-child(3) {
          width: calc(37.5% - 15px);
          height: 100%;
          .box-card__body {
            padding: 0;
          }
        }

        .box-card__body {
          padding: 10px 0px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 100px;
          .user {
            width: calc(33.3333% - 10px);
            height: 100%;
            border-radius: 5px;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            align-items: center;
            .value {
              font-size: 20px;
              font-weight: 600;
              .unit {
                font-size: 14px;
                font-weight: normal;
                color: #000;
                margin-left: 3px;
              }
            }
            .label {
              font-size: 14px;
            }

            &:nth-child(1) {
              background-color: rgb(214,225,255);
              .value {
                color: rgb(99,132,213);
              }
            }
            &:nth-child(2) {
              background-color: rgb(255,208,206);
              .value {
                color: rgb(246,87,75);
              }
            }
            &:nth-child(3) {
              background-color: rgb(204,255,246);
              .value {
                color: rgb(31,180,153);
              }
            }
          }
          .company,.person {
            width: calc(50% - 8px);
            height: 100%;
            border-radius: 5px;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            align-items: center;
            .value {
                font-size: 20px;
                font-weight: 600;
                .unit {
                  font-size: 14px;
                  font-weight: normal;
                  color: #000;
                  margin-left: 3px;
                }
              }
              .label {
                font-size: 14px;
              }

            &:nth-child(1) {
              background-color: rgb(255,234,205);
              .value {
                color: rgb(208,153,77);
              }
            }
            &:nth-child(2) {
              background-color: rgb(220,213,255);
              .value {
                color: rgb(124,108,231);
              }
            }
          }
          .company-names {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            overflow-y: auto;
            .company-name {
              width: 100%;
              // height: 40px;
              font-size: 12px;
              text-align: left;
              // line-height: 40px;
              padding: 5px 10px;
              background-color: rgb(245,248,255);
              display: inline-flex;
              justify-content: space-between;
              // overflow-y: auto;
              .shenglue{
                flex: 1;
                overflow:hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                -o-text-overflow:ellipsis;
              }
              .shenglue:nth-child(2){
                text-align: center;
              }
              .shenglue:nth-child(3){
                text-align: center;
              }
              &:not(:last-child) {
                margin-bottom: 5px;
              }
            }
          }
        }
      }
    }

    .dashboard-editor-container__middle {
      margin-bottom: 20px;
      .box-card__body {
        padding: 10px 0px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 200px;
        .total {
          width: calc(25% - 10px);
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: center;
          .person-total, .money-total {
            width: 100%;
            height: calc(50% - 8px);
            background-image: url(../assets/images/home/person-total.png);
            background-size: 100% 100%;
            padding-left: 15px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            .label {
              font-size: 12px;
              margin-bottom: 3px;
            }
            .value {
              font-size: 24px;
              font-weight: 600;
              color: rgb(254,93,19);
            }
          }
          .money-total {
            background-image: url(../assets/images/home/money-total.png);
            background-size: 100% 100%;
            .value {
              color: #22a1ff;
            }
          }
        }
        .chart {
          width: calc(35% - 15px);
          height: 100%;
          // border: 1px solid #000;
        }
      }
    }
    .dashboard-editor-container__bottom {
      margin-bottom: 20px;
      .box-card__body {
        padding: 10px 0px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 200px;

        .traffic-total {
          width: calc(25% - 10px);
          height: 90%;
          background-image: url(../assets/images/home/traffic-total.png);
          background-size: 100% 100%;
          padding: 20px 0 0 20px;
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          align-items: flex-start;
          .label {
            font-size: 12px;
            margin-bottom: 3px;
          }
          .value {
            font-size: 24px;
            font-weight: 600;
            color: #ffc700;
          }
        }
        .chart {
          width: calc(35% - 15px);
          height: 100%;
          // border: 1px solid #000;
        }
      }
    }
  }

  @media (max-width:1024px) {
    .chart-wrapper {
      padding: 8px;
    }
  }
</style>
