<template>
  <u-popup
    :show="show"
    mode="bottom"
    @close="handleClose"
    :closeOnClickOverlay="false"
    closeable
    :safeAreaInsetBottom="true"
    :round="20"
  >
    <view class="filter-popup">
      <view class="filter-header">
        <!-- <u-tabs
          :list="tabList"
          :current="currentTab"
          @change="tabChange"
          :activeStyle="{
            color: '#4080FF',
            fontWeight: 'bold',
          }"
          :inactiveStyle="{
            color: '#333333',
          }"
          itemStyle="padding-left: 30rpx; padding-right: 30rpx; height: 100rpx;"
        ></u-tabs> -->
        <view class="type-box flex_box">
          <view
            class="type-item"
            v-for="(item, index) in tabList"
            :key="index"
            @click="tabChange({ index })"
          >
            <view class="type-val" :class="{ actived: currentTab === index }">{{
              item.name
            }}</view>
            <u-icon name="arrow-down-fill" color="#999999" size="12"></u-icon>
          </view>
        </view>
      </view>
      <view class="filter-content">
        <!-- 盘点状态 -->
        <scroll-view scroll-y class="filter-scroll" v-if="currentTab === 0">
          <view class="category-content">
            <u-checkbox-group
              v-model="selectedValues.statusList"
              placement="column"
              @change="onStatusChange"
            >
              <view
                v-for="(item, index) in inventoryStatusList"
                :key="index"
                class="checkbox-item"
              >
                <u-checkbox
                  :name="item.value"
                  shape="circle"
                  activeColor="#4080FF"
                  :label="item.name"
                  size="20"
                >
                </u-checkbox>
              </view>
            </u-checkbox-group>
          </view>
        </scroll-view>

        <!-- 盘点人选项 -->
        <scroll-view scroll-y class="filter-scroll" v-if="currentTab === 1">
          <u-checkbox-group
            v-model="selectedValues.userIdList"
            placement="column"
            @change="onUserChange"
          >
            <view
              v-for="(item, index) in userOptions"
              :key="index"
              class="checkbox-item"
            >
              <u-checkbox
                :name="item.value"
                shape="circle"
                activeColor="#4080FF"
                :label="item.label"
                size="20"
              >
              </u-checkbox>
            </view>
          </u-checkbox-group>
        </scroll-view>

        <!-- 类目选项 - 左右布局实现二级联动 -->
        <view class="category-container" v-if="currentTab === 2">
          <view class="category-sidebar">
            <scroll-view scroll-y style="height: 100%">
              <view
                v-for="(item, index) in categorySidebarList"
                :key="index"
                class="sidebar-item"
                :class="{ active: currentCategoryIndex === index }"
                @click="changeCategoryIndex(index)"
              >
                <text>{{ item.name }}</text>
              </view>
            </scroll-view>
          </view>
          <view class="category-content">
            <scroll-view scroll-y style="height: 100%">
              <u-checkbox-group
                v-model="selectedValues.categoryIdList"
                placement="column"
                @change="onCategoryChange"
              >
                <view
                  v-for="(item, index) in categoryContentList"
                  :key="index"
                  class="checkbox-item"
                >
                  <u-checkbox
                    :name="item.id"
                    shape="circle"
                    activeColor="#4080FF"
                    :label="item.title"
                    size="20"
                  >
                  </u-checkbox>
                </view>
              </u-checkbox-group>
            </scroll-view>
          </view>
        </view>

        <!-- 库位选项 - 左右布局实现二级联动 -->
        <view class="category-container" v-if="currentTab === 3">
          <view class="category-sidebar">
            <scroll-view scroll-y style="height: 100%">
              <view
                v-for="(item, index) in locationSidebarList"
                :key="index"
                class="sidebar-item"
                :class="{ active: currentLocationIndex === index }"
                @click="changeLocationIndex(index)"
              >
                <text>{{ item.name }}</text>
              </view>
            </scroll-view>
          </view>
          <view class="category-content">
            <scroll-view scroll-y style="height: 100%">
              <u-checkbox-group
                v-model="selectedValues.positionList"
                placement="column"
                @change="onLocationChange"
              >
                <view
                  v-for="(item, index) in locationContentList"
                  :key="index"
                  class="checkbox-item"
                >
                  <u-checkbox
                    :name="item.value"
                    shape="circle"
                    activeColor="#4080FF"
                    :label="item.label"
                    size="20"
                  >
                  </u-checkbox>
                </view>
              </u-checkbox-group>
            </scroll-view>
          </view>
        </view>
      </view>
      <view class="filter-footer">
        <u-button
          text="重置"
          :plain="true"
          shape="circle"
          @click="resetFilter"
          class="footer-btn"
        ></u-button>
        <u-button
          text="确定"
          type="primary"
          shape="circle"
          @click="confirmFilter"
          class="footer-btn"
        ></u-button>
      </view>
    </view>
  </u-popup>
