<template>
  <div class="container">
    <cr-image width="100%" height="2.4rem" :src="specialRecommend" @click="go('special')" v-if="showSpecial"></cr-image>
    <div class="goods" v-if="column === 1">
      <div class="goods-item goods-item_one" @click="go('detail', goods.skuNo)" v-for="goods in goodsList" :key="goods.id">
        <cr-image width="100%" height="3.15rem" class="goods-item-img" fit="contain" :src="goods.skuUrl"></cr-image>
        <div class="goods-item_one-right">
          <p class="goods-item-title">{{goods.skuName}}</p>
          <div class="goods-item-bottom">
            <div class="Gi-bottom-left">
              <p>¥{{goods.salePrice || '-'}}</p>
              <p>¥{{goods.marketPrice || '-'}}</p>
            </div>
            <cr-button
              shape="circle"
              type="primary"
              @click="go('detail', goods.skuNo)"
            >
              立即抢购
            </cr-button>
          </div>
        </div>
      </div>
    </div>
    <div class="goods" v-else>
      <div :class="['goods-item', {'goods-item_three': column === 3, 'goods-item_two': column === 2}]"  v-for="goods in goodsList" :key="goods.id" @click="go('detail', goods.skuNo)">
        <cr-image width="100%" height="3.15rem" class="goods-item-img" fit="contain" :src="goods.skuUrl"></cr-image>
        <p class="goods-item-title">{{goods.skuName}}</p>
        <div class="goods-item-bottom">
          <div class="Gi-bottom-left">
            <p>¥{{goods.salePrice || '-'}}</p>
            <p>¥{{goods.marketPrice || '-'}}</p>
          </div>
          <div class="Gi-bottom-right" @click="addShopCart(goods)">
            <cr-image width="0.45rem" height="0.45rem" :src="shoppingCart"></cr-image>
          </div>
        </div>
      </div>
      <div class="goods-item goods-item_three goods-item_empty" v-if="showEmpty"></div>
    </div>
  </div>
</template>
<script>
  import shoppingCart from './images/shopping-cart@2x.png';
  import specialRecommend from './images/special-recommend.png';
  import operationApi from '@api/operation.api';
  export default {
    inject: ['editor'],
    props: {
      goods: {
        type: Object,
        default: () => ({
          type: 'goods',
          ids: []
        })
      },
      goodsNumber: Number,
      column: {
        type: Number,
        default: 2
      },
      showSpecial: {
        type: Boolean,
        default: true
      },
      specialUrl: String,
      specialLink: String,
    },
    data() {
      return {
        list: [],
        shoppingCart,
        specialRecommend
      }
    },
    computed: {
      goodsList() {
        if (this.editor) this.$nextTick(() =>this.editor.adjustHeight());
        return this.list.slice(0, this.goodsNumber);
      },
      showEmpty() {
        return this.column === 3 && this.goodsNumber % 3 === 2;
      }
    },
    watch: {
      goods: {
        handler: async function (newVal) {
          if (newVal.ids.length) {
            let records = [];
            if(newVal.type === 'goodsSpecial') {
              ({ skus: records } = await operationApi.getGoods({ specialId: newVal.ids[0] }));
            } else if (newVal.type === 'goods') {
              ({ skus: records } = await operationApi.getGoods({ skus: newVal.ids }));
            }
            if(records.length) this.list = records;
          }
          // console.log('watch', this.list);
        },
        immediate: true
      }
    },
    methods: {
      go(type, params) {
        if (type === 'special' && this.specialLink) {
          window.location.href = this.specialLink;
        } else if (type === 'goodsDetail') {
          window.location.href = `xyqb://homepage/goodsdetail?skuNo=${params}`;
        }
      },
      async addShopCart(goods) {
        const { skuNo, skuSource } = goods;
        const params = [{ skuId: skuNo, skuNum: 1, skuSource, type: 1 }];
        await operationApi.addShopCart({ shopCartBaseList: params });
        this.$toast.success('添加成功');
      }
    }
  }
</script>
<style lang="less" scoped>
  .container {
    margin: 0 12px;

    .goods {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding: 4px;
      font-size: 0;

      &-item {
        border-radius: 8px;
        background: #fff;
        margin-bottom: 4px;
        overflow: hidden;

        &-title {
          height: 36px;
          font-size: 12px;
          line-height: 18px;
          display: -webkit-box;
          overflow: hidden;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          text-align: left;
        }

        &-bottom {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .Gi-bottom-left {
            display: flex;
            flex-direction: column;
            align-items: center;

            p {
              max-width: 55px;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              text-align: left;

              &:first-child {
                font-size: 15px;
                color: #ec3333;
              }

              &:last-child {
                font-size: 13px;
                color: #999;
                text-decoration: line-through;
              }
            }
          }

          .Gi-bottom-right {
            width: 30px;
            height: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #fff3f3;
            border-radius: 50%;

            /deep/ .cr-image {
              width: 18px !important;
              height: 18px !important;
            }
          }
        }

        &_one {
          display: flex;
          width: 100%;

          .goods-item-img {
            width: 112px !important;
            height: 109px !important;
          }

          &-right {
            padding: 6px 8px;
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .Gi-bottom-left {
              margin-right: 10px;
              flex: 1;
              display: flex;
              justify-content: space-around;
              flex-direction: row;
              align-items: flex-end;

              p {
                max-width: 55px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
            }
            // 组件库替换变量处理
            /deep/ .cr-button--primary {
              height: 24px;
              line-height: 24px;
              border: 0;
              background: linear-gradient(269deg, #ff5d00 12%, #ff1900 86%);
            }
          }
        }

        &_two {
          width: 49%;

          .goods-item-img {
            width: 100% !important;
            height: 180px !important;
          }

          .goods-item-title {
            margin: 8px 8px;
          }

          .goods-item-bottom {
            margin: 0 8px 6px;
          }
        }

        &_three {
          width: 32%;

          .goods-item-img {
            width: 100% !important;
            height: 117px !important;
          }

          .goods-item-title {
            margin: 8px 4px;
          }

          .goods-item-bottom {
            margin: 0 4px 6px;

            .goods-item-bottom {

            }
          }
        }

        &_empty {
          height: 0;
        }
      }
    }
  }
</style>