<template>
    <div>
      <el-table
        v-loading="loading"
        :data="itemList"
      >
        <!-- <el-table-column type="selection" width="55" align="center"/> -->
        <el-table-column :label="$t('生产工单')" width="120" prop="workorderCode" />
        <el-table-column :label="$t('外协单号')" width="120" prop="taskCode" />
        <el-table-column :label="$t('物料编码')" width="120" prop="itemCode" />
        <el-table-column :label="$t('物料名称')" width="80" prop="itemName" />
        <el-table-column
          :label="$t('工序名称')"
          align="center"
          prop="processName"
          :show-overflow-tooltip="true"
        />
        <el-table-column :label="$t('委外数量')" align="center" prop="quantity" />
        <template v-if="title === $t('拆分')">
          <el-table-column
            :label="$t('拆分数量')"
            align="center"
            prop="splitQuantity"
            width="180"
          >   <template #header>
                <div>
                  <span class="requred-star">*</span>{{$t('拆分数量')}}</div>
              </template>
              <template slot-scope="scope">
                  <el-input-number
                      style="width: 150px"
                      :step="1"
                      :min="0"
                      v-model="scope.row.splitQuantity"
                  />
              </template>
          </el-table-column>
          <el-table-column
            :label="$t('委外单价')"
            align="center"
            prop="outsourceUnitPrice"
            width="180"
          >   <template slot-scope="scope">
                  <el-input-number
                      style="width: 150px"
                      :step="1"
                      :min="0"
                      v-model="scope.row.outsourceUnitPrice"
                  />
              </template>
          </el-table-column>
          <el-table-column
              :label="$t('委外加工商')"
              align="center"
              prop="scheduleStartDate"
              width="230"
              :show-overflow-tooltip="true"
          >
              <template slot-scope="scope">
                  <el-input v-model="scope.row.vendorName">
                      <el-button slot="append" @click="handleSelectVendor(scope.row)" icon="el-icon-search"></el-button>
                  </el-input>
                  <VendorSelect ref="vendorSelect" @onSelected="onVendorSelected" />
              </template>
          </el-table-column>
        </template>
        <template v-else>
          <el-table-column
            :label="$t('自制数量')"
            align="center"
            prop="toSelfMadeQuantity"
            width="180"
          >   <template slot-scope="scope">
                  <el-input-number
                      style="width: 150px"
                      :step="1"
                      :min="0"
                      v-model="scope.row.toSelfMadeQuantity"
                  />
              </template>
          </el-table-column>
          <el-table-column
            :label="$t('作业单元')"
            align="center"
            prop="workunitName"
            width="200"
          >
            <template #header>
              <div>
                <span class="requred-star">*</span>{{$t('作业单元')}}</div>
            </template>
            <template slot-scope="scope">
              <el-input  v-model="scope.row.workunitName">
                <el-button
                  slot="append"
                  icon="el-icon-search"
                  @click="currentData = scope.row, $refs['WorkunitSelect'].showFlag = true"
                ></el-button>
              </el-input>
              <WorkuintSelect
                ref="WorkunitSelect"
                :workstationId="currentData && currentData.workstationId"
                @onSelected="onWorkunitSelect"
              />
            </template>
          </el-table-column>
        </template>
        
        <el-table-column
            :label="$t('计划开始时间')"
            align="center"
            prop="scheduleStartDate"
            width="230"
            :show-overflow-tooltip="true"
        >
            <template slot-scope="scope">
                <el-date-picker
                    v-model="scope.row.scheduleStartDate"
                    type="datetime"
                    style="width: 100%;"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    format="yyyy-MM-dd HH:mm:ss"
                   
                >
                </el-date-picker>
            </template>
        </el-table-column>
        <el-table-column
            :label="$t('计划结束时间')"
            align="center"
            prop="scheduleEndDate"
            width="230"
        >
            <template slot-scope="scope">
                <el-date-picker
                    v-model="scope.row.scheduleEndDate"
                    type="datetime"
                    style="width: 100%;"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    format="yyyy-MM-dd HH:mm:ss"
                   
                >
                </el-date-picker>
            </template>
        </el-table-column>
      </el-table>
    </div>
