<template>
  <a-row>
    <a-row :gutter="24">
      <!-- 分公司库存 -->
      <a-col
        :sm="24"
        :md="12"
        :xl="12"
        :xxl="12"
        :style="{ marginBottom: '10px' }"
        v-if="info.total">
        <chart-card :loading="loading" :title="$t('分公司总库存')" :total="'￥'+info.total.total">
          <a-tooltip :title="$t('总分公司总库存')" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <template slot="footer">
            <!-- <span> {{ info.total.people }}瓶</span> -->
            <trend flag="up"> <span slot="term">{{ $t('线上库存') }}</span>321瓶</trend>
            <trend flag="down" style="margin-left: 20px;">
              <span slot="term">{{ $t('线下库存') }}</span>1234瓶
            </trend>
          </template>
        </chart-card>
      </a-col>
      <!-- 经销商总库存 -->
      <a-col
        :sm="24"
        :md="12"
        :xl="12"
        :xxl="12"
        :style="{ marginBottom: '10px' }"
        v-if="info.people"
      >
        <chart-card :loading="loading" :title="$t('经销商总库存')" :total="info.people.total | NumberFormat">
          <a-tooltip :title="$t('经销商总库存')" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <mini-area :data="info.people.charts" />
          </div>
          <template slot="footer">{{ $t('经销商总数') }}<span style="margin-right:20px;"> {{ info.people.count | NumberFormat }} 人</span></template>
        </chart-card>
      </a-col>
      <!-- 日成交额 -->
      <!-- <a-col
        :sm="24"
        :md="12"
        :xl="12"
        :xxl="6"
        :style="{ marginBottom: '24px' }"
        v-if="info.paid"
      >
        <chart-card :loading="loading" :title="$t('日成交统计')" :total="info.paid.today | NumberFormat">
          <a-tooltip :title="$t('每日交易数进行比对统计')" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <mini-bar :data="info.paid.charts"/>
          </div>
          <template slot="footer">
            <trend flag="up" style="margin-right: 16px;">
              <span slot="term">{{ $t('交易数') }}</span>
              20%
            </trend>
          </template>
        </chart-card>
      </a-col> -->
      <!-- 订单进行比例 -->
      <!-- <a-col :sm="24" :md="12" :xl="12" :xxl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" :title="$t('订单进度比例')" :total="info.process">
          <a-tooltip :title="$t('订单进度比例包含未完成已完成订单的比例')" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <mini-progress color="rgb(19, 194, 194)" :target="info.process" :percentage="info.process" height="8px" />
          </div>
          <template slot="footer">
            <trend flag="down" style="margin-right: 16px;">
              <span slot="term">{{ $t('订单未完成') }}</span>
              12%
            </trend>
            <trend flag="up">
              <span slot="term">{{ $t('订单已完成') }}</span>
              88%
            </trend>
          </template>
        </chart-card>
      </a-col> -->
    </a-row>

    <a-col :span="24">
      <a-card :bordered="false" title="用户数据">
        <template #extra>
          <a-dropdown v-model="visible">
            <a class="ant-dropdown-link" @click="e => e.preventDefault()">{{ searchs[typeIndex].title }} <a-icon type="down" /></a>
            <a-menu slot="overlay" @click="handleMenuClick">
              <a-menu-item
                v-for="item in searchs"
                :key="item.key">
                <a href="javascript:;">{{ item.title }}</a>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </template>
        <a-row>
          <a-col :sm="24" :md="12" :xl="8" :xxl="8" class="mt20">
            <info title="用户总数量(人)" :value="info.check.first+''" :bordered="true" />
          </a-col>
          <a-col :sm="24" :md="12" :xl="8" :xxl="8" class="mt20">
            <info title="新增代理数(人)" :value="info.check.recheck+''" :bordered="true" />
          </a-col>
          <a-col :sm="24" :md="12" :xl="8" :xxl="8" class="mt20">
            <info title="新增创客数(人)" :value="info.check.unsign+''" />
          </a-col>
          <a-col :sm="24" :md="12" :xl="8" :xxl="8" class="mt20">
            <info title="新增VIP数(人)" :value="info.check.unsign+''" :bordered="true"/>
          </a-col>
          <a-col :sm="24" :md="12" :xl="8" :xxl="8" class="mt20">
            <info title="新增游客数量(人)" :value="info.check.unsign+''"/>
          </a-col>
        </a-row>
      </a-card>
    </a-col>
    <a-col :span="24" v-if="info.init">
      <a-card :bordered="false" title="累计销售数量">
        <a-row>
          <a-col :sm="24" :md="12" :xl="8" :xxl="8" class="mt20">
            <info title="线上销售数量(瓶)" :value="info.init.apply+''" :bordered="true" />
          </a-col>
          <a-col :sm="24" :md="12" :xl="8" :xxl="8" class="mt20">
            <info title="线上零售数量(瓶)" :value="info.init.base+''" :bordered="true"/>
          </a-col>
          <a-col :sm="24" :md="12" :xl="8" :xxl="8" class="mt20">
            <info title="线上代理进货数量(瓶)" :value="info.init.base+''"/>
          </a-col>
          <a-col :sm="24" :md="12" :xl="8" :xxl="8" class="mt20">
            <info title="线上创客进货数量(瓶)" :value="info.init.base+''" :bordered="true"/>
          </a-col>
          <a-col :sm="24" :md="12" :xl="8" :xxl="8" class="mt20">
            <info title="线下出货数量(瓶)" :value="info.init.init+''" />
          </a-col>
        </a-row>
      </a-card>
    </a-col>
    <a-col :span="24" v-if="info.b_check">
      <a-card :bordered="false" title="售卖数据管理">
        <a-row>
          <a-col :sm="24" :md="12" :xl="6" :xxl="6" class="mt20">
            <info title="代理进货金额(元)" :value="info.b_check.process+''" :bordered="true"/>
          </a-col>
          <a-col :sm="24" :md="12" :xl="6" :xxl="6" class="mt20">
            <info title="创客进货金额(元)" :value="info.b_check.pass+''" :bordered="true"/>
          </a-col>
          <a-col :sm="24" :md="12" :xl="6" :xxl="6" class="mt20">
            <info title="线上销售金额(元)" :value="info.b_check.diff+''" :bordered="true"/>
          </a-col>
          <a-col :sm="24" :md="12" :xl="6" :xxl="6" class="mt20">
            <info title="线下销售金额(元)" :value="info.b_check.diff+''" />
          </a-col>
        </a-row>
      </a-card>
    </a-col>

    <!-- <a-col :span="24" v-if="info.b_recheck">
      <a-card :bordered="false" title="复审业务操作">
        <a-row>
          <a-col :sm="8" :xs="24">
            <info title="本周复审订单" :value="info.b_recheck.diff+''" :bordered="true" />
          </a-col>
          <a-col :sm="8" :xs="24">
            <info title="本周通过数" :value="info.b_recheck.diff+''" :bordered="true" />
          </a-col>
          <a-col :sm="8" :xs="24">
            <info title="本周补差价数" :value="info.b_recheck.diff+''" />
          </a-col>
        </a-row>
      </a-card>
    </a-col> -->

  </a-row>
</template>

<script>
  import Info from '@/views/home/components/Info'
  import {
  ChartCard,
  MiniArea,
  MiniBar,
  MiniProgress,
  RankList,
  Bar,
  Trend,
  NumberInfo,
  MiniSmoothArea
} from '@/components'

export default {
    components: {
    ChartCard,
    MiniArea,
    MiniBar,
    MiniProgress,
    RankList,
    Bar,
    Trend,
    NumberInfo,
    MiniSmoothArea,
    Info
  },
  props: {
    info: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  name: 'Count',
  data: () => ({
    visible: false,
    loading: false,
    type: 'today',
    typeIndex: 0,
    searchs: [
      { key: 'today', title: '本日' },
      { key: 'week', title: '本周' },
      { key: 'month', title: '本月' },
      { key: 'year', title: '本年' }
    ]
  }),
  beforeCreate () {
    console.log('beforeCreate.......')
  },
  methods: {
    handleMenuClick (e) {
      this.typeIndex = this.searchs.findIndex(item => item.key === e.key)
      console.log(e.key)
      this.visible = false
      this.type = e.key
    }
  }
}
</script>

<style lang='less' scoped>
@import '../Index.less';
.mt20{
  margin-top: 30px;
}
</style>
