<template>
  <div class="app-container">
    <el-card>
      <span style="margin-left: 10px">时间段:</span>
      <el-date-picker
        v-model="date1"
        style="width:160px;margin:10px;"
        size="small"
        type="date"
        value-format="yyyy-MM-dd"
        format="yyyy-MM-dd"
        placeholder="选择日期"/>
      <span>~</span>
      <el-date-picker
        v-model="date2"
        style="width:160px;margin:10px;"
        size="small"
        type="date"
        value-format="yyyy-MM-dd"
        format="yyyy-MM-dd"
        placeholder="选择日期"/>
      <el-button type="success" size="small" icon="el-icon-search" style="margin-left: 15px" @click="getTableData()">查询</el-button>
    </el-card>
    <el-card>
      <h3>采购效率</h3>
      <div id="myChart" style="width: 1000px; height: 570px; margin: auto"/>
    </el-card>
    <el-card style="width: 650px">
      <el-table
        :data="tableData"
        highlight-current-row
        border
        stripe
        size="mini"
        style="width: 100%"
        height="460">
        <el-table-column
          label="序号"
          align="center"
          type="index"
          width="50"/>
        <el-table-column
          label="采购合同编号"
          align="center"
          width="140px">
          <template slot-scope="scope">{{ scope.row.采购合同编号 }}</template>
        </el-table-column>
        <el-table-column
          label="采购用时"
          align="center"
          width="80px">
          <template slot-scope="scope">{{ scope.row.平均采购时间 }}</template>
        </el-table-column>
        <el-table-column
          label="平均分配日期"
          width="170"
          align="center">
          <template slot-scope="scope">{{ scope.row.平均分配日期 }}</template>
        </el-table-column>
        <el-table-column
          label="合同生成日期"
          align="center"
          width="170">
          <template slot-scope="scope">{{ scope.row.合同生成日期 }}</template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-card v-loading="loading2" style="height: 450px">
      <span>供应商分布图</span>
      <el-button size="small" type="success" icon="el-icon-search" @click="search2()">查询</el-button>
      <div id="myChart2" :style="{width: '100%', height: '400px', margin: 'auto'}"/>
    </el-card>
    <el-card>
      <span style="margin-left: 10px">时间段:</span>
      <el-date-picker
        v-model="date3"
        style="width:160px;margin:10px;"
        size="small"
        type="date"
        value-format="yyyy-MM-dd"
        format="yyyy-MM-dd"
        placeholder="选择日期"/>
      <span>~</span>
      <el-date-picker
        v-model="date4"
        style="width:160px;margin:10px;"
        size="small"
        type="date"
        value-format="yyyy-MM-dd"
        format="yyyy-MM-dd"
        placeholder="选择日期"/>
      <el-button type="success" size="small" icon="el-icon-search" style="margin-left: 15px" @click="getTableData2()">查询</el-button>
    </el-card>
    <el-card>
      <h3>采购合同审核审批效率</h3>
      <div id="myChart3" style="width: 1000px; height: 570px; margin: auto"/>
    </el-card>
    <el-card>
      <span style="margin-left: 10px">时间段:</span>
      <el-date-picker
        v-model="date5"
        style="width:160px;margin:10px;"
        size="small"
        type="date"
        value-format="yyyy-MM-dd"
        format="yyyy-MM-dd"
        placeholder="选择日期"/>
      <span>~</span>
      <el-date-picker
        v-model="date6"
        style="width:160px;margin:10px;"
        size="small"
        type="date"
        value-format="yyyy-MM-dd"
        format="yyyy-MM-dd"
        placeholder="选择日期"/>
      <el-button type="success" size="small" icon="el-icon-search" style="margin-left: 15px" @click="getTableData3()">查询</el-button>
    </el-card>
    <el-card>
      <h3>制造采购合同审批效率</h3>
      <div id="myChart4" style="width: 1000px; height: 570px; margin: auto"/>
    </el-card>
    <el-card>
      <span style="margin-left: 10px">时间段:</span>
      <el-date-picker
        v-model="date7"
        style="width:160px;margin:10px;"
        size="small"
        type="date"
        value-format="yyyy-MM-dd"
        format="yyyy-MM-dd"
        placeholder="选择日期"/>
      <span>~</span>
      <el-date-picker
        v-model="date8"
        style="width:160px;margin:10px;"
        size="small"
        type="date"
        value-format="yyyy-MM-dd"
        format="yyyy-MM-dd"
        placeholder="选择日期"/>
      <el-button type="success" size="small" icon="el-icon-search" style="margin-left: 15px" @click="getTableData4()">查询</el-button>
    </el-card>
    <el-card>
      <h3>采购合同审批付款效率</h3>
      <div id="myChart5" style="width: 1000px; height: 570px; margin: auto"/>
    </el-card>
  </div>
