<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="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" />
        <el-table-column
            :label="$t('委外数量')"
            align="center"
            prop="toOutsourceQuantity"
            width="180"
        >   <template slot-scope="scope">
                <el-input-number
                    style="width: 150px"
                    :step="1"
                    :min="0"
                    v-model="scope.row.toOutsourceQuantity"
                />
            </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>
        <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 { toOutsource } from '@/api/mes/pro/scheduleList'
export default {
  name: "taskList",
  props: ["selections"],
  components: {VendorSelect},
  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) => {
            const list = this.itemList.map(v => {
                return {
                    "scheduleEndDate": v.scheduleEndDate,
                    "scheduleStartDate": v.scheduleStartDate,
                    "taskWorkunitId": v.taskWorkunitId,
                    "toOutsourceQuantity": v.toOutsourceQuantity,
                    "vendorId": v.vendorId,
                    "vendorName": v.vendorName
                }
            })
            toOutsource(list).then(res => {
                if(res.code === 200) {
                    this.$modal.msgSuccess(this.$t('转委外成功'))
                    resolve()
                } else {
                    this.$modal.msgError(res.msg || this.$t('转委外失败'))
                    reject()
                }
            })
        })
        
    },
    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 => {
            element['toOutsourceQuantity'] = element.quantity - element.quantityQualify
            element['vendorName'] = element['vendorName'] || null
            element['vendorId'] = element['vendorId'] || 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>
