<template>
  <div>
    <el-card>
      <div class="search-container">
        <span class="show-text">生产订单:</span>
        <el-input v-model="orderNo" placeholder="请输入生产订单" clearable style="width: 150px;margin-right: 10px" />
        <span class="show-text">销售订单:</span>
        <el-input v-model="contractNo" placeholder="请输入销售订单" clearable style="width: 150px;margin-right: 10px" />
        <span class="show-text">物料编码:</span>
        <el-input v-model="productCode" placeholder="请输入物料编码" clearable style="width: 150px;margin-right: 10px" />
        <span class="show-text">物料名称:</span>
        <el-input v-model="productName" placeholder="请输入物料名称" clearable style="width: 150px;margin-right: 10px" />

        <br>
        <br>
        <span class="show-text">任务状态:</span>
        <el-select v-model="taskstatus" placeholder="请选择">
          <el-option
            key='0'
            label="全部"
            value="0">
          </el-option>
          <el-option
            key='1'
            label="未下发"
            value="1">
          </el-option>
          <el-option
            key='2'
            label="已下发"
            value="2">
          </el-option>
        </el-select>
        <span class="show-text">属性:</span>
        <el-select v-model="orderstatus" placeholder="请选择">
          <el-option
            key='0'
            label="全部"
            value="0">
          </el-option>
          <el-option
            key='1'
            label="机加件"
            value="1">
          </el-option>
          <el-option
            key='2'
            label="装配件"
            value="2">
          </el-option>
        </el-select>
        <span class="show-text">要求完工日期:</span>
        <el-date-picker
          v-model="completionTime"
          :clearable="false"
          end-placeholder="结束时间"
          format="yyyy-MM-dd"
          popper-class="virtual-cell-time-picker"
          range-separator="-"
          start-placeholder="开始时间"
          style="width: 280px;vertical-align: top"
          type="datetimerange"
          value-format="yyyy-MM-dd" />
        <el-button :disabled="loading" icon="el-icon-search" plain type="primary" @click="searchTable()">查询</el-button>
        <el-button type="warning" size="mini" style="width: 120px;"  @click="AllworkTask">批量生成任务</el-button>
      </div>
      <el-table
        v-loading="loading"
        :data="tableData"
        :height="'75vh'"
        border
        element-loading-background="rgba(0, 0, 0, 0.2)"
        element-loading-spinner="el-icon-loading"
        highlight-current-row
        size="mini"
        style="margin-top: 20px;"
        tooltip-effect="dark"
        ref="multipleTable"
        @row-click="handleRowClick"
        @selection-change="handleSelectionChange"
        >
        <el-table-column align="center" type="selection"  width="50" fixed />
        <el-table-column align="center" label="序号" type="index" width="50"  />
        <el-table-column align="center" prop="合同号" label="销售订单" width="70" />
        <el-table-column align="center" prop="订单编号" label="生产订单" width="90" />
        <el-table-column align="center" prop="物料编号" label="物料编码" width="220" />
        <el-table-column align="center" prop="物料描述" label="物料名称" width="190" />
        <el-table-column align="center" prop="自制件属性" label="属性" width="100" />
        <el-table-column align="center" prop="计划数量" label="计划数" width="70" />
        <el-table-column align="center" label="下达日期" width="170">
          <template slot-scope="scope">
            {{ scope.row.下达日期 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="计划开始" width="170">
          <template slot-scope="scope">
            {{ scope.row.计划开始 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="计划完成" width="170">
          <template slot-scope="scope">
            {{ scope.row.计划完成 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="加急状态" width="80">
          <template slot-scope="scope">
            <div class="status-light" :class="scope.row.加急状态 == 1 ? 'status-light-green' : 'status-light-gray'" />
          </template>
        </el-table-column>
        <el-table-column align="center" label="标准工艺" width="80">
          <template slot-scope="scope">
            <div class="status-light" :class="scope.row.标准工艺 == 1 ? 'status-light-green' : 'status-light-gray'" />
          </template>
        </el-table-column>
        <el-table-column align="center" label="生产工艺" width="80">
          <template slot-scope="scope">
            <div class="status-light" :class="scope.row.生产工艺 == 1 ? 'status-light-green' : 'status-light-gray'" />
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="220">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="editProcess(scope.row)">查看生产工艺</el-button>
            <el-button type="text" size="mini" @click="ViewProcess(scope.row)">查看标准工艺</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog :visible.sync="dialogcasual" title="生产工艺详情" center style="min-height: 300px;" width="1300px" border>
        <el-card style="height: 550px">
          <el-row>
            <div style="display: flex; height: 550px;">
              <el-col >
                <div style="margin-top: 10px">
                  <el-table v-loading="loading"  :data="tableData5" :header-cell-style="{background: '#19466E',color: 'white'}" style="margin-top: 10px;width:100%" height="600">
                    <el-table-column  width="50px" label="序号" align="center" prop="工艺顺序" show-overflow-tooltip/>
                    <el-table-column width="130px" label="工序名称" align="center" prop="工艺名称" show-overflow-tooltip/>
                    <el-table-column width="330px" label="工序说明" align="center" prop="工艺要求" show-overflow-tooltip/>
                    <el-table-column label="准备工时" align="center" prop="准备工时" show-overflow-tooltip/>
                    <el-table-column label="标准工时" align="center" prop="标准工时" show-overflow-tooltip/>
                    <el-table-column label="工时合计" align="center" prop="工时合计" show-overflow-tooltip/>
                    <el-table-column  label="工装量具" align="center" width="150px">
                        <template slot-scope="scope">
                          <el-select  v-model="scope.row.工卡量具" multiple placeholder="工装量具" size="small" disabled filterable clearable >
                            <el-option
                              v-for="item in basedatagj"
                              :key="item.id"
                              :label="item.name"
                              :value="item.id">
                            </el-option>
                          </el-select>
                        </template>
                      </el-table-column>
                      <el-table-column label="指定机床" align="center" width="150px" >
                        <template slot-scope="scope">
                          <el-select  v-model="scope.row.指定机床" multiple placeholder="指定机床" size="small" disabled filterable clearable >
                            <el-option
                              v-for="item in basedatajc"
                              :key="item.id"
                              :label="item.name"
                              :value="item.id">
                            </el-option>
                          </el-select>
                        </template>
                      </el-table-column>
                      <el-table-column label="车间" align="center" width="150px">
                        <template slot-scope="scope">
                          <el-select  v-model="scope.row.车间" placeholder="车间" size="small" disabled filterable clearable >
                            <el-option
                              v-for="item in basedatacj"
                              :key="item.id"
                              :label="item.name"
                              :value="item.name">
                            </el-option>
                          </el-select>
                        </template>
                      </el-table-column>
                    <el-table-column label="备注" align="center" prop="备注" width="200px"/>
                  </el-table>
                </div>
              </el-col>
            </div>
          </el-row>
        </el-card>
      </el-dialog>
      <el-dialog :visible.sync="dialogprocess" title="标准工艺详情" center style="min-height: 300px;" width="1300px" border>
        <el-card style="height: 550px">
          <el-row>
            <div style="display: flex; height: 550px;">
              <el-col >
                <div style="margin-top: 10px">
                  <el-table v-loading="loading"  :data="tableData6" :header-cell-style="{background: '#19466E',color: 'white'}" style="margin-top: 10px;width:100%" height="600">
                    <el-table-column width="50px" label="序号" align="center" prop="工艺顺序" show-overflow-tooltip/>
                    <el-table-column width="130px" label="工序名称" align="center" prop="工艺名称" show-overflow-tooltip/>
                    <el-table-column width="330px" label="工序说明" align="center" prop="工艺要求" show-overflow-tooltip/>
                    <el-table-column label="准备工时" align="center" prop="准备工时" show-overflow-tooltip/>
                    <el-table-column label="标准工时" align="center" prop="标准工时" show-overflow-tooltip/>
                    <el-table-column label="工时合计" align="center" prop="工时合计" show-overflow-tooltip/>
                    <el-table-column  label="工装量具" align="center" width="150px">
                        <template slot-scope="scope">
                          <el-select  v-model="scope.row.工卡量具" multiple placeholder="工装量具" size="small" disabled filterable clearable >
                            <el-option
                              v-for="item in basedatagj"
                              :key="item.id"
                              :label="item.name"
                              :value="item.id">
                            </el-option>
                          </el-select>
                        </template>
                      </el-table-column>
                      <el-table-column label="指定机床" align="center" width="150px" >
                        <template slot-scope="scope">
                          <el-select  v-model="scope.row.指定机床" multiple placeholder="指定机床" size="small" disabled filterable clearable >
                            <el-option
                              v-for="item in basedatajc"
                              :key="item.id"
                              :label="item.name"
                              :value="item.id">
                            </el-option>
                          </el-select>
                        </template>
                      </el-table-column>
                      <el-table-column label="车间" align="center" width="150px">
                        <template slot-scope="scope">
                          <el-select  v-model="scope.row.车间" placeholder="车间" size="small" disabled filterable clearable >
                            <el-option
                              v-for="item in basedatacj"
                              :key="item.id"
                              :label="item.name"
                              :value="item.name">
                            </el-option>
                          </el-select>
                        </template>
                      </el-table-column>
                    <el-table-column label="备注" align="center" prop="备注" width="200px"/>
                  </el-table>
                </div>
              </el-col>
            </div>
          </el-row>
        </el-card>
      </el-dialog>
    </el-card>
  </div>
</template>


<script>
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      partTool: '',
      state: 1,
      form:{
        物料编号:'',
      },
      productNameValue: '', // 产品部件名称
      productName: [], // 产品部件名称数组
      partNameValue: '', // 零件名称
      partNameLabel: '', // 零件名称
      partName: [], // 零件名称数组
      partNameValue1: '', // 零件名称
      productValue1: '',
      partName1: [], // 零件名称数组
      partName2: [], // 零件名称数组
      partNameValue2: '', // copy零件名称
      partNameLabel2: '',
      partNameValue3:'',// 零件名称
      partNameValue4:'',// 计划数
      dateRange: '', // 提交日期
      dialogVisible: false,
      dialogVisible1: false,
      dialogFormVisible: false,
      disabled: true,
      checked: false,
      hadFile: [],
      fileList: [],
      hadFile1: [],
      processValue: '',
      dialogName: true,
      showFileList: false,
      action: '',
      product1: [], // 产品名称数组
      loading: false, // 数据加载
      total: 0, // 分页总数
      tableData4: [], // 工艺列表
      tableData3: [], // 零件列表
      filteredTableData4: [], // 过滤后的工艺列表
      processSearchName: '', // 工序搜索框内容
      tableData5: [], // 工艺内容
      tableData6: [],
      pageCurrent: 1, // 分页当前页
      pageSize: 100, // 分页每页显示条数
      orderName: '', // 排序列名
      order: '', // 排序方式
      materialarr:[],
      basedata:[],
      basedatagj:[],
      basedatajc:[],
      basedatacj:[],
      basedatavalue1:'',
      basedatavalue2:'',
      basedatavalue3:'',
      dialogcasual:false,
      dialogprocess:false,
      orderNo: '',
      contractNo: '',
      productCode: '',
      productName: '',
      processName: '',
      nature: '',
      productionStatus: '未完成',
      Doing:"",
      Doingoptions:[],
      completionTime: [],
      loading: false,
      tableData: [],
      multipleSelection: [],
      dialogVisible: false,
      submitLoading: false,
      currentRow: {},
      stationOptions: [],
      selectedRow: {},
      editnumber:0,
      submitstatus:0,
      remarkDialogVisible: false,
      remarkSubmitLoading: false,
      tableData6:[],
      taskstatus:'1',
      orderstatus:'1'

    }
  },
  computed: {
    ...mapGetters([
      'id',
      'token'
    ])
  },
  watch: {
    partNameValue(val) {
      if (val) {
        this.disabled = false
      } else {
        this.disabled = true
      }
    }
  },
  created() {
    this.searchTable()
    this.getbasedata()
  },
  methods: {
    getbasedata(){
      var Data = this.CreateData('11', '设备管理_设备信息_查询')
      this.ExecDatabase(Data).then(response => {
        this.basedatagj = []
        this.basedatajc = []
        this.basedatacj = []
        response.data.forEach(element => {
          if(element.设备类型名称 == '量具'){
            this.basedatagj.push({
              name:element.设备名称,
              id:element.设备流水号
            })
          }
          if(element.设备类型名称 == '机床'){
            this.basedatajc.push({
              name:element.设备名称,
              id:element.设备流水号
            })
          }
          if(element.设备类型名称 == '车间'){
            this.basedatacj.push({
              name:element.设备名称,
              id:element.设备流水号
            })
          }
          
        });
        this.basedata = response.data
        this.loading = false
        console.log(this.basedatagj)
      })
    },
    editProcess(row){
      this.dialogcasual = true
      this.loading = true
      this.editProcesssearch(row)
      
    },
    ViewProcess(row){
      this.dialogprocess = true
      this.loading = true
      this.Processsearch(row)
      
    },
    editProcesssearch(row){
      var param = []
      param[0] = ['物料编号',row.物料编号]
      param[1] = ['订单编号',row.订单编号]
      var Data = this.CreateData('11', '工艺管理_生产工艺_查询生产工艺', param)
      this.ExecDatabase(Data).then(response => {
        this.loading = false
        this.tableData5 = response.data
        this.fninsertidx()

      })
    },
    fninsertidx(){
      this.tableData6.forEach(item => {
        if(!item.工艺名称){
          this.insertidx = item.id
        }
        if(item.工卡量具){
          item.工卡量具 = item.工卡量具.split(",").map(Number)
        }
        if(item.指定机床){
          item.指定机床 = item.指定机床.split(",").map(Number)
        }
      });

      this.tableData5.forEach(item => {
        if(!item.工艺名称){
          this.insertidx = item.id
        }
        if(item.工卡量具){
          item.工卡量具 = item.工卡量具.split(",").map(Number)
        }
        if(item.指定机床){
          item.指定机床 = item.指定机床.split(",").map(Number)
        }
      });
    },
    Processsearch(row){
      var param = []
      param[0] = ['物料编号',row.物料编号]
      var Data = this.CreateData('11', '工艺管理_生产工艺_查询标准工艺', param)
      this.ExecDatabase(Data).then(response => {
        this.loading = false
        this.tableData6 = response.data
        this.fninsertidx()
      })
    },
    formatDate(date) {
      if (!date) return ''
      return date.split(' ').length > 1 ? date.split(' ')[0] : date
    },
    searchTable() {
      this.loading = true
      this.tableData = []
      var param = []
      param.push(['订单号', this.orderNo || 0])
      param.push(['合同号', this.contractNo])
      param.push(['产品编码', this.productCode])
      param.push(['产品名称', this.productName])
      param.push(['要求完工日期1', this.completionTime[0]])
      param.push(['要求完工日期2', this.completionTime[1]])
      param.push(['订单状态',this.orderstatus])
      param.push(['任务状态',this.taskstatus])
      var Data = this.CreateData('11', '工艺管理_工艺任务_订单查询', param)
      this.ExecDatabase(Data).then(response => {
        if(response.data.length>0){
          this.loading = false
          this.tableData = response.data
        }
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleRowClick(row){
      this.selectedRow = row
    },
    AllworkTask(){
      console.log(this.multipleSelection)
      const data = this.multipleSelection
      const filtered = data.filter(item => item["任务状态"] == 2);
      console.log(filtered);
      if(filtered.length>0){
        this.$message.error('请勾选未排产的数据')
        return
      }
      if(this.multipleSelection.length>=1){
        var multipleSelection = this.multipleSelection
        var ordernums = []
        var orderitems = []
        multipleSelection.forEach(item => {
            ordernums.push(item.订单编号)
        });
        ordernums = ordernums.join(',')
        console.log(ordernums)
        var param = []
        param.push(['订单编号',ordernums])
        console.log(param)
        var Data = this.CreateData('12', '计划排产_生产订单_订单任务', param)
        this.ExecDatabase(Data).then(response => {
          this.searchTable()
          this.$message.success('操作成功')
        }).catch(() => {
          this.$message.info('操作成功')
        })
      }else{
        this.$message.error('请勾选数据')
      }
    },
    // 过滤工序
    filterProcess() {
      if (this.processSearchName) {
        this.filteredTableData4 = this.tableData4.filter(item => {
          return item.工艺名称.includes(this.processSearchName)
        })
      } else {
        this.filteredTableData4 = this.tableData4
      }
    },
  }
}

</script>

<style scoped>
.status-light {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.status-light-green {
  background-color: #67C23A;
}

.status-light-gray {
  background-color: #909399;
}

::v-deep .el-input--suffix .el-input__inner{
  padding-right: 0;
}
::v-deep .el-input__suffix{
  display: none;
}

.show-text {
  margin-right: 5px;
  line-height: 32px;
}
.show-head {
  margin-right: 5px;
  line-height: 32px;
  font-size: 15px;
}
.el-dialog__body {
  padding: 20px;
}
.el-form-item {
  margin-bottom: 15px;
}
.custom-tabs {
  margin-top: 20px;
}
.schedule-container {
  min-height: 67vh;
}

.schedule-container ::v-deep .fc-daygrid-day-frame {
  padding: 2px;
  min-height: auto;
}

.schedule-container ::v-deep .fc-event {
  font-size: 12px;
  padding: 1px 2px;
  margin-bottom: 1px;
  line-height: 1.4;
}

.schedule-container ::v-deep .fc-daygrid-event-harness {
  margin-bottom: 1px;
}

.schedule-container ::v-deep .fc-daygrid-day-top {
  padding: 2px;
}

.schedule-container ::v-deep .fc-daygrid-more-link {
  font-size: 12px;
  padding: 0 2px;
}

</style>
