<template>
  <div
    class="good-item"
    :class="[currentIndex===index ? 'active-item' : '']"
  >
    <div
      class="good-item-left"
      @mouseover.stop
      @mouseenter.stop
    >
      <Poptip
        trigger="hover"
        title=""
        transfer
      >
        <img
          :src="url"
          alt=""
        />
        <template slot="content">
          <img
            :src="url"
            alt=""
            style="height: 200px;width: 200px;"
          />
        </template>
      </Poptip>
    </div>

    <Poptip
      trigger="hover"
      title=""
      transfer
    >
      <div class="pop-wrap">
        <div class="good-item-middle">
          <div class="row-1" style="display:flex;">
            <div class="title one-line-flow">
              {{ data.title }}<span v-if="data.errorTip" style="color: red;font-size:12px;margin-left:10px;display: inline-block;padding: 4px 6px;border: 1px solid red;border-radius: 4px;line-height: 1;">打单异常</span>
            </div>
            <!-- <div v-if="data.errorTip" style="color: red;">打印异常</div> -->
          </div>
          <div class="row-2">
            <div class="attr-item">
              <span class="label">款号：</span>
              <span
                class="value one-line-flow"
                :title="data.productcode"
              >
                {{ data.productcode }}
              </span>
            </div>
            <div class="attr-item">
              <span class="label w-72">SKU：</span>
              <span
                class="value one-line-flow"
                :title="data.sku_no"
              >
                {{ data.sku_no }}
              </span>
            </div>
            <div class="attr-item">
              <span class="label">国标码：</span>
              <span
                class="value one-line-flow"
                :title="data.gbcode"
              >
                {{ data.gbcode }}
              </span>
            </div>
          </div>
          <div class="row-3">
            <div class="attr-item">
              <span class="label ">规格：</span>
              <span
                class="value one-line-flow"
                :title="data.normsdetailnames"
              >
                {{ data.normsdetailnames }}
              </span>
            </div>

            <div class="attr-item">
              <span
                class="label w-72"
                v-if="data.good_qrcode"
              >唯一码：</span>
              <span
                class="value one-line-flow"
                :title="data.good_qrcode"
                v-if="data.good_qrcode"
              >
                {{ data.good_qrcode }}
              </span>
            </div>

            <!-- 这个空div占布局用的 -->
            <div class="attr-item">
            </div>
          </div>
          <span class="tag" v-if="data.isIntercept">拦截中</span>
        </div>
        <div class="good-item-right">
          <div class="num-wrap">
            <span
              class="current"
              :class="[data.scanInNum===data.qty?'green':'red']"
            >{{ data.scanInNum }}</span>/<span class="total">{{ data.qty }}</span>
          </div>
        </div>
      </div>
      <template slot="content">
        <OrderPanel :order-info="data.orderInfo" />
      </template>
    </Poptip>
  </div>
</template>

<script>
import OrderPanel from './orderPanel.vue';

export default {
  name: 'AfterDeliveryGoodItem',

  components: {
    OrderPanel,
  },

  props: {
    data: {
      type: Object
    },
    // 当前扫描的商品索引
    currentIndex: {
      type: Number
    },
    index: {
      type: Number
    }
  },

  computed: {
    url() {
      return this.data.pic_url ? this.data.pic_url : '../../../../static/img/camera.jpg'
    },
  },

  data() {
    return {
    };
  },

  mounted() {

  },

  methods: {

  },
};
</script>

<style lang="less" scoped>
.good-item {
  cursor: pointer;
  border-top: 1px solid #dadada;
  border-left: 1px solid #dadada;
  border-right: 1px solid #dadada;
  display: flex;
  // justify-content: space-between;
  height: 100px;
  min-width: 660px;
  &.active-item {
    background-color: #d5e7ff;
  }
  &:last-child {
    border-bottom: 1px solid #dadada;
  }
  &-left {
    display: flex;
    overflow: hidden;
    align-items: center;
    padding: 6px;
    flex: 0 0 100px;
    margin-right: 20px;
    img {
      width: 88px;
      height: 88px;
      cursor: pointer;
    }
  }
  > .ark-poptip {
    flex: 1;
    display: flex;
  }
  .pop-wrap {
    display: flex;
    justify-content: space-between;
  }
  &-middle {
    padding: 16px 0;
    flex: 1;
    position: relative;
    .title {
      font-weight: 500;
      font-size: 14px;
      color: #333333;
      line-height: 20px;
      width: 400px;
    }
    .tag {
      padding: 1px 4px;
      color: rgb(237, 78, 78);
      border-radius: 50%;
      font-size: 12px;
      border: 2px solid red;
      position: absolute;
      height: 50px;
      width: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      right: 8px;
      top: 50%;
      transform: translateY(-50%) rotate(30deg);
      opacity: 0.7;
      font-weight: 700;
    }
    .row-2,
    .row-3 {
      color: #666666;
      margin-top: 10px;
      display: flex;
      align-items: center;
    }

    .attr-item {
      width: 33%;
      flex: 1;
      white-space: nowrap;
      .label {
        display: inline-block;
        vertical-align: middle;
        height: 14px;
      }
      .value {
        vertical-align: middle;
        display: inline-block;
        height: 14px;
        width: calc(100% - 72px);
      }
      .w-72 {
        width: 72px;
        text-align: right;
      }
    }
  }
  &-right {
    padding: 16px 0;
    flex: 0 0 60px;
    display: flex;
    align-items: center;
    padding-right: 28px;
    .num-wrap {
      color: #666666;
      font-size: 24px;
      font-weight: 500;
    }

    .good-type {
      margin-right: 10px;
    }
  }

  .red {
    color: #ff0101;
  }
  .green {
    color: #2baa0c;
  }
}
</style>

<style lang="less">
.good-item {
  > .ark-poptip {
    .ark-poptip-rel {
      width: 100%;
    }
  }
}
</style>
