<template>
  <view class="goodsItem flex-between">
    <view class="imgbox">
      <image
        src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/mallManage/user.png"
        mode="aspectFill"
        class="img"
      />
    </view>
    <view class="goodsInfoBox">
      <view class="goodsName"
        >测试商品</view
      >
      <view class="price">￥0.01</view>
      <view class="flex-between surplus">
        <text>库存:999</text>
        <u-icon name="ellipsis" :size="40" @click="changeShow"></u-icon>
      </view>
      <view class="operationBox flex-between" v-if="showOperationBox">
        <view class="btn">
          <image
            src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/mallManage/edit.png"
            mode=""
            style="width: 40rpx; height: 40rpx"
          />
          编辑
        </view>
        <view class="btn">
          <image
            src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/mallManage/xiajia.png"
            mode=""
            style="width: 40rpx; height: 40rpx"
          />
          下架
        </view>
        <view class="btn">
          <image
            src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/mallManage/delete.png"
            mode=""
            style="width: 40rpx; height: 40rpx"
          />
          删除
        </view>
        <view class="sanjiaoxing"></view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      showOperationBox: false,
    };
  },
  methods: {
    changeShow() {
      this.showOperationBox = !this.showOperationBox;
    },
  },
};
</script>
<style lang="scss" scoped>
.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.goodsItem {
  width: 700rpx;
  height: 200rpx;
  margin: 10rpx auto;
  box-sizing: border-box;
  padding: 20rpx;
  border-radius: 6rpx;
  background-color: #fff;
  .imgbox {
    width: 150rpx;
    height: 150rpx;
    border-radius: 6rpx;
    overflow: hidden;
    margin-right: 20rpx;
    box-shadow: 0rpx 0rpx 10rpx 0px rgba(36, 36, 36, 0.2);
    .img {
      width: 100%;
      height: 100%;
      border-radius: 10rpx;
    }
  }
  .goodsInfoBox {
    width: 490rpx;
    font-size: 24rpx;
    color: #333;
    height: 150rpx;
    position: relative;
    .goodsName {
      height: 50%;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      font-size: 28rpx;
      word-break: break-all;
    }
    .price {
      font-size: 28rpx;
      color: #f00;
    }
    .surplus {
      font-size: 24rpx;
    }
    .operationBox {
      width: 260rpx;
      height: 100rpx;
      border-radius: 10rpx;
      background-color: #404040;
      position: absolute;
      top: 0rpx;
      right: 0rpx;
      padding: 0 20rpx;
      .btn {
        width: 55rpx;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        font-size: 26rpx;
        color: #fff;
      }
    }
    .sanjiaoxing {
      width: 0;
      height: 0;
      border-left: 10rpx solid transparent;
      border-right: 10rpx solid transparent;
      border-top: 10rpx solid #404040;
      position: absolute;
      top: 100rpx;
      right: 16rpx;
    }
  }
}
</style>