</template>

<script>


import VendorSelect from "@/components/vendorSelect/single.vue";
import { outsourceSplit, toSelfMade } from '@/api/mes/pro/scheduleList'
import WorkuintSelect from "./workunitSelectSche.vue";

export default {
  name: "taskList",
  props: ["selections", 'title'],
  components: {VendorSelect, WorkuintSelect},
  data() {
    return {
      showFlag: false,
      // 选中数组
      ids: [],
      selectedRows: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      currentData: null,
      total: 0,
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 物料产品表格数据
      itemList: null,
      loading: false,
    };
  },
  created() {

  },
  mounted() {
    this.getList();
  },
  methods: {
    toOutsource(){
        return new Promise((resolve, reject) => {
            if (this.title === this.$t('拆分')) {
              const list = this.itemList.map(v => {
                  return {
                      "scheduleEndDate": v.scheduleEndDate,
                      "scheduleStartDate": v.scheduleStartDate,
                      "taskWorkunitId": v.taskWorkunitId,
                      "outsourceUnitPrice": v.outsourceUnitPrice,
                      "vendorId": v.vendorId,
                      "splitQuantity": v.splitQuantity,
                      "vendorName": v.vendorName
                  }
              })
              outsourceSplit(list).then(res => {
                  if(res.code === 200) {
                      this.$modal.msgSuccess(this.$t('拆分成功'))
                      resolve()
                  } else {
                      this.$modal.msgError(res.msg || this.$t('拆分失败'))
                      reject()
                  }
              })
            } else {
              const list = []
              for(let i=0;i<this.itemList.length;i++){
                  const v = this.itemList[i]
                  if (!v.workunitId) {
                    this.$modal.msgError(this.$t('作业单元必填'))
                    reject()
                    return
                  }
                  list.push({
                      "scheduleEndDate": v.scheduleEndDate,
                      "scheduleStartDate": v.scheduleStartDate,
                      "taskWorkunitId": v.taskWorkunitId,
                      "toSelfMadeQuantity": v.toSelfMadeQuantity,
                      "workunitCode": v.workunitCode,
                      "workunitId": v.workunitId
                  })
              }
              toSelfMade(list).then(res => {
                  if(res.code === 200) {
                      this.$modal.msgSuccess(this.$t('转自制成功'))
                      resolve()
                  } else {
                      this.$modal.msgError(res.msg || this.$t('转自制失败'))
                      reject()
                  }
              })
            }
        })
        
    },
    async onWorkunitSelect(obj) {
      if (obj != undefined && obj != null) {
        this.currentData.workunitId = obj.workunitId;
        this.currentData.workunitCode = obj.workunitCode
        this.currentData.workunitName = obj.workunitName;
      }
      this.$refs.WorkunitSelect.showFlag = false;
    },
    handleSelectVendor(row) {
        this.currentData = row
        this.$refs.vendorSelect.showFlag = true;
    },
    //供应商选择弹出框
    onVendorSelected(obj) {
      if (obj != undefined && obj != null) {
        this.currentData.vendorId = obj.vendorId;
        this.currentData.vendorName = obj.vendorName;
      }
      this.$refs.vendorSelect.showFlag = false;
    },
    /** 查询物料编码列表 */
    getList() {
        const itemList = JSON.parse(JSON.stringify(this.selections));
        itemList.forEach(element => {
          if(this.title === this.$t('拆分')) {
            element['splitQuantity'] = 0
          } else {
            element['toSelfMadeQuantity'] = element.quantity
            element['workunitId'] = null;
            element['workunitCode'] = null
            element['workunitName'] = null;
          }
        });
        this.itemList = itemList
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams.statusArr = ["ORCHESTRATED"]
      this.handleQuery();
    },
     // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.workorderId);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
      this.selectedRows = selection;
    },
  },
};
</script>
<style lang="scss" scoped>
.requred-star {
  color: red;
  font-size: 20px;
  vertical-align: text-top;
}
</style>