<template>
  <div class="dashboard-editor-container">
    <!--    <github-corner class="github-corner" />-->

    <panel-group />

    <el-row
      v-loading="loading"
      class="bg"
    >
      <div style="float: right;">
        <el-checkbox
          v-model="loginStatParams.filterWorkDay"
          style="margin-right: 10px"
          @change="loadLoginStat"
        >
          {{ $t('ec.dashboard.filterWeekend')}}
        </el-checkbox>
        <ec-tenant
          v-model="loginStatParams.tenantId"
          style="margin-right: 10px"
        />
        <el-date-picker
          v-model="loginStatParams.searchDate"
          type="daterange"
          align="right"
          unlink-panels
          :range-separator="$t('ec.date.rangeSeparator')"
          :start-placeholder="$t('ec.date.startDate')"
          :end-placeholder="$t('ec.date.endDate')"
          :picker-options="pickerOptions"
          @change="loadLoginStat"
        />
        <el-button
          style="margin-left: 10px;"
          type="primary"
          @click="exportLoginData"
        >
          <i class="el-icon-download" />{{ $t('ec.excel.export') }}
        </el-button>
      </div>

      <div class="subTitle">
        {{ $t('ec.dashboard.activeUsers') }}
      </div>

      <aside style="margin-top: 30px">
        <div>
          <span>{{ yesterday }} （{{ weekday }}）</span>
          <span>{{ yesterdayCount }}</span> {{ $t('ec.dashboard.people') }}
        </div>
        <div>
          <span>{{ $t('ec.dashboard.total') }} {{ allCount }} {{ $t('ec.dashboard.people') }}, </span>
          <span>{{ $t('ec.dashboard.avg') }} {{ averageCount }} {{ $t('ec.dashboard.people') }}</span>
        </div>
      </aside>

      <login-line-chart ref="chart" />
    </el-row>

    <el-row style="margin:32px 0;">
      <el-col
        :span="12"
        style="padding-right: 16px;"
      >
        <div class="two-panel">
          <div
            class="subTitle"
            style="margin-bottom: 16px;"
          >
            {{ $t('ec.dashboard.popMonitor') }}
          </div>
          <el-form
            ref="hotDataParams"
            :model="hotDataParams"
            inline
            size="mini"
          >
            <el-form-item
              prop="tenantId"
              :label="$t('ec.dashboard.tenant')"
            >
              <ec-tenant v-model="hotDataParams.tenantId" />
            </el-form-item>
            <el-form-item
              prop="type"
              style="margin-left: 50px"
            >
              <el-radio-group v-model="hotDataParams.type">
                <el-radio label="pv">pv</el-radio>
                <el-radio label="uv">uv</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item
              prop="dateRange"
              :label="$t('ec.date.date')"
            >
              <el-date-picker
                v-model="hotDataParams.dateRange"
                type="daterange"
                unlink-panels
                :range-separator="$t('ec.date.rangeSeparator')"
                :start-placeholder="$t('ec.date.startDate')"
                :end-placeholder="$t('ec.date.endDate')"
                value-format="yyyy-MM-dd"
                :clearable="false"
                :picker-options="pickerOptions"
              />
            </el-form-item>
          </el-form>

          <hot-data-chart ref="hotDataChart" />

        </div>
      </el-col>

      <el-col
        :span="12"
        style="padding-left: 16px;"
      >
        <div class="two-panel">
          <div
            class="subTitle"
            style="margin-bottom: 16px;"
          >
            {{ $t('ec.dashboard.popTrend') }}
          </div>
          <el-form
            ref="hotDataParams"
            :model="hotDataTrendParams"
            inline
            size="mini"
          >
            <el-form-item
              prop="tenantId"
              :label="$t('ec.dashboard.tenant')"
            >
              <ec-tenant v-model="hotDataTrendParams.tenantId" />
            </el-form-item>
            <el-form-item
              prop="type"
              style="margin-left: 50px"
            >
              <el-radio-group v-model="hotDataTrendParams.type">
                <el-radio label="pv">pv</el-radio>
                <el-radio label="uv">uv</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item
              prop="dateRange"
              :label="$t('ec.date.date')"
            >
              <el-date-picker
                v-model="hotDataTrendParams.dateRange"
                type="daterange"
                unlink-panels
                :range-separator="$t('ec.date.rangeSeparator')"
                :start-placeholder="$t('ec.date.startDate')"
                :end-placeholder="$t('ec.date.endDate')"
                value-format="yyyy-MM-dd"
                :clearable="false"
                :picker-options="pickerOptions"
              />
            </el-form-item>
            <div style="float: right;margin-right: 30px">
              <el-button
                size="mini"
                type="primary"
                @click="exportHotDataTrend"
              ><i class="el-icon-download" />
                {{ $t('ec.excel.export') }}
              </el-button>
            </div>
          </el-form>

          <hot-data-trend ref="hotDataTrend" />

        </div>
      </el-col>
    </el-row>

    <el-row
      v-loading="areaLoading"
      class="bg"
      style="margin-bottom:0"
    >

      <el-date-picker
        v-model="areaSearchDate"
        type="daterange"
        align="right"
        style="float: right;margin-right: 30px"
        unlink-panels
        :range-separator="$t('ec.date.rangeSeparator')"
        :start-placeholder="$t('ec.date.startDate')"
        :end-placeholder="$t('ec.date.endDate')"
        :picker-options="pickerOptions"
        @change="areaDateChange"
      />

      <div class="subTitle">
        {{ $t('ec.dashboard.registerUsers') }}
      </div>
      <area-chart ref="areaChart" />
    </el-row>

    <!--<el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <raddar-chart />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <pie-chart />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <bar-chart />
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="8">
      <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 12}" :xl="{span: 12}" style="padding-right:8px;margin-bottom:30px;">
        <transaction-table />
      </el-col>
      <el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 6}" style="margin-bottom:30px;">
        <todo-list />
      </el-col>
      <el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 6}" style="margin-bottom:30px;">
        <box-card />
      </el-col>
    </el-row>-->
  </div>