</template>

<script>
import {
  getMaterialCategoryTree,
  creatorSpinnerList,
} from "@/common/request/apis/inventoryTask";
import { inventoryPositionTree } from "@/common/request/apis/inventoryInquiry";
import { goodsInventoryStatus } from "../utils/index.js";
export default {
  name: "InventoryFilterPopup",
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    // 初始选中值
    defaultValues: {
      type: Object,
      default: () => ({
        statusList: [],
        userIdList: [],
        categoryIdList: [],
        positionList: [],
      }),
    },
    taskId: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      currentTab: 0,
      tabList: [
        { name: "盘点状态" },
        { name: "盘点人" },
        { name: "类目" },
        { name: "库位" },
      ],
      // 盘点状态
      inventoryStatusList: goodsInventoryStatus,
      // 盘点人选项
      userOptions: [],
      // 类目树形数据
      categoryTree: [],
      // 当前选中的类目侧边栏索引
      currentCategoryIndex: 0,

      // 库位树形数据
      locationTree: [
        {
          id: "zone_a",
          name: "A区",
          children: [
            { label: "A1-1-1", value: "A1-1-1" },
            { label: "A1-1-2", value: "A1-1-2" },
            { label: "A1-2-1", value: "A1-2-1" },
          ],
        },
        {
          id: "zone_b",
          name: "B区",
          children: [
            { label: "B2-1-1", value: "B2-1-1" },
            { label: "B2-1-2", value: "B2-1-2" },
            { label: "B2-2-1", value: "B2-2-1" },
          ],
        },
        {
          id: "zone_c",
          name: "C区",
          children: [
            { label: "C6-2-2", value: "C6-2-2" },
            { label: "C6-3-1", value: "C6-3-1" },
            { label: "C6-3-2", value: "C6-3-2" },
          ],
        },
      ],
      // 当前选中的库位侧边栏索引
      currentLocationIndex: 0,

      // 选中的筛选值
      selectedValues: {
        statusList: [],
        userIdList: [],
        categoryIdList: [],
        positionList: [],
      },
    };
  },
  computed: {
    // 类目侧边栏列表
    categorySidebarList() {
      return this.categoryTree.map((item) => ({
        name: item.title,
        id: item.id,
      }));
    },
    // 当前显示的类目内容
    categoryContentList() {
      return this.categoryTree[this.currentCategoryIndex]?.children || [];
    },
    // 库位侧边栏列表
    locationSidebarList() {
      return this.locationTree.map((item) => ({
        name: item.label,
        id: item.value,
      }));
    },
    // 当前显示的库位内容
    locationContentList() {
      return this.locationTree[this.currentLocationIndex]?.children || [];
    },
  },
  watch: {
    taskId: {
      handler(val) {
        if (val) {
          //负责人下拉列表
          creatorSpinnerList(val).then((res) => {
            console.log("creatorSpinnerList=======", res);
            this.userOptions = res.data;
          });
          //库存
          inventoryPositionTree().then((res) => {
            console.log("res=====", res);
            this.locationTree = res.data;
          });
        }
      },
      immediate: true,
    },
  },
  created() {
    // 初始化选中值
    this.selectedValues = {
      statusList: this.defaultValues.statusList || [],
      userIdList: this.defaultValues.userIdList || [],
      categoryIdList: this.defaultValues.categoryIdList || [],
      positionList: this.defaultValues.positionList || [],
    };
    this.loadData();
  },
  methods: {
    loadData() {
      //类目数据
      getMaterialCategoryTree().then((res) => {
        console.log("getMaterialCategoryTree=======", res);
        this.categoryTree = res;
      });
    },
    // 标签切换
    tabChange({ index }) {
      this.currentTab = index;
    },
    // 切换类目侧边栏
    changeCategoryIndex(index) {
      // 如果切换了侧边栏，则重置该类别下的选择状态
      if (this.currentCategoryIndex !== index) {
        this.currentCategoryIndex = index;
        // 重置当前类别的选择状态
        this.selectedValues.categoryIdList = [];
      }
    },
    // 切换库位侧边栏
    changeLocationIndex(index) {
      // 如果切换了侧边栏，则重置该类别下的选择状态
      if (this.currentLocationIndex !== index) {
        this.currentLocationIndex = index;
        // 重置当前库位的选择状态
        this.selectedValues.positionList = [];
      }
    },
    // 重置筛选
    resetFilter() {
      this.selectedValues = {
        statusList: [],
        userIdList: [],
        categoryIdList: [],
        positionList: [],
      };
    },
    // 确认筛选
    confirmFilter() {
      this.$emit("confirm", { ...this.selectedValues });
      this.handleClose();
    },
    // 关闭弹窗
    handleClose() {
      this.$emit("update:show", false);
      this.$emit("close");
    },
    // 处理类目选择变化
    onCategoryChange(value) {
      this.selectedValues.categoryIdList = value;
    },
    // 处理库位选择变化
    onLocationChange(value) {
      this.selectedValues.positionList = value;
    },
    // 处理盘点状态变化
    onStatusChange(value) {
      this.selectedValues.statusList = value;
    },
    // 处理盘点负责人变化
    onUserChange(value) {
      this.selectedValues.userIdList = value;
    },
  },
};
</script>

