<template>
  <view class="service-page">
    <custom-navbar
      title="工时管理"
      :showBack="true"
      backgroundColor="#FFFFFF"
    ></custom-navbar>
    <view class="flexed">
      <!-- 搜索框 -->
      <view class="headerBox">
        <view class="search-box">
          <input
            type="text"
            class="search-inp"
            placeholder="工时名称"
            placeholder-class="placeholder"
            v-model="title"
          />
          <image
            src="/static/home/search.png"
            class="search-icon"
            mode="aspectFit"
            @click="getServicesList"
          ></image>
        </view>
        <view class="addBox" @click="showTip = true">
          <image class="addIcon" src="@/static/images/icons/add_time.png" />
          <text class="addText">添加工时</text>
        </view>
      </view>

      <!-- 状态标签 -->
      <view class="tab-container">
        <view
          v-for="(tab, index) in tabs"
          :key="index"
          :class="['tab-item', { active: currentTab === index }]"
          @click="switchTab(index, tab.id)"
        >
          {{ tab.text }}
        </view>
      </view>
    </view>

    <!-- 服务列表 -->
    <view class="service-list" v-if="services.length != 0 || !services">
      <manHourCard
        :index="index"
        :info="item"
        @viewEdit="viewEdit"
        @viewList="viewList"
        @viewRemove="viewRemove"
        v-for="(item, index) in services"
      ></manHourCard>
    </view>

    <!-- 暂无数据 -->
    <view class="service-nothings" v-else>
      <text class="nothings-text">暂无数据...</text>
    </view>

    <!-- 加载更多 -->
    <view v-if="hasMore" class="load-more">
      <text>已加载全部</text>
    </view>
    <tipsPopup
      @okBtn="addService"
      :show="showTip"
      @closePopup="showTip = false"
    ></tipsPopup>
  </view>
</template>

