<template>
  <div class="dashboard-wrap">
    <section class="dashboard-head">
      <div class="hello">
        <h2>{{ welcome }}，{{ name }}</h2>
        <span class="subtitle">
          欢迎使用{{ appName ||'票务系统' }}
        </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">
        <el-alert
          style="margin-bottom:10px"
          v-if="showHandoverMessage"
          type="warning"
          :closable="false">
          您有未交班数据，如需交班请
          <router-link to="/handOverReport">
            【点击进入】
          </router-link>
          交班页面
        </el-alert>
        <div class="opt-area">
          <el-radio-group
            v-model="dataDate"
            size="small"
            @input="refreshData">
            <el-radio-button
              v-for="tm in dataTimes"
              :label="tm.key"
              :key="tm.key">
              {{ tm.name }}
            </el-radio-button>
          </el-radio-group>
          <div class="refresh-time">
            更新时间：{{ refreshTime }}
          </div>
          <el-button
            type="text"
            icon="el-icon-refresh"
            title="刷新数据"
            @click="refreshData"></el-button>
        </div>
        <OrderStatistics
          v-if="checkPermission('home_page:query') && checkPermission('querystats:sale_stats')"
          ref="orderStat"
          :data-date="dataDate"
        ></OrderStatistics>

        <CheckStatistics
          v-if="checkPermission('home_page:query') && checkPermission('querystats:check_stats')"
          ref="checkStat"
          :data-date="dataDate"
        ></CheckStatistics>
        <div class="split-line"></div>
        <!-- <FreeCheckCount
          v-if="checkPermission('home_page:query') && checkPermission('querystats:check_stats') && checkPermission('member:member_check_statistics')">
        </FreeCheckCount>

        <MemberCheckStatistics v-if="checkPermission('home_page:query') && checkPermission('member:member_check_statistics')"></MemberCheckStatistics> -->

        <!-- <div
          class="realtime dashboard-panel"
          v-if="hasDataPermission">
          <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.price }}
                </span>
                元
              </div>
            </div>
            <div
              class="realtime-block"
              :class="{'active-block': activeBlock === 2}"
              @click="activeBlock = 2">
              <div class="label">
                实售张数
              </div>
              <div>
                <span class="count">
                  {{ realtimeData.count }}
                </span>
                张
              </div>
            </div>
            <div
              class="realtime-block"
              :class="{'active-block': activeBlock === 3}"
              @click="activeBlock = 3">
              <div class="label">
                实售人数
              </div>
              <div>
                <span class="count">
                  {{ realtimeData.checkNum }}
                </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 }}
                </span>
                张
              </div>
            </div>
            <div
              class="realtime-block"
              :class="{'active-block': activeBlock === 5}"
              @click="activeBlock = 5">
              <div class="label">
                退票率
              </div>
              <div>
                <span class="count">
                  {{ realtimeData.cancelRate }}
                </span>
                %
              </div>
            </div>
          </div>
        </div> -->
        <div
          class="history dashboard-panel table-box"
          v-if="hasDataPermission">
          <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">
              <HistoryChart />
            </div>
          </div>
        </div>
        <div
          class="notification dashboard-panel"
          v-if="showNotice">
          <div class="panel-title">
            通知中心
          </div>
          <div class="panel-content"></div>
        </div>
      </div>
    </section>
    <el-dialog
      title="登出警告"
      :visible.sync="dengbaoOpWarnDlgvisible"
      width="500px"
      @close="dengbaoOpWarnDlgvisible=false">
      <div style="text-align: center; padding: 30px;">
        <i
          class="el-icon-info"
        ></i>
        您已十分钟未操作，即将自动退出登录
      </div>

      <span slot="footer">
        <el-button>取消</el-button>
        <el-button
          type="primary"
        >确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import HistoryChart from './chart/history'
