<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
            :cell-style="{textAlign:'center'}"
            :data="tableData"
            :header-cell-style="{textAlign:'center'}"
            :max-height="19.13 * vw"
            style="width: 100%"
          >
            <el-table-column
              label="序号"
              type="index"
              width="50"
            >
            </el-table-column>
            <el-table-column
              label="工单编号"
              prop="planCode"
            >
            </el-table-column>
            <el-table-column
              label="物料名称"
              prop="materialName"
              width="100"
            >
            </el-table-column>
            <el-table-column
              label="计划"
              prop="planAmount"
              width="100"
            >
            </el-table-column>
            <el-table-column
              label="实际"
              prop="completeAmount"
              width="100"
            >
            </el-table-column>
            <el-table-column
              label="差异"
              prop="difference"
              width="100"
            >
              <template slot-scope="scope">
                {{ scope.row.planAmount - scope.row.completeAmount }}
              </template>
            </el-table-column>
            <el-table-column
              label="交付时间"
              prop="planDeliveryDate"
              width="150"
            >
            </el-table-column>
            <el-table-column
              label="操作"
              width="120"
            >
              <template slot-scope="scope">
                <el-button
                  size="small"
                  type="text"
                  @click="print(scope.row)"
                >
                  条码打印
                </el-button>
                <el-button
                  size="small"
                  type="text"
                  @click="getDetail(scope)"
                >
                  明细
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <div>
      <div class="roundBorder" style="top: 32%;left: 1.2%;">
        <el-button :disabled="nowNum1 <= 1" circle icon="el-icon-back" size="mini" @click="pre1"></el-button>
      </div>
      <div class="roundBorder" style="top: 32%;left: 49%;">
        <el-button :disabled="nowNum1 >= totalNum1" circle icon="el-icon-right" size="mini" @click="next1"></el-button>
      </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
            :cell-style="{textAlign:'center'}"
            :data="tableData1"
            :header-cell-style="{textAlign:'center'}"
            :max-height="19.13 * vw"
            style="width: 100%"

          >
            <el-table-column
              label="序号"
              type="index"
              width="50"
            >
            </el-table-column>
            <el-table-column
              label="工单编号"
              prop="planCode"
              width="80"
            >
            </el-table-column>
            <el-table-column
              label="明细编号"
              prop="planDetailCode"
            >
            </el-table-column>
            <el-table-column
              label="开始时间"
              prop="realBeginTime"
              width="120"
            >
            </el-table-column>
            <el-table-column
              label="结束时间"
              prop="realEndTime"
              width="120"
            >
            </el-table-column>
            <el-table-column
              label="状态"
              prop="createTime"
              width="80"
            >
              <template slot-scope="scope">
                <dict-tag :options="dict.type.mes_plan_detail_status" :value="scope.row.planDetailStatus"/>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              width="160"
            >
              <template slot-scope="scope">
                <el-button
                  v-if="scope.row.planDetailStatus !== '3' && scope.row.planDetailStatus !== '9'"
                  size="small"
                  type="text"
                  @click="planExecute(scope.row)"
                >
                  {{ scope.row.planDetailStatus === '1' ? '开始' : '完成' }}
                </el-button>
                <el-button
                  v-if="scope.row.planDetailStatus !== '3' && scope.row.planDetailStatus !== '9'"
                  size="small"
                  type="text"
                  @click="getMaterials(scope) "
                >
                  领料
                </el-button>
                <el-button
                  @click="handleMaterialConfirmForm(scope)"
                  size="small"
                  type="text"
                >
                  扫描
                </el-button>
                <el-button
                  size="small"
                  type="text"
                  @click="returnMaterial(scope)"
                >
                  退料
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <div>
      <div class="roundBorder" style="top: 72%;left: 1.2%;">
        <el-button :disabled="nowNum2 <= 1" circle icon="el-icon-back" size="mini" @click="pre2"></el-button>
      </div>
      <div class="roundBorder" style="top: 72%;left: 49%;">
        <el-button :disabled="nowNum2 >= totalNum2" circle icon="el-icon-right" size="mini" @click="next2"></el-button>
      </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" @click="handleProductInstock">成品入库</el-button>
        <!--el-button type="info">最小化</el-button-->
        <el-button type="danger" @click="logout">退出</el-button>
      </el-row>
    </div>

    <el-dialog
      :visible.sync="dialogVisible"
      title="领料"
      width="40%">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="工单编号">
          <el-input v-model="form.planCode" disabled></el-input>
        </el-form-item>
        <el-form-item label="明细编号">
          <el-input v-model="form.planDetailCode" disabled></el-input>
        </el-form-item>
        <el-form-item label="领料仓库">
          <el-select v-model="form.warehouseId" placeholder="请选择领料仓库" @change="warehouseChange">
            <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 v-model="form.applyReason" type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <el-table
        :cell-style="{textAlign:'center'}"
        :data="form.wmsRawOutstockDetailList"
        :header-cell-style="{textAlign:'center'}"
        max-height="19.13vw"
        style="width: 100%"
      >
        <el-table-column
          label="物料编号"
          prop="materialCode"
        >
        </el-table-column>
        <el-table-column
          label="物料名称"
          prop="materialName"
        >
        </el-table-column>
        <el-table-column
          label="可用库存数量"
          prop="availableAmount"
        >
        </el-table-column>
        <el-table-column
          label="占用库存数量"
          prop="unavailableAmount"
        >
        </el-table-column>
        <el-table-column
          label="领取数量"
          prop="planAmount"
          width="120"
        >
          <template slot-scope="scope">
            <el-input-number
              v-model="scope.row.planAmount"
              :min="0"
              controls-position="right"
              style="width: 100%"
            >
            </el-input-number>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="160"
        >
          <template slot="header" slot-scope="scope">
            <el-input
              v-model="searchMaterialValue"
              placeholder="输入物料名称搜索"
              size="mini"
              @change="searchMaterial"/>
          </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>


    <el-dialog :visible.sync="printModel" title="条码打印" width="80%" class="dialog">
      <div style="height: 50vh;">
        <PrintPage :defineData="PrintData" />
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="printModel = false">关闭</el-button>
      </div>
    </el-dialog>



    <el-dialog
      :visible.sync="productInstockVisible"
      title="成品入库"
      width="40%">
      <el-form ref="productInstockForm" :model="productInstockForm" :rules="productInstockRules" label-width="80px">
        <el-form-item label="成品条码" prop="materialBarcode">
          <el-input v-model="productInstockForm.materialBarcode"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitProductInstock">确 定</el-button>
        <el-button @click="cancelProductInstock">取 消</el-button>
      </div>
    </el-dialog>


    <el-dialog
      :visible.sync="materialConfirmVisible"
      title="确认物料使用"
      width="40%">
      <el-form ref="materialConfirmForm" :model="materialConfirmForm" :rules="materialConfirmRules" label-width="80px">
        <el-form-item label="计划ID" prop="planId" v-if="false">
          <el-input v-model="materialConfirmForm.planId"></el-input>
        </el-form-item>
        <el-form-item label="明细ID" prop="planDetailId" v-if="false">
          <el-input v-model="materialConfirmForm.planDetailId"></el-input>
        </el-form-item>
        <el-form-item label="物料条码" prop="materialBarcode">
          <el-input v-model="materialConfirmForm.materialBarcode"></el-input>
        </el-form-item>
        <el-form-item label="数量" prop="checkAmount">
          <el-input v-model="materialConfirmForm.checkAmount"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitMaterialConfirm">确 定</el-button>
        <el-button @click="cancelMaterialConfirm">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="returnModelVisible" title="退料" width="25%">
      <el-form ref="returnModelForm" :model="returnModelForm" label-width="80px" :rules="returnModelFormRules">
        <el-form-item label="计划编号" >
          <el-input v-model="returnModelForm.planCode" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="明细编号" >
          <el-input v-model="returnModelForm.planDetailCode" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="成品" >
          <el-input v-model="returnModelForm.materialName" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="物料条码" >
          <el-input placeholder="请输入内容" v-model="returnModelForm.materialBarcode" class="input-with-select" @blur="setReturnModelForm">
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-form-item>
        <el-form-item label="仓库" >
          <el-select v-model="returnModelForm.warehouseId" placeholder="请选择仓库" :disabled="!returnModelForm.materialBarcode">
            <el-option :label="i.label" :key="i.value" :value="i.value" v-for="i in WarehousesList"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数量" >
          <el-input-number v-model="returnModelForm.planAmount" controls-position="right"  :min="1" ></el-input-number>
        </el-form-item>
        <el-form-item label="退库类型" prop="taskType">
          <el-select v-model="returnModelForm.taskType" placeholder="请选择退库类型">
            <el-option :label="i.label" :key="i.value" :value="i.value" v-for="i in dict.type.wms_raw_return_task_type"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="申请原因" >
          <el-input type="textarea" v-model="returnModelForm.applyReason" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="returnModelVisible = false">取 消</el-button>
          <el-button type="primary" @click="returnModelConfirm">退 库</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>
