<template>
  <div class="app-container">
    <div class="headTitle">京源环保生产管理系统</div>

    <div class="chartBox chartBox1">
      <div class="title">派工信息</div>
      <div class="chart">
        <div class="whiteTable">
          <el-table
            :data="tableData"
            style="width: 100%"
            max-height="19.13vw"
            :cell-style="{textAlign:'center'}"
            :header-cell-style="{textAlign:'center'}"
          >
            <el-table-column
              label="序号"
              type="index"
              width="50"
            >
            </el-table-column>
            <el-table-column
              prop="workOrderNumber"
              label="工单编号"
            >
            </el-table-column>
            <el-table-column
              prop="plan"
              label="计划"
              width="100"
            >
            </el-table-column>
            <el-table-column
              prop="practical"
              label="实际"
              width="100"
            >
            </el-table-column>
            <el-table-column
              prop="difference"
              label="差异"
              width="100"
            >
            </el-table-column>
            <el-table-column
              prop="deliveryTime"
              label="交付时间"
              width="150"
            >
            </el-table-column>
            <el-table-column
              label="操作"
              width="120"
            >
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                >
                  条码打印
                </el-button>
                <el-button
                  type="text"
                  size="small"
                >
                  开始
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>

    <div class="chartBox chartBox2">
      <div class="title">库存统计</div>
      <div class="chart">
        <Chart ref="chart2"></Chart>
      </div>
    </div>

    <div class="chartBox chartBox3">
      <div class="title">计划明细</div>
      <div class="chart">
        <div class="whiteTable">
          <el-table
            :data="tableData1"
            style="width: 100%"
            max-height="19.13vw"
            :cell-style="{textAlign:'center'}"
            :header-cell-style="{textAlign:'center'}"

          >
            <el-table-column
              label="序号"
              type="index"
              width="50"
            >
            </el-table-column>
            <el-table-column
              prop="planNumber"
              label="计划编号"
            >
            </el-table-column>
            <el-table-column
              prop="workOrderNumber"
              label="工单编号"
            >
            </el-table-column>
            <el-table-column
              prop="startTime"
              label="开始时间"
              width="200"
            >
            </el-table-column>
            <el-table-column
              label="操作"
              width="120"
            >
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                >
                  装配
                </el-button>
                <el-button
                  type="text"
                  size="small"
                  @click="getMaterials(scope) "
                >
                  领料
                </el-button>
                <el-button
                  type="text"
                  size="small"
                >
                  扫描
                </el-button>
                <el-button
                  type="text"
                  size="small"
                >
                  退料
                </el-button>
                <el-button
                  type="text"
                  size="small"
                  style="color: #f56c6c"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>

    <div class="chartBox chartBox4">
      <div class="title">当日产量</div>
      <div class="chart">
        <Chart ref="chart4"></Chart>
      </div>
    </div>

    <div class="bottom">
      <el-row>
        <el-button type="primary">首页</el-button>
        <el-button type="success">键盘</el-button>
        <el-button type="info">最小化</el-button>
        <el-button type="danger">退出</el-button>
      </el-row>
    </div>

    <el-dialog
      title="领料"
      :visible.sync="dialogVisible"
      width="40%">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="生产计划">
          <el-input v-model="form.planCode"></el-input>
        </el-form-item>
        <el-form-item label="成品" v-show="false">
          <el-input v-model="form.productId"></el-input>
        </el-form-item>
        <el-form-item label="领料类型" v-show="false">
          <el-select v-model="form.taskType" placeholder="请选择领料类型">
            <el-option label="类型一" value="shanghai"></el-option>
            <el-option label="类型二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="领料仓库" >
          <el-select v-model="form.warehouseId" placeholder="请选择领料仓库" @change="form.wmsRawOutstockDetailList =[]">
            <el-option v-for="item in warehouseList" :key="item.warehouseId" :label="item.warehouseName" :value="item.warehouseId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="领料原因">
          <el-input type="textarea" v-model="form.applyReason"></el-input>
        </el-form-item>
      </el-form>
      <el-table
        :data="form.wmsRawOutstockDetailList"
        style="width: 100%"
        max-height="19.13vw"
        :cell-style="{textAlign:'center'}"
        :header-cell-style="{textAlign:'center'}"
      >
        <el-table-column
          label="物料编号"
          prop="materialId"
        >
        </el-table-column>
        <el-table-column
          prop="materialName"
          label="物料名称"
        >
        </el-table-column>
        <el-table-column
          prop="planAmount"
          label="领取数量"
          width="120"
        >
          <template slot-scope="scope">
            <el-input-number
              style="width: 100%"
              controls-position="right"
              v-model="scope.row.quantityAcquired"
            >
            </el-input-number>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="160"
        >
          <template slot="header" slot-scope="scope">
            <el-input
              v-model="searchMaterialValue"
              size="mini"
              @change="searchMaterial"
              placeholder="输入物料名称搜索"/>
          </template>
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align: center;margin-top: 12px">
        <el-button type="primary" @click="receiveMaterial">申请领料</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Chart from '@/components/board/Chart'
