<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 ww40">
                  <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 ww35">工单编号</div>
              <div class="item ww35">产品编码</div>
              <div class="item ww20">数量(PCS)</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 ww35"
                  :class="{ color157: it.workOrderCode === wordItem.code }"
                >
                  {{ it.workOrderCode }}
                </div>

                <div
                  class="item ww35"
                  :class="{
                    color157: it.categoryCode === wordItem.productCode
                  }"
                >
                  {{ it.categoryCode }}
                </div>

                <div
                  class="item ww20"
                  :class="{ content_num: pattern == 'job' }"
                  v-if="!isDetails"
                >
                  <el-input
                    size="mini"
                    class="uni-input"
                    v-if="it.isFull == 0"
                    @input="quantInt(index, idx, it)"
                    v-model="it.quantity"
                    type="digit"
                    :disabled="
                      (!Object.prototype.hasOwnProperty.call(it, 'isOccupy') &&
                        it.isOccupy) ||
                      pattern != 'job'
                    "
                  ></el-input>
                  <span v-else>{{ it.quantity }}</span>
                </div>

                <div class="item ww20" v-if="isDetails">
                  {{ it.quantity }}
                </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,
        deep: true,
        handler(newVal) {
          this.newList = newVal;
        }
      }
    },

    data() {
      return {
        newList: [],

        totalCount: 0
      };
    },
    methods: {
      quantInt(index, idx, it) {
        if (it.quantity >= 1) {
          this.$set(
            this.newList[index].extInfo.positionList[idx],
            'workOrderCode',
            this.wordItem.code
          );
          this.$set(
            this.newList[index].extInfo.positionList[idx],
            'categoryCode',
            this.wordItem.productCode
          );
        } else {
          this.$set(
            this.newList[index].extInfo.positionList[idx],
            'workOrderCode',
            ''
          );
          this.$set(
            this.newList[index].extInfo.positionList[idx],
            'categoryCode',
            ''
          );
          this.$set(
            this.newList[index].extInfo.positionList[idx],
            'quantity',
            0
          );
        }

        this.totalCount = 0;
        this.newList.forEach((f) => {
          f.extInfo.positionList.forEach((o) => {
            if (
              o.workOrderCode == this.wordItem.code &&
              (!Object.prototype.hasOwnProperty.call(o, 'isOccupy') ||
                (o.isOccupy == 0 && o.quantity > 0))
            ) {
              this.totalCount = Number(this.totalCount) + Number(o.quantity);
            }
          });
        });

        this.$message.info(`已经放${this.totalCount}`);
        this.$emit('formedNumFn', this.totalCount);
      },

      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>