</template>

<script>
import Chart from '@/components/board/Chart'
import PrintPage from '@/views/mes/barcode/endProductIndex'
import * as echarts from 'echarts'
import {getWarehouses, applyRawOutstock} from '@/api/board/firstFloor'
import {
  completeProductPlanDetail,
  getProductPlanDetails,
  getProductPlans, getStockTotal,
  insertProductPlanDetails,
  startProductPlanDetail,
  fourthFloorProduceInstock,
  scanMaterial2Confirm, applyRawReturn
} from "@/api/board";

const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
export default {
  name: 'Board1',
  dicts: ['mes_plan_detail_status','wms_raw_return_task_type'],
  components: {
    Chart,
    PrintPage
  },
  data() {
    return {
      returnModelVisible: false,
      returnModelForm:{},
      WarehousesList:[],
      PrintData:{},
      printModel: false,
      nowNum1: 1,
      totalNum1: 0,
      nowNum2: 1,
      totalNum2: 0,
      planId: null,
      materialBomId: null,
      vw: (document.documentElement.clientWidth || document.body.clientWidth) / 100,
      searchMaterialValue: '',
      warehouseList: [],
      form: {},
      dialogVisible: false,
      tableData: [],
      tableData1: [],

      productInstockVisible: false,
      productInstockForm: {
        materialBarcode: null
      },
      productInstockRules: {
        materialBarcode: [
          { required: true, message: "成品条码不能为空", trigger: "blur" }
        ],
      },

      materialConfirmVisible: false,
      materialConfirmForm: {
        materialBarcode: null,
        planId: null,
        planDetailId:null,
        checkAmount:null
      },
      materialConfirmRules: {
        materialBarcode: [
          { required: true, message: "物料条码不能为空", trigger: "blur" }
        ],
        checkAmount: [
          { required: true, message: "数量不能为空", trigger: "blur" }
        ],
      },

      returnModelFormRules: {
        taskType: [
          { required: true, message: '请选择退库类型', trigger: 'change' }
        ],
      },
    }
  },
  mounted() {
    setInterval(() => {
      this.$notify.info({
        title: '通知',
        message: '通知公告',
        position: 'bottom-right',
        duration: 0
      });
    }, 60 * 1000)
    getProductPlans({pageNum: 1, pageSize: 5}).then(e => {
      this.tableData = e.rows
      this.totalNum1 = Math.ceil(e.total / 5)
      this.materialBomId = e.rows?.[0]?.materialBomId
      getProductPlanDetails({pageNum: 1, pageSize: 5, planId: e.rows?.[0]?.planId}).then(res => {
        this.tableData1 = res.rows
        this.totalNum2 = Math.ceil(res.total / 5)
      })
    })
    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: {

    async logout() {
      this.$confirm('确定注销并退出系统吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('LogOut').then(() => {
          location.href = '/login?isStationId=true';
        })
      }).catch(() => {});
    },
    next1() {
      this.nowNum1 += 1
      getProductPlans({pageNum: this.nowNum1, pageSize: 5}).then(e => {
        this.tableData = e.rows
        this.totalNum1 = Math.ceil(e.total / 5)
      })
    },
    pre1() {
      this.nowNum1 -= 1
      getProductPlans({pageNum: this.nowNum1, pageSize: 5}).then(e => {
        this.tableData = e.rows
        this.totalNum1 = Math.ceil(e.total / 5)
      })
    },
    next2() {
      this.nowNum2 += 1
      getProductPlanDetails({pageNum: this.nowNum2, pageSize: 5, planId: this.planId}).then(res => {
        this.tableData1 = res.rows
        this.totalNum2 = Math.ceil(res.total / 5)
      })
    },
    pre2() {
      this.nowNum2 -= 1
      getProductPlanDetails({pageNum: this.nowNum2, pageSize: 5, planId: this.planId}).then(res => {
        this.tableData1 = res.rows
        this.totalNum2 = Math.ceil(res.total / 5)
      })
    },
    // 开始/继续计划
    planExecute(e) {
      if (e.planDetailStatus === '1') {
        this.$confirm('是否开始计划', '确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'success'
        }).then(() => {
          startProductPlanDetail({
            planDetailId: e.planDetailId
          })
            .finally(() => {
              this.getDetail({row: {planId: e.planId}})
              getProductPlans({pageNum: this.nowNum1, pageSize: 5}).then(e => {
                this.tableData = e.rows
                this.totalNum1 = Math.ceil(e.total / 5)
              })
            })
        })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消'
            });
          })
      }
      if (e.planDetailStatus === '2') {
        this.$confirm('是否完成计划', '确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'success'
        }).then(() => {
          completeProductPlanDetail({
            planDetailId: e.planDetailId
          })
            .finally(() => {
              this.getDetail({row: {planId: e.planId}})
              getProductPlans({pageNum: this.nowNum1, pageSize: 5}).then(e => {
                this.tableData = e.rows
                this.totalNum1 = Math.ceil(e.total / 5)
              })
            })
        })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消'
            });
          })
      }
    },
    // 生成/获取明细
    getDetail(e) {
      this.planId = e.row.planId
      this.materialBomId = e.row.materialBomId
      this.nowNum2 = 1
      getProductPlanDetails({pageNum: 1, pageSize: 5, planId: e.row.planId}).then(res => {
        if (res.rows.length === 0) {
          this.$confirm('是否生成计划明细', '确认', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'success'
          }).then(() => {
            insertProductPlanDetails({
              "planId": e.row.planId,
            }).then(val => {
              getProductPlanDetails({pageNum: this.nowNum2, pageSize: 5, planId: e.row.planId}).then(res => {
                this.tableData1 = res.rows
                this.totalNum2 = Math.ceil(res.total / 5)
              })
              this.$message({
                type: 'info',
                message: `生成完成`
              });
            })
          })
            .catch(() => {
              this.$message({
                type: 'info',
                message: '已取消'
              });
            })
        } else {
          this.tableData1 = res.rows
          this.totalNum2 = Math.ceil(res.total / 5)
        }

      })

    },
    // 领料页面
    getMaterials(val) {
      this.searchMaterialValue = ''
      this.dialogVisible = true
      this.form = {
        warehouseId: '',
        planId: val.row.planId,
        planCode: val.row.planCode,
        planDetailCode: val.row.planDetailCode,
        applyReason: '',
        taskType: '1',
        wmsRawOutstockDetailList: []
      }
      // 获取仓库信息
      getWarehouses({"warehouseFloor": 1}).then(e => {
        this.warehouseList = e.data
        this.form.warehouseId = e.data[0]?.warehouseId
        this.searchMaterial("");
      })

    },


    // 申请领料
    receiveMaterial() {
      applyRawOutstock(this.form).then(e => {
        if (e.code === 200) {
          this.dialogVisible = false
          this.$message({
            message: '领料完成',
            type: 'success'
          });
        }
      })
    },
    // 物料搜索
    searchMaterial(val) {
      getStockTotal({
        warehouseId: this.form.warehouseId,
        materialName: val
      }).then(e => {
        this.form.wmsRawOutstockDetailList = e.data.map(r => {
          return {
            materialId: r.materialId,
            materialCode: r.materialCode,
            materialName: r.materialName,
            availableAmount: r.totalAmount - r.occupyAmount - r.frozenAmount,
            unavailableAmount: r.occupyAmount + r.frozenAmount,
            planAmount: r.planAmount
          }
        })
      })
    },

    warehouseChange(warehouseId) {
      this.form.wmsRawOutstockDetailList = [];
      this.form.warehouseId = warehouseId;
      this.getStockTotal();
    },
    print(val) {
      console.log(val)
      this.PrintData = val
      this.printModel = true
    },


    // 表单重置
    resetProductInstock() {
      this.productInstockForm = {
        materialBarcode: null
      };
      this.resetForm("productInstockForm");
    },

    /** 成品入库按钮操作 */
    handleProductInstock() {
      this.resetProductInstock();
      this.productInstockVisible = true;
    },


    submitProductInstock(){
      this.$refs["productInstockForm"].validate(valid => {
        if (valid) {
          fourthFloorProduceInstock(this.productInstockForm).then(response => {
            this.$modal.msgSuccess("入库成功");
            this.cancelProductInstock();
          });
        }
      });
    },

    cancelProductInstock(){
      this.productInstockVisible = false;
      this.resetProductInstock();
    },




    // 表单重置
    resetMaterialConfirm() {
      this.materialConfirmForm = {
        materialBarcode: null,
        planId: null,
        planDetailId:null,
        checkAmount:null
      };
      this.resetForm("materialConfirmForm");
    },

    /** 成品入库按钮操作 */
    handleMaterialConfirmForm(scope) {
      this.materialConfirmForm = {
        materialBarcode: null,
        planId: scope.row.planId,
        planDetailId:scope.row.planDetailId,
        checkAmount:null
      };
      this.materialConfirmVisible = true;
    },


    submitMaterialConfirm(){
      this.$refs["materialConfirmForm"].validate(valid => {
        if (valid) {
          scanMaterial2Confirm(this.materialConfirmForm).then(response => {
            this.$modal.msgSuccess("确认成功");
            this.cancelMaterialConfirm();
          });
        }
      });
    },

    cancelMaterialConfirm(){
      this.materialConfirmVisible = false;
      this.resetMaterialConfirm();
    },

    returnMaterial(e) {
      this.returnModelVisible = true
      this.returnModelForm = e.row
    },
    setReturnModelForm(){
      getWarehouses({
        warehouseFloor:4,
        materialBarcode:this.returnModelForm.materialBarcode
      }).then(e=>{
        this.WarehousesList = e.data.map(v=>{
          return {
            label:v.warehouseName,
            value:v.warehouseId,
          }
        })
      })
    },
    returnModelConfirm(){
      this.$refs.returnModelForm.validate((valid) => {
        if (valid) {
          let data = {}
          let keys = ['warehouseId','planCode','planDetailCode','productId','materialBarcode','planAmount','taskType','applyReason']
          keys.forEach(v=>{
            data[v] = this.returnModelForm[v]
          })
          applyRawReturn(data).then(v=>{
            if(v.code === 200){
              this.$message({
                message: '退库成功',
                type: 'success'
              });
            }
            this.returnModelVisible = false
          })
        } else {
          return false;
        }
      });
    }
  }
}
</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%;
}

.roundBorder {
  position: absolute;
  transform: translate(-50%, -50%);
}


/deep/ .dialog .app-container {
  background: none !important;
  position: static;
}

/deep/ .dialog .el-dialog__body {
  padding: 0 !important;
}
</style>
