<template>
  <div class="app-container">
    <div class="search">
      <el-date-picker v-model="table.getdataListParm.parammaps.inputDatetime" class="inputDatetime filter-item" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="width: 250px;" />
      <el-select v-model="table.getdataListParm.parammaps.barid" placeholder="计划类型" class="filter-item" style="width: 120px;" clearable>
        <el-option v-for="item in planTypeList" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>
      <el-input v-model="table.getdataListParm.parammaps.drivername" placeholder="TMR名称" style="width: 180px;" class="filter-item" clearable />
      <el-select v-model="table.getdataListParm.parammaps.barid" placeholder="工作状态" class="filter-item" style="width: 120px;" clearable>
        <el-option v-for="item in workingConditionList" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>
      <el-button class="successBorder" @click="handleSearch">查询</el-button>
      <el-button class="successBorder" @click="handleRefresh">重置</el-button>
    </div>
    <el-row :gutter="20">
      <el-col :span="8">
        <h4>TMR设备列表</h4>
        <div class="table">
          <el-table
            :key="table.tableKey"
            v-loading="table.listLoading"
            element-loading-text="给我一点时间"
            :data="table.list"
            border
            fit
            highlight-current-row
            style="width: 100%;"
            :row-style="rowStyle"
            :cell-style="cellStyle"
            class="elTable table-fixed"
            height="870px"
          >
            <el-table-column label="开始时间" min-width="110px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.drivercode }}</span>
              </template>
            </el-table-column>
            <el-table-column label="计划类型" min-width="90px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.drivercode }}</span>
              </template>
            </el-table-column>
            <el-table-column label="描述" min-width="100px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.drivercode }}</span>
              </template>
            </el-table-column>
            <el-table-column label="TMR名称" min-width="110px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.drivercode }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
      <el-col :span="16">
        <h4>过程详情</h4>
        <div class="detail">
          <div class="detail-t">
            过程时间：<span>20min</span>;
            工作状态：<span>运行中/已完成</span>
          </div>
          <div class="detail-b">
            混料误差值：<span>1kg</span>;
            混料误差率：<span>5%</span>;
            撒料误差值：<span>0.86kg</span>;
            撒料误差率：<span>6%</span>
          </div>
        </div>
        <div class="Mixture">
          <h4>混料详情</h4>
          <el-table
            :key="table2.tableKey"
            v-loading="table2.listLoading"
            element-loading-text="给我一点时间"
            :data="table2.list"
            border
            fit
            highlight-current-row
            style="width: 100%;"
            :row-style="rowStyle"
            :cell-style="cellStyle"
            class="elTable table-fixed"
            height="200px"
          >
            <el-table-column label="操作编号" min-width="110px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.drivercode }}</span>
              </template>
            </el-table-column>
            <el-table-column label="饲料名称" min-width="90px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.drivercode }}</span>
              </template>
            </el-table-column>
            <el-table-column label="计划重量" min-width="110px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.drivercode }}</span>
              </template>
            </el-table-column>
            <el-table-column label="实际重量" min-width="110px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.drivercode }}</span>
              </template>
            </el-table-column>
            <el-table-column label="误差值" min-width="110px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.drivercode }}</span>
              </template>
            </el-table-column>
            <el-table-column label="误差率" min-width="90px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.drivercode }}</span>
              </template>
            </el-table-column>
            <el-table-column label="完成时间" min-width="110px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.drivercode }}</span>
              </template>
            </el-table-column>
            <el-table-column label="过程时间" min-width="110px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.drivercode }}</span>
              </template>
            </el-table-column>
            <el-table-column label="跳转方式" min-width="110px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.drivercode }}</span>
              </template>
            </el-table-column>
            <el-table-column label="开始重量" min-width="110px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.drivercode }}</span>
              </template>
            </el-table-column>
            <el-table-column label="结束重量" min-width="110px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.drivercode }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <div class="SpreadingMaterials">
          <h4>撒料详情</h4>
          <el-table
            :key="table3.tableKey"
            v-loading="table3.listLoading"
            element-loading-text="给我一点时间"
            :data="table3.list"
            border
            fit
            highlight-current-row
            style="width: 100%;"
            :row-style="rowStyle"
            :cell-style="cellStyle"
            class="elTable table-fixed"
            height="200px"
          >
            <el-table-column label="操作编号" min-width="110px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.drivercode }}</span>
              </template>
            </el-table-column>
            <el-table-column label="饲料名称" min-width="90px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.drivercode }}</span>
              </template>
            </el-table-column>
            <el-table-column label="计划重量" min-width="110px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.drivercode }}</span>
              </template>
            </el-table-column>
            <el-table-column label="实际重量" min-width="110px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.drivercode }}</span>
              </template>
            </el-table-column>
            <el-table-column label="误差值" min-width="110px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.drivercode }}</span>
              </template>
            </el-table-column>
            <el-table-column label="误差率" min-width="90px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.drivercode }}</span>
              </template>
            </el-table-column>
            <el-table-column label="完成时间" min-width="110px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.drivercode }}</span>
              </template>
            </el-table-column>
            <el-table-column label="过程时间" min-width="110px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.drivercode }}</span>
              </template>
            </el-table-column>
            <el-table-column label="跳转方式" min-width="110px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.drivercode }}</span>
              </template>
            </el-table-column>
            <el-table-column label="开始重量" min-width="110px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.drivercode }}</span>
              </template>
            </el-table-column>
            <el-table-column label="结束重量" min-width="110px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.drivercode }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="ControlChart">
          <h4>监控图</h4>
          <div style="font-size:14px;color:#666;margin:0 auto;position: relative;">
            <span style="line-height:30px;position:absolute;right:190px"><i class="el-icon-caret-top" style="color:#c23531;line-height:30px;font-size:30px;" /><b style="line-height:32px;">开始重量</b></span>
            <span style="line-height:30px;position:absolute;right:100px"><i class="el-icon-caret-top" style="color:#2f4554;line-height:30px;font-size:30px;" /><b style="line-height:32px;">结束重量</b></span>
          </div>
          <div id="chartLine" style="width: 100%;height:200px;" /></div>
      </el-col>
    </el-row>

  </div>

