<template>
  <div class="dashboard-wrap">
    <section class="dashboard-head">
      <div class="hello">
        <h2>{{ welcome }}，{{ name }}</h2>
        <span class="subtitle">
          欢迎使用{{ pageTitle }}
        </span>
      </div>
      <div class="weather">
        <div style="margin-bottom: 5px">
          {{ week }}
          &emsp;{{ weatherInfo.city }}
          &emsp;{{ weatherInfo.weather }}
          {{ weatherInfo.temperature }}℃
        </div>
        <div>{{ nowTime }}</div>
      </div>
    </section>
    <section class="dashboard-content">
      <div class="charts">
        <div class="realtime dashboard-panel">
          <div class="panel-title">
            销售数据概况
          </div>
          <div class="panel-content realtime-wrap">
            <div
              class="realtime-block"
              :class="{'active-block': activeBlock === 1}"
              @click="activeBlock = 1">
              <div class="label">
                实收金额
              </div>
              <div>
                <span class="count">
                  {{ realtimeData.actualPrice }}
                </span>
                元
              </div>
            </div>
            <div
              class="realtime-block"
              :class="{'active-block': activeBlock === 2}"
              @click="activeBlock = 2">
              <div class="label">
                售票量
              </div>
              <div>
                <span class="count">
                  {{ realtimeData.saleNum }}
                </span>
                张
              </div>
            </div>
            <div
              class="realtime-block"
              :class="{'active-block': activeBlock === 3}"
              @click="activeBlock = 3">
              <div class="label">
                退票量
              </div>
              <div>
                <span class="count">
                  {{ realtimeData.cancelNum }}
                </span>
                张
              </div>
            </div>
            <div
              class="realtime-block"
              :class="{'active-block': activeBlock === 4}"
              @click="activeBlock = 4">
              <div class="label">
                退票率
              </div>
              <div>
                <span class="count">
                  {{ realtimeData.cancel_percent }}
                </span>
                %
              </div>
            </div>
          </div>
        </div>
        <div class="history dashboard-panel">
          <div class="panel-title">
            最近30天销售走势图
          </div>
          <div class="panel-content">
            <div class="legend">
              <div class="legend-item">
                售票金额
              </div>
              <div class="legend-item">
                售票张数
              </div>
              <div class="legend-item">
                退票张数
              </div>
            </div>
            <div class="history-chart">
              <TrendLine />
            </div>
          </div>
        </div>
      </div>
      <div class="right-charts">
        <div class="dashboard-panel">
          <div class="panel-title">
            各渠道占比
          </div>
          <div class="panel-content">
            <ChannelBar />
          </div>
        </div>
        <div class="dashboard-panel">
          <div class="panel-title">
            各渠道销售额占比
          </div>
          <div class="panel-content">
            <ChannelPie />
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getWeather } from '@/api/weather'
import ChannelBar from './chart/ChannelBar'
import TrendLine from './chart/TrendLine'
import ChannelPie from './chart/ChannelPie'
import { getSales } from '@/api/dashboard'
import moment from 'moment'
moment.locale('zh-cn', {
  meridiem: function (hour, minute, isLowercase) {
    if (hour < 9) {
      return '早上'
    } else if (hour < 11 && minute < 30) {
      return '上午'
    } else if (hour < 13 && minute < 30) {
      return '中午'
    } else if (hour < 18) {
      return '下午'
    } else {
      return '晚上'
    }
  }
})
export default {
  name: 'Dashboard',
  components: {
    ChannelBar,
    TrendLine,
    ChannelPie
  },
  data () {
    return {
      nowTime: moment().format('YYYY-MM-DD  HH:mm:ss'),
      weatherInfo: {},
      welcome: '你好',
      week: '',
      weekDic: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
      realtimeData: {
        actualPrice: 0,
        saleNum: 0,
        cancelNum: 0,
        cancel_percent: 0
      },
      activeBlock: 1,
      timeInt: null
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  mounted () {
    getWeather().then(res => {
      console.log(res.data)
      this.weatherInfo = res.data
    })
    let dayOfWeek = moment().day()
    this.week = this.weekDic[dayOfWeek]
    // this.getRealtime()
    this.timeInt = setInterval(() => {
      let now = moment(new Date().getTime())
      this.nowTime = now.format('YYYY-MM-DD HH:mm:ss')
      this.welcome = now.format('A') + '好'
    }, 1000)
  },
  beforeDestroy () {
    clearInterval(this.timeInt)
  },
  methods: {
    getRealtime () {
      getSales({
        startDate: new Date(moment().format('YYYY-MM-DD 00:00:00')),
        endDate: new Date(moment().format('YYYY-MM-DD 23:59:59'))
      }).then((res) => {
        this.realtimeData = res.data
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-wrap {
  padding: 20px;
  .dashboard-head {
    display: flex;  height: 60px;  margin-bottom: 20px;  border-bottom: 1px solid #666;  justify-content: space-between;  align-items: center;
    .hello {
      display: flex;  align-items: center;
      h2 {
        margin-right: 20px;
      }
      .subtitle {
        color: #666;
      }
    }
    .weather {
      color: #666;  text-align: right;
    }
  }
  .dashboard-content {
    display: flex;
    .charts {
      width: 700px;  margin-right: 20px;
      .realtime {
        margin-bottom: 20px;
        .realtime-wrap {
          display: flex;  justify-content: space-between;
          .realtime-block {
            display: flex;  width: 120px;  height: 100px;  flex-direction: column;  border-radius: 5px;  flex-grow: 1;  justify-content: center;  align-items: center;

            .label {
              margin-bottom: 10px;  font-size: 12px;  color: #666;
            }
            .count {
              font-size: 20px;
            }
          }
          .active-block {
            color: #fff;  background-color: #fe635f;
            .label {
              color: #fff;
            }
          }
          .realtime-block:not(:last-child) {
            margin-right: 10px;
          }
        }
      }
      .history {
        .legend {
          display: flex;  height: 20px;  justify-content: flex-end;
          .legend-item {
            margin-left: 20px;  font-size: 12px;  color: #666;
          }
          .legend-item::before {
            display: inline-block;  width: 8px;  height: 8px;  content: '';  background-color: #4e84fd;  border-radius: 2px;
          }
          .legend-item:nth-child(2)::before {
            background-color: #a359fd;
          }
          .legend-item:nth-child(3)::before {
            background-color: #fe635f;
          }
        }
        .history-chart {
          height: 240px;
        }
      }
    }
    .right-charts {
      width: calc(100% - 720px);
      .dashboard-panel {
        margin-bottom: 20px;
        height: 241px;
        .panel-content {
          height: calc(100% - 61px);
        }
      }
    }
  }
  .dashboard-panel {
    border: 1px solid #e2e2e2;  border-radius: 3px; color: $blue;
    .panel-title {
      height: 40px;  padding-left: 20px;  line-height: 40px;  background-color: #f4f4f4;  border-bottom: 1px solid #e2e2e2;
    }
    .panel-content {
      padding: 10px;
    }
  }
}

</style>
