<template>
  <div class="page-header-index-wide">
    <a-row :gutter="24">
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="资金池总额" status="success" total="￥126,560万">
          <div>
            <trend flag="up">
              <span slot="term">同日增长</span>
              11%
            </trend>
          </div>

        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="工行总额（七日变化）" status="error" :total="8846 | NumberFormat">
          <div>
            <mini-area />
          </div>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="交行总额（七日变化）" status="processing" :total="6560 | NumberFormat">

          <div>
            <mini-bar />
          </div>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="昨日收支差额" status="warning" total="+100万">

          <trend flag="up" style="margin-right: 16px;">
            <span slot="term"><badge text="收" status="error"/></span>
            1200万
          </trend>
          <trend flag="down">
            <span slot="term"><badge text="支" status="success"/></span>
            1100万
          </trend>

        </chart-card>
      </a-col>
    </a-row>
    <a-card :loading="loading" :bordered="false" :body-style="{padding: '0px',marginBottom:'24px'}">
      <div class="salesCard">
        <a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
          <div class="extra-wrapper" slot="tabBarExtraContent">
            <div class="extra-item">
              <a>今日</a>
              <a>本周</a>
              <a>本月</a>

            </div>
            <a-range-picker :style="{width: '256px'}" />
          </div>
          <a-tab-pane loading="true" tab="工行" key="1">
            <a-row>
              <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
                <bar :data="barData" title="账户余额变化曲线" />
              </a-col>
            </a-row>
          </a-tab-pane>
          <a-tab-pane tab="交行" key="2">
            <a-row>
              <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
                <bar :data="barData2" title="账户余额变化曲线" />
              </a-col>

            </a-row>
          </a-tab-pane>
        </a-tabs>
      </div>
    </a-card>
    <div class="antd-pro-pages-dashboard-analysis-twoColLayout">
      <a-row :gutter="24" type="flex">
        <a-col :xl="6" :lg="24" :md="24" :sm="24" :xs="24">
          <a-card :loading="loading" :bordered="false" :body-style="{padding: '0px'}">
            <div class="salesCard">
              <a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '12px'}">
                <a-tab-pane loading="true" tab="借款" key="1">
                  <a-row>
                    <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
                      <rank-list title="排行榜(TOP7)" :list="rankList"/>
                    </a-col>
                  </a-row>
                </a-tab-pane>
                <a-tab-pane loading="true" tab="展期" key="2">
                  <a-row>
                    <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
                      <rank-list title="排行榜" :list="rankList"/>
                    </a-col>
                  </a-row>
                </a-tab-pane>
                <a-tab-pane loading="true" tab="逾期" key="3">
                  <a-row>
                    <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
                      <rank-list title="排行榜" :list="rankList"/>
                    </a-col>

                  </a-row>
                </a-tab-pane>
              </a-tabs>
            </div>
          </a-card>
        </a-col>
        <a-col :xl="18" :lg="24" :md="24" :sm="24" :xs="24">
          <a-card :loading="loading" :bordered="false" :body-style="{padding: '0px',marginBottom:'24px'}">
            <div class="salesCard">
              <a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">

                <a-tab-pane loading="true" tab="二级公司借款月度汇总（金额、逾期次数、展期次数）" key="1">
                  <a-row>
                    <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
                      <bar :data="barData" />
                    </a-col>

                  </a-row>
                </a-tab-pane>

              </a-tabs>
            </div>
          </a-card>
        </a-col>

      </a-row>
    </div>
    <div class="antd-pro-pages-dashboard-analysis-twoColLayout">
      <a-row :gutter="24" type="flex">
        <a-col :xl="6" :lg="24" :md="24" :sm="24" :xs="24">
          <a-card class="antd-pro-pages-dashboard-analysis-salesCard" :loading="loading" :bordered="false" title="融资类别占比" >

            <h4>融资类别</h4>
            <div>

              <div>
                <v-chart :force-fit="true" :height="300" :data="pieData" :scale="pieScale">
                  <v-tooltip :showTitle="false" dataKey="item*percent" />
                  <v-axis />
                  <!-- position="right" :offsetX="140" -->
                  <v-legend dataKey="item"/>
                  <v-pie position="percent" color="item" :vStyle="pieStyle" />
                  <v-coord type="theta" :radius="0.75" :innerRadius="0.6" />
                </v-chart>
              </div>

            </div>
          </a-card>
        </a-col>
        <a-col :xl="18" :lg="24" :md="24" :sm="24" :xs="24">
          <a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">
            <div class="salesCard">
              <a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
                <div class="extra-wrapper" slot="tabBarExtraContent">
                  <div class="extra-item">
                    <a>今日</a>
                    <a>本周</a>
                    <a>本月</a>
                  </div>
                  <a-range-picker :style="{width: '256px'}" />
                </div>
                <a-tab-pane loading="true" tab="融资一部" key="1">
                  <a-row>
                    <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
                      <bar :data="barData" title="融资变化" />
                    </a-col>

                  </a-row>
                </a-tab-pane>
                <a-tab-pane tab="融资二部" key="2">
                  <a-row>
                    <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
                      <bar :data="barData2" title="融资变化" />
                    </a-col>

                  </a-row>
                </a-tab-pane>
              </a-tabs>
            </div>
          </a-card>
        </a-col>

      </a-row>
    </div>

    <div class="antd-pro-pages-dashboard-analysis-twoColLayout">
      <a-row :gutter="24" type="flex">
        <a-col :xl="6" :lg="24" :md="24" :sm="24" :xs="24">
          <a-card title="清收分析" :style="{padding: '0px',marginBottom:'24px'}">

            <a-card title="累计完成额（2000万）" :style="{ marginTop: '12px'}">
              <mini-progress color="rgb(19, 194, 194)" :target="100" :percentage="78" height="8px" />
            </a-card>
            <a-card title="本月完成额（200万）" :style="{ marginTop: '24px' }">

              <mini-progress color="rgb(24, 144, 255)" :target="100" :percentage="78" height="8px" />
            </a-card>
          </a-card>
        </a-col>
        <a-col :xl="18" :lg="24" :md="24" :sm="24" :xs="24">
          <a-card :loading="loading" :bordered="false" :body-style="{padding: '0px',marginBottom:'12px'}">
            <div class="salesCard">
              <a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
                <div class="extra-wrapper" slot="tabBarExtraContent">
                  <div class="extra-item">

                    <a>本周</a>
                    <a>本月</a>
                  </div>
                  <a-range-picker :style="{width: '256px'}" />
                </div>
                <a-tab-pane loading="true" tab="清收任务对比图" key="1">
                  <a-row>
                    <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
                      <bar :data="barData" />
                    </a-col>
                  </a-row>
                </a-tab-pane>

              </a-tabs>
            </div>
          </a-card>
        </a-col>

      </a-row>
    </div>

  </div>