import * as echarts from 'echarts'
import {getMaterialBoms,getWarehouses,applyRawOutstock} from'@/api/board/firstFloor'

const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
export default {
  name: 'Board1',
  components: {
    Chart
  },
  data() {
    return {
      searchMaterialValue:'',
      warehouseList:[],
      form: {
        warehouseId: '',
        planCode: '',
        applyReason: '',
        productId:''||2,
        planDetailCode:''||1,
        taskType: '1',
        wmsRawOutstockDetailList: []
      },
      form2: {
        materialId: '',
        materialName: '',
        planAmount: '',
        quantityAcquired:0,
      },
      dialogVisible: false,
      addDialogVisible: false,
      tableData: [
        {
          workOrderNumber: '202401221413',
          plan: '1000',
          practical: '800',
          difference: '200',
          deliveryTime: '2024-01-01',
        },
        {
          workOrderNumber: '202401221413',
          plan: '1000',
          practical: '800',
          difference: '200',
          deliveryTime: '2024-01-01',
        },
        {
          workOrderNumber: '202401221413',
          plan: '1000',
          practical: '800',
          difference: '200',
          deliveryTime: '2024-01-01',
        }
      ],
      tableData1: [
        {
          workOrderNumber: '202401221413',
          planNumber: '202401221413-1',
          startTime: '2024-01-01',
        },
        {
          workOrderNumber: '202401221413',
          planNumber: '202401221413-2',
          startTime: '2024-01-01',
        },
        {
          workOrderNumber: '202401221413',
          planNumber: '202401221413-3',
          startTime: '2024-01-01',
        },
      ],
    }
  },
  mounted() {
    this.$refs.chart2.setData({
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        }
      },
      grid: {
        left: '0',
        right: '4%',
        bottom: '0',
        top: 20,
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: [1, 2, 3, 4, 5, 6],
        axisLine: {
          lineStyle: {
            color: 'white'
          }
        },
        axisLabel: {
          // interval: 0,
          // rotate: 40,
          textStyle: {
            fontFamily: 'Microsoft YaHei'
          }
        }
      },

      yAxis: {
        type: 'value',
        axisLine: {
          show: false,
          lineStyle: {
            color: 'white'
          }
        },
        splitLine: {
          show: false
        },
        axisLabel: {}
      },
      series: [
        {
          name: '数量',
          label: {
            normal: {
              show: true,
              position: 'top',
              textStyle: {
                color: '#a8aab0',
                fontStyle: 'normal',
                fontFamily: '微软雅黑',
                fontSize: 0.75 * vw
              }
            }
          },
          type: 'bar',
          barWidth: '30%',
          barMaxWidth: 50,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#39ffff'
                },
                {
                  offset: 1,
                  color: '#5affa6'
                }
              ])
            }
          },
          data: [1, 2, 3, 4, 5, 6]
        }
      ]
    })
    this.$refs.chart4.setData({
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        }
      },
      grid: {
        left: '0',
        right: '4%',
        bottom: '0',
        top: 20,
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: [1, 2, 3, 4, 5, 6],
        axisLine: {
          lineStyle: {
            color: 'white'
          }
        },
        axisLabel: {
          // interval: 0,
          // rotate: 40,
          textStyle: {
            fontFamily: 'Microsoft YaHei'
          }
        }
      },

      yAxis: {
        type: 'value',
        axisLine: {
          show: false,
          lineStyle: {
            color: 'white'
          }
        },
        splitLine: {
          show: false
        },
        axisLabel: {}
      },
      series: [
        {
          name: '数量',
          label: {
            normal: {
              show: true,
              position: 'top',
              textStyle: {
                color: '#a8aab0',
                fontStyle: 'normal',
                fontFamily: '微软雅黑',
                fontSize: 0.75 * vw
              }
            }
          },
          type: 'bar',
          barWidth: '30%',
          barMaxWidth: 50,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#39ffff'
                },
                {
                  offset: 1,
                  color: '#5affa6'
                }
              ])
            }
          },
          data: [1, 2, 3, 4, 5, 6]
        }
      ]
    })
  },
  methods: {
    getMaterials(val) {
      this.searchMaterialValue = ''
      this.dialogVisible = true
      this.form = {
        warehouseId: '',
        planCode: val.row.planNumber,
        productId:''||2,
        planDetailCode:''||1,
        applyReason: '',
        taskType: '1',
        wmsRawOutstockDetailList: []
      }
      getWarehouses({
        warehouseFloor:1
      }).then(e=>{
        this.warehouseList = e.data
        this.form.warehouseId = e.data[0]?.warehouseId
      })
      getMaterialBoms({
        ancestors:1,
      }).then(e=>{
        this.form.wmsRawOutstockDetailList = e.data.map(r=>{
          return {
            materialId:r.materialId,
            materialName:r.materialName,
            planAmount:0,
          }
        })
      })
    },
    addMaterialRequisition() {
      this.addDialogVisible = false
      this.form.wmsRawOutstockDetailList.push(this.form2)
    },
    receiveMaterial() {
      applyRawOutstock(this.form).then(e=>{
        console.log(e)
        if(e.code === 200){
          this.dialogVisible = false
          this.$message({
            message: '领料完成',
            type: 'success'
          });
        }
      })
    },
    searchMaterial(val){
      console.log(val)
      getMaterialBoms({
        ancestors:1,
        materialName:val
      }).then(e=>{
        this.form.wmsRawOutstockDetailList = e.data.map(r=>{
          return {
            materialId:r.materialId,
            materialName:r.materialName,
            planAmount:0,
          }
        })
      })
    }
  }
}
</script>
<style lang="less" scoped>

