<script lang="ts" setup>
import { ref } from "vue";
import { productList } from "@/api/product";
import Taro from "@tarojs/taro";

const swiperCur = ref(0);

const mer_id = ref("");

interface List {
  ID: number;
  cover: string;
  name: string;
  market_num: number;
  stock: number;
  status: number;
  state: number;
}

const list = ref<Array<List>>([]);

Taro.useLoad(() => {
  getData();
});

const getData = async () => {
  try {
    const mey_type = Taro.getStorageSync("mer_type");
    const user_info = Taro.getStorageSync("userInfo");
    const res = await productList({
      bid: user_info.data.bid,
      BType: mey_type,
    });
    console.log(res);
    list.value = res.data.data || [];
  } catch (e) {
    Taro.showToast({
      title: e.msg,
      icon: "none",
    });
    throw e;
  }
};

const swiperChange = () => {};

const jumpAddGoods = (id: number | null, type: number) => {
  Taro.navigateTo({
    url: `/pages/product/addGoods/index?id=${id}&type=${type}`,
  });
};

const changeState = (item: List) => {
  console.log(item);
};
</script>

<template>
  <view>
    <view class="order-index" ref="container">
      <view class="header">
        <view class="header_count">
          <swiper
            :indicator-dots="true"
            :circular="true"
            indicator-color="#E4E4E4"
            indicator-active-color="#E93323"
            previous-margin="0"
            next-margin="0"
            :current="swiperCur"
            @change="swiperChange"
          >
            <swiper-item :class="{ active: 0 == swiperCur }">
              <view class="slide-navigator">
                <view class="item" @click="jumpAddGoods(null, 1)">
                  <image
                    mode="widthFix"
                    class="image"
                    src="../static/images/product_add.png"
                  ></image>
                  <text class="text">添加商品</text>
                </view>
                <navigator
                  class="item"
                  :url="`/pages/product/goodsOnSale/index?mer_id=${mer_id}&type=1`"
                  hover-class="none"
                >
                  <image
                    mode="widthFix"
                    class="image"
                    src="../static/images/product_sales.png"
                  ></image>
                  <text class="text">在售商品</text>
                </navigator>
                <navigator
                  class="item"
                  :url="`/pages/product/goodsOnSale/index?mer_id=${mer_id}&type=3`"
                  hover-class="none"
                >
                  <image
                    mode="widthFix"
                    class="image"
                    src="../static/images/product_out.png"
                  ></image>
                  <text class="text">售罄商品</text>
                </navigator>
                <navigator
                  class="item"
                  :url="`/pages/product/goodsOnSale/index?mer_id=${mer_id}&type=5`"
                  hover-class="none"
                >
                  <image
                    mode="widthFix"
                    class="image"
                    src="../static/images/product_recycle.png"
                  ></image>
                  <text class="text">回收站</text>
                </navigator>
                <navigator
                  class="item"
                  :url="`/pages/product/storeClassification/index?mer_id=${mer_id}`"
                  hover-class="none"
                >
                  <image
                    mode="widthFix"
                    class="image"
                    src="../static/images/product_cate.png"
                  ></image>
                  <text class="text">店铺分类</text>
                </navigator>
              </view>
            </swiper-item>
            <swiper-item :class="{ active: 1 == swiperCur }">
              <view class="slide-navigator">
                <navigator
                  class="item"
                  :url="`/pages/product/addGoods/freightTemplate?mer_id=${mer_id}`"
                  hover-class="none"
                >
                  <image
                    mode="widthFix"
                    class="image"
                    src="../static/images/product_freight.png"
                  ></image>
                  <text class="text">运费模板</text>
                </navigator>
                <navigator
                  class="item"
                  :url="`/pages/product/addGoods/mulSpecification?mer_id=${mer_id}`"
                  hover-class="none"
                >
                  <image
                    mode="widthFix"
                    class="image"
                    src="../static/images/product_specification.png"
                  ></image>
                  <text class="text">规格模板</text>
                </navigator>
              </view>
            </swiper-item>
          </swiper>
        </view>
      </view>
      <view class="wrapper">
        <view class="item" v-for="(item, index) in list" :key="index">
          <view class="header">
            <image :src="item.cover"></image>
            <view class="right">
              <view>{{ item.name }}</view>
              <view class="text">
                <text class="text-af"
                  >价格:
                  <text class="text-red">{{ item.market_num }}</text>
                </text>
                <text class="text-af"
                  >销量:
                  <text class="text-red">{{ 0 }}</text>
                </text>
                <text class="text-af"
                  >库存:
                  <text class="text-red">{{ item.stock }}</text>
                </text>
              </view>
            </view>
          </view>
          <view class="line"></view>
          <view class="bottom">
            <view>
              上架：
              <nut-switch
                v-model="item.state"
                :active-value="1"
                :inactive-value="2"
                @change="changeState(item)"
              />
            </view>
            <nut-button
              style="margin-left: 10px"
              type="primary"
              size="mini"
              @click="jumpAddGoods(item.ID, 2)"
            >
              编辑
            </nut-button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
.order-index {
  background-image: url("data:image/png;base64,[encoded data, 14496 characters]");
  background-repeat: no-repeat;
  background-size: 100%;
}

swiper {
  height: 200px;
}

.header {
  padding-top: 40px;
  margin: 0 20px;

  .header_count {
    width: 710px;
    padding: 30px 30px 0;
    background: #ffffff;
    border-radius: 10px;
    position: relative;
  }

  .item {
    display: inline-block;
    width: 130px;
    text-align: center;

    .image {
      width: 84px;
      height: 84px;
    }

    .text {
      display: block;
      text-align: center;
      color: #666666;
      font-size: 24px;
      margin-top: 18px;
    }
  }
}

.swiper-slides {
  width: 650px;
}

.swiper-dot {
  width: 15px;
  height: 5px;
}

.swiper-dots-horizontal .swiper-dot {
  margin-right: 0;
}

.wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-top: 45px;
  align-items: center;

  .item {
    width: 95%;
    background-color: white;
    border-radius: 10px;
    margin-bottom: 30px;
    padding: 10px;

    .header {
      display: flex;

      image {
        width: 150px;
        height: 150px;
        min-width: 150px;
        border-radius: 16px;
      }

      .right {
        margin-left: 20px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        word-break: break-word;

        .text {
          margin-top: 10px;
          display: flex;
          justify-content: space-between;
        }
      }
    }

    .line {
      width: 95%;
      height: 2px;
      background-color: #cecece;
      opacity: 0.5;
      margin: 10px auto;
    }

    .bottom {
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }
  }
}

.text-red {
  color: red;
}

.text-af {
  color: #afafaf;
}
</style>
