<template>
  <div>
    <div class="title_box rx-bc mt6">
      <div class="name">周转车 </div>
      <div class="rx-bc"> </div>
    </div>

    <el-collapse accordion>
      <div class="material" v-for="(item, index) in newList" :key="index">
        <el-collapse-item>
          <template slot="title">
            <div class="content_table">
              <div class="item rx-sc">
                <div class="rx ww50">
                  <div class="lable rx-cc">设备编码</div>
                  <div class="content">
                    {{ item.code }}
                  </div>
                </div>

                <div class="rx ww20" v-if="item.codeNumber">
                  <div class="lable rx-cc">编号</div>
                  <div class="content">
                    {{ item.codeNumber }}
                  </div>
                </div>

                <div class="rx ww50">
                  <div class="lable rx-cc">名称</div>
                  <div class="content">{{ item.name }}</div>
                </div>
              </div>

              <div class="del_box">
                <el-link
                  type="danger"
                  icon="el-icon-delete"
                  @click="getDelete(index)"
                ></el-link>
              </div>
            </div>
          </template>
          <div class="content_table2">
            <div class="head row rx-sc">
              <div class="item ww10">货位</div>
              <div class="item ww25">工单编号</div>
              <div class="item ww25">产品编码</div>
              <div class="item ww20">数量PCS</div>
              <div class="item ww20" v-if="!isDetails">投料PCS</div>
              <div class="item ww20" v-if="isDetails">
                {{ wordItem.taskType == 3 ? '抽样' : '投料' }}</div
              >
            </div>

            <div class="table">
              <div
                class="tr row rx-sc"
                v-for="(it, idx) in item.extInfo.positionList"
                :key="idx"
              >
                <div class="item ww10">{{ it.code }}</div>
                <div
                  class="item ww25"
                  :class="{ color157: it.workOrderCode === wordItem.code }"
                >
                  {{ it.workOrderCode }}
                </div>
                <div
                  class="item ww25"
                  :class="{
                    color157: it.categoryCode === wordItem.productCode
                  }"
                >
                  {{ it.categoryCode }}
                </div>

                <div class="item ww20">
                  <span>{{ it.quantity }}</span>
                </div>

                <div class="item ww20" v-if="wordItem.taskType">
                  <el-input
                    :class="[
                      'uni-input',
                      wordItem.code == it.workOrderCode && it.quantity > 0
                        ? 'content_num'
                        : ''
                    ]"
                    size="mini"
                    v-model="it.feedNum"
                    type="digit"
                    :disabled="it.quantity <= 0"
                    @blur="
                      Number(it.feedNum) > Number(it.quantity)
                        ? (it.feedNum = Number(it.quantity))
                        : ''
                    "
                  ></el-input>
                </div>
                <div class="item ww20" v-else="wordItem.taskType == 3">
                  <el-input
                    :class="[
                      'uni-input',
                      wordItem.code == it.workOrderCode && it.quantity > 0
                        ? 'content_num'
                        : ''
                    ]"
                    size="mini"
                    v-model="it.sampleNum"
                    type="digit"
                    :disabled="it.quantity <= 0"
                    @blur="
                      Number(it.sampleNum) > Number(it.quantity)
                        ? (it.sampleNum = Number(it.quantity))
                        : ''
                    "
                  ></el-input>
                </div>
              </div>
            </div>
          </div>
        </el-collapse-item>
      </div>
    </el-collapse>
  </div>
</template>
<script>
  export default {
    props: {
      list: {
        type: Array,
        default: () => []
      },

      wordItem: {
        type: Object,
        default: () => {}
      },

      pattern: {
        type: String,
        default: ''
      },

      isDetails: {
        type: Boolean,
        default: false
      }
    },
    watch: {
      list: {
        immediate: true,
        handler(newVal) {
          newVal.forEach((f) => {
            if (
              f.extInfo &&
              f.extInfo.positionList &&
              f.extInfo.positionList.length
            ) {
              f.extInfo.positionList.forEach((oo) => {
                if (
                  this.wordItem.code == oo.workOrderCode &&
                  this.wordItem.productCode == oo.categoryCode &&
                  Number(oo.quantity) > 1 &&
                  this.isDetails != true
                ) {
                  this.$set(oo, 'feedNum', oo.quantity);
                }
              });
            }
          });

          this.newList = newVal;
        }
      }
    },

    data() {
      return {
        newList: []
      };
    },
    methods: {
      getDelete(index) {
        this.list.splice(index, 1);
      }
    }
  };
</script>

<style lang="scss" scoped>
  .material {
    width: 92%;
  }

  .content_table2 {
    width: 100%;

    .row {
      width: 100%;

      .item {
        color: #404446;
        font-size: 14px;
        padding-left: 6px;
      }

      .color157 {
        color: #157a2c;
      }

      .ww20 {
        width: 20%;
      }

      .ww25 {
        width: 25%;
      }

      .ww35 {
        width: 35%;
      }

      .ww10 {
        width: 10%;
      }
    }

    .head {
      height: 32px;
      background: #f7f9fa;
      border-top: 1px solid #e3e5e5;
      border-left: 1px solid #e3e5e5;

      .item {
        height: 32px;
        line-height: 32px;
        border-right: 1px solid #e3e5e5;
        box-sizing: border-box;
      }
    }

    .tr {
      border-top: 1px solid #e3e5e5;
      border-left: 1px solid #e3e5e5;

      .item {
        font-size: 12px;
        min-height: 32px;
        display: flex;
        align-items: center;
        border-right: 1px solid #e3e5e5;
        box-sizing: border-box;
        white-space: normal;
        word-break: break-all;
      }

      &:last-child {
        border-bottom: 1px solid #e3e5e5;
      }
    }
  }

  .content_num {
    display: flex;
    align-items: center;
    padding: 2px;
    --input-background-color: #f0f8f2;
  }

  ::v-deep .el-collapse-item__header.is-active {
    color: black;
  }
</style>
