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

    </div>
    <div class="good-item-middle">
      <div class="row-1">
        <div class="title one-line-flow">
          {{ data.title }}
        </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>
    </div>
    <div class="good-item-right">
      <div class="good-type">
        <Select
          v-model="data.productRemark"
          @on-change="changeProductRemark"
          size="small"
          style="width:100px"
          transfer
        >
          <Option
            v-for="item in goodTypeOptions"
            :key="item.value"
            :value="item.value"
          >
            {{ item.label }}
          </Option>
        </Select>
        <div v-if="data.productRemark != 1 && defectiveReasonList.length > 0" class="defectiveReason">
          <span>次品原因：</span>
          <Select
            :filterable="data.defective_cause?false:true"
            clearable
            v-model="data.defective_cause"
            size="small"
            style="width:100px;display: inline-block;"
            transfer
          >
            <Option
              v-for="item in defectiveReasonList"
              :key="item.label"
              :value="item.label"
            >
              {{ item.label }}
            </Option>
          </Select>
        </div>
      </div>

      <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>

<script>
const R3 = window.R3;
const { network, urlSearchParams, store } = R3
export default {
  name: 'GoodItem',

  props: {
    data: {
      type: Object
    },
    // 当前扫描的商品索引
    currentIndex: {
      type: Number
    },
    index: {
      type: Number
    },
    defectiveReasonList: {
      type: Array,
      default: ()=> []
    }
  },

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

  data() {
    return {
      goodTypeOptions: [
        {
          label: '正品',
          value: 1
        },
        {
          label: '瑕疵品',
          value: 2
        },

        {
          label: '残次品',
          value: 3
        }
      ],
      // defectiveReasonList: [],
    };
  },

  mounted() {
    
  },

  methods: {
    changeProductRemark(e){
      if(e == 1){
        this.data.defective_cause = ''
      }
      const obj = { itemSku: this.data.sku_no || "", type: 'HANDLE_ROW1' }
      this.$emit('changeProductRemark', obj);
    },
  },
};
</script>
<style lang="less">
.good-item .ark-select-small.ark-select-single .ark-select-selection .ark-select-placeholder, .good-item .ark-select-small.ark-select-single .ark-select-selection .ark-select-selected-value {
  text-align: center;
}
</style>

<style lang="less" scoped>
.good-item {
  border-top: 1px solid #dadada;
  border-left: 1px solid #dadada;
  border-right: 1px solid #dadada;
  display: flex;
  justify-content: space-between;
  height: 100px;
  padding: 16px;
  min-width: 760px;
  // min-width: 913px;
  &.active-item {
    background-color: #D5E7FF;
  }
  &:last-child {
    border-bottom: 1px solid #dadada;
  }
  &-left {
    display: flex;
    margin-right: 16px;
    img {
      width: 68px;
      height: 68px;
      cursor: pointer;
    }
  }
  &-middle {
    // max-width: 480px;
    flex: 1;
    .title {
      font-weight: 500;
      font-size: 14px;
      color: #333333;
      line-height: 20px;
      width: 400px;
    }
    .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;
        // max-width: 100px;
        // width: 96px;
        height: 14px;
        width: calc(100% - 72px);
      }
      .w-72 {
        width: 72px;
        text-align: right;
      }
    }
  }
  &-right {
    flex: 0 0 160px;
    display: flex;
    align-items: center;
    padding-right: 12px;
    .num-wrap {
      color: #666666;
      font-size: 24px;
      font-weight: 500;
    }

    .good-type {
      width: 180px;
      margin-right: 10px;
      text-align: right;
    }
  }

  .red {
    color: #ff0101;
  }
  .green {
    color: #2baa0c;
  }
  .defectiveReason {
    display: flex;
    align-items: center;
    margin-top:16px;
    justify-content:flex-end;
  }
}
</style>
