<template>
  <div>
    <div class="title_box rx-bc">
      <div class="name">报工信息{{ list.length }}个 </div>

      <!-- <div class="rx-bc" v-if="detailList.length">
        {{ detailList[0].warehouseName }}
      </div> -->
    </div>

    <!-- <el-table
      ref="oneJobQualityBom"
      class="table_content"
      :max-height="600"
      :data="detailList"
      tooltip-effect="dark"
      style="width: 98%; margin: auto"
      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 }">
          <div class="content_num"
            >{{ row.quantity }} {{ row.measuringUnit }}/ {{ row.packingCount }}
            {{ row.packingUnit }}</div
          >
        </template>
      </el-table-column>

      <el-table-column label="重量" prop="name" minWidth="110">
        <template slot-scope="{ row, $index }">
          {{ row.packingWeight }} {{ row.weightUnit }}
        </template>
      </el-table-column>
    </el-table> -->

    <ele-pro-table
      ref="table"
      :needPage="false"
      :columns="columns"
      :datasource="list"
      class="time-form"
      max-height="300"
      row-key="id"
    >
      <template v-slot:engrave="{ 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>
      <template v-slot:sendCode="{ row, $index }">
        <el-input
          size="mini"
          class="content_num"
          v-model="row.extInfo.sendCode"
          placeholder="发货条码"
          :disabled="isDetails"
        />
      </template>
      <template v-slot:batchNo="{ row, $index }">
        <el-input
          size="mini"
          class="content_num"
          v-model="row.batchNo"
          placeholder="批次号"
          :disabled="isDetails"
        />
      </template>

      <template v-slot:materielCode="{ 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>
      <template v-slot:clientCode="{ 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>
      <!-- <template v-slot:deviceId="{ row, $index }">
        <el-select
          v-if="deviceList?.length > 0"
          class="content_num"
          v-model="row.deviceId"
          filterable
          placeholder="请选择"
          @change="(e) => selectVal(e, row, $index)"
          size="mini"
          :disabled="isDetails"
        >
          <el-option
            v-for="item in deviceList"
            :label="item.name + '-' + item.codeNumber"
            :value="item.id || item.instanceId"
            :key="item.id || item.instanceId"
          >
          </el-option>
        </el-select>
      </template> -->
      <template v-slot:heatNumber="{ row, $index }">
        <el-input
          size="mini"
          class="content_num"
          v-model="row.extInfo.heatNumber"
          placeholder="请输入炉次号"
          :disabled="isDetails"
        />
      </template>
      <template v-slot:feedQuantity="{ row, $index }">
        <el-input
          size="mini"
          class="content_num"
          v-model="row.feedQuantity"
          disabled
          placeholder="数量"
        />
      </template>
      <template v-slot:position="{ row, $index }">
        <span v-if="isDetails">{{ row.extInfo.position }}</span>
        <el-input
          v-else
          size="mini"
          class="content_num"
          v-model="row.extInfo.position"
          placeholder="位置"
        />
      </template>
      <template v-slot:weight="{ row, $index }">
        <div style="display: flex; align-items: center">
          <div class="tag_box">{{ row.extInfo.newWeight ? '上' : '原' }}</div>
          <span
            v-if="
              Object.prototype.hasOwnProperty.call(row.extInfo, 'newWeight')
            "
            >{{ row.extInfo.newWeight }}</span
          >

          <el-input
            v-if="
              !Object.prototype.hasOwnProperty.call(row.extInfo, 'newWeight')
            "
            size="mini"
            class="content_num2"
            style="width: 100px"
            v-model="row.extInfo.weight"
            :disabled="isDetails"
            prop="digit"
          />
          <div style="width: 55px">{{ row.weightUnit }}</div>
        </div>
      </template>
      <template v-slot:reportWeight="{ row, $index }">
        <div style="display: flex; align-items: center">
          <span v-if="isDetails">{{ row.extInfo.reportWeight }}</span>
          <el-input
            v-else
            size="mini"
            class="content_num"
            type="number"
            v-model="row.extInfo.reportWeight"
            placeholder="报工重量"
            prop="digit"
            @input="handleInput"
          />
          <div style="width: 55px">{{ row.weightUnit }}</div>
        </div>
      </template>
      <!-- <template v-slot:isQualified="{ row, $index }">
        <el-select
          size="mini"
          class="content_num"
          v-model="row.extInfo.isQualified"
          @change="handlerSelect"
          filterable
          placeholder="请选择"
          :disabled="
            isDetails ||
            taskObj.type == 2 ||
            taskObj.type == 3 ||
            taskObj.type == 6
          "
        >
          <el-option
            v-for="item in isQualifiedList"
            :label="item.name"
            :value="item.code"
            :key="item.code"
          >
          </el-option>
        </el-select>
      </template> -->

      <!-- :disabled="isDetails || isDisable" -->
      <template v-slot:notType="{ row, $index }">
        <el-select
          v-if="row.extInfo.isQualified && row.extInfo.isQualified == 2"
          size="mini"
          class="content_num"
          v-model="row.extInfo.notType"
          filterable
          placeholder="请选择"
          :disabled="isDetails"
        >
          <el-option
            v-for="item in notTypeList"
            :label="item.name"
            :value="item.code"
            :key="item.code"
          >
          </el-option>
        </el-select>
      </template>
      <template v-slot:taskNameHeader>
        <div>
          不良原因<span style="color: #f00; padding: 0 2px">/</span>处置
        </div>
      </template>
      <template v-slot:taskName="{ row, $index }">
        <div
          v-if="
            row.extInfo.isQualified != 1 &&
            row.extInfo.notType &&
            row.extInfo.notType != 5 &&
            row.extInfo.notType != 8
          "
        >
          <span v-if="isDetails">{{ row.extInfo.notReason }}</span>
          <el-input
            v-else
            size="mini"
            class="content_num"
            v-model="row.extInfo.notReason"
            placeholder="原因"
          />
        </div>
        <!-- <div
          v-if="![1, 2, 3, 4, 6, 9, 7].includes(Number(row.extInfo.notType))"
        >
          <span v-if="isDetails">{{ row.extInfo.taskName }}</span>
          <el-select
            v-else
            size="mini"
            class="content_num"
            v-model="row.extInfo.taskId"
            filterable
            placeholder="请选择"
            @change="(e) => selectName(e, $index)"
          >
            <el-option
              v-for="item in stepsList"
              :label="item.taskTypeName"
              :value="item.taskId"
              :key="item.taskId"
            >
            </el-option>
          </el-select>
        </div> -->
      </template>
      <template v-slot:index="{ row, $index }">
        <div
          class="tag_box"
          v-if="
            Object.prototype.hasOwnProperty.call(row, 'extInfo') &&
            Object.prototype.hasOwnProperty.call(
              row.extInfo,
              'productionTimes'
            ) &&
            Object.prototype.hasOwnProperty.call(
              row.extInfo.productionTimes,
              item.currentTaskDiagram.taskId
            )
          "
        >
          {{ row.extInfo.productionTimes[item.currentTaskDiagram.taskId] }}
        </div>

        <div class="tag_box" v-if="row.isCache">缓</div>
      </template>
      <!-- 操作列 -->
      <template v-slot:action="{ row, $index }" v-if="!isDetails">
        <el-link type="text" @click="getOk($index)" v-if="row.confirm == 0"
          >确认</el-link
        >
        <el-link
          type="text"
          @click="getCancle($index)"
          v-else="row.confirm == 1"
          >取消</el-link
        >
        <el-link type="danger" @click="getDelete($index)">删除</el-link>
      </template>
    </ele-pro-table>
  </div>
