<template>
  <ele-modal
    title="委外领料"
    :visible.sync="visible"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :maxable="true"
    :close-on-press-escape="false"
    append-to-body
    width="68%"
  >
    <div>
      <!-- <el-form :model="pickForm" ref="pickForm">
        <el-row :gutter="24">
          <el-col :span="6">
            <el-form-item label="领料单编号" prop="pickCode" label-width="90px">
              <el-input v-model="pickForm.pickCode" disabled></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="领料单名称" prop="pickName" label-width="90px">
              <el-input v-model="pickForm.pickName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div v-for="(item, idx) in workList" :key="idx">
        <div class="tableZ_box">
          <div class="row">
            <div class="col">
              <div class="name">生产工单号</div>
              <div class="content">{{ item.code }}</div>
            </div>
            <div class="col">
              <div class="name">产品编码</div>
              <div class="content">{{ item.productCode }}</div>
            </div>
            <div class="col">
              <div class="name">产品名称</div>
              <div class="content">{{ item.productName }}</div>
            </div>
            <div class="col">
              <div class="name">批次号</div>
              <div class="content">{{ item.batchNo }}</div>
            </div>
          </div>
        </div>
      </div> -->

      <ele-pro-table
        ref="table"
        :needPage="false"
        :columns="columns"
        :cache-key="cacheKeyUrl"
        :selection.sync="selection"
        :datasource="outsourcingList"
        @selection-change="handleSelectionChange"
        row-key="id"
      >
        <template v-slot:deliveryMethod="{ row, $index }">
          <span>{{ row.deliveryMethod == 2 ? '分批到货' : '一次到货' }}</span>
        </template>

        <template v-slot:purchaseQuantity="{ row, $index }">
          <span v-if="row.deliveryMethod == 2">{{ row.purchaseQuantity }}</span>
          <span v-else>{{ row.totalCount }}</span>
        </template>

        <template v-slot:batchNo="{ row, $index }">
          <span v-if="row.batchNo && row.deliveryMethod == 2">{{
            row.batchNo
          }}</span>
        </template>

        <template v-slot:requireDeliveryTime="{ row, $index }">
          <span v-if="row.deliveryMethod == 2">{{
            row.requireDeliveryTime
          }}</span>
          <span v-else>{{ row.requireDeliveryTime }}</span>
        </template>
      </ele-pro-table>
    </div>

    <template slot="footer">
      <el-button size="mini" @click="handleClose">取 消</el-button>
      <el-button size="mini" type="primary" @click="save()">确 定</el-button>
    </template>
  </ele-modal>
</template>