import moment from 'moment'
import { mapGetters } from 'vuex'
import { getRealtime } from '@/api/mainpage'
import { getWeather } from '@/api/weather'
import { getHandOverStatistics } from '@/api/systemSetting/manager.js'
import { totalRowClassName } from '@/utils'
import checkPermission from '@/utils/checkPermission'
import OrderStatistics from './dataTables/OrderStatistics'
import CheckStatistics from './dataTables/CheckStatistics'
// import FreeCheckCount from './dataTables/FreeCheckCount'
// import MemberCheckStatistics from './dataTables/MemberCheckStatistics'

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: {
    HistoryChart,
    OrderStatistics,
    CheckStatistics
    // FreeCheckCount,
    // MemberCheckStatistics
  },
  data () {
    return {
      hasDataPermission: false,
      showHandoverMessage: false,
      appName: this.$localStore.get('appName') || process.env.VUE_APP_PROJECT_NAME,
      nowTime: moment().format('YYYY-MM-DD  HH:mm:ss'),
      welcome: '你好',
      timeInt: null,
      week: '',
      weatherInfo: {},
      startDate: moment().startOf('day').format('YYYY-MM-DD HH:mm:ss'),
      endDate: moment().endOf('day').format('YYYY-MM-DD HH:mm:ss'),
      activeBlock: 1,
      showNotice: false,
      OrderStatistics: [], // 按售票渠道今日门票销售数据
      CheckStatistics: [], // 按售票渠道今日门票检票数据
      freeTicketCount: [], // 免费票通行人数
      freeMemberCount: [], // 免费卡通行人数
      memberCount: [], // 卡通行人数
      realtimeData: {
        price: 0,
        count: 0,
        cancel: 0,
        cancelRate: 0
      },
      dengbaoOpWarnDlgvisible: false, // 城展馆等保检查弹窗 (应付临时检查用)
      weekDic: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
      dataDate: 'today',
      refreshTime: '',
      dataTimes: [
        {
          name: '今天',
          key: 'today'
        },
        {
          name: '昨天',
          key: 'yesterday'
        },
        {
          name: '最近7天',
          key: 'week'
        },
        {
          name: '最近30天',
          key: 'month'
        }
      ]
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ]),
    freeCount () {
      let sum = (this.freeTicketCount[this.freeTicketCount.length - 1] ? this.freeTicketCount[this.freeTicketCount.length - 1].count : 0) + (this.freeMemberCount[this.freeMemberCount.length - 1] ? this.freeMemberCount[this.freeMemberCount.length - 1].count : 0)
      let obj = {
        type: '总计',
        ticketTypeName: '',
        count: sum
      }
      let freeCount = this.freeTicketCount.length ? this.freeTicketCount.concat(this.freeMemberCount) : this.freeMemberCount
      freeCount.push(obj)
      return freeCount
    }
  },
  mounted () {
    this.init()
    this.refreshTime = moment().format('YYYY-MM-DD HH:mm:ss')
  },
  beforeDestroy () {
    clearInterval(this.timeInt)
  },
  methods: {
    checkPermission,
    totalRowClassName,
    refreshData () {
      this.refreshTime = moment().format('YYYY-MM-DD HH:mm:ss')
      this.$nextTick(() => {
        this.$refs.orderStat && this.$refs.orderStat.getData()
        this.$refs.checkStat && this.$refs.checkStat.getData()
      })
    },
    init () {
      // this.setWeather()
      checkPermission('querystats:sale_stats')
      this.setWelcome()
      // this.getHandOverData()
      this.getDataPermission()
    },
    getDataPermission () {
      this.hasDataPermission = checkPermission('home_page:query') && checkPermission('querystats:sale_stats')
    },
    setWeather () {
      getWeather().then(res => {
        console.log(res.data)
        this.weatherInfo = res.data
      })
    },
    setWelcome () {
      let dayOfWeek = moment().day()
      this.week = this.weekDic[dayOfWeek]
      this.timeInt = setInterval(() => {
        let now = moment()
        this.nowTime = now.format('YYYY-MM-DD HH:mm:ss')
        this.welcome = now.format('A') + '好'
      }, 1000)
    },
    getRealtime () {
      getRealtime().then(res => {
        this.realtimeData = res
      })
    },
    getHandOverData () {
      getHandOverStatistics().then(res => {
        let totalData = res.data.pop()
        if (totalData.actual_count > 0) {
          this.showHandoverMessage = true
        }
      })
    }
  }
}
</script>
<style lang="scss" >
.dashboard-wrap {
  padding: 10px 20px 20px;

  .el-table--small td,
  .el-table--small th {
    padding: 0;
  }

  .table-title {
    background: #f4f4f4;
    color: #0075ff;
    font-size: 14px;
    padding: 10px;
    font-weight: normal;
    border-radius: 3px;
  }

  .el-alert {
    .el-alert__description {
      font-size: 14px;
    }

    a {
      color: #0075ff;
    }
  }

  .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: flex-end;

      h2 {
        margin-right: 20px;
      }

      .subtitle {
        color: #666;
      }
    }

    .weather {
      color: #666;
      text-align: right;
      font-size: 1.2em;
    }
  }

  .dashboard-content {
    display: flex;

    .opt-area {
      display: flex;
      margin: 10px 0;
      align-items: center;

      .refresh-time {
        margin: 0 10px;
      }
    }

    .charts {
      width: 100%;
      min-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;
        }
      }
    }

    .split-line {
      width: 100%;
      margin: 20px 0;
      border-bottom: 2px solid #666;
    }

    .notification {
      width: calc(100% - 720px);
    }
  }

  .dashboard-panel {
    color: $blue;

    .panel-title {
      height: 40px;
      line-height: 40px;
      border-bottom: 1px solid #eee;
    }

    .panel-content {
      padding: 10px;
    }
  }
}

</style>