.app-container {
  background-image: url("../../../assets/board/bg.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.headTitle {
  position: absolute;
  top: 5%;
  left: 50%;
  transform: translate(-50%, -100%);
  font-size: 1.5vw;
  color: #d6eaed;
  letter-spacing: 10px;
}

.el-table {
  background-color: #fff0;
}

.whiteTable {
  /deep/ .el-table .el-table__header-wrapper th {
    background-color: #fff0;
  }

  /deep/ .el-table tr {
    background-color: #fff0;
  }

  /deep/ .el-table .cell {
    color: #fff
  }

  /deep/ .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
    background-color: #fff0;
  }
}

.chartBox {
  background-image: url("../../../assets/board/box.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: absolute;
  width: 46%;
  height: 23.34vw;

  .title {
    position: absolute;
    top: 8%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.2vw;
    color: #ccc;
  }

  .chart {
    position: absolute;
    top: 16%;
    left: 1%;
    width: 98%;
    height: 82%;
  }
}

.chartBox1 {
  top: 10%;
  left: 2%;
}

.chartBox2 {
  top: 10%;
  right: 2%;
}

.chartBox3 {
  top: 53%;
  left: 2%;
}

.chartBox4 {
  top: 53%;
  right: 2%;
}

.bottom {
  position: absolute;
  bottom: 1.5%;
  left: 2%;
}
</style>