<script>
  import pickingList from './pickingList.vue';
  import {
    workorderList,
    getCode,
    getInventoryTotal,
    znworkorderList
  } from '@/api/produce/workOrder';
  import { typeName } from '../common.js';
  import { batchSave, znfindVoucherList } from '@/api/produce/picking';
  import { getWarehouseList } from '@/api/mes';
  import { checkOutsource, listOutsource } from '@/api/produce/picking';

  export default {
    components: {
      pickingList
    },
    props: {
      // workListIds: {
      //   type: Array,
      //   default() {
      //     return [];
      //   }
      // },
      workTaskId: {},
      taskId: {}
      // workList: {
      //   type: Array,
      //   default() {
      //     return [];
      //   }
      // }
    },

    data() {
      return {
        visible: true,
        cacheKeyUrl: 'out-sourcing-picking-list',
        selection: [],
        warehouseList: [],
        pickForm: {
          pickCode: null,
          pickName: null
        },
        workList: [],
        outsourcingList: [],
        chooseData: []
      };
    },

    computed: {
      taskObj() {
        return this.$store.state.user.taskObj;
      },
      tableKey() {
        return `table-${this.rootCategoryLevelId}`;
      },

      clientEnvironmentId() {
        return this.$store.state.user.info.clientEnvironmentId;
      },
      columns() {
        return [
          {
            width: 45,
            type: 'selection',
            columnKey: 'selection',
            align: 'center',
            reserveSelection: true
          },
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 50,
            align: 'center'
          },
          {
            prop: 'name',
            label: '名称',
            width: 120,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'code',
            label: '编码',
            width: 120,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'brandNum',
            label: '牌号',
            width: 120,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'batchNo',
            slot: 'batchNo',
            label: '批次号',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'deliveryMethod',
            slot: 'deliveryMethod',
            label: '委外类型',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'purchaseQuantity',
            label: '委外数量',
            width: 120,
            align: 'center',
            slot: 'purchaseQuantity'
          },
          {
            prop: 'requireDeliveryTime',
            label: '委外时间',
            width: 160,
            align: 'center',
            slot: 'requireDeliveryTime'
          }
        ];
      }
    },

    watch: {},

    mounted() {
      console.log(22222222222222222);
      // this.$nextTick(() => {
      this.getList();
      this.getOrderCode();
      // });
      // this.getList();
      // this.getOrderCode();
      // this.getOutsourcingDataList();
      // this.pickForm.pickName = this.workList[0].productName + '领料';
    },

    methods: {
      handleClose() {
        this.$emit('closeOutsourcingPicking', false);
      },

      handleSelectionChange(data) {
        this.chooseData = data;
      },

      save() {
        if (this.chooseData.length > 0) {
          let _arr = [];
          this.chooseData.forEach((item) => {
            _arr.push({
              id: item.id,
              code: item.code,
              batchNo: item.batchNo
            });
          });
          this.$emit('outsourceEmit', _arr);
        } else {
          this.$emit('outsourceEmit');
        }
      },

      getOutsourcingDataList(id) {
        listOutsource(this.workTaskId, id).then((res) => {
          this.outsourcingList = res;
        });
      },

      getList() {
        let param = {
          ids: [this.workTaskId],
          taskId: this.taskId
        };
        console.log(11111111111111);
        workorderList(param)
          .then((res) => {
            console.log(res, 'res');
            let _arr = res.map((e) => {
              e.pickList = [...e.bomDetailDTOS];
              e.bomDetailDTOS = [];
              return e;
            });

            this.workList = JSON.parse(JSON.stringify(_arr));

            console.log(this.workList, 'this.workList');
            this.pickForm.pickName = this.workList[0].productName + '领料';

            this.getOutsourcingDataList(
              this.workList[0].currentTaskDiagram.taskId
            );

            this.$forceUpdate();
          })
          .finally(() => {});
      },
      async getOrderCode() {
        this.pickForm.pickCode = await getCode('pick_order_code');
      }
    }
  };
</script>

<style lang="scss" scoped>
  .table_content {
    margin-bottom: 10px;
  }

  .tableZ_box {
    border: 1px solid #e3e5e5;
    margin: 6px 0;

    &:last-child {
      border-bottom: none;
    }

    .row {
      width: 100%;
      display: flex;
    }

    .col {
      width: calc(100% / 5);
      display: flex;
      align-items: center;
      min-width: 200px;
      min-height: 32px;
      border-bottom: 1px solid #e3e5e5;
      border-right: 1px solid #e3e5e5;

      &:last-child {
        border-right: none;
      }

      .name {
        display: flex;
        align-items: center;
        padding: 4px;
        width: 80px;
        height: 100%;
        background-color: #d0e4d5;
        color: #000;
      }

      .content {
        padding: 4px 6px;
        color: #000;
      }
    }

    .pd6 {
      padding: 0 6px;
    }
  }
</style>

<style scoped lang="scss">
  :v-deep .el-form-item__error {
    bottom: -6px !important;
  }

  .tableZ_box {
    border: 1px solid #e3e5e5;
    margin: 6px 0;

    &:last-child {
      border-bottom: none;
    }

    .row {
      width: 100%;
      display: flex;
    }

    .col {
      width: calc(100% / 5);
      display: flex;
      align-items: center;
      min-width: 200px;
      min-height: 32px;
      border-bottom: 1px solid #e3e5e5;
      border-right: 1px solid #e3e5e5;

      &:last-child {
        border-right: none;
      }

      .name {
        display: flex;
        align-items: center;
        padding: 4px;
        width: 80px;
        height: 100%;
        background-color: #d0e4d5;
        color: #000;
      }

      .content {
        padding: 4px 6px;
        color: #000;
      }
    }

    .pd6 {
      padding: 0 6px;
    }
  }
</style>
