<template>
  <a-card size="small" :bordered="false" class="noticeList-wrap">
    <!-- 搜索条件 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="handelSearch(1)">
        <a-row :gutter="15">
          <a-col :md="6" :sm="24">
            <a-form-item label="出库完成时间">
              <rangeDate ref="rangeDate" @change="dateChange" />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="24">
            <a-button type="primary" @click="handelSearch(1)" id="noticeList-refresh">查询</a-button>
            <a-button style="margin-left: 8px" @click="resetSearchForm" id="noticeList-reset">重置</a-button>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 列表 -->
    <a-row :gutter="15">
      <a-col :md="12" :sm="24">
        <div class="chart-box">
          <div class="chart-hj">库存总出数量：372，总成本：￥4315.50</div>
          <div id="con1" class="chart"></div>
        </div>
      </a-col>
      <a-col :md="12" :sm="24">
        <a-table
          class="sTable"
          ref="table"
          size="default"
          :rowKey="(record) => record.id"
          :columns="columns"
          :dataSource="loadData"
          :loading="listLoading"
          :pagination="false"
          bordered>
        </a-table>
      </a-col>
    </a-row>
  </a-card>
</template>

<script>
import rangeDate from '@/views/common/rangeDate.vue'
import echarts from 'echarts'
export default {
  components: { rangeDate },
  data () {
    return {
      queryParam: { //  查询条件
        beginDate: '',
        endDate: ''
      },
      disabled: false, //  查询、重置按钮是否可操作
      columns: [
        { title: '明细项', dataIndex: 'itemName', align: 'center', customRender: function (text) { return text || '--' } },
        { title: '数量（件）', dataIndex: 'qty', align: 'center', customRender: function (text) { return text || '--' } },
        { title: '成本（元）', dataIndex: 'cost', align: 'center', customRender: function (text) { return text || '--' } },
        { title: '售价（元）', dataIndex: 'price', align: 'center', customRender: function (text) { return text || '--' } }
      ],
      // 统计图
      pieData: [],
      pieColor: ['#00aaff', '#ffaa00', '#00aa00', '#ff55ff', '#1dc5d4', '#8465c7', '#00ffff'],
      loadData: [],
      listLoading: false,
      chart1: null
    }
  },

  methods: {
    // 初始化饼图 title: 标题 data：数据 bit：单位
    initPie (chart, title, data, bit) {
      const legend = []
      if (bit) {
        data.map(item => {
    			 const p = `${item.name}: ${item.value}${bit}`
    			 legend.push(p)
        })
      }
      const option = {
        color: this.pieColor,
        title: {
          text: title,
          top: 20,
          left: 20,
          textStyle: {
            color: '#abd7ff'
          },
          textAlingn: 'left'
        },
        tooltip: {
          trigger: 'item',
          formatter: `{b} : {d}%`
        },
        legend: {
    		  orient: 'horizontal',
    		  left: 'center',
    		  bottom: '5',
    		  padding: 5,
    		  textStyle: {
    		    color: '#abd7ff',
            fontSize: 10
    		  },
    		  show: !!bit,
    		  formatter: function (name) {
    			  if (bit) {
              const p = data.find(item => item.name == name)
              return name + (p ? ('：' + p.value + bit) : '')
    			  }
    		  }
        },
        series: [{
          type: 'pie',
          radius: ['30%', '50%'],
          startAngle: 75,
          top: 50,
          avoidLabelOverlap: true, // 在标签拥挤重叠的情况下会挪动各个标签的位置，防止标签间的重叠
          label: {
            normal: {
              formatter: params => {
                return (
                  '{name|' + params.name + '}{value|' +
    										params.percent + '%' + '}'
                )
              },
              padding: [0, -70, 25, -70],
              rich: {
                name: {
                  fontSize: 12,
                  padding: [0, 4, 0, 4],
                  color: '#999'
                },
                value: {
                  fontSize: 12,
                  color: '#999'
                }
              }
            }
          },
          labelLine: {
            normal: {
              length: 20,
              length2: 70,
              lineStyle: {
                color: '#e6e6e6'
              }
            }
          },
          data: data,
          insideLabel: {
            show: true
          }
        }]
      }
      return option
    },
    //  时间  change
    dateChange (date) {
      this.queryParam.beginDate = date[0] ? date[0] + ' 00:00:00' : ''
      this.queryParam.endDate = date[1] ? date[1] + ' 23:59:59' : ''
    },
    // 查询列表
    handelSearch () {
      const params = {
        beginDate: this.queryParam.beginDate,
        endDate: this.queryParam.endDate
      }
      // 开始查询
      this.listLoading = true
      setTimeout(() => {
        this.listLoading = false
        this.loadData = [
          {
            itemName: '采购退货',
            qty: '14',
            cost: '84.50',
            price: ''
          },
          {
            itemName: '散件退货',
            qty: '3',
            cost: '28.00',
            price: ''
          },
          {
            itemName: '销售（含急件）',
            qty: '77',
            cost: '837.50',
            price: '2672.55'
          },
          {
            itemName: '急件冲减',
            qty: '9',
            cost: '109.50',
            price: ''
          },
          {
            itemName: '店内调出',
            qty: '6',
            cost: '55.00',
            price: ''
          },
          {
            itemName: '盘亏出库',
            qty: '190',
            cost: '2725.00',
            price: ''
          },
          {
            itemName: '连锁调出',
            qty: '73',
            cost: '476.00',
            price: ''
          },
          {
            itemName: '总出',
            qty: '372',
            cost: '4315.50',
            price: '2672.55'
          }
        ]
        this.chartInit()
      }, 600)
    },
    chartInit () {
      this.loadData.map((item, index) => {
        if (index != this.loadData.length - 1) {
          this.pieData.push({
            name: item.itemName + '总成本',
            value: item.cost
          })
        }
      })
      const con5 = document.getElementById('con1')
      const chart1 = echarts.init(con1)
      const option = this.initPie(chart1, '', this.pieData)
      chart1.setOption(option)
      this.chart1 = chart1
      this.chart1.resize()
    },
    //  重置
    resetSearchForm () {
      this.$refs.rangeDate.resetDate()
      this.handelSearch()
    }
  },
  mounted () {
    window.onresize = () => {
      return (() => {
        this.chart1.resize()
      })()
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.handelSearch()
    })
  }
}
</script>
<style lang="less">
  .chart-box{
    height: 400px;
    .chart-hj{
      font-size: 22px;
      text-align: center;
    }
    .chart{
      width: 100%;
      height: 450px;
      overflow: auto;
    }
  }
</style>
