<template>
  <view class="container">
    <custom-navbar
      title="平台自营服务列表"
      :leftImg="'/static/images/whiteBack.png'"
      :showUser="true"
      backgroundColor="linear-gradient( 134deg, #F52540 0%, #E8101E 100%)"
      headleSrc="/static/images/recruit/guide.png"
      :showHeadle="true"
      titleColor="#fff"
      borderBottom="none"
      @onHeadleClick="openPop"
    ></custom-navbar>
    <searchBox
      placeholder="请搜索服务名称"
      v-model="queryData.title"
      @confirm="search"
      @search="search"
    >
    </searchBox>

    <!-- Tab 内容区域 -->
    <view class="tab-nav">
      <view
        v-for="tab in tabs"
        :key="tab.id"
        class="tab-item"
        :class="{ active: queryData.us_state === tab.id }"
        @click="switchTab(tab.id)"
      >
        {{ tab.name }}
      </view>
    </view>

    <CommonList
      ref="groupRef"
      :apiUrl="info[artisanType].list"
      :listScrollHeight="`calc(100vh - ${statusBarHeight + 350}rpx)`"
    >
      <template #listData="{ list }">
        <view class="scoll-lists">
          <view class="list-item" v-for="(item, index) in list" :key="index">
            <image
              class="list-item-right"
              :src="item.photo[0]"
              mode="aspectFill"
            ></image>
            <view class="list-item-left">
              <view class="list-item-left-name">{{ item.title }}</view>
              <view class="list-item-left-price flex-row-center-between">
                <text class="list-item-left-price-text"
                  ><text style="font-size: 24rpx">¥</text
                  >{{ item.server_price }}</text
                >
                <view class="list-item-left-price-btn" @click="handleService(item)">{{ item.us_state==1?"下架":"上架"}}</view>
              </view>
            </view>
             <image class="list-item-type" :src="item.us_state==1?`/static/images/tab/shangjia.png`:`/static/images/tab/xiajia.png`"></image>
          </view>
        </view>
      </template>

      <!-- 空数据状态 -->
      <template #empty>
        <noData></noData>
      </template>
    </CommonList>

    <uv-popup ref="popup" bgColor="">
      <view class="pop-content">
        <text class="pop-content-title"> 什么是平台自营服务列表 </text>
        <text class="pop-content-text">
          1、平台自营服务：商品平台统一提供，服务由指定提供者承接。售价为商品标价，实际到账金额
          = 售价 - 平台服务费，以实际到账为准。
        </text>
        <text class="pop-content-text">
          2、已上架即商品处于售卖状态，请依据实际库存情况，合理执行上下架操作。
        </text>
        <text class="pop-content-text">
          3、商品售价将根据平台规则动态调整，当前标价仅为即时售价信息。
        </text>
        <view class="pop-content-btns">
          <view class="pop-content-close" @click="closePop"> 取消 </view>
          <view class="pop-content-sure" @click="closePop"> 我已了解 </view>
        </view>
      </view>
    </uv-popup>
  </view>
</template>

<script>
import request from "@/utils/request";
import searchBox from "@/pages/service/components/search-box.vue";
import CommonList from "@/components/common/CommonList.vue";
export default {
  name: "list",
  components: {
    searchBox,
    CommonList,
  },
  data() {
    return {
      queryData: {
        title: "",
		us_state:1,
      },
      userInfo: {},
      artisanType: 2,
      info: {
        1: {
          list: "/syr/serversSelf/list",
          name: "手艺人",
          switch: "/syr/serversSelf/switch",
        },
        2: {
          list: "/sj/serversSelf/list",
          name: "商家",
          switch: "/sj/serversSelf/switch",
        },
      },
      statusBarHeight: 0,

      // Tab 数据源，通过修改这个数组可以动态增删 Tab
      tabs: [
        {
          id: 1,
          name: "已上架",
          content:
            "这里是「已上架」商品的内容区域，可以展示商品列表、库存信息等。",
        },
        {
          id: 2,
          name: "已下架",
          content:
            "这里是「已下架」商品的内容区域，可以展示历史商品、下架原因等。",
        },
      ],
    };
  },
  computed: {},
  async onLoad(options) {
    let type = this.artisanType == 1 ? 2 : this.artisanType == 2 ? 3 : "";
    let result = await request.post("/user/getuser", {
      type,
    });
    this.userInfo = result.data;
    //获取用户所属城市
    this.queryData.city = this.userInfo.dependency_city;
    this.queryData.province = this.userInfo.dependency_province;
    console.log(this.artisanType);
    this.statusBarHeight = this.getRpxStatusBarHeight();
    this.$nextTick(() => {
      this.search();
    });
  },
  methods: {
    handleService(item){
       uni.showModal({
        title: "提示",
        content: `确定要${item.us_state==1?"下架":"上架"}该服务吗？`,
        success: (res) => {
          if (res.confirm) {
            request
              .post(this.info[this.artisanType].switch, { id: item.id, us_state: item.us_state==1?2:1})
              .then((res) => {
                if (res.code == 200) {
                  uni.showToast({
                    title: "下架成功",
                    icon: "none",
                  });
                  this.search();; // 刷新列表
                } else {
                  uni.showToast({
                    title: res.msg,
                    icon: "none",
                  });
                }
              });
          }
        },
      });
    },
    search() {
      this.$refs.groupRef.manualRefresh(this.queryData);
    },
    // 切换 Tab 的方法
    switchTab(tabId) {
      this.queryData.us_state = tabId;
	  this.search();
    },
    openPop() {
      this.$refs.popup.open("center");
    },
    closePop() {
      this.$refs.popup.close();
    },
  },
};
</script>

