<template>
  <div class="mod-config">
    <el-form inline="true" style="margin-top: -25px;" v-model="searchData">
      <el-form :inline="true"  label-position="top" label-width="100px" style="margin-top: 5px;">
        <el-form-item :label="'订单号：'">
          <el-input v-model="searchData.orderNo" style="width: 120px"></el-input>
        </el-form-item>
        <el-form-item :label="'计划开工日期：'" >
          <el-date-picker
            style="width: 130px"
            v-model="searchData.startDate2"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item style="margin-top: 30px;">
          <laber style="margin-left: -9px;font-size: 19px">&#10142</laber>
        </el-form-item>
        <el-form-item style="margin-top: 30px;">
          <el-date-picker
            style="width: 130px"
            v-model="searchData.endDate2"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item :label="'计划完工日期：'">
          <el-date-picker
            style="width: 130px"
            v-model="searchData.startDate3"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item style="margin-top: 30px;">
          <laber style="margin-left: -9px;font-size: 19px">&#10142</laber>
        </el-form-item>
        <el-form-item style="margin-top: 30px;">
          <el-date-picker
            style="width: 130px"
            v-model="searchData.endDate3"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
      </el-form>

      <el-form :inline="true"  label-position="top" label-width="100px" style="margin-top: 5px;">
        <el-form-item :label="'状态：'">
          <el-select filterable v-model="searchData.status" style="width: 120px">
            <el-option label="全部" value=""></el-option>
            <el-option label="可排产" value="('已下达','已发料','已入库','已开工')"></el-option>
            <el-option label="不可排产" value="('已计划','已取消','已关闭')"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="'录入日期：'">
          <el-date-picker
            style="width: 130px"
            v-model="searchData.startDate1"
            value-format="yyyy-MM-dd"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item style="margin-top: 30px;">
          <laber style="margin-left: -9px;font-size: 19px">&#10142</laber>
        </el-form-item>
        <el-form-item style="margin-top: 30px;">
          <el-date-picker
            style="width: 130px"
            v-model="searchData.endDate1"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item :label="'物料编码：'">
          <el-input v-model="searchData.partNo" style="width: 130px"></el-input>
        </el-form-item>
        <el-form-item style="margin-top: 30px">
          <el-button @click="search()" style="margin-left: 24px" type="primary">查询</el-button>
        </el-form-item>
      </el-form>
    </el-form>

    <el-table
      :height="height"
      :data="tableData"
      border
      style="width: 100%"
      @selection-change="selectionChangeHandle">
      <el-table-column
        type="selection"
        :selectable="checkSelections"
        width="44">
      </el-table-column>