</template>

<script>
import echarts from 'echarts'

require('echarts/theme/macarons')
import { GetDataByName } from '@/api/common'
import Cookies from 'js-cookie'
import { parseTime } from '@/utils/index.js'
export default {
  name: 'ProcessAnalysis',
  data() {
    return {
      requestParams: [
        { name: 'getBarListEnable', offset: 0, pagecount: 0, parammaps: { 'pastureid': Cookies.get('pastureid') }},
        { name: 'getCowclassListEnable', offset: 0, pagecount: 0, parammaps: { 'pastureid': Cookies.get('pastureid') }}
      ],
      planTypeList: [{ id: '0', name: '预混计划' }, { id: '1', name: '撒料计划' }, { id: '2', name: '剩料计划' }], // 计划类型
      workingConditionList: [{ id: '0', name: '运行中' }, { id: '1', name: '已完成' }], // 工作状态

      table: {
        getdataListParm: {
          name: 'getBarmilkList',
          page: 1,
          offset: 1,
          pagecount: 10,
          returntype: 'Map',
          parammaps: {
            pastureid: Cookies.get('pastureid'),
            barid: '',
            cowclass: '',
            startTime: '',
            stopTime: '',
            inputDatetime: ''
          }
        },
        tableKey: 0,
        list: [],
        total: 0,
        listLoading: true
      },
      // 混料详情
      table2: {
        getdataListParm: {
          name: 'getBarmilkList',
          page: 1,
          offset: 1,
          pagecount: 10,
          returntype: 'Map',
          parammaps: {
            pastureid: Cookies.get('pastureid'),
            barid: '',
            cowclass: '',
            startTime: '',
            stopTime: '',
            inputDatetime: ''
          }
        },
        tableKey: 0,
        list: [],
        total: 0,
        listLoading: true
      },
      // 撒料详情
      table3: {
        getdataListParm: {
          name: 'getBarmilkList',
          page: 1,
          offset: 1,
          pagecount: 10,
          returntype: 'Map',
          parammaps: {
            pastureid: Cookies.get('pastureid'),
            barid: '',
            cowclass: '',
            startTime: '',
            stopTime: '',
            inputDatetime: ''
          }
        },
        tableKey: 0,
        list: [],
        total: 0,
        listLoading: true
      },
      chartLine: null,
      chartLine_data1: {
        data1: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        data2: [220, 250, 201, 234, 290, 430, 410],
        data3: [120, 130, 101, 134, 90, 430, 210]
      },
      rowStyle: { maxHeight: 50 + 'px', height: 45 + 'px' },
      cellStyle: { padding: 0 + 'px' }
    }
  },

  created() {
    this.getList()
  },
  mounted() {
    this.roadChartLine1(this.chartLine_data1)
  },
  methods: {
    getList() {
      this.table.listLoading = true
      GetDataByName(this.table.getdataListParm).then(response => {
        console.log('table数据', response.data.list)
        if (response.data.list !== null) {
          this.table.list = response.data.list
          this.getList2()
          this.getList3()
        } else {
          this.table.list = []
        }
        setTimeout(() => {
          this.table.listLoading = false
        }, 100)
      })
    },
    handleSearch() {
      console.log('点击了查询')
      if (this.table.getdataListParm.parammaps.inputDatetime !== '' && this.table.getdataListParm.parammaps.inputDatetime !== null) {
        this.table.getdataListParm.parammaps.startTime = parseTime(this.table.getdataListParm.parammaps.inputDatetime[0], '{y}-{m}-{d}')
        this.table.getdataListParm.parammaps.stopTime = parseTime(this.table.getdataListParm.parammaps.inputDatetime[1], '{y}-{m}-{d}')
      } else {
        this.table.getdataListParm.parammaps.inputDatetime = ''
        this.table.getdataListParm.parammaps.startTime = ''
        this.table.getdataListParm.parammaps.stopTime = ''
      }
      this.table.getdataListParm.offset = 1
      this.getList()
    },
    handleRefresh() {
      console.log('点击了重置')
      this.table.getdataListParm.parammaps.barid = ''
      this.table.getdataListParm.parammaps.cowclass = ''
      this.table.getdataListParm.parammaps.startTime = ''
      this.table.getdataListParm.parammaps.stopTime = ''
      this.table.getdataListParm.parammaps.inputDatetime = ''
      this.table.getdataListParm.offset = 1
      this.getList()
    },
    getList2() {
      this.table2.listLoading = true
      GetDataByName(this.table2.getdataListParm).then(response => {
        console.log('table数据', response.data.list)
        if (response.data.list !== null) {
          this.table2.list = response.data.list
        } else {
          this.table2.list = []
        }
        setTimeout(() => {
          this.table2.listLoading = false
        }, 100)
      })
    },
    getList3() {
      this.table3.listLoading = true
      GetDataByName(this.table3.getdataListParm).then(response => {
        console.log('table数据', response.data.list)
        if (response.data.list !== null) {
          this.table3.list = response.data.list
        } else {
          this.table3.list = []
        }
        setTimeout(() => {
          this.table3.listLoading = false
        }, 100)
      })
    },
    roadChartLine1(chartLine_data1) {
      if (this.chartLine != null) {
        this.chartLine.dispose()
      }
      this.chartLine = echarts.init(document.getElementById('chartLine'))

      var option = {
        title: {
          text: '',
          subtext: ''
        },
        color: ['#c23531', '#2f4554'], // 关键加上这句话，legend的颜色和折线的自定义颜色就一致了
        legend: {
          icon: 'rectangle',
          data: ['设计重量', '实际重量'],
          // right: '20%',
          textStyle: {
            fontSize: 12,
            color: '#666'
          }
        },
        /* grid:{y:15},*/
        tooltip: {
          trigger: 'axis'
        },
        calculable: true,
        yAxis: [
          {
            type: 'value',
            splitLine: { show: false }, // 去除网格线
            axisLabel: {
              show: true,
              textStyle: {
                color: '#666' // 这里用参数代替了
              }
            }
          }
        ],
        xAxis: [
          {
            type: 'category',
            splitLine: { show: false }, // 去除网格线
            data: chartLine_data1.data1,
            axisLabel: {
              show: true,
              textStyle: {
                color: '#666' // 这里用参数代替了
              }
            }
          }
        ],
        series: [
          {
            name: '设计重量',
            type: 'line',
            barWidth: '37',
            data: chartLine_data1.data2,
            symbol: 'triangle', symbolSize: 10,
            itemStyle: {
              normal: {
                lineStyle: { color: '#c23531' },
                color: function(param) {
                  const colorList = ['#2f4554', '#c23531']
                  let x = ''
                  param.dataIndex % 2 == 0 ? x = 1 : x = 2
                  if (x == '1') {
                    return colorList[0]
                  } else {
                    return colorList[1]
                  }
                }
              }
            }
          },
          {
            name: '实际重量',
            type: 'line',
            step: 'end',
            data: chartLine_data1.data3,
            barWidth: '37',
            itemStyle: {
              normal: {
                lineStyle: { color: '#2f4554' }
              }
            }
          }
        ]
      }
      this.chartLine.setOption(option)
      window.onresize = function() {
        this.chartLine.resize()
      }
    }

  }
}

</script>
<style lang="scss" scoped>
  .search{padding-top:10px;clear: both;}
  .table{margin-top:10px;}
  .detail{
    height:84px;border: 1px solid #EBEEF5;padding-left:10px;font:16px/32px '';color:#333;
    .detail-t{margin-top: 10px;}
    .detail-b{margin-bottom: 10px;}
  }
</style>