</template>

<script>
  export default {
    props: {
      detailList: {
        type: Array,
        default: () => []
      },
      list: {
        type: Array,
        default: () => []
      },
      isDetails: {
        type: Boolean,
        default: false
      }
    },

    data() {
      return {
        cacheKeyUrl: 'detailsBom'
      };
    },

    computed: {
      columns() {
        return [
          {
            width: 55,
            type: 'index',
            columnKey: 'index',
            align: 'center',
            label: '序号',
            fixed: 'left'
          },
          {
            minWidth: 140,
            prop: 'categoryName',
            label: '名称',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            minWidth: 120,
            prop: 'extInfo.batchNo',
            label: '批次号',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            minWidth: 120,
            prop: 'packingCode',
            label: '包装编码',
            align: 'center',
            showOverflowTooltip: true,
            show: true
          },
          {
            minWidth: 120,
            prop: 'packingType',
            label: '包装层级',
            align: 'center',
            showOverflowTooltip: true,
            show: true,
            formatter: (row) => {
              return row.packingType == 4
                ? '外包装'
                : row.packingType == 2
                ? '最小包装'
                : row.packingType == 3
                ? '内包装'
                : '计量';
            }
          },
          {
            minWidth: 100,
            prop: 'rootCategoryLevelId',
            label: '类型',
            align: 'center',
            showOverflowTooltip: true,
            formatter: (row) => {
              return row.rootCategoryLevelId == 2
                ? '在制品'
                : row.rootCategoryLevelId == 23
                ? '半成品'
                : row.rootCategoryLevelId == 9
                ? '产品'
                : item.rootCategoryLevelId == 28
                ? '废品'
                : '';
            }
          },
          {
            minWidth: 120,
            prop: 'extInfo.engrave',
            label: '刻码',
            slot: 'engrave',
            align: 'center'
          },
          {
            minWidth: 80,
            prop: 'extInfo.productSequence',
            label: '序列号',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            minWidth: 120,
            prop: 'extInfo.sendCode',
            label: '发货条码',
            align: 'center'
          },
          {
            minWidth: 160,
            prop: 'materielCode',
            label: '物料代号',
            align: 'center',
            slot: 'materielCode'
          },
          {
            minWidth: 100,
            prop: 'clientCode',
            label: '客户代号',
            align: 'center',
            slot: 'clientCode'
          },
          {
            width: 100,
            prop: 'quantity',
            label: '数量',
            slot: 'quantity',
            align: 'center'
          },
          {
            width: 150,
            prop: 'reportWeight',
            label: '报工重量',
            slot: 'reportWeight',
            align: 'center'
          },
          {
            width: 150,
            prop: 'modelType',
            label: '型号',
            slot: 'modelType',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            width: 150,
            prop: 'specification',
            label: '规格',
            slot: 'specification',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            width: 150,
            prop: 'brandNum',
            label: '牌号',
            slot: 'brandNum',
            align: 'center',
            showOverflowTooltip: true
          }
        ];
      }
    },

    components: {},
    mounted() {
      console.log(this.list, 'list');
    },
    methods: {}
  };
</script>

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