<style lang="less">
.container {
  .tab-nav {
    display: flex;
    justify-content: space-between;
    padding: 0 150rpx;
    background: #fff;

    .tab-item {
      padding: 30rpx 0rpx 40rpx 0rpx;
      cursor: pointer;
      font-weight: 400;
      font-size: 30rpx;
      color: #333333;
      line-height: 42rpx;
      text-align: left;
      font-style: normal;
      /* 预先设置透明边框，防止切换时布局跳动 */

      &.active {
        color: #e8101e;
        font-weight: 500;
        position: relative;

        &:after {
          content: "";
          position: absolute;
          bottom: 27rpx; // 定位在底部边框的下方
          left: 50%;
          transform: translateX(-50%); // 水平居中

          /* 激活时显示红色边框 */
          width: 34rpx;
          height: 6rpx;
          background: linear-gradient(306deg, #e8101e 0%, #fc563b 100%);
          border-radius: 3rpx;
        }
      }
    }
  }
}

.pop-content {
  width: 620rpx;
  background-image: url("/static/images/background/selfOperatedTip.png");
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 20rpx;

  .pop-content-title {
    padding-top: 193rpx;
    padding-bottom: 40rpx;
    text-align: center;
    font-weight: 500;
    font-size: 36rpx;
    color: #333333;
    line-height: 50rpx;
    font-style: normal;
    display: block;
  }
  .pop-content-text {
    padding: 0 40rpx;
    font-weight: 400;
    font-size: 28rpx;
    color: #333333;
    line-height: 40rpx;
    text-align: left;
    font-style: normal;
    display: block;
  }
  .pop-content-btns {
    display: flex;
    padding: 0 54rpx;
    justify-content: space-between;
    margin-top: 80rpx;
	padding-bottom: 51rpx;
    .pop-content-close {
      width: 246rpx;
      height: 80rpx;
      border-radius: 40rpx;
      border: 2rpx solid #e8101e;
      font-weight: 500;
      font-size: 28rpx;
      color: #e8101e;
      text-align: left;
      font-style: normal;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .pop-content-sure {
      width: 246rpx;
      height: 80rpx;
      background: #e8101e;
      border-radius: 40rpx;
      font-weight: 500;
      font-size: 28rpx;
      color: #ffffff;
      text-align: left;
      font-style: normal;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}

.scoll-lists {
  padding: 0 20rpx;
  margin-top: 20rpx;
  .list-item {
    box-sizing: border-box;
    padding: 20rpx;
    height: 200rpx;
    background: #ffffff;
    border-radius: 20rpx;
    margin-bottom: 20rpx;
    position: relative;
    .list-item-type {
      position: absolute;
      top: 0;
      right: 0;
      width: 128rpx;
      height: 49rpx;
    }
    .list-item-right {
      width: 160rpx;
      height: 160rpx;
      border-radius: 20rpx;
    }
    .list-item-left {
      flex: 1;
      margin-left: 26rpx;
      .list-item-left-name {
        font-weight: 500;
        font-size: 30rpx;
        color: #333333;
        line-height: 42rpx;
        text-align: left;
        font-style: normal;
        margin-bottom: 60rpx;
      }
      .list-item-left-price {
        width: 100%;

        .list-item-left-price-text {
          font-weight: 500;
          font-size: 40rpx;
          color: #e8101e;
          line-height: 48rpx;
          text-align: left;
          font-style: normal;
        }
        .list-item-left-price-btn {
		  box-sizing: border-box;
          padding: 0 38rpx;
          height: 56rpx;
          border-radius: 36rpx;
          border: 2rpx solid #666666;
          font-weight: 400;
          font-size: 28rpx;
          color: #333333;
          line-height: 56rpx;
          text-align: left;
          font-style: normal;
        }
      }
    }
  }
}

::v-deep .right-area {
  width: 31rpx!important;
  height: 31rpx!important;
}
::v-deep .icon-headle {
  width: 31rpx!important;
  height: 31rpx!important;
}

.common-list {
  background: transparent!important;
}

::v-deep .list-container {
  padding: 0!important;
}

::v-deep .list-scroll {
  margin-top: 0!important;
}
</style>