<!--      <el-table-column-->
<!--        align="center"-->
<!--        width="40"-->
<!--        type="selection">-->
<!--        <template slot-scope="scope">-->
<!--           <el-checkbox v-if="scope.row.status==1" ></el-checkbox>-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column
        prop="orderNo"
        header-align="center"
        align="left"
        min-width="60"
        label="订单号">
      </el-table-column>
      <el-table-column
        prop="partNo"
        header-align="center"
        align="left"
        min-width="60"
        label="物料编码">
      </el-table-column>
      <el-table-column
        prop="partDescription"
        header-align="center"
        align="left"
        min-width="200"
        label="物料名称">
      </el-table-column>
      <el-table-column
        prop="status"
        header-align="center"
        align="left"
        min-width="40"
        label="状态">
      </el-table-column>
      <el-table-column
        prop="planStartDate"
        header-align="center"
        align="left"
        min-width="50"
        label="计划开工日期">
      </el-table-column>
      <el-table-column
        prop="needDate"
        header-align="center"
        align="left"
        min-width="50"
        label="计划完工日期">
      </el-table-column>
      <el-table-column
        prop="lotSize"
        header-align="center"
        align="right"
        min-width="40"
        label="订单数量">
      </el-table-column>
      <el-table-column
        prop="schedulingSize"
        header-align="center"
        align="right"
        min-width="40"
        label="已排产数量">
      </el-table-column>
      <el-table-column
        prop="enterDate"
        header-align="center"
        align="left"
        min-width="80"
        label="录入时间">
      </el-table-column>
      <el-table-column
        prop="userName"
        header-align="center"
        align="left"
        min-width="40"
        label="录入人">
      </el-table-column>
      <el-table-column
        prop=""
        fixed="right"
        header-align="center"
        align="center"
        min-width="30"
        label="操作">
        <template slot-scope="scope">
          <a  type="text" size="small" @click="openScheduleModel(scope.row)">排产</a>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="排产信息" :visible.sync="schedulingFlag" :close-on-click-modal="false" v-drag width="800px" >
        <el-form :inline="true" label-position="top">
          <el-form-item :label="'订单号：'">
            <el-input v-model="scheduledModelData.orderNo" readonly style="width: 130px"></el-input>
          </el-form-item>
          <el-form-item :label="'计划开工日期：'">
            <el-input v-model="scheduledModelData.planStartDate" readonly style="width: 130px"></el-input>
          </el-form-item>
          <el-form-item :label="'计划完工日期：'">
            <el-input v-model="scheduledModelData.needDate" readonly style="width: 130px"></el-input>
          </el-form-item>
          <el-form-item :label="'已排产数量：'">
            <el-input v-model="scheduledModelData.schedulingSize" readonly style="width: 100px"></el-input>
          </el-form-item>
          <el-form-item :label="'未排产数量：'">
            <el-input v-model="scheduledModelData.unSchedulingSize" readonly style="width: 100px"></el-input>
          </el-form-item>
          <el-button @click="schedulingModal()" type="primary" style="margin-top: 33px;margin-left: 40px;">新增</el-button>
        </el-form>
      <el-table
        :height="300"
        :data="scheduleTableData"
        border
        style="width: 100%">
        <el-table-column
          prop="orderDate"
          header-align="center"
          align="left"
          min-width="50"
          label="计划日期">
        </el-table-column>
        <el-table-column
          prop="shiftdesc"
          header-align="center"
          align="left"
          min-width="40"
          label="班次名称">
        </el-table-column>
        <el-table-column
          prop="orderQty"
          header-align="center"
          align="right"
          min-width="40"
          label="排产数量">
        </el-table-column>
        <el-table-column
          prop="qtyCirculation"
          header-align="center"
          align="right"
          min-width="40"
          label="已流转数">
        </el-table-column>
        <el-table-column
          prop="userName"
          header-align="center"
          align="left"
          min-width="50"
          label="录入人">
        </el-table-column>
        <el-table-column
          prop="enterDate"
          header-align="center"
          align="left"
          min-width="90"
          label="录入日期">
        </el-table-column>
        <el-table-column
          prop=""
          header-align="center"
          align="center"
          min-width="50"
          label="操作">
          <template slot-scope="scope" class="foo_container">
            <a  type="text" size="small" @click="editSchedule(scope.row)">编辑</a>
            <a  type="text" size="small" @click="deleteSchedule(scope.row)">删除</a>
          </template>
        </el-table-column>
      </el-table>
      <el-footer  style="height:40px;margin-top: 20px;text-align:center"  >
          <el-button type="primary" @click="schedulingFlag = false">取消</el-button>
        <!--        <el-button type="primary" :disabled="bannersBut" @click="saveBanners()">确定</el-button>-->
        </el-footer>
    </el-dialog>
    <el-dialog title="维护日计划" :close-on-click-modal="false" v-drag :visible.sync="schedulingModalFlag" width="341px"   >
      <el-form :inline="true" label-position="top" style="margin-left: 7px;margin-top: -5px;">
        <el-form-item :label="'订单号：'">
          <el-input v-model="scheduledingData.orderNo" disabled style="width: 130px"></el-input>
        </el-form-item>
        <el-form-item :label="'计划日期：'">
          <el-date-picker
          style="width: 130px"
          v-model="scheduledingData.orderDate"
          type="date"
          value-format="yyyy-MM-dd"
          :disabled="scheduledingDataFlag1"
          placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item :label="'计划班次：'" >
<!--          <el-input v-model="scheduledingData.shiftId" :disabled="scheduledingDataFlag1" style="width: 130px"></el-input>-->
          <el-select v-model="scheduledingData.shiftId" :disabled="scheduledingDataFlag1" style="width: 130px" placeholder="请选择">
            <el-option
              v-for="(item,index) in selectList"
              :key="index"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="'计划数量：'">
          <el-input v-model="scheduledingData.orderQty"  style="width: 130px"></el-input>
        </el-form-item>
      </el-form>
      <el-footer  style="height:40px;margin-top: 20px;text-align:center"  >
         <el-button type="primary" v-if="scheduledingDataFlag3" @click="planSaveOn()">保存并继续</el-button>
         <el-button type="primary" @click="planSave()">保存</el-button>
          <el-button type="primary" @click="schedulingModalFlag = false">取消</el-button>
        </el-footer>
    </el-dialog>

  </div>