</template>

<script>
import { getData, getData1, getData2, getData3, getData4 } from '@/api/PurchasingCenter/PurchasingEfficiencyAnalysis'
export default {
  data() {
    return {
      tableData: [],
      tableData1: [],
      tableData2: [],
      tableData3: [],
      date1: '',
      date2: '',
      date3: '',
      date4: '',
      date5: '',
      date6: '',
      date7: '',
      date8: '',
      loading2: false
    }
  },
  methods: {
    getTableData() {
      this.tableData = []
      getData(this.date1, this.date2).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.tableData.push({
            采购合同流水号: response.data[i].采购合同流水号,
            采购合同编号: response.data[i].采购合同编号,
            合同生成日期: response.data[i].操作时间,
            平均分配日期: '',
            平均采购时间: ''
          })
        }
        this.getTableData1(this.tableData)
      })
      setTimeout(this.drawLine, 2000)
    },
    getTableData1(row) {
      for (let i = 0; i < row.length; i++) {
        getData1(row[i].采购合同流水号).then(response => {
          this.tableData[i].平均分配日期 = response.data[0].平均分配日期
          this.tableData[i].平均采购时间 = response.data[0].平均采购时间
        })
      }
    },
    //  绘制图形
    drawLine() {
      const myChart = this.$echarts.init(document.getElementById('myChart'))
      const xData = []
      const lineData = []
      for (let i = 0; i < this.tableData.length; i++) {
        console.log(this.tableData[i].采购合同编号)
        xData.push(this.tableData[i].采购合同编号)
        lineData.push(this.tableData[i].平均采购时间)
      }
      myChart.clear()
      myChart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        legend: {
          data: ['采购用时']
        },
        xAxis: [
          {
            type: 'category',
            name: '合同编号',
            data: xData,
            axisPointer: {
              type: 'shadow'
            },
            axisLabel: {
              interval: 0,
              rotate: 40
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '采购用时(H)'
          }
        ],
        series: [
          {
            name: '采购用时',
            type: 'line',
            label: {
              normal: {
                show: true,
                position: 'top'
              }
            },
            data: lineData
          }
        ]
      })
    },
    getTableData2() {
      getData2(this.date3, this.date4).then(response => {
        this.tableData1 = response.data
      }).then(() => {
        this.drawLine1()
      })
    },
    drawLine1() {
      const myChart = this.$echarts.init(document.getElementById('myChart3'))
      const xData = []
      const lineData = []
      const lineData1 = []
      for (let i = 0; i < this.tableData1.length; i++) {
        xData.push(this.tableData1[i].采购合同编号)
        lineData.push(this.tableData1[i].审核用时)
        lineData1.push(this.tableData1[i].审批用时)
      }
      myChart.clear()
      myChart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        legend: {
          data: ['审核用时', '审批用时']
        },
        xAxis: [
          {
            type: 'category',
            name: '合同编号',
            data: xData,
            axisPointer: {
              type: 'shadow'
            },
            axisLabel: {
              interval: 0,
              rotate: 40
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '用时(H)'
          }
        ],
        series: [
          {
            name: '审核用时',
            type: 'line',
            label: {
              normal: {
                show: true,
                position: 'top'
              }
            },
            data: lineData
          },
          {
            name: '审批用时',
            type: 'line',
            label: {
              normal: {
                show: true,
                position: 'top'
              }
            },
            data: lineData1
          }
        ]
      })
    },
    getTableData3() {
      getData3(this.date5, this.date6).then(response => {
        this.tableData2 = response.data
      }).then(() => {
        this.drawLine2()
      })
    },
    drawLine2() {
      const myChart = this.$echarts.init(document.getElementById('myChart4'))
      const xData = []
      const lineData = []
      for (let i = 0; i < this.tableData2.length; i++) {
        xData.push(this.tableData2[i].采购合同编号)
        lineData.push(this.tableData2[i].审批用时)
      }
      myChart.clear()
      myChart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        legend: {
          data: ['审批用时']
        },
        xAxis: [
          {
            type: 'category',
            name: '合同编号',
            data: xData,
            axisPointer: {
              type: 'shadow'
            },
            axisLabel: {
              interval: 0,
              rotate: 40
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '用时(H)'
          }
        ],
        series: [
          {
            name: '审核用时',
            type: 'line',
            label: {
              normal: {
                show: true,
                position: 'top'
              }
            },
            data: lineData
          }
        ]
      })
    },
    getTableData4() {
      getData4(this.date7, this.date8).then(response => {
        this.tableData3 = response.data
      }).then(() => {
        this.drawLine3()
      })
    },
    drawLine3() {
      const myChart = this.$echarts.init(document.getElementById('myChart5'))
      const xData = []
      const lineData = []
      const lineData1 = []
      for (let i = 0; i < this.tableData3.length; i++) {
        xData.push(this.tableData3[i].采购合同编号)
        lineData.push(this.tableData3[i].付款用时)
        lineData1.push(this.tableData3[i].审批用时)
      }
      myChart.clear()
      myChart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        legend: {
          data: ['付款用时', '审批用时']
        },
        xAxis: [
          {
            type: 'category',
            name: '合同编号',
            data: xData,
            axisPointer: {
              type: 'shadow'
            },
            axisLabel: {
              interval: 0,
              rotate: 40
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '用时(H)'
          }
        ],
        series: [
          {
            name: '付款用时',
            type: 'line',
            label: {
              normal: {
                show: true,
                position: 'top'
              }
            },
            data: lineData
          },
          {
            name: '审批用时',
            type: 'line',
            label: {
              normal: {
                show: true,
                position: 'top'
              }
            },
            data: lineData1
          }
        ]
      })
    }
    // // 客户分布图
    // search2() {
    //   this.loading2 = true
    //   var myChart2 = this.$echarts.init(document.getElementById('myChart2'))
    //   myChart2.clear()
    //   getData2().then(response => {
    //     this.loading2 = false
    //     this.drawLine2(response.data)
    //   })
    // },
    // drawLine2(data) {
    //   var dataX = []
    //   var lineData = []
    //   for (let i = 0; i < data.length; i++) {
    //     dataX.push({
    //       value: parseInt(data[i].客户数量),
    //       name: data[i].省份
    //     })
    //     lineData.push(data[i].省份)
    //   }
    //   var myChart2 = this.$echarts.init(document.getElementById('myChart2'))
    //   myChart2.clear()
    //   myChart2.setOption({
    //     title: {
    //       text: '供应商分布图',
    //       x: 'center'
    //     },
    //     tooltip: {
    //       trigger: 'item',
    //       formatter: '{a} <br/>{b} : {c} ({d}%)'
    //     },
    //     legend: {
    //       orient: 'vertical',
    //       left: 'left',
    //       data: lineData
    //     },
    //     series: [
    //       {
    //         name: '省份',
    //         type: 'pie',
    //         radius: '55%',
    //         center: ['50%', '60%'],
    //         data: dataX,
    //         itemStyle: {
    //           emphasis: {
    //             shadowBlur: 10,
    //             shadowOffsetX: 0,
    //             shadowColor: 'rgba(0, 0, 0, 0.5)'
    //           }
    //         }
    //       }
    //     ]
    //   })
    // }
  }
}
</script>

<style scoped>

</style>
