<template>
  <view class="classifyList-container">
    <view class="tips">
      一级分类数量过多，将严重影响买家进店转化 。我们建议25个为宜
    </view>
    <view class="no-data" v-if="classifyList.length <= 0 && !loading">
      <view class="no-data-bg"></view>
      <view class="no-data-tips">暂无分类</view>
    </view>
    <view class="classifyList-content">
      <favorite-loading
        class="classifyList-loading"
        v-show="loading"
        :color="'#fe4119'"
        text=""
        animation="spinner15"
      ></favorite-loading>

      <scroll-view
        v-if="classifyList.length > 0 && !loading"
        scroll-y
        scroll-with-animation
        :show-scrollbar="false"
        class="classifyList-scroll"
      >
        <block v-for="(item, index) of classifyList" :key="index">
          <tui-collapse
            :index="index"
            :current="current"
            hdBgColor="#fff"
            :arrow="item.sub.length > 0 ? true : false"
            @click="handerCollApse($event, item)"
          >
            <template v-slot:title>
              <view class="stair-item">
                <view class="classify-info">
                  <view class="stair-name">{{ item.category_name }}</view>
                  <view class="stair-tips" v-if="item.sub.length > 0">
                    二级分类{{ item.category_order }}
                  </view>
                  <view class="stair-tips" v-else>
                    一级分类{{ item.category_order }}
                  </view>
                </view>
                <view
                  class="classify-btn-content"
                  @click.stop="handerSetting($event, item)"
                >
                  <u-button
                    class="classify-btn-item"
                    :hairline="true"
                    :plain="true"
                    shape="circle"
                  >
                    设置
                  </u-button>
                </view>
              </view>
            </template>
            <template v-slot:content v-if="item.sub.length > 0">
              <view
                class="second-level-item"
                v-for="(group, index2) of item.sub"
                @click="handerCollApseChildren(group)"
              >
                <view
                  class="second-level-item-info"
                  :style="
                    item.sub.length >= 2 && index2 !== item.sub.length - 1
                      ? 'padding-bottom: 40rpx'
                      : ''
                  "
                >
                  <view class="second-level-item-info-name">
                    {{ group.category_name }}
                  </view>
                  <view class="second-level-item-info-sort">
                    排序{{ group.category_order }}
                  </view>
                </view>
                <view class="classify-btn-content">
                  <u-button
                    class="classify-btn-item"
                    :hairline="true"
                    :plain="true"
                    shape="circle"
                    @click="handersecondlevelSetting(item, group)"
                  >
                    设置
                  </u-button>
                </view>
              </view>
            </template>
          </tui-collapse>
        </block>
      </scroll-view>
    </view>
    <view class="classifyList-bottom">
      <view class="bottom-list">
        <u-button
          class="bottom-btn-item"
          :hairline="true"
          :plain="true"
          shape="circle"
          @click="handerAddStairClassify()"
        >
          <u-icon class="bottom-icon" name="plus-circle"></u-icon>
          新建分类
        </u-button>
      </view>
    </view>
    <!--设置一级分类底部弹窗-->
    <u-popup
      class="stair-popup"
      :show="showBottomStairPopup"
      mode="bottom"
      zIndex="10075"
      @close="handerCloseBottomStairPopup"
    >
      <view class="stair-popup-content">
        <view
          class="stair-bottom-item"
          @click="handerShowRightEditNamePopup(false)"
        >
          修改名称
        </view>
        <view class="stair-bottom-item" v-if="typeManageList.length > 0">
          <view
            :class="{
              'stair-bottom-item-disabled': currStairItem.type_id != 0,
            }"
            @click="handerShowRightPopup(true)"
          >
            修改类型
          </view>
          <view
            class="stair-bottom-item-tips"
            v-if="currStairItem.type_id != 0"
          >
            已经添加有商品类型无法修改
          </view>
        </view>
        <view class="stair-bottom-item" @click="handerShowRightAddSecondLevel">
          新增二级分类
        </view>
        <view
          class="stair-bottom-item stair-bottom-item-delect"
          @click="handerShowDelectPopup(false)"
        >
          删除
        </view>
        <view
          class="stair-bottom-item stair-bottom-item-cancel"
          @click="showBottomStairPopup = false"
        >
          取消
        </view>
      </view>
    </u-popup>
    <!--设置二级分类底部弹窗-->
    <u-popup
      class="stair-popup"
      :show="showBottomSecondLevelPopup"
      mode="bottom"
      zIndex="10075"
      @close="handerCloseBottomSecondLevelPopup"
    >
      <view class="stair-popup-content">
        <view
          class="stair-bottom-item"
          @click="handerShowRightEditNamePopup(true)"
        >
          修改名称
        </view>
        <view class="stair-bottom-item" v-if="typeManageList.length > 0">
          <view
            :class="{
              'stair-bottom-item-disabled': currSecondLevelItem.type_id != 0,
            }"
            @click="handerShowRightPopup(false)"
          >
            修改类型
          </view>
          <view
            class="stair-bottom-item-tips"
            v-if="currStairItem.type_id != 0"
          >
            已经添加有商品类型无法修改
          </view>
        </view>
        <view
          class="stair-bottom-item stair-bottom-item-delect"
          @click="handerShowDelectPopup(true)"
        >
          删除
        </view>
        <view
          class="stair-bottom-item stair-bottom-item-cancel"
          @click="showBottomSecondLevelPopup = false"
        >
          取消
        </view>
      </view>
    </u-popup>
    <!--确认删除弹窗-->
    <u-popup
      class="affirm-popup"
      zIndex="10077"
      :show="showDelectPopup"
      mode="center"
    >
      <view class="affirm-popup-content">
        <view class="affirm-popup-title">
          确认删除"{{ delectClassifyItem.category_name }}"?
        </view>
        <view class="popup-btn-list">
          <u-button
            class="btn-item"
            :hairline="true"
            :plain="true"
            shape="circle"
            @click="showDelectPopup = false"
          >
            取消
          </u-button>
          <u-button
            class="btn-item btn-item-2"
            :hairline="true"
            :plain="true"
            shape="circle"
            @click="handerDelectClassify"
          >
            确认
          </u-button>
        </view>
      </view>
    </u-popup>
    <!--商品类型弹窗-->
    <u-popup
      class="commodity-type-popup"
      :show="showCommodityTypePopup"
      mode="bottom"
      zIndex="10080"
      closeable
      @close="handerCloseTypePopup"
    >
      <view class="commodity-type-popup-content">
        <view class="commodity-type-popup-title">选择商品类型</view>
        <view class="no-commodity-type" v-if="typeManageList.length <= 0">
          <view class="no-commodity-type-bg"></view>
          <view class="no-commodity-type-tips" @click="skipuBrandList">
            暂无商品类型，点击马上添加
            <u-icon
              style="display: inline-block"
              name="arrow-right"
              color="red"
            ></u-icon>
          </view>
        </view>

        <scroll-view
          v-if="typeManageList.length > 0"
          scroll-y
          class="commodity-type-search-scroll"
          :show-scrollbar="false"
          @scrolltolower="handerScrolltolower"
          refresher-enabled
          :refresher-triggered="isRefreshing"
          @refresherrefresh="handleRefresh"
          :style="{
            maxHeight: typeManageList.length >= 2 ? '500px' : 'none',
            overflowY: typeManageList.length >= 2 ? 'auto' : 'visible',
          }"
        >
          <u-radio-group
            class="commodity-type-radio-group"
            v-model="radioValue"
            placement="column"
          >
            <u-radio
              class="commodity-type-radio"
              v-for="(item, index) in typeManageList"
              :key="index"
              :label="item.type_name"
              :name="item.type_id"
            ></u-radio>
          </u-radio-group>
          <view
            class="m-loading-box"
            v-if="typeManageList.length > 0 && !isNotypeManageData"
          >
            <block v-if="loadingDownTypeManageData">
              <view class="u-loadmore">
                <view class="u-loading"></view>
                <text class="u-loadmore-tips">正在加载...</text>
              </view>
            </block>
            <block v-else>
              <view class="u-loadmore u-loadmore-line">
                <text class="u-loadmore-tips">没有更多商品类型了 ~</text>
              </view>
            </block>
          </view>
        </scroll-view>
        <view class="popup-btn-list">
          <u-button
            class="btn-item"
            :hairline="true"
            :plain="true"
            shape="circle"
            @click="handerCancelCommodityTpye"
          >
            取消
          </u-button>
          <u-button
            v-show="typeManageList.length > 0"
            class="btn-item btn-item-2"
            :hairline="true"
            :plain="true"
            shape="circle"
            @click="handerAffirmCommodityType"
          >
            确认
          </u-button>
        </view>
      </view>
    </u-popup>
    <!--新建一级分类弹窗-->
    <u-popup
      class="add-popup"
      zIndex="10077"
      :show="showAddStairClassifyPopup"
      mode="center"
    >
      <view class="add-popup-content">
        <view class="add-popup-title">新建分类</view>
        <view class="add-tips">
          注意，确认商品类型后不可修改名称，商品类型，虚拟商品!
        </view>
        <u--form
          labelPosition="left"
          :model="form"
          ref="uForm"
          label-width="100"
          :rules="rules"
        >
          <u-form-item
            label="分类名称"
            prop="category_name"
            class="form-item"
            required
          >
            <u--textarea
              class="u-textarea"
              v-model="form.category_name"
              count
              autoHeight
              maxlength="8"
              placeholder="请输入二级分类名称"
            ></u--textarea>
          </u-form-item>
          <u-form-item
            label="商品类型"
            prop="type_name"
            class="form-item"
            @click="hadnerShowCommodityTypePopup()"
          >
            <u--input
              v-model="form.type_name"
              disabled
              disabledColor="#ffffff"
              placeholder="请选择商品类型"
              border="none"
              @click="hideKeyboard()"
            ></u--input>
            <u-icon slot="right" name="arrow-right"></u-icon>
          </u-form-item>
          <u-form-item label="分类排序" prop="category_order" class="form-item">
            <u--input
              v-model="form.category_order"
              type="number"
              placeholder="请输入商品排序"
              border="none"
            ></u--input>
          </u-form-item>
          <u-form-item
            label="允许虚拟商品"
            prop="category_order"
            class="form-item form-item-switch"
          >
            <u-switch
              v-model="form.category_virtual_enable"
              :activeValue="1"
              :inactiveValue="0"
              activeColor="#5ac725"
              inactiveColor="#fe411b"
            ></u-switch>
          </u-form-item>
        </u--form>
        <view class="popup-btn-list">
          <u-button
            class="btn-item"
            :hairline="true"
            :plain="true"
            shape="circle"
            @click="showAddStairClassifyPopup = false"
          >
            取消
          </u-button>
          <u-button
            class="btn-item btn-item-2"
            :hairline="true"
            :plain="true"
            shape="circle"
            @click="handerAffirmEditClassify"
          >
            添加
          </u-button>
        </view>
      </view>
    </u-popup>
    <!--编辑弹窗-->
    <u-popup
      class="right-popup"
      zIndex="10076"
      :overlay="false"
      :show="showRightPopup"
      mode="right"
    >
      <editClassify
        :classifyItem="currStairItem"
        :currSecondLevelItem="currSecondLevelItem"
        :isEditStairType="isEditStairType"
        :isEditSecondLevelName="isEditSecondLevelName"
        :isEditSecondLevelType="isEditSecondLevelType"
        :isAddSecondLevelClassify="isAddSecondLevelClassify"
        @pageBack="handerEditPage()"
        @updateClassify="handerUpdateClassify"
        @addClassify="handerUpdateAddClassify"
        :isEdit="isEdit"
      ></editClassify>
    </u-popup>
    <u-toast ref="uToast"></u-toast>
  </view>