</template>

<script>
// import GithubCorner from '@/components/GithubCorner'
import PanelGroup from './components/PanelGroup'
import LoginLineChart from './components/LoginLineChart'
import AreaChart from './components/AreaChart'
import HotDataChart from './components/HotDataChart'
import HotDataTrend from './components/HotDataTrend'
import { download } from 'ecip-web/utils'
// import RaddarChart from './components/RaddarChart'
// import PieChart from './components/PieChart'
// import BarChart from './components/BarChart'
// import TransactionTable from './components/TransactionTable'
// import TodoList from './components/TodoList'
// import BoxCard from './components/BoxCard'

import {
  loginStat,
  countRegisterUser,
  hotData,
  hotDataTrend
} from 'ecip-web/api/dashboard'

// const lineChartData = {
//   newVisitis: {
//     expectedData: [100, 120, 161, 134, 105, 160, 165],
//     actualData: [120, 82, 91, 154, 162, 140, 145]
//   },
//   messages: {
//     expectedData: [200, 192, 120, 144, 160, 130, 140],
//     actualData: [180, 160, 151, 106, 145, 150, 130]
//   },
//   purchases: {
//     expectedData: [80, 100, 121, 104, 105, 90, 100],
//     actualData: [120, 90, 100, 138, 142, 130, 130]
//   },
//   shoppings: {
//     expectedData: [130, 140, 141, 142, 145, 150, 160],
//     actualData: [120, 82, 91, 154, 162, 140, 130]
//   }
// }

