<template>
  <div class="left-panel">
    <div class="order-wrap">
      <template v-if="Object.keys(skuInfo).length > 0">
        <div class="info-item" v-if="skuInfo.buyermessage">
          <div class="info-label">
            买家备注：
          </div>
          <div class="info-value red">
            {{ skuInfo.buyermessage }}
          </div>
        </div>

        <div class="info-item" v-if="skuInfo.sellermemo">
          <div class="info-label">
            卖家备注：
          </div>
          <div class="info-value red">
            {{ skuInfo.sellermemo }}
          </div>
        </div>

        <div class="info-item" v-if="skuInfo.insideremark">
          <div class="info-label">
            内部备注：
          </div>
          <div class="info-value red">
            {{ skuInfo.insideremark }}
          </div>
        </div>
      </template>


      <div class="info-item">
        <div class="info-label">
          订单分拣进度：
        </div>
        <div class="info-value process">
          <span :class="[pickingProgress === 1? 'green': 'red']">{{ pickData.order_picking_progress || 0 }}</span><span :class="[pickingProgress === 1? 'green': '']">/</span><span :class="[pickingProgress === 1? 'green': '']">{{ pickData.total_order_picking_progress || 0 }}</span>
        </div>
      </div>

      <div class="info-item">
        <div class="info-label">
          商品分拣进度：
        </div>
        <div class="info-value process">
          <span :class="[skuProgress === 1? 'green': 'red']">{{ pickData.product_picking_progress || 0 }}</span><span :class="[skuProgress === 1? 'green': '']">/</span><span :class="[skuProgress === 1? 'green': '']">{{ pickData.total_product_picking_progress || 0 }}</span>
        </div>
      </div>
    </div>

    <!-- sku信息 -->
    <div
      v-if="Object.keys(skuInfo).length > 0"
      class="sku-wrap"
    >
      <div
        v-if="skuInfo.pictureurl"
        class="info-item img-wrap"
      >
        <img
          :src="skuInfo.pictureurl"
          alt=""
        >
      </div>

      <div class="sku-title" v-if="skuInfo.product_name">
        {{ skuInfo.product_name }}
      </div>

      <div class="info-item" v-if="skuInfo.normsdetailnames">
        <div class="info-label">
          规格：
        </div>
        <div class="info-value">
          {{ skuInfo.normsdetailnames }}
        </div>
      </div>

      <div class="info-item" v-if="skuInfo.product_code">
        <div class="info-label">
          款号：
        </div>
        <div class="info-value">
          {{ skuInfo.product_code }}
        </div>
      </div>

      <div class="info-item" v-if="skuInfo.sku">
        <div class="info-label">
          SKU：
        </div>
        <div class="info-value">
          {{ skuInfo.sku }}
        </div>
      </div>

      <div class="info-item" v-if="skuInfo.qrcode">
        <div class="info-label">
          唯一码：
        </div>
        <div class="info-value">
          {{ skuInfo.qrcode }}
        </div>
      </div>

      <div class="info-item" v-if="skuInfo.gbcode">
        <div class="info-label">
          国标码：
        </div>
        <div class="info-value">
          {{ skuInfo.gbcode }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'LeftPanel',

    props: {
      skuInfo: {
        type: Object,
        default: () => ({})
      },
      pickInfo: {
        type: Object,
        default: () => ({})
      },
    },

    data() {
      return {
        // 因为props传入对象不好进行响应式，这里重新赋值方便更新值
        skuData: {},
        pickData: {}
      };
    },

    watch: {
      skuInfo: {
        immediate: true,
        deep: true,
        handler(val) {
          this.skuData = { ...val };
        }
      },
      pickInfo: {
        immediate: true,
        deep: true,
        handler(val) {
          this.pickData = { ...val };
        }
      }
    },

    computed: {
      // 拣货进度
      pickingProgress() {
        return this.pickData.order_picking_progress / this.pickData.total_order_picking_progress;
      },

      // 分拣进度
      skuProgress() {
        return this.pickData.product_picking_progress / this.pickData.total_product_picking_progress;
      }
    },

    mounted() {

    },

    methods: {

    },
  };
</script>

<style lang="less" scoped>
.left-panel {
  width: 100%;
  .info-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 14px;
    line-height: 16px;
    &:last-child {
      margin-bottom: 0;
    }
    .info-label {
      flex: 0 0 84px;
      color: #666666;
    }
    .info-value {
      color: #333333;
      width: calc(100% - 84px);
      word-wrap: break-word;
    }
    .red {
      color: #FF0101;
    }
    .green {
      color: #2baa0c;
    }
  }
  .img-wrap {
    img {
      width: 100%;
    }
  }
  .order-wrap {
    padding: 15px;
  }
  .sku-wrap {
    border-top: 1px solid #dadada;
    padding: 15px;
    .info-item {
      margin-bottom: 14px;
      line-height: 16x;
    }
    .info-label {
      flex: 0 0 48px;
      margin-right: 10px;
    }
  }

  .sku-title {
    color: #333333;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
  }
  .process {
    font-size: 18px;
    font-weight: 500;
  }
}
</style>
