<template>
  <a-card size="small" :bordered="false" class="stockIncomeReportList-wrap">
    <a-spin :spinning="spinning" tip="Loading...">
      <!-- 搜索条件 -->
      <div class="table-page-search-wrapper">
        <a-form-model
          id="chainStockReportList-form"
          ref="ruleForm"
          :model="queryParam"
          :rules="rules"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          @keyup.enter.native="handelSearch" >
          <a-row :gutter="15">
            <a-col :md="8" :sm="24">
              <a-form-model-item label="入库完成时间" prop="time">
                <rangeDate ref="rangeDate" @change="dateChange" />
              </a-form-model-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-button type="primary" @click="handelSearch" id="stockIncomeReportList-refresh">查询</a-button>
              <a-button style="margin-left: 8px" @click="resetSearchForm" id="stockIncomeReportList-reset">重置</a-button>
            </a-col>
          </a-row>
        </a-form-model>
      </div>
      <!-- 列表 -->
      <a-row :gutter="15" style="margin-top: 50px;">
        <a-col :md="12" :sm="24">
          <div class="chart-box">
            <div class="chart-hj">
              库存总入数量：{{ (totalData&&totalData.totalQty) ? totalData.totalQty : '--' }}，
              总成本：￥{{ (totalData&&totalData.totalCost) ? totalData.totalCost : '--' }}
            </div>
            <div id="con1" class="chart"></div>
          </div>
        </a-col>
        <a-col :md="12" :sm="24" style="margin-top: 30px;">
          <a-table
            class="sTable"
            ref="table"
            size="default"
            :rowKey="(record) => record.dataBizTypeDictValue"
            :columns="columns"
            :dataSource="tableData"
            :loading="listLoading"
            :pagination="false"
            bordered>
          </a-table>
        </a-col>
      </a-row>
    </a-spin>
  </a-card>
</template>

<script>
import rangeDate from '@/views/common/rangeDate.vue'
import echarts from 'echarts'
import { reportStockPutList } from '@/api/reportStock'
export default {
  components: { rangeDate },
  data () {
    return {
      spinning: false,
      queryParam: { //  查询条件
        time: [],
        beginDate: '',
        endDate: ''
      },
      labelCol: { span: 8 },
      wrapperCol: { span: 16 },
      rules: {
        'time': [{ required: true, message: '请选择入库完成时间', trigger: 'change' }]
      },
      disabled: false, //  查询、重置按钮是否可操作
      columns: [
        { title: '明细项', dataIndex: 'dataBizTypeDictValue', align: 'center', customRender: function (text) { return text || '--' } },
        { title: '数量（件）', dataIndex: 'productQty', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
        { title: '成本（元）', dataIndex: 'productCost', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
        { title: '售价（元）', dataIndex: 'productPrice', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } }
      ],
      // 统计图
      pieData: [],
      pieColor: ['#00aaff', '#ffaa00', '#00aa00', '#ff55ff', '#1dc5d4', '#8465c7', '#00ffff'],
      tableData: [], //  含总计数据
      loadData: [], //  不含总计数据
      listLoading: false,
      chart1: null,
      totalData: 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: ['50%', '70%'],
          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.time = date
      this.queryParam.beginDate = date[0]
      this.queryParam.endDate = date[1]
    },
    handelSearch () {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.getList()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 查询列表
    getList () {
      const params = {
        beginDate: this.queryParam.beginDate,
        endDate: this.queryParam.endDate
      }
      // 开始查询
      this.listLoading = true
      this.spinning = true
      reportStockPutList(params).then(res => {
        this.listLoading = false
        if (res.status == 200) {
          const reportStockPutVOList = (res.data && res.data.reportStockPutVOList) ? res.data.reportStockPutVOList : []
          const totalQty = (res.data && (res.data.totalQty || res.data.totalQty == 0)) ? res.data.totalQty : '--'
          const totalPrice = (res.data && (res.data.totalPrice || res.data.totalPrice == 0)) ? res.data.totalPrice : '--'
          const totalCost = (res.data && (res.data.totalCost || res.data.totalCost == 0)) ? res.data.totalCost : '--'
          this.totalData = {
            totalQty: totalQty,
            totalPrice: totalPrice,
            totalCost: totalCost
          }
          if (reportStockPutVOList) {
            this.loadData = res.data.reportStockPutVOList
            this.tableData = res.data.reportStockPutVOList
            const total = [{ dataBizTypeDictValue: '总入', productQty: totalQty, productCost: totalCost, productPrice: totalPrice }]
            this.tableData = [...this.tableData, ...total]
          } else {
            this.loadData = []
            this.tableData = []
          }
          this.chartInit()
        }
        this.spinning = false
      })
    },
    chartInit () {
      this.pieData = []
      if (this.loadData.length < 1) {
        this.pieData = [{ name: '总成本', value: 0 }]
      } else {
        this.loadData.map((item, index) => {
          if (index != this.loadData.length) {
            this.pieData.push({
              name: item.dataBizTypeDictValue + '总成本',
              value: item.productCost
            })
          }
        })
      }
      const con1 = 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.queryParam.time = []
      this.queryParam.beginDate = ''
      this.queryParam.endDate = ''
      this.loadData = []
      this.tableData = []
      this.totalData = null
      this.chartInit()
    }
  },
  mounted () {
    window.onresize = () => {
      return (() => {
        this.chart1.resize()
      })()
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.chartInit()
    })
  }
}
</script>
<style lang="less">
  .stockIncomeReportList-wrap{
    min-height: 700px;
    .chart-box{
      height: 400px;
      .chart-hj{
        font-size: 22px;
        text-align: center;
      }
      .chart{
        width: 100%;
        height: 450px;
        overflow: auto;
      }
    }
  }
</style>