export default {
  // name: 'DashboardAdmin',
  name: 'Dashboard',
  components: {
    // GithubCorner,
    PanelGroup,
    LoginLineChart,
    AreaChart,
    HotDataChart,
    HotDataTrend
    // RaddarChart,
    // PieChart,
    // BarChart,
    // TransactionTable,
    // TodoList,
    // BoxCard
  },
  data() {
    return {
      loading: false,
      exportLoginDataUrl: 'api/v1/stat/visit/ecipVisitStat/exportLoginData',
      exportHotDataTrendUrl:
        'api/v1/stat/visit/ecipVisitStat/exportHotDataTrend',
      areaLoading: false,
      weekday: '',
      yesterday: '',
      yesterdayCount: 0,
      allCount: 0,
      averageCount: 0,
      pickerOptions: {
        shortcuts: [
          {
            text: this.$t('ec.date.today'),
            onClick(picker) {
              const start = new Date(
                new Date(new Date().toLocaleDateString()).getTime()
              ) // 00:00:00
              const end = new Date(start.getTime() + 24 * 60 * 60 * 1000 - 1) // 23:59:59
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: this.$t('ec.date.yesterday'),
            onClick(picker) {
              const end = new Date(
                new Date(new Date().toLocaleDateString()).getTime() - 1
              )
              const start = new Date(end.getTime() + 1 - 24 * 60 * 60 * 1000)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: this.$t('ec.date.past7Days'),
            onClick(picker) {
              const end = new Date()
              const start = new Date(end.getTime() - 3600 * 1000 * 24 * 6)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: this.$t('ec.date.past14Days'),
            onClick(picker) {
              const end = new Date()
              const start = new Date(end.getTime() - 3600 * 1000 * 24 * 13)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: this.$t('ec.date.past30Days'),
            onClick(picker) {
              const end = new Date()
              const start = new Date(end.getTime() - 3600 * 1000 * 24 * 29)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: this.$t('ec.date.past90Days'),
            onClick(picker) {
              const end = new Date()
              const start = new Date(end.getTime() - 3600 * 1000 * 24 * 89)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: this.$t('ec.date.past180Days'),
            onClick(picker) {
              const end = new Date()
              const start = new Date(end.getTime() - 3600 * 1000 * 24 * 179)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      areaSearchDate: '',
      loginStatParams: {
        filterWorkDay: false,
        searchDate: '',
        tenantId: ''
      },
      hotDataParams: {
        tenantId: '',
        dateRange: [],
        type: 'pv'
      },
      hotDataTrendParams: {
        tenantId: '',
        dateRange: [],
        type: 'pv'
      }
    }
  },
  watch: {
    loginStatParams: {
      deep: true,
      handler(val) {
        this.loadLoginStat()
      }
    },
    hotDataParams: {
      deep: true,
      handler(val) {
        this.hotDataChange()
      }
    },
    hotDataTrendParams: {
      deep: true,
      handler(val) {
        this.hotDataTrendChange()
      }
    }
  },
  created() {
    this.initDate()
    this.initAreaDate()
    this.initHotDataDate()
    this.initHotDataDateTrend()
  },
  methods: {
    // handleSetLineChartData(type) {
    //   this.lineChartData = lineChartData[type]
    // },
    initDate() {
      const end = new Date()
      const start = this.$moment().subtract(30, 'days').toDate()
      this.loginStatParams.searchDate = [start, end]
      this.loadLoginStat()
    },
    initAreaDate() {
      const areaEnd = new Date()
      const areaStart = this.$moment().subtract(30, 'days').toDate()
      this.areaSearchDate = [areaStart, areaEnd]
      this.areaDateChange()
    },
    initHotDataDate() {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      this.hotDataParams.dateRange[0] = this.$moment(start).format('YYYY-MM-DD')
      this.hotDataParams.dateRange[1] = this.$moment(end).format('YYYY-MM-DD')
      this.hotDataChange()
    },
    initHotDataDateTrend() {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      this.hotDataTrendParams.dateRange[0] =
        this.$moment(start).format('YYYY-MM-DD')
      this.hotDataTrendParams.dateRange[1] =
        this.$moment(end).format('YYYY-MM-DD')
      this.hotDataTrendChange()
    },
    loadLoginStat() {
      const start = this.$moment(this.loginStatParams.searchDate[0]).format(
        'YYYY-MM-DD'
      )
      const end = this.$moment(this.loginStatParams.searchDate[1]).format(
        'YYYY-MM-DD'
      )
      const isoWeekday = this.$moment().subtract(1, 'days').isoWeekday()
      if (isoWeekday === 1) {
        this.weekday = this.$t('ec.date.monday')
      } else if (isoWeekday === 2) {
        this.weekday = this.$t('ec.date.tuesday')
      } else if (isoWeekday === 3) {
        this.weekday = this.$t('ec.date.wednesday')
      } else if (isoWeekday === 4) {
        this.weekday = this.$t('ec.date.thursday')
      } else if (isoWeekday === 5) {
        this.weekday = this.$t('ec.date.friday')
      } else if (isoWeekday === 6) {
        this.weekday = this.$t('ec.date.saturday')
      } else if (isoWeekday === 7) {
        this.weekday = this.$t('ec.date.sunday')
      }
      this.loading = true
      loginStat({
        start: start,
        end: end,
        filterWorkDay: this.loginStatParams.filterWorkDay,
        tenantId: this.loginStatParams.tenantId
      }).then((res) => {
        this.loading = false
        this.yesterday = res.data.yesterday || ''
        this.yesterdayCount = res.data.yesterdayCount || 0
        this.allCount = res.data.allCount || 0
        this.averageCount = res.data.averageCount || 0
        this.$refs.chart.setData(res.data)
        // this.chartData.date = data.date
        // this.chartData.pc = data.pc
        // this.chartData.app = data.app
        // this.chartData.total = data.total
      })
    },
    areaDateChange() {
      const start = this.$moment(this.areaSearchDate[0]).format('YYYY-MM-DD')
      const end = this.$moment(this.areaSearchDate[1]).format('YYYY-MM-DD')
      this.areaLoading = true
      countRegisterUser({ start: start, end: end }).then((res) => {
        this.areaLoading = false
        this.$refs.areaChart.setData(res.data)
      })
    },
    hotDataChange() {
      this.hotDataParams.start = this.hotDataParams.dateRange[0]
      this.hotDataParams.end = this.hotDataParams.dateRange[1]
      hotData(this.hotDataParams).then((res) => {
        this.$refs.hotDataChart.setData(res.data)
      })
    },
    hotDataTrendChange() {
      this.hotDataTrendParams.start = this.hotDataTrendParams.dateRange[0]
      this.hotDataTrendParams.end = this.hotDataTrendParams.dateRange[1]
      hotDataTrend(this.hotDataTrendParams).then((res) => {
        this.$refs.hotDataTrend.setData(res.data)
      })
    },
    async exportLoginData() {
      this.loading = true
      const start = this.$moment(this.loginStatParams.searchDate[0]).format(
        'YYYY-MM-DD'
      )
      const end = this.$moment(this.loginStatParams.searchDate[1]).format(
        'YYYY-MM-DD'
      )
      await download({
        url: this.exportLoginDataUrl,
        method: 'get',
        params: {
          start: start,
          end: end,
          filterWorkDay: this.loginStatParams.filterWorkDay,
          tenantId: this.loginStatParams.tenantId
        }
      })
      this.loading = false
    },
    async exportHotDataTrend() {
      this.loading = true
      await download({
        url: this.exportHotDataTrendUrl,
        method: 'post',
        data: this.hotDataTrendParams
      })
      this.loading = false
    }
  }
}
</script>

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

  position: relative;
  .bg {
    background-color: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
  .subTitle {
    color: #344b58;
    font-size: 20px;
  }

  .github-corner {
    position: absolute;
    top: 0px;
    border: 0;
    right: 0;
  }

  .chart-wrapper {
    background-color: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }

  .two-panel {
    background-color: #fff;
    padding: 16px 16px 0;
    position: relative;
    overflow: hidden;
  }
}
.theme-dark {
  .dashboard-editor-container {
    background-color: #103c5d;
    .chart-wrapper,
    .two-panel,
    .bg {
      background-color: #1a4a72;
    }
  }
  .subTitle {
    color: #fff;
  }
  aside {
    background: #103c5d;
    color: #fff;
  }
}

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