</template>

<script>
import moment from 'moment'
import { ChartCard, MiniArea, MiniBar, MiniProgress, RankList, Bar, Trend, NumberInfo, MiniSmoothArea } from '@/components'
import { mixinDevice } from '@/utils/mixin'

const barData = []
const barData2 = []
const companyList = ['建总集团', '项目管理集团', '市政集团', '绿建西宜集团', '城建集团', '绿建集团', '五建公司', '营销公司']
for (let i = 0; i < 12; i += 1) {
  barData.push({
    x: `${i + 1}月`,
    y: Math.floor(Math.random() * 1000) + 200
  })
  barData2.push({
    x: `${i + 1}月`,
    y: Math.floor(Math.random() * 1000) + 200
  })
}

const rankList = []

for (let i = 0; i < 7; i++) {
  rankList.push({
    name: companyList[i],
    total: 1234.56 - i * 100
  })
}

const searchUserData = []
for (let i = 0; i < 7; i++) {
  searchUserData.push({
    x: moment().add(i, 'days').format('YYYY-MM-DD'),
    y: Math.ceil(Math.random() * 10)
  })
}
const searchUserScale = [
  {
    dataKey: 'x',
    alias: '时间'
  },
  {
    dataKey: 'y',
    alias: '用户数',
    min: 0,
    max: 10
  }]

const searchTableColumns = [
  {
    dataIndex: 'index',
    title: '排名',
    width: 90
  },
  {
    dataIndex: 'keyword',
    title: '搜索关键词'
  },
  {
    dataIndex: 'count',
    title: '用户数'
  },
  {
    dataIndex: 'range',
    title: '周涨幅',
    align: 'right',
    sorter: (a, b) => a.range - b.range,
    scopedSlots: { customRender: 'range' }
  }
]
const searchData = []
for (let i = 0; i < 50; i += 1) {
  searchData.push({
    index: i + 1,
    keyword: `搜索关键词-${i}`,
    count: Math.floor(Math.random() * 1000),
    range: Math.floor(Math.random() * 100),
    status: Math.floor((Math.random() * 10) % 2)
  })
}

const DataSet = require('@antv/data-set')

const sourceData = [
  { item: '流贷', count: 32.2 },
  { item: '融资租赁', count: 21 },
  { item: '保函', count: 17 },
  { item: '预保理', count: 13 },
  { item: '银行承兑', count: 9 },
  { item: '商票', count: 7.8 }
]

const pieScale = [{
  dataKey: 'percent',
  min: 0,
  formatter: '.0%'
}]

const dv = new DataSet.View().source(sourceData)
dv.transform({
  type: 'percent',
  field: 'count',
  dimension: 'item',
  as: 'percent'
})
const pieData = dv.rows

export default {
  name: 'Analysis',
  mixins: [mixinDevice],
  components: {
    ChartCard,
    MiniArea,
    MiniBar,
    MiniProgress,
    RankList,
    Bar,
    Trend,
    NumberInfo,
    MiniSmoothArea
  },
  data () {
    return {
      loading: true,
      rankList,

      // 搜索用户数
      searchUserData,
      searchUserScale,
      searchTableColumns,
      searchData,

      barData,
      barData2,

      //
      pieScale,
      pieData,
      sourceData,
      pieStyle: {
        stroke: '#fff',
        lineWidth: 1
      }
    }
  },
  created () {
    setTimeout(() => {
      this.loading = !this.loading
    }, 1000)
  }
}
</script>

<style lang="less" scoped>
  .extra-wrapper {
    line-height: 55px;
    padding-right: 24px;

    .extra-item {
      display: inline-block;
      margin-right: 24px;

      a {
        margin-left: 24px;
      }
    }
  }

  .antd-pro-pages-dashboard-analysis-twoColLayout {
    position: relative;
    display: flex;
    display: block;
    flex-flow: row wrap;
  }

  .antd-pro-pages-dashboard-analysis-salesCard {
    height: calc(100% - 24px);
    /deep/ .ant-card-head {
      position: relative;
    }
  }

  .dashboard-analysis-iconGroup {
    i {
      margin-left: 16px;
      color: rgba(0,0,0,.45);
      cursor: pointer;
      transition: color .32s;
      color: black;
    }
  }
  .analysis-salesTypeRadio {
    position: absolute;
    right: 54px;
    bottom: 12px;
  }
</style>