<style lang="scss">
.filter-popup {
  display: flex;
  flex-direction: column;
  height: 70vh;

  .filter-header {
    padding: 0 30rpx;
    margin-top: 40rpx;
  }

  .filter-content {
    flex: 1;
    overflow: hidden;

    .filter-scroll {
      height: 100%;
    }

    .filter-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30rpx;
      font-size: 28rpx;
      color: #333;

      &.active {
        background-color: #f0f6fb;
      }

      &:last-child {
        border-bottom: none;
      }
    }

    // 类目和库位二级联动样式
    .category-container {
      display: flex;
      height: 100%;

      .category-sidebar {
        width: 200rpx;
        height: 100%;
        background-color: #f5f7fa;

        .sidebar-item {
          padding: 30rpx 20rpx;
          font-size: 28rpx;
          color: #333;
          text-align: center;

          &.active {
            background-color: #ffffff;
            color: #4080ff;
            position: relative;
            font-weight: 500;

            &::before {
              content: "";
              position: absolute;
              left: 0;
              top: 30%;
              height: 40%;
              width: 6rpx;
              background-color: #4080ff;
              border-radius: 3rpx;
            }
          }
        }
      }

      .category-content {
        height: 100%;
        background-color: #ffffff;
      }
    }
    .checkbox-item {
      padding: 30rpx;
      font-size: 28rpx;

      &:last-child {
        border-bottom: none;
      }
    }
  }

  .filter-footer {
    display: flex;
    padding: 30rpx;
    border-top: 1rpx solid #f5f6f7;

    .footer-btn {
      flex: 1;
      margin: 0 16rpx;
    }
  }
}
</style>

<style lang="scss" scoped>
.type-box {
  .type-item {
    padding: 20rpx 0;
    margin-right: 50rpx;
    height: 88rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    .type-val {
      color: #000;
      font-family: "PingFang SC";
      font-size: 28rpx;
      font-weight: 400;
      margin-right: 10rpx;
      font-family: PingFang SC;

      &.actived {
        color: rgba(2, 86, 255, 1);
        font-weight: 500;
      }
    }
  }
}
</style>
