<template>
  <div class="app-container">
    <el-card>
      <span>项目名称:</span>
      <el-select v-model="projectValue" placeholder="项目名称" size="small" filterable clearable>
        <el-option
          v-for="item in project"
          :key="item.value"
          :label="item.label"
          :value="item.value"/>
      </el-select>
      <el-button
        type="success"
        size="small"
        icon="el-icon-search"
        style="margin-left:10px"
        @click="total=0;pageCurrent=1;pageSize=10;searchTable()">查询</el-button>
    </el-card>
    <el-row :gutter="40" class="panel-group">
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel" style="padding: 0px">
          <div class="card-panel-icon-wrapper icon-people">
            <svg-icon icon-class="采购采购" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">采购部采购</div>
            <count-to :end-val="Purchase" :duration="1000" prefix="¥" class="card-panel-num"/>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-message">
            <svg-icon icon-class="车间采购" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">制造部采购</div>
            <count-to :end-val="WorkPurchase" :duration="1000" prefix="¥" class="card-panel-num"/>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-money">
            <svg-icon icon-class="外协工时" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">外协工时</div>
            <count-to :end-val="Outsourcing" :duration="1000" prefix="¥" class="card-panel-num"/>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-shopping">
            <svg-icon icon-class="自家工时" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">自家工时</div>
            <count-to :end-val="Home" :duration="1000" prefix="¥" class="card-panel-num"/>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-card>
      <div style="height: 500px;width: 100%">
        <div class="div-a">
          <div id="pie" style="width:70%;height:450px; display: block; margin-right: auto;margin-left: auto"/>
        </div>
        <div class="div-b">
          <div id="bar" style="width:85%;height:450px; display: block; float: left"/>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>import { initProject, searchOutsourcing, searchHome } from '@/api/WorkshopProcurement/costStatistics'
import echarts from 'echarts'
import CountTo from 'vue-count-to'
export default {
  components: {
    CountTo
  },
  data() {
    return {
      Purchase: 25040,
      WorkPurchase: 5308,
      Outsourcing: 3240,
      Home: 37806,
      projectValue: 1,
      project: [],
      data: []
    }
  },
  mounted() {
    this.drawLine()
    this.drawLine1()
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.getSelect(initProject, ['项目名称', '项目流水号'], 'project')
    },
    searchTable() {
      this.data = []
      searchOutsourcing(this.projectValue).then(response => {
        this.Outsourcing = parseFloat(response.data[0].外协总价)
        return this.Outsourcing
      }).then(data => {
        this.data.push({
          value: data,
          name: '外协工时'
        })
      }).then(() => {
        searchHome(this.projectValue).then(response => {
          this.Home = parseFloat(response.data[0].项目工时)
          return this.Home
        }).then(data => {
          this.data.push({
            value: data,
            name: '自家工时'
          })
          this.drawLine()
          this.drawLine1()
        })
      })
    },
    drawLine() {
      const pie = echarts.init(document.getElementById('pie'))
      pie.setOption({
        title: {
          // text: '损失工时分析',
          x: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          type: 'scroll',
          orient: 'vertical',
          right: 15,
          top: 50,
          bottom: 25
        },
        series: [
          {
            name: '各项成本占比',
            type: 'pie',
            radius: '57%',
            center: ['50%', '50%'],
            data: [{ value: 25040, name: '采购部采购' },
              { value: 5308, name: '制造部采购' },
              { value: 3240, name: '外协工时' },
              { value: 37806, name: '自家工时' }
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            label: {
              normal: {
                show: true,
                position: 'outside',
                formatter: '{b} ({d}%)'
              }
            }
          }
        ]
      })
      setTimeout(function() {
        window.onresize = function() {
          pie.resize()
        }
      }, 200)
    },
    drawLine1() {
      const bar = echarts.init(document.getElementById('bar'))
      // 指定图表的配置项和数据
      bar.setOption({
        tooltip: {},
        legend: {
          data: {
            name: ['外协工时', '自家工时', '采购部采购', '制造部采购']
          }
        },
        xAxis: {
          data: ['外协工时', '自家工时', '采购部采购', '制造部采购'],
          show: true
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'bar',
          data: [25040, 5308, 3240, 37806]
        }]
      })
      setTimeout(function() {
        window.onresize = function() {
          bar.resize()
        }
      }, 200)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .panel-group {
    margin-top: 18px;
    .card-panel-col{
      margin-bottom: 32px;
    }
    .card-panel {
      height: 140px;
      cursor: pointer;
      font-size: 12px;
      position: relative;
      overflow: hidden;
      color: #666;
      background: #fff;
      box-shadow: 4px 4px 40px rgba(0, 0, 0, .20);
      border-color: rgba(0, 0, 0, .05);
      .icon-people {
        color: #40c9c6;
        background: #40c9c6;
      }
      .icon-message {
        color: #36a3f7;
        background: #36a3f7;
      }
      .icon-money {
        color: #f4516c;
        background: #f4516c;
      }
      .icon-shopping {
        color: #34bfa3;
        background: #34bfa3;
      }
      .card-panel-icon-wrapper {
        float: left;
        margin: 14px 0 0 14px;
        padding: 20px;
        transition: all 0.38s ease-out;
        border-radius: 6px;
      }
      .card-panel-icon {
        float: left;
        color: white;
        font-size: 48px;
      }
      .card-panel-description {
        float: right;
        font-weight: bold;
        margin: 26px;
        margin-left: 0px;
        .card-panel-text {
          text-align: right;
          line-height: 18px;
          color: rgba(0, 0, 0, 0.45);
          font-size: 20px;
          margin-bottom: 12px;
        }
        .card-panel-num {
          font-size: 30px;
        }
      }
    }
  }
  .div-a{ float:left;width:45%;margin-right: 4%}
  .div-b{ float:left;width:45%;margin-left: 4%}
</style>
