<template>
 <page-header-wrapper>
  <div @click="Tablevisible=false">
    <div class="extra-wrapper">
      <a-row :gutter="24">
        <a-form layout="inline">
          <a-row :gutter="24">
            <a-col :span="7">
                <a-range-picker :style="{width: '256px'}" />
            </a-col>
            <a-col :span="6">
                <a-input placeholder="请选择客户" @click.stop="Tablevisible=true" />
            </a-col>
            <a-col :span="6">
                <a-input placeholder="产品序列号" />
            </a-col>
            <a-col :span="2">
              <a-button type="primary" class="f-r" @click="handleSubmit">查询 </a-button>
            </a-col>
          </a-row>
        </a-form>
        <create-table ref="createTable" v-show="Tablevisible" @ok="handleTableOk" />
      </a-row>
    </div>
    <!--  -->
    <a-card :bordered="false" :body-style="{padding: '0'}">
      <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">
            <v-chart :force-fit="true" :height="405" :data="pieData" :scale="pieScale">
              <v-tooltip :showTitle="false" dataKey="item*percent" />
              <v-axis />
              <v-legend dataKey="item" />
              <v-pie position="percent" color="item" :vStyle="pieStyle" :label="labelConfig" />
              <v-coord type="theta" :radius="0.75" :innerRadius="0.6" />
            </v-chart>
          </a-tab-pane>
          <a-tab-pane tab="年龄" key="2">
            <a-row>
              <a-col :xl="24" :lg="12" :md="12" :sm="24" :xs="24">
                <bar :data="barData0" title="年龄分布柱状图" />
              </a-col>
            </a-row>
          </a-tab-pane>
          <a-tab-pane tab="体重" key="3">
            <a-row>
              <a-col :xl="24" :lg="12" :md="12" :sm="24" :xs="24">
                <bar :data="barData1" title="体重分布柱状图" />
              </a-col>
            </a-row>
          </a-tab-pane>
          <a-tab-pane tab="脂肪率" key="4">
            <a-row>
              <a-col :xl="24" :lg="12" :md="12" :sm="24" :xs="24">
                <bar :data="barData2" title="脂肪率分布柱状图" />
              </a-col>
            </a-row>
          </a-tab-pane>
          <a-tab-pane tab="身高" key="5">
            <a-row>
              <a-col :xl="24" :lg="12" :md="12" :sm="24" :xs="24">
                <bar :data="barData3" title="身高分布柱状图" />
              </a-col>
            </a-row>
          </a-tab-pane>
          <a-tab-pane loading="true" tab="终端机型" key="6">
            <v-chart :forceFit="true" :height="405" :data="data" :scale="pieScale">
              <v-tooltip :showTitle="false" dataKey="item*percent" />
              <v-axis />
              <v-legend dataKey="item" position="right" :offsetX="-140" />
              <v-pie position="percent" color="item" :vStyle="pieStyle" :label="labelConfig" />
              <v-coord type="theta" :radius="0.75" :innerRadius="0.6" />
            </v-chart>
          </a-tab-pane>
        </a-tabs>
      </div>
    </a-card>
  </div>
 </page-header-wrapper>
</template>

<script>
  import moment from 'moment'
  import {
    Bar
  } from '@/components'
  import CreateTable from './components/CreateTable'
   const barData=[]
  for (let i = 0; i < 12; i += 1) {
    barData.push({
      x: `${i + 1}月`,
      y: Math.floor(Math.random() * 1000) + 200
    })
  }
 const barData0 = barData
 const barData1 = barData
 const barData2 = barData
 const barData3 = barData
  const DataSet = require('@antv/data-set')
  const sourceData = [{
      item: '男',
      count: 32
    },
    {
      item: '女',
      count: 21
    },
    {
      item: '未知',
      count: 17
    },
  ]
  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
  const data = dv.rows

  export default {
    name: 'Analysis',
    components: {
      Bar,
      CreateTable
    },
    data() {
      return {
        queryParam: {},
        Tablevisible: false,
        // 

        barData0,
        barData1,
        barData2,
        barData3,
        //
        pieScale,
        pieData,
        data,
        pieStyle: {
          stroke: '#fff',
          lineWidth: 1
        },
        labelConfig: ['percent', {
          formatter: (val, item) => {
            return item.point.item + ': ' + val
          }
        }]
      }
    },
    created() {
      setTimeout(() => {
        this.loading = !this.loading
      }, 1000)
    },
    methods: {
      //搜索
      handleSubmit() {
        console.log(this.queryParam)
      },
      //选择客户
      handleTableOk(item) {
        this.Tablevisible = false
        console.log(item)
      },
    }
  }
</script>

<style lang="less" scoped>
  .extra-wrapper {
    position: relative;
    padding: 20px;
    background-color: #fff;
    margin-bottom: 20px;
  }
</style>