</template>

<script>
import {
  GetCommodityClassify,
  UpdateCommodityClassify,
  DelectCommodityClassify,
} from "@/api/warehouse/classifyList";
import { GetTypeManageList } from "@/api/warehouse/typeManage";
import tuiCollapse from "../manage/components/tui-collapse/classify-collapse.vue";
import editClassify from "../manage/editClassify.vue";
export default {
  name: "classifyList",
  components: {
    tuiCollapse,
    editClassify,
  },
  data() {
    return {
      classifyList: [],
      current: -1,
      loading: false,
      showBottomStairPopup: false,
      showBottomSecondLevelPopup: false,
      showRightPopup: false,
      currStairItem: {
        sub: [],
      },
      currSecondLevelItem: {},
      typeManageList: [],
      pageNum: 1,
      pageSize: 20,
      isEdit: true,
      isEditStairType: false,
      isEditSecondLevelType: false,
      showDelectPopup: false,
      delectClassifyItem: {},
      isDelectSubset: false,
      isEditSecondLevelName: false,
      isAddSecondLevelClassify: false,
      showAddStairClassifyPopup: false,
      showCommodityTypePopup: false,
      isRefreshing: false,
      isNotypeManageData: false,
      isNoDownTypeManageData: false,
      loadingDownTypeManageData: false,
      radioValue: "",
      time: null,
      form: {
        type_category_id: 0,
        category_name: "",
        category_virtual_enable: 0,
        type_name: "",
      },
      rules: {
        contact_name: [
          {
            required: true,
            message: "请输入分类名称",
            // 可以单个或者同时写两个触发验证方式
            trigger: ["change", "blur"],
          },
        ],
      },
      rules2: {
        contact_name: [
          {
            required: true,
            message: "请输入分类名称",
            // 可以单个或者同时写两个触发验证方式
            trigger: ["change", "blur"],
          },
        ],
      },
    };
  },
  computed: {},
  onLoad: function (options) {},
  onReady() {
    // this.$refs["uForm"].setRules(this.rule2);
  },
  onShow() {
    this.getCommodityClassify();
    this.getTypeManageList();
  },

  mounted() {},
  methods: {
    async getCommodityClassify(isAdd = false) {
      if (!isAdd) {
        this.loading = true;
      }
      let res = await GetCommodityClassify();
      if (res && res.status == 200) {
        this.classifyList = res.data;
      }
      this.loading = false;
    },
    async getTypeManageList() {
      if (this.isRefreshing) {
        this.pageNum = 1;
        this.isNotypeManageData = false;
        this.isNoDownTypeManageData = false;
      }

      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      };

      let res = await GetTypeManageList(params);
      if (res && res.status == 200) {
        if (this.loadingDownTypeManageData) {
          if (res.data.items.length <= 0) {
            this.loadingDownTypeManageData = false;
            this.isNoDownTypeManageData = true;
            return;
          } else {
            this.typeManageList = [...this.typeManageList, ...res.data.items];
          }
        } else {
          this.typeManageList = res.data.items;
        }

        if (this.typeManageList.length <= 0) {
          this.isNotypeManageData = true;
        }
      }
      this.loadingDownTypeManageData = false;
      this.isRefreshing = false;
    },

    handerScrolltolower() {
      clearTimeout(this.time);
      if (this.isNoDownTypeManageData) return;
      this.loadingDownTypeManageData = true;
      this.pageNum = this.pageNum + 1;
      this.time = setTimeout(() => {
        this.getTypeManageList();
      }, 500);
    },
    handleRefresh() {
      this.isRefreshing = true;
      this.pageNum = 1;
      this.getTypeManageList();
    },
    handerUpdateAddClassify(list) {
      this.classifyList = list;
    },
    handerEditPage() {
      this.showRightPopup = false;
    },
    handerUpdateClassify(item) {
      // 找到匹配的索引
      const index = this.classifyList.findIndex(
        (group) => group.category_id === item.category_id
      );

      if (index !== -1) {
        this.$set(this.classifyList, index, item);
      }

      console.log(this.classifyList);
    },
    handerCollApse(e, item, isStair) {
      this.current = this.current == e.index ? -1 : e.index;
    },
    handerSetting(event, item) {
      event.stopPropagation();
      this.currStairItem = item;
      this.showBottomStairPopup = true;
    },
    handerCloseTypePopup() {
      this.showCommodityTypePopup = false;
    },
    handerCloseBottomStairPopup() {
      this.showBottomStairPopup = false;
    },
    handersecondlevelSetting(item, group) {
      this.showBottomSecondLevelPopup = true;
      this.currStairItem = item;
      this.currSecondLevelItem = group;
    },
    handerCloseBottomSecondLevelPopup() {
      this.showBottomSecondLevelPopup = false;
    },
    handerShowRightAddSecondLevel() {
      this.isAddSecondLevelClassify = true;
      this.showBottomStairPopup = false;
      this.showRightPopup = true;
    },
    hadnerShowCommodityTypePopup() {
      this.showCommodityTypePopup = true;
    },
    handerCancelCommodityTpye() {
      this.showCommodityTypePopup = false;
      this.radioValue = "";
    },
    handerAffirmCommodityType() {
      const matchedItem = this.typeManageList.find(
        (item) => item.type_id === this.radioValue
      );

      if (matchedItem && Object.keys(matchedItem).length > 0) {
        this.form.type_name = matchedItem.type_name;
      }

      this.showCommodityTypePopup = false;
    },
    handerAffirmEditClassify() {
      console.log(this.radioValue);

      this.$refs.uForm.validate().then(async (valid) => {
        let params = {
          category_image: "",
          category_virtual_enable: this.form.category_virtual_enable,
          category_id: "",
          type_id: this.radioValue,
          category_parent_id: 0,
          category_name: this.form.category_name,
          category_order: this.form.category_order,
        };

        let res = await UpdateCommodityClassify(params);
        if (res && res.status == 200) {
          this.$refs.uToast.show({
            message: "添加成功",
            type: "succeed",
            duration: 1000,
          });
          await this.getCommodityClassify(true);
        }
        this.showAddStairClassifyPopup = false;
        this.radioValue = "";
      });
    },
    handerCollApseChildren(item) {},
    handerShowRightEditNamePopup(isEditSecondLevelName) {
      this.showRightPopup = true;
      this.showBottomStairPopup = false;
      this.isEditStairType = false;
      this.isEditSecondLevelType = false;
      this.isEditSecondLevelName = isEditSecondLevelName;
    },
    handerShowRightPopup(isStair) {
      if (isStair && this.currStairItem.type_id == 0) {
        this.isEditStairType = true;
        this.showRightPopup = true;
        this.showBottomStairPopup = false;
      }

      if (!isStair && this.currSecondLevelItem.type_id == 0) {
        this.isEditSecondLevelType = true;
        this.showRightPopup = true;
        this.showBottomSecondLevelPopup = false;
      }
    },
    handerAddStairClassify() {
      this.showAddStairClassifyPopup = true;
      // setTimeout(() => {
      //   this.$refs["uForm"].setRules(this.rules);
      // }, 0);
    },
    handerShowDelectPopup(isDelectSubset) {
      if (!isDelectSubset) {
        this.delectClassifyItem = this.currStairItem;
      } else {
        this.delectClassifyItem = this.currSecondLevelItem;
      }

      this.isDelectSubset = isDelectSubset;
      this.showDelectPopup = true;
    },
    async handerDelectClassify() {
      const categoryId = this.delectClassifyItem.category_id;

      let params = {
        category_id: categoryId,
      };

      let res = await DelectCommodityClassify(params);
      if (res && res.status == 200) {
        if (!this.isDelectSubset) {
          this.classifyList = this.classifyList.filter(
            (item) => item.category_id !== categoryId
          );
        } else {
          this.classifyList = this.classifyList.map((parent) => {
            if (
              parent.sub &&
              parent.sub.some((child) => child.category_id === categoryId)
            ) {
              return {
                ...parent,
                sub: parent.sub.filter(
                  (child) => child.category_id !== categoryId
                ),
              };
            }
            return parent;
          });
        }

        this.$refs.uToast.show({
          message: "删除成功",
          type: "succeed",
          duration: 1000,
        });
      }
      this.showDelectPopup = false;

      if (!this.isDelectSubset) {
        this.showBottomStairPopup = false;
      } else {
        this.showBottomSecondLevelPopup = false;
      }
    },
    skipuBrandList() {
      uni.navigateTo({
        url: "/pages/warehouse/manage/typeManagement",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";
.classifyList-container {
  height: calc(100vh - 148rpx);
  background: #f5f6fa;

  overflow: hidden;

  .tips {
    padding: 24rpx 40rpx;
    font-size: 13px;
    background: #fdf6f2;
    border: 1px solid #efe8e2;
    border-radius: 16rpx;
    color: #3a3230;
    margin: 32rpx;
  }

  .classifyList-content {
    margin-top: 32rpx;
    margin: 32rpx;
    padding: 0 24rpx;
    background: #fff;
    border-top-left-radius: 16rpx;
    border-top-right-radius: 16rpx;

    .stair-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 20rpx 0;
      margin-left: 40rpx;

      .classify-info {
        .stair-name {
          font-size: 17px;
          font-weight: 600;
        }

        .stair-tips {
          margin: 16rpx 0;
          font-size: 15px;
          color: #606060;
        }
      }
    }
  }

  ::v-deep.tui-collapse-body {
    margin: 20rpx 0;
  }

  .classifyList-scroll {
    -ms-overflow-style: none; /* IE和Edge */
    scrollbar-width: none; /* Firefox */
    height: calc(100vh - 230px);
  }

  .classifyList-scroll::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
  }

  .second-level-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-left: 40rpx;

    &::before {
      content: "";
      position: absolute;
      height: 100%;
      border: 1px solid #eeeeee;
    }

    .second-level-item-info {
      display: flex;
      flex-flow: column;
      justify-content: space-between;
      padding-left: 20rpx;
      height: 100rpx;

      .second-level-item-info-name {
        font-size: 17px;
        font-weight: 400;
      }

      .second-level-item-info-sort {
        font-size: 14px;
        color: #606060;
      }
    }
  }

  .no-data {
    .no-data-bg {
      margin: 50% auto;
      margin-bottom: 0;
      width: 300rpx;
      height: 200rpx;
      background-image: url("../../../static/warehouse/no-classify.png");
      background-size: 100%;
    }
    .no-data-tips {
      margin: 80rpx auto;
      color: #aaaaaa;
      text-align: center;
    }
  }

  .no-commodity-type {
    .no-commodity-type-bg {
      margin: 6% auto;
      margin-bottom: 0;
      width: 300rpx;
      height: 200rpx;
      background-image: url("../../../static/warehouse/no-commodity-type.png");
      background-size: 100%;
    }

    .no-commodity-type-tips {
      margin: 80rpx auto;
      color: red;
      text-align: center;
    }
  }

  .classify-btn-content {
    .classify-btn-item {
      margin: 0;
      margin-right: 20rpx;
      width: 120rpx;
      height: 60rpx;
      font-size: 24rpx;
      border-color: #d2d2d2;
      color: #000;

      &::after {
        border: none;
      }
    }
  }

  .m-loading-box {
    text-align: center;
    padding: 40rpx;
    color: #aaaa;
    font-size: 28rpx;
  }

  .classifyList-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 172rpx;
    background: #fff;
    border-top: 2px solid #eeeeee;
    z-index: 2;

    .bottom-list {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin-top: 40rpx;

      .bottom-btn-item {
        margin: 0;
        margin-right: 20rpx;
        width: 400rpx;
        height: 88rpx;
        font-size: 32rpx;
        border-color: #d2d2d2;
        color: #000;

        .bottom-icon {
          margin-right: 8rpx;
        }

        &::after {
          border: none;
        }
      }
    }
  }

  .commodity-type-popup {
    ::v-deep.u-fade-enter-to {
      z-index: 10079 !important;
    }

    .commodity-type-popup-content {
      .commodity-type-popup-title {
        padding: 40rpx;
        text-align: center;
        font-weight: 500;
      }

      .commodity-type-radio-group {
        margin: 40rpx;

        .commodity-type-radio {
          margin-bottom: 40rpx;
        }
      }
    }

    .popup-btn-list {
      display: flex;
      margin: 50rpx;

      .btn-item {
        width: 46%;
        height: 80rpx;
        border-color: #909193;

        &::after {
          border: none;
        }
      }

      .btn-item-2 {
        background: $base-color;
        color: #fff;
        border: none;
      }
    }
  }

  .add-popup {
    ::v-deep.u-popup__content {
      border-radius: 16rpx;
    }

    ::v-deep.u-fade-enter-to {
      z-index: 10076 !important;
    }

    .add-popup-content {
      width: 700rpx;

      .add-popup-title {
        padding: 40rpx;
        text-align: center;
        font-weight: bold;
        font-size: 36rpx;
      }

      .add-tips {
        padding: 0 24rpx;
        text-align: center;
        color: red;
      }

      .u-form {
        margin: 0 40rpx;

        .form-item {
          margin: 28rpx 0;
        }
      }

      .popup-btn-list {
        display: flex;
        margin: 50rpx;

        .btn-item {
          width: 46%;
          height: 80rpx;
          border-color: #909193;

          &::after {
            border: none;
          }
        }

        .btn-item-2 {
          background: $base-color;
          color: #fff;
          border: none;
        }
      }
    }
  }

  .affirm-popup {
    ::v-deep.u-popup__content {
      border-radius: 16rpx;
    }

    ::v-deep.u-fade-enter-to {
      z-index: 10076 !important;
    }

    .affirm-popup-content {
      width: 600rpx;

      .affirm-popup-title {
        padding: 40rpx;
        text-align: center;
         font-weight: bold;
      }

      .affirm-popup-tips {
        padding: 0 60rpx;
        font-size: 28rpx;
        text-align: center;
      }

      .popup-btn-list {
        display: flex;
        margin: 50rpx;

        .btn-item {
          width: 46%;
          height: 80rpx;
          border-color: #909193;

          &::after {
            border: none;
          }
        }

        .btn-item-2 {
          background: $base-color;
          color: #fff;
          border: none;
        }
      }
    }
  }

  .stair-popup {
    ::v-deep.u-popup__content {
      border-top-left-radius: 24rpx;
      border-top-right-radius: 24rpx;
    }

    .stair-popup-content {
      .stair-bottom-item {
        padding: 32rpx;
        text-align: center;
        border-bottom: 1px solid #eeeeee;

        .stair-bottom-item-tips {
          margin-top: 8rpx;
          font-size: 24rpx;
          color: #cccccc;
        }
      }

      .stair-bottom-item-disabled {
        color: #cccccc;
      }

      .stair-bottom-item-delect {
        color: $base-color;
      }

      .stair-bottom-item-cancel {
        border: none;
      }
    }
  }

  .classifyList-loading {
    margin: 70% auto;
    display: flex;
  }
}
</style>
