<template>
  <div class="goods-info-detail">
    <div class="company">
      <div v-for="(item, index) in goodList" :key="index" class="item-total">
        <!-- <div class="item-header">
          <div class="item-name">{{ goodList.manufacturer }}</div>
          <div class="cold">冷</div>
        </div> -->
        <div class="item-image-title">
          <img src="../../../assets/img/u47.svg" alt="" class="item-image" />
          <div class="item-title">
            {{ goodList.goodsDesc }}{{ goodList.goodsDesc }}
          </div>
        </div>
        <div class="item-currency-amount">
          <div class="item-currency">￥</div>
          <div class="item-amount">{{ item.price }}</div>
          <div class="item-packages">
            包装数量:<span
              >{{ goodList.packageNum }}{{ goodList.unitName }}</span
            >
          </div>
        </div>
        <div class="dep-line"></div>
        <div class="item-orders-deliveries">
          <div class="item-orders">
            订单数量:<span>{{ item.orderNumber }}</span>
          </div>
          <div class="item-deliveris">
            配送数量:<span>{{ item.deliveriesNumber }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getGoodInfoList } from "@/api/myOrder";
export default {
  name: "goodsInfoDetail",
  data() {
    return {
      goodList: {}
    };
  },
  methods: {
    getGoodInfoListReq() {
      let data = {
        "sourceDb": "SHYY",
        "supplierId": ["305", "879", "301"],
       "clientID": ["3168"],
        "mdmClientCode": "",
        "ownerId": "1",
        "goodsId": "",
        "goodsCode": "",
        "goodsName": "",
        "goodsSpec": "",
        "manufacturer": "",
        "goodsDesc": "",
        "approvalNumber": "",
        "orderId": "",
        "orderNo": "",
        "pickingId": "",
        "startDate": "2021-03-08",
        "endDate": "2021-03-15",
        "mdmGoodsCode": "",
        "goodsPermission": "",
        "pageSize": 1,
        "pageNum": 10,
        "order": "",
        "sort": "",
      };
      getGoodInfoList(data)
        .then((res) => {
          console.log(res);
          if (
            res.code === 200 &&
            res.data &&
            res.data.code === "00000" &&
            res.data.entity &&
            res.data.entity.goodsInfoList &&
            res.data.entity.goodsInfoList.length > 0
          ) {
            this.goodList = res.data.entity.goodsInfoList[0];
          } else {
            console.log("请求失败");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  mounted() {
    this.getGoodInfoListReq();
  },
};
</script>
<style scoped lang="scss">
.goods-info-detail {
  width: 100%;
  .company {
    border-bottom: 1px solid #eee;
    .item-total {
      // margin-top: 10px;
      .item-name {
        font-size: 14px;
        font-weight: 700;
        padding-top: 10px;
      }
    }
  }
}
.item-header {
  display: flex;
}
.cold {
  // display: inline-block;
  font-size: 14px;
  //   font-weight: 700;
  width: 35px;
  height: 20px;
  border: 2px solid #4b7902;
  color: #4b7902;
  text-align: center;
  border-radius: 10px;
  line-height: 15px;
  margin-top: 30px;
  margin-left: 20px;
}
.item-image-title {
  display: flex;
  padding-top: 10px;
  .item-image {
    width: 30px;
    height: 30px;
  }
  .item-title {
    padding-left: 10px;
  }
}
.item-currency-amount {
  display: flex;
  padding-left: 40px;
  margin-top: 10px;
  .item-amount {
    color: red;
    padding-left: 2px;
  }
  .item-packages {
    margin-left: 140px;
    span {
      margin-left: 10px;
    }
  }
}
.item-orders {
  span {
    margin-left: 10px;
  }
}
.item-orders-deliveries {
  display: flex;
  padding-left: 40px;
  margin: 15px 0 20px 0;
  .item-deliveris {
    margin-left: 95px;
    span {
      margin-left: 10px;
    }
  }
}
.dep-line {
  width: 78%;
  text-align: center;
  height: 1px;
  border: 1px solid #eee;
  margin-top: 10px;
  transform: scaleY(0.5);
  margin-left: 30px;
  // border-radius: 50%;
}
</style>