</template>

<script>
  import {
    getShopOrderData,
    getSchedulingSize,
    savePlan,
    getWorkPlanData,
    delPlan,
    getShiftData,
  } from "@/api/prd.js"

  export default {
    name: 'productionDispatch',
    data () {
      return {

        selectList:[],
        //维护日计划界面
        schedulingModalFlag:false,
        scheduleTableData:[],
        scheduledModelData:{
          orderNo:'',
          planStartDate:'',
          needDate:'',
          schedulingSize:'',
          unSchedulingSize:'',
        },
        dataListSelections:[],
        scheduledingData:{
          orderNo:'',
          orderDate:'',
          orderQty:'',
          shiftId:'',
          userName:this.$store.state.user.name,
          lotSize:'',
          planStartDate:'',
          needDate:'',
          site:this.$store.state.user.site,
          productionType:'生产订单',
          planAdd:0,
          partNo:'',
        },
        scheduledingDataFlag1:false,
        scheduledingDataFlag3:true,
        schedulingFlag:false ,
        tableData:[],
        searchData:{
          orderNo:'',
          startDate1: new Date(),
          endDate1: '',
          startDate2: '',
          endDate2: '',
          status: "('已下达','已发料','已入库','已开工')",
          partNo:'' ,
          startDate3: '',
          endDate3: '',
          site:this.$store.state.user.site ,
        },
        // table高度
        height:200,
      }
    },
    mounted() {
      this.$nextTick(()=>{

        this.height = window.innerHeight - 270;
      })
    },
    methods: {
      search () {
        this.getData();
      },
      //维护日计划界面
      schedulingModal () {
        if(this.scheduledModelData.unSchedulingSize==0){
          this.$alert("该日计划已排产完毕无需新增！", '错误', {
            confirmButtonText: '确定',
          });
          return false;
        }
        this.scheduledingDataFlag1 = false;
        this.scheduledingDataFlag3 = true;
        this.scheduledingData.userName = this.$store.state.user.name;
        this.scheduledingData.planStartDate = this.scheduledModelData.planStartDate;
        this.scheduledingData.needDate = this.scheduledModelData.needDate;
        this.scheduledingData.orderNo = this.scheduledModelData.orderNo;
        this.scheduledingData.orderDate = this.scheduledModelData.planStartDate;
        this.scheduledingData.planAdd = 0;
        this.scheduledingData.orderQty = "";
        this.scheduledingData.shiftId = "";
        this.schedulingModalFlag = true;
      },
      // 多选数据
      selectionChangeHandle (val) {
        this.dataListSelections = val;
      },
      //多选框选中触发判断
      checkSelections(row){
        if(row.status=="已计划"||row.status=="已取消"||row.status=="已关闭"){
          return false;
        }
        if(row.schedulingSize>=row.orderQty){
          return false;
        }
        return true;
      },
      //排产信息界面
      openScheduleModel (row) {

        if(row.status=="已计划"||row.status=="已取消"||row.status=="已关闭"){
          this.$alert("该订单状态为"+row.status+"无法排产", '错误', {
            confirmButtonText: '确定',
          });
          return false;
        }
       let list={orderNo:row.orderNo}
        getSchedulingSize(list).then(({data}) => {
          this.scheduledModelData.schedulingSize = data.schedulingSize;
          this.scheduledModelData.unSchedulingSize = row.lotSize - data.schedulingSize;
        })
        this.scheduledingData.lotSize = row.lotSize;
        this.scheduledingData.partNo = row.partNo;
        this.scheduledModelData.needDate = row.needDate;
        this.scheduledModelData.planStartDate = row.planStartDate;
        this.scheduledModelData.orderNo = row.orderNo;
        this.schedulingFlag = true;
        let data1 = {orderNo: row.orderNo}
        getWorkPlanData(data1).then(({data}) => {
          this.scheduleTableData = data.rows
        })
      },

      // 查询
      getData () {


        getShopOrderData(JSON.parse(JSON.stringify(this.searchData))).then(({data}) => {
          this.tableData = data.rows;
        })
      },
      planSave () {

        if (this.scheduledingData.orderDate == "" || null == this.scheduledingData.orderDate) {
          this.$alert("请选择计划日期！", '错误', {
            confirmButtonText: '确定',
          });
          return false;
        }
        if (this.scheduledingData.orderQty == "" || null == this.scheduledingData.orderQty) {
          this.$alert("请输入排产数量！", '错误', {
            confirmButtonText: '确定',
          });
          return false;
        }
        if (this.scheduledingData.orderQty <= 0 ) {
          this.$alert("排产数量必须大于0！", '错误', {
            confirmButtonText: '确定',
          });
          return false;
        }
        if (this.scheduledingData.shiftId == "") {
          this.$alert("请输入排产班次！", '错误', {
            confirmButtonText: '确定',
          });
          return false;
        }

          // this.scheduledingData.orderDate  = this.format(this.scheduledingData.orderDate,'yyyy-MM-dd')


          savePlan(this.scheduledingData).then(({data}) => {
            if (data && data.code === 0) {
              this.scheduledModelData.schedulingSize = data.schedulingSize;
              this.scheduledModelData.unSchedulingSize = this.scheduledingData.lotSize - data.schedulingSize;
              this.schedulingModalFlag = false;
              let data1 = {orderNo: this.scheduledModelData.orderNo}
              getWorkPlanData(data1).then(({data}) => {
                this.scheduleTableData = data.rows
              })
              this.getData()
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,

                onClose: () => {
                }
              })
            } else {
              this.$alert(data.msg, '错误', {
                confirmButtonText: '确定',
              });
            }
          })
      },
      planSaveOn () {
        if (this.scheduledingData.orderDate == "" || null == this.scheduledingData.orderDate) {
          this.$alert("请选择计划日期！", '错误', {
            confirmButtonText: '确定',
          });
          return false;
        }
        if (this.scheduledingData.orderQty == "" || null == this.scheduledingData.orderQty) {
          this.$alert("请输入排产数量！", '错误', {
            confirmButtonText: '确定',
          });
          return false;
        }
        if (this.scheduledingData.shiftId == "") {
          this.$alert("请输入排产班次！", '错误', {
            confirmButtonText: '确定',
          });
          return false;
        }
        if (this.scheduledingData.orderQty <= 0 ) {
          this.$alert("排产数量必须大于0！", '错误', {
            confirmButtonText: '确定',
          });
          return false;
        }

          savePlan(this.scheduledingData).then(({data}) => {
            if (data && data.code === 0) {
              getShiftData().then(({data}) => {
                this.shiftData = data.rows;
              })
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,

                onClose: () => {
                }
              })
            } else {
              this.$alert(data.msg, '错误', {
                confirmButtonText: '确定',
              });
            }
          })
      },
      //修改日计划
      editSchedule (row) {
        this.scheduledingDataFlag1 = true;
        this.scheduledingDataFlag3 = false;
        this.scheduledingData.userName = this.$store.state.user.name;
        this.scheduledingData.planStartDate = this.scheduledModelData.planStartDate;
        this.scheduledingData.needDate = this.scheduledModelData.needDate;
        this.scheduledingData.orderNo = this.scheduledModelData.orderNo;
        this.scheduledingData.orderDate = row.orderDate;
        this.scheduledingData.planAdd = 1;
        this.scheduledingData.orderQty = row.orderQty;
        this.scheduledingData.shiftId = row.shiftId;
        this.schedulingModalFlag = true;
      },
      //刪除
      deleteSchedule (row) {
        let delData = {
          orderNo: row.orderNo,
          orderQty: row.orderQty,
          orderRef1: row.orderRef1,
        }
        this.$confirm(`是否删除此条记录?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delPlan(delData).then(({data}) => {
            if (data && data.code === 0) {
              this.scheduledModelData.schedulingSize = data.schedulingSize;
              this.scheduledModelData.unSchedulingSize = this.scheduledingData.lotSize - data.schedulingSize;
              this.getData();
              let data1 = {orderNo: this.scheduledModelData.orderNo}
              getWorkPlanData(data1).then(({data}) => {
                this.scheduleTableData = data.rows
              })
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                }
              })
            } else {
              this.$alert(data.msg, '错误', {
                confirmButtonText: '确定',
              });
            }
          })
        }).catch(() => {
        })
      },



      getTime(date) {
        if(date==''){
          return ""
        }else{
        let json_date = new Date(date).toJSON();
          return new Date(new Date(json_date) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
        }
      },

      getSelectData(){
        this.selectList=[];
        getShiftData().then(({data}) => {
          let list=data.rows;
          for (let i = 0; i <list.length ; i++) {
            let resultData = {
              value:list[i].id,
              label:list[i].shiftdesc
            }
            this.selectList.push(resultData);
          }
        })
      }
    },
    created() {
      this.getSelectData();
    }
  }
</script>
<style scoped>

</style>