<script>
import request from "@/utils/request";
import tipsPopup from "./components/tips-popup.vue";
import manHourCard from "./components/manHourCard.vue";
export default {
  data() {
    return {
      title: "",
      state: undefined,
      currentTab: 0,
      showTip: false,
      tabs: [
        {
          id: undefined,
          text: "全部",
        },
        {
          id: 2,
          text: "已上架",
        },
        {
          id: 1,
          text: "审核中",
        },
        {
          id: 3,
          text: "下架",
        },
        {
          id: 0,
          text: "草稿",
        },
        {
          id: 4,
          text: "驳回",
        },
      ],
      services: [],
      hasMore: false,
      startX: 0,
      moveX: 0,
      currentIndex: -1,
      count: 0,
    };
  },
  components: { tipsPopup, manHourCard },
  onLoad() {
    this.getServicesList();
    this.getClass();
  },

  methods: {
    getClass() {
      request.post("/syr/workHour/classList").then((res) => {
        uni.setStorageSync("classList", JSON.stringify(res.data));
      });
    },
    getServicesList() {
      let url = "/syr/workHour/list";
      request
        .post(url, { state: this.state, title: this.title, page: 1, limit: 10 })
        .then((res) => {
          this.services = res.data.list;
          this.count = res.data.count;
        });
    },
    switchTab(index, id) {
      this.currentTab = index;
      this.state = id;
      this.getServicesList();
    },
    viewRemove(item) {
      uni.showModal({
        title: "提示",
        content: "确定要下架该服务吗？",
        success: (res) => {
          if (res.confirm) {
            request
              .post("/user/serveronoff", { id: item.id, state: 3 })
              .then((res) => {
                if (res.state == 1) {
                  uni.showToast({
                    title: "下架成功",
                    icon: "none",
                  });
                  this.getServicesList(0); // 刷新列表
                } else {
                  uni.showToast({
                    title: res.msg,
                    icon: "none",
                  });
                }
              });
          }
        },
      });
    },
    viewList(item) {
      request
        .post("/user/serveronoff", { id: item.id, state: 2 })
        .then((res) => {
          if (res.state == 1) {
            uni.showToast({
              title: "上架成功",
              icon: "none",
            });
            this.getServicesList(0); // 刷新列表
          } else {
            uni.showToast({
              title: res.msg,
              icon: "none",
            });
          }
        });
    },
    viewEdit(item) {
      uni.navigateTo({
        url: `/pages/syr/manHour/addManHour?id=${item.id}&state=${item.state}`,
      });
    },
    addService() {
      uni.navigateTo({
        url: `/pages/syr/manHour/addManHour`,
      });
    },
    deleteService(item) {
      uni.showModal({
        title: "提示",
        content: "确定要删除该服务吗？",
        success: (res) => {
          if (res.confirm) {
            request.post("/user/serverdel", { id: item.id }).then((res) => {
              if (res.state == 1) {
                uni.showToast({
                  title: "删除成功",
                  icon: "none",
                });
                this.getServicesList(0); // 刷新列表
              } else {
                uni.showToast({
                  title: res.msg,
                  icon: "none",
                });
              }
            });
          }
        },
      });
    },

    resetSlide() {
      this.services.forEach((item, index) => {
        if (index !== this.currentIndex) {
          this.$set(item, "slideX", 0);
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.service-page {
  padding-bottom: 30rpx;
}
/* 搜索框样式 */
.search-box {
  // width: 750rpx;
  width: 100%;
  background-color: #ffffff;
  border-radius: 8rpx;

  box-sizing: border-box;
  position: relative;
}
.flexed {
  position: sticky;
  top: 88rpx;
  left: 0;
  z-index: 999;
}

.search-inp {
  // width: 700rpx;
  width: 100%;
  height: 68rpx;
  background-color: #f4f5f7;
  border-radius: 34rpx;
  padding: 0 70rpx 0 48rpx;
  font-size: 28rpx;
  box-sizing: border-box;
}

.placeholder {
  color: #999999;
}

.search-icon {
  width: 32rpx;
  height: 32rpx;
  position: absolute;
  right: 56rpx;
  top: 50%;
  transform: translateY(-50%);
}

/* 标签栏样式 */
.tab-container {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  background-color: #FAFAFA;
  padding: 30rpx 0rpx 20rpx 30rpx;
  box-sizing: border-box;
}

.tab-item {
  flex: 1;
  text-align: center;
  font-size: 30rpx;
  color: #666666;
  padding: 16rpx 0;
  position: relative;
}

.tab-item.active {
  color: #000000;
  font-weight: 500;
}

.tab-item.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 32rpx;
  height: 6rpx;
  background-color: #E8101E;
  border-radius: 3rpx;
}

/* 服务列表样式 */
.service-list {
  margin: 24rpx 24rpx 0;
}

.load-more {
  text-align: center;
  padding: 20rpx 0;
  color: #999999;
  font-size: 24rpx;
}

.service-item {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.service-nothings {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  padding: 280rpx 0 0;
}
.nothings-text {
  font-size: 32rpx;
  font-weight: 500;
  color: #999999;
  text-align: center;
  font-style: italic;
}
.add-btn {
  height: 140rpx;
}
/* 平台特定样式 */
/* #ifdef H5 */
.service-container {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}
/* #endif */

/* #ifdef APP-PLUS */
.service-image {
  border: 1rpx solid #eeeeee;
}
.flexed {
  top: calc(var(--status-bar-height) + 88rpx);
}
/* #endif */

/* #ifdef MP-WEIXIN */
.search-box input {
  /* 小程序搜索框样式调整 */
  box-sizing: border-box;
}
.flexed {
  top: calc(var(--status-bar-height) + 88rpx);
}
.service-item {
  /* 小程序阴影效果 */
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}
/* #endif */
.headerBox {
  display: flex;
  align-items: center;
  gap: 30rpx;
  background-color: #fff;
  padding: 24rpx 30rpx;
  .search-box {
    // flex: 1;
  }
  .addBox {
    // width: 100rpx;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 4rpx;
    align-items: center;
    padding-right: 17rpx;
    .addIcon {
      width: 42rpx;
      height: 42rpx;
    }
    .addText {
      color: #666666;
      font-size: 20rpx;
      position: relative;
      &::after {
        content: "";
        position: absolute;
        background-image: url("/static/images/icons/triangle_down.png");
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        top: 50%;
        transform: translateY(-50%);
        right: -17rpx;
        width: 12rpx;
        height: 8rpx;
      }
    }
  }
}
</style>
