<template>
  <div>
    <div class="title_box rx-bc mt6">
      <div class="name"
        >打包信息 ({{
          isWarehousing ? list.length : item.pickOutInList.length || 0
        }})个
      </div>

      <div class="rx-bc"> </div>
    </div>

    <el-table
      ref="oneJobQualityBom"
      class="table_content"
      :max-height="600"
      :data="isWarehousing ? list : item.pickOutInList"
      tooltip-effect="dark"
      style="width: 100%"
      stripe
      border
    >
      <el-table-column label="序号" type="index" width="55">
        <template slot-scope="{ row, $index }">
          {{ $index + 1 }}
        </template>
      </el-table-column>

      <el-table-column label="编码" prop="code" minWidth="110">
        <template slot-scope="{ row, $index }">
          {{ row.code }}
        </template>
      </el-table-column>

      <el-table-column label="名称" prop="name" minWidth="110">
        <template slot-scope="{ row, $index }">
          {{ row.name }}
        </template>
      </el-table-column>
      <el-table-column
        label="颜色"
        prop="colour"
        minWidth="110"
        v-if="clientEnvironmentId == '21'"
      >
        <template slot-scope="{ row, $index }">
          <el-input
            v-model="row.colour"
            size="mini"
            class="content_num"
            style="width: 100%"
          ></el-input>
        </template>
      </el-table-column>

      <el-table-column
        label="车辆编码"
        prop="carCode"
        minWidth="130"
        v-if="clientEnvironmentId == '21'"
      >
        <template slot-scope="{ row, $index }">
          <el-input
            v-model="row.carCode"
            size="mini"
            class="content_num"
            style="width: 100%"
          ></el-input>
        </template>
      </el-table-column>

      <el-table-column label="批次号" prop="batchNo" minWidth="90">
        <template slot-scope="{ row, $index }">
          <el-input
            v-model="row.batchNo"
            size="mini"
            class="content_num"
            :disabled="isDetails"
            style="width: 100%"
          ></el-input>
        </template>
      </el-table-column>

      <el-table-column label="型号" prop="modelType">
        <template slot-scope="{ row, $index }">
          {{ row.modelType }}
        </template>
      </el-table-column>

      <el-table-column label="规格" prop="specification">
        <template slot-scope="{ row, $index }">
          {{ row.specification }}
        </template>
      </el-table-column>

      <el-table-column label="牌号" prop="brandNum">
        <template slot-scope="{ row, $index }">
          {{ row.brandNum }}
        </template>
      </el-table-column>

      <el-table-column
        label="刻码"
        prop="engrave"
        v-if="item.singleReport == 1"
      >
        <template slot-scope="{ row, $index }">
          <span v-if="isDetails"> {{ row.extInfo.engrave }}</span>
          <el-input
            v-else
            size="mini"
            class="content_num"
            v-model="row.extInfo.engrave"
            placeholder="请输入物料代号"
          />
        </template>
      </el-table-column>

      <el-table-column
        label="物料代号"
        prop="materielCode"
        v-if="item.singleReport == 1"
      >
        <template slot-scope="{ row, $index }">
          <span v-if="isDetails"> {{ row.extInfo.materielCode }}</span>
          <el-input
            v-else
            size="mini"
            class="content_num"
            v-model="row.extInfo.materielCode"
            placeholder="请输入物料代号"
          />
        </template>
      </el-table-column>

      <el-table-column
        label="客户代号"
        prop="clientCode"
        v-if="item.singleReport == 1"
      >
        <template slot-scope="{ row, $index }">
          <span v-if="isDetails"> {{ row.extInfo.clientCode }}</span>
          <el-input
            v-else
            size="mini"
            class="content_num"
            v-model="row.extInfo.clientCode"
            placeholder="请输入客户代号"
          />
        </template>
      </el-table-column>

      <el-table-column
        label="位置"
        width="110"
        prop="feedQuantity"
        v-if="item.singleReport == 1"
      >
        <template slot-scope="{ row, $index }">
          {{ row.extInfo.position }}
        </template>
      </el-table-column>

      <el-table-column label="工序重量" prop="newWeight">
        <template slot-scope="{ row, $index }">
          <span>
            {{ row.extInfo.newWeight }} {{ row.extInfo.weightUnit }}
          </span>
        </template>
      </el-table-column>

      <el-table-column label="打包类型" prop="" v-if="item.singleReport == 0">
        <template slot-scope="{ row, $index }">
          <span style="color: #157a2c"> 批量打包 </span>
        </template>
      </el-table-column>

      <el-table-column
        label="打包数量"
        prop="feedQuantity"
        width="200"
        v-if="item.singleReport == 0"
      >
        <template slot-scope="{ row, $index }">
          <div v-if="!isWarehousing">
            <el-input
              size="mini"
              class="content_num"
              v-model="row.feedQuantity"
              :disabled="isDetails"
            />
          </div>

          <div v-if="isWarehousing">
            <div style="color: #157a2c">{{ row.feedQuantity }}</div>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="处置" prop="" v-if="item.singleReport == 1">
        <template slot-scope="{ row, $index }">
          <span>入库 </span>
        </template>
      </el-table-column>

      <el-table-column
        label="发货(包装)码"
        prop=""
        width="200"
        v-if="item.singleReport == 1"
      >
        <template slot-scope="{ row, $index }">
          <el-input
            size="mini"
            class="content_num"
            v-model="row.sendCode"
            placeholder="发货(包装)码"
            :disabled="isDetails"
          />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    props: {
      item: {
        type: Object,
        default: () => {}
      },

      list: {
        type: Array,
        default: () => []
      },

      isDetails: {
        type: Boolean,
        default: false
      },
      isWarehousing: {
        type: Boolean,
        default: false
      }
    },

    data() {
      return {};
    },

    computed: {
      clientEnvironmentId() {
        return this.$store.state.user.info.clientEnvironmentId;
      }
    },

    components: {},
    methods: {}
  };
</script>

<style lang="scss" scoped>
  .content_num {
    display: flex;
    align-items: center;
    padding: 2px;
    --input-background-color: #f0f8f2;
  }
</style>
