<template>
    <section class="home-list min-h-screen flex flex-col flex-1"
             :loading="loading">
        <div class="hl-title">
            <span class="hlt-span">共 <span>{{ search.total }}</span> 件相关商品</span>
            <span class="hlt-interval"> > </span>
            <span class="hl-tag"
                  v-for="item in prodKindList"
                  v-show="item.active"
                  :key="item.channelName + 'cp'">
                品种：
                <span>
                    {{ item.channelName }}
                    <a-icon @click="toggleProductType(item)"
                            type="close" />
                </span>
            </span>
            <span class="hl-tag"
                  v-for="item in singleCodeList"
                  v-show="item.active"
                  :key="item.name + 'gg'">
                产品规格：
                <span>
                    {{ item.name }}
                    <a-icon @click="singleCodeChoice(item)"
                            type="close" />
                </span>
            </span>
            <span class="hl-tag"
                  v-for="item in qualityRankCodeList"
                  v-show="item.active"
                  :key="item.name + 'dj'">
                产品等级：
                <span>
                    {{ item.name }}
                    <a-icon @click="chooseQualityRank(item)"
                            type="close" />
                </span>
            </span>
            <span class="hl-tag"
                  v-for="item in medicineOriginCodeList"
                  v-show="item.active"
                  :key="item.name + 'cd'">
                药材产地：
                <span>
                    {{ item.name }}
                    <a-icon @click="chooseProvince(item)"
                            type="close" />
                </span>
            </span>
            <span class="hl-tag"
                  v-for="item in goodsTagCodeList"
                  v-show="item.active"
                  :key="item.name + 'sy'">
                产品标签：
                <span>
                    {{ item.name }}
                    <a-icon @click="chooseGoodsTag(item)"
                            type="close" />
                </span>
            </span>
            <span class="hl-tag"
                  v-if="searchKeywords.trim().length > 0">
                <span>
                    {{ searchKeywords }}
                    <a-icon @click="handleClearSearchKeywords"
                            type="close" />
                </span>
            </span>
            <span class="hl-tag hl-tag-empty"
                  @click="emptyScreen"> 清空筛选 </span>
        </div>
        <div class="hl-title-list">
            <div class="htl-item htl-label"> 热门品种 </div>
            <div class="htl-item-wrap">
                <div class="htl-item-left">
                    <div class="htl-item"
                         v-for="(item, index) in prodKindListShow"
                         v-show="prodKindExpanded ? true : index < 17"
                         :key="index"
                         :class="{ active: item.active }"
                         @click="toggleProductType(item)">
                        {{ item.channelName }}
                    </div>
                </div>
                <div class="htl-expand-right"
                     v-if="prodKindListShow.length >= 19"
                     @click="prodKindExpanded = !prodKindExpanded">
                    <a-icon :type="prodKindExpanded ? 'minus' : 'plus'" />
                    <span> {{ prodKindExpanded ? '收起' : '展开' }}</span>
                </div>
            </div>
        </div>
        <div class="hl-title-list">
            <div class="htl-item htl-label"> 产品规格 </div>
            <div>
                <div class="htl-item"
                     v-for="(item, index) in singleCodeList"
                     v-show="!item.active"
                     :key="index"
                     :class="{ active: item.active }"
                     @click="singleCodeChoice(item)">
                    {{ item.name }}
                </div>
            </div>
        </div>
        <div class="hl-title-list"
             v-show="!isSelControlGoods">
            <div class="htl-item htl-label"> 产品等级 </div>
            <div>
                <div class="htl-item"
                     v-for="(item, index) in qualityRankCodeList"
                     v-show="!item.active"
                     :key="index"
                     :class="{ active: item.active }"
                     @click="chooseQualityRank(item)">
                    {{ item.name }}
                </div>
            </div>
        </div>
        <div class="hl-title-list">
            <div class="htl-item htl-label"> 药材产地 </div>
            <div class="sel-list">
                <div class="htl-item"
                     v-for="(item, index) in medicineOriginCodeList"
                     :key="index"
                     v-show="!item.active"
                     :class="{ active: item.active }"
                     @click="chooseProvince(item)">
                    {{ item.name }}
                </div>
            </div>
        </div>
        <div class="hl-title-list border-bot">
            <div class="htl-item htl-label"> 产品标签 </div>
            <div class="sel-list">
                <div class="htl-item"
                     v-for="(item, index) in goodsTagCodeList"
                     :key="index"
                     v-show="!item.active"
                     :class="{ active: item.active }"
                     @click="chooseGoodsTag(item)">
                    {{ item.name }}
                </div>
            </div>
        </div>
        <div class="hl-search">
            <div class="hl-left">
                <div class="hls-item hls-sort cur-pointer"
                     :class="{ active: search.sortBy === 0 }"
                     @click="handleSort(0)">
                    默认排序
                </div>
                <div class="hls-item hls-sort"
                     :class="{ active: search.sortBy === 1 }"
                     @click="handleSort(1)">
                    <div class="hlsi-title"> 剩余挂牌量 </div>
                    <div class="hlss-icons">
                        <div class="hlssi-item"
                             :class="{
                'hlssi-active': search.sortBy === 1 && search.asc === 1
              }">
                            <a-icon type="caret-up" />
                        </div>
                        <div class="hlssi-item"
                             :class="{
                'hlssi-active': search.sortBy === 1 && search.asc === 0
              }">
                            <a-icon type="caret-down" />
                        </div>
                    </div>
                </div>
                <div class="hls-item hls-sort"
                     :class="{ active: search.sortBy === 2 }"
                     @click="handleSort(2)">
                    <div class="hlsi-title"> 摘牌量 </div>
                    <div class="hlss-icons">
                        <div class="hlssi-item"
                             :class="{
                'hlssi-active': search.sortBy === 2 && search.asc === 1
              }">
                            <a-icon type="caret-up" />
                        </div>
                        <div class="hlssi-item"
                             :class="{
                'hlssi-active': search.sortBy === 2 && search.asc === 0
              }">
                            <a-icon type="caret-down" />
                        </div>
                    </div>
                </div>
                <div class="hls-item hls-sort border-r"
                     :class="{ active: search.sortBy === 3 }"
                     @click="handleSort(3)">
                    <div class="hlsi-title"> 价格 </div>
                    <div class="hlss-icons">
                        <div class="hlssi-item"
                             :class="{ 'hlssi-active': search.sortBy === 3 && search.asc === 1 }">
                            <a-icon type="caret-up" />
                        </div>
                        <div class="hlssi-item"
                             :class="{ 'hlssi-active': search.sortBy === 3 && search.asc === 0 }">
                            <a-icon type="caret-down" />
                        </div>
                    </div>
                </div>
                <div class="hls-input hls-border-right-none _internal-style">
                    <div style="width: 110px">
                        <a-input-number class="no-controls"
                                        size="small"
                                        style="width: 100%"
                                        :min="0"
                                        v-model:value="search.minPrice"
                                        placeholder="￥最低价格"
                                        @change="onPriceChange" />
                    </div>
                    <div class="hls-input-middle-text"> - </div>
                    <div style="width: 110px">
                        <a-input-number class="no-controls"
                                        size="small"
                                        style="width: 100%"
                                        :min="0"
                                        v-model:value="search.maxPrice"
                                        placeholder="￥最高价格"
                                        @change="onPriceChange" />
                    </div>
                </div>
            </div>
            <div class="hl-right">
                <a-input-search v-model:value="search.orgNameKeyword"
                                class="supplier-input"
                                size="small"
                                placeholder="请输入供应商名称"
                                :max-length="60"
                                @blur="onPriceChange" />
                <div class="hls-page">
                    <div class="hlsp-item"
                         @click="handlePageNo(false)">
                        <a-icon type="left" />
                    </div>
                    <div class="hlsp-item">
                        <span class="hlspi-num hlspi_active">{{ search.pageNo }}</span>/<span class="hlspi-num">{{ search.totalPage }}</span>
                    </div>
                    <div class="hlsp-item"
                         @click="handlePageNo(true)">
                        <a-icon type="right" />
                    </div>
                </div>
            </div>
        </div>
        <a-empty v-if="prodList.length === 0">
            <div class="flex flex-col items-center">
                <span class="desc mb-1">抱歉没有找到您想要内容</span>
                <a-button type="primary"
                          @click="toAskToBuyPage"> 填写求购信息 </a-button>
            </div>
        </a-empty>
        <div class="main-list">
            <Goods v-for="(item, index) in prodList"
                   :checkbox="true"
                   :data="item"
                   :key="index"
                   :selected-row-keys="selectedRowKeys"
                   :show-purchase-qty="true"
                   :show-remaining-qty="true"
                   :show-total-list-qty="true"
                   :type="2"
                   @on-select-change="onSelectChange"
                   @purchase-quantity-input="handlePurchaseQuantityInput" />
        </div>
        <div class="main-pagination">
            <div class="mp-num"> 共{{ search.total }}条 </div>
            <a-pagination show-size-changer
                          v-model:value="search.pageNo"
                          :page-size="search.pageSize"
                          :total="search.total"
                          @show-size-change="onShowSizeChange"
                          @change="onPageChange" />
        </div>
        <SettleFooter :count="selectedGoods.length"
                      :select-all="selectAll"
                      :m-visible="mVisible"
                      :total-amount="selectedGoodsAmount"
                      @handle-deselect="clearSelectedRowKeys"
                      @handel-purchase="handelPurchase"
                      @handle-select-all="handleSelectAll"
                      @handle-cancel="handleCancel"
                      :type="1" />
    </section>
</template>

<script setup>
import { ref, reactive, computed, watch, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex' // 假设使用 Vuex 管理状态
import { debounce } from '@/utils/debounce'
import Goods from '@/components/goods/index.vue'
import SettleFooter from '@/components/settle-footer/index.vue'
import {
  getQualityRankListApi,
  getProductionAreaApi,
  getZycSearchApi,
  getSpecListApi,
  getTagListApi,
  getRecommendListApi
} from '@/api/transaction'
import config from '@/config'

// 定义 props
const props = defineProps({
  activeType: {
    type: [Number, String],
    default: '1'
  }
})

// 路由和状态管理
const router = useRouter()
const route = useRoute()
const store = useStore()

// 响应式数据
const search = reactive({
  pageNo: 1,
  pageSize: 20,
  totalPage: 1,
  total: 0,
  goodsTitle: '',
  asc: 0,
  sortBy: '',
  maxPrice: '',
  orgNameKeyword: '',
  minPrice: '',
  qualityRankCodeList: '',
  medicineOriginCode: '',
  goodsTagCodeList: ''
})

const isSelControlGoods = ref(false)
const singleCodeList = ref([])
const prodKindList = ref([])
const qualityRankCodeList = ref([])
const medicineOriginCodeList = ref([])
const goodsTagCodeList = ref([])
const prodList = ref([])
const loading = ref(true)
const selectedRowKeys = ref([])
const searchKeywords = ref('')
const prodKindExpanded = ref(false)

// SettleFooter 相关数据
const selectedGoods = ref([])
const selectAll = ref(false)
const mVisible = ref(false)
const selectedGoodsAmount = ref(0)

// 计算属性
const userData = computed(() => store.state.user)

const prodKindListShow = computed(() => {
  return prodKindList.value.filter(item => !item.active)
})

// 方法
const toAskToBuyPage = () => {
  if (!userData.value) {
    const search = location.search.replace(/^\?/, '&')
    location.href = `${config.loginUrl}?from=${encodeURIComponent(
      `${location.origin}/public/server-adapter.html?target=${location.pathname}${search}`
    )}`
  } else {
    router.push('/buyer/planning-buy/form-edit')
  }
}

const handleClearSearchKeywords = () => {
  searchKeywords.value = ''
  search.pageNo = 1
  getProdList()
}

const emptyScreen = () => {
  search.pageNo = 1
  search.goodsTitle = ''
  toggleProductType({ channelName: '全部' }, false)
  singleCodeChoice({ name: '全部' }, false)
  chooseQualityRank({ name: '全部' }, false)
  chooseProvince({ name: '全部' }, false)
  chooseGoodsTag({ name: '全部' }, false)
  getProdList()
}

const handlePageNo = isAdd => {
  if (isAdd) {
    if (search.pageNo < search.totalPage) {
      search.pageNo++
      getProdList()
    }
  } else {
    if (search.pageNo > 1) {
      search.pageNo--
      getProdList()
    }
  }
}

const onPriceChange = debounce(() => {
  search.pageNo = 1
  getProdList()
}, 300)

const handleSort = filed => {
  search.sortBy = filed
  search.asc = search.asc === 0 ? 1 : 0
  search.pageNo = 1
  getProdList()
}

const toggleProductType = (item, isget = true) => {
  item.active = !item.active
  if (item.channelName === '全部') {
    prodKindList.value.forEach(li => (li.active = false))
  }
  if (item.channelName === route.query.goodsTitle) {
    search.goodsTitle = ''
  }
  if (isget) {
    search.pageNo = 1
    getProdList()
  }
}

const singleCodeChoice = (item, isget = true) => {
  item.active = !item.active
  if (item.name === '统货') {
    isSelControlGoods.value = item.active
    chooseQualityRank({ name: '全部', active: false })
    return
  }
  if (item.name === '全部') {
    singleCodeList.value.forEach(li => (li.active = false))
  }
  if (isget) {
    search.pageNo = 1
    getProdList()
  }
}

const chooseQualityRank = (item, isget = true) => {
  item.active = !item.active
  if (item.name === '全部') {
    qualityRankCodeList.value.forEach(li => (li.active = false))
  }
  if (isget) {
    search.pageNo = 1
    getProdList()
  }
}

const chooseProvince = (item, isget = true) => {
  item.active = !item.active
  if (item.name === '全部') {
    medicineOriginCodeList.value.forEach(li => (li.active = false))
  }
  if (isget) {
    search.pageNo = 1
    getProdList()
  }
}

const chooseGoodsTag = (item, isget = true) => {
  item.active = !item.active
  if (item.name === '全部') {
    goodsTagCodeList.value.forEach(li => (li.active = false))
  }
  if (isget) {
    search.pageNo = 1
    getProdList()
  }
}

const onPageChange = pageNo => {
  search.pageNo = pageNo
  getProdList()
}

const onShowSizeChange = (current, pageSize) => {
  search.pageNo = current
  search.pageSize = pageSize
  getProdList()
}

const getProdList = async () => {
  const params = {
    entpName: search.orgNameKeyword,
    pageNo: search.pageNo,
    pageSize: search.pageSize,
    asc: search.asc,
    goodsName: search.goodsTitle,
    maxPrice: search.maxPrice,
    minPrice: search.minPrice,
    catalogId: prodKindList.value
      .filter(li => li.active)
      .map(li => li.code)
      .join(','),
    specName: singleCodeList.value
      .filter(li => li.active)
      .map(li => li.code)
      .join(','),
    gradeName: qualityRankCodeList.value
      .filter(li => li.active)
      .map(li => li.code)
      .join(','),
    placeOrigin: medicineOriginCodeList.value
      .filter(li => li.active)
      .map(li => li.code)
      .join(','),
    tags: goodsTagCodeList.value
      .filter(li => li.active)
      .map(li => li.code)
      .join(','),
    sortBy: search.sortBy,
    orgName: route.query.orgName
  }

  try {
    loading.value = true
    const res = await getZycSearchApi(params)
    if (res.code === 0) {
      search.total = Number(res.data.count)
      search.totalPage = Number(res.data.totalPage)
      prodList.value = res.data.items.map(item => {
        const medicineOriginNameArr = item.placeOrigin.split('-')
        item.goodsPictureUrl = item.goodsPictureUrl ? item.goodsPictureUrl.split(',')[0] : ''
        item.placeOrigin =
          medicineOriginNameArr.length > 1
            ? medicineOriginNameArr.slice(1).join(' ')
            : medicineOriginNameArr[0]
        if (Number(item.startSalesNum) < Number(item.remainListingQuantity))
          item.purchaseQuantity = +item.startSalesNum
        return item
      })
    }
  } finally {
    loading.value = false
  }
}

const getProdKindList = async () => {
  const res = await getRecommendListApi()
  if (res.code === 0) {
    prodKindList.value = [
      { active: false, channelName: '全部' },
      ...res.data.map(item => {
        item.active =
          route.query.tabActiveType === '2' && route.query.goodsTitle === item.goodsTitle
        item.channelName = item.catalogName
        item.code = item.id
        return item
      })
    ]
    getProdList()
  }
}

const getProvinceList = async () => {
  const res = await getProductionAreaApi()
  if (res.code === 0) {
    medicineOriginCodeList.value = [
      { active: false, name: '全部' },
      ...res.data.map(item => {
        item.active =
          route.query.tabActiveType !== '2' && item.label.includes(route.query.medicineName)
        item.name = item.label
        item.code = item.value
        return item
      })
    ]
  }
}

const getQualityRankList = async () => {
  const res = await getQualityRankListApi()
  if (res.code === 0) {
    qualityRankCodeList.value = [
      { active: false, name: '全部' },
      ...res.data.map(item => {
        item.active = item.disabled
        item.name = item.label
        item.code = item.value
        return item
      })
    ]
  }
}

const getSingleCode = async () => {
  const res = await getSpecListApi()
  if (res.code === 0) {
    singleCodeList.value = [
      { active: false, name: '全部' },
      ...res.data.map(item => {
        item.active =
          route.query.tabActiveType !== '2' && route.query.specCode === Number(item.value)
        item.name = item.label
        item.code = item.value
        return item
      })
    ]
  }
}

const getSuYuanList = async () => {
  const res = await getTagListApi()
  if (res.code === 0) {
    const { records = [] } = res.data
    goodsTagCodeList.value = [
      { active: false, name: '全部' },
      { name: '可溯源', code: '1', children: null },
      { name: '保供专项', code: '2', children: null },
      ...records.map(item => {
        item.active = item.disabled
        item.name = item.label
        item.code = item.value
        return item
      })
    ]
  }
}
// 监听 activeType
watch(
  () => props.activeType,
  (val, old) => {
    if (val === old) return
    search.pageNo = 1
    getProdList()
  },
  { deep: true }
)

// 生命周期钩子
onMounted(() => {
  const { goodsTitle, medicineName, specCode, tabActiveType } = route.query
  if (tabActiveType !== '2') {
    search.goodsTitleList = goodsTitle
    search.specCodeList = specCode
    search.medicineName = medicineName
  }
  getQualityRankList()
  getProvinceList()
  getSingleCode()
  getSuYuanList()
  getProdKindList()
})
</script>

<style lang="less" scoped>
.home-list {
  max-width: 1200px;
  min-width: 1000px;
  margin: 0 auto;
  padding: 0;
  padding-bottom: 20px;

  .hl-title {
    padding: 20px 0;
    font-size: 20px;
    color: #000;
    line-height: 22px;

    h2 {
      display: inline;
      font-size: 20px;
      font-weight: 500;
    }

    .hlt-interval {
      margin: 0 12px;
      font-weight: 400;
      font-size: 14px;
      color: rgba(0, 0, 0, 0.45);
    }

    .hlt-span {
      font-weight: 400;
      font-size: 14px;

      span {
        font-size: 15px;
        font-weight: 500;
      }
    }

    .hl-tag {
      margin: 0 10px 5px 0;
      padding: 2px 7px;
      border: 1px dashed #015fc9;
      border-radius: 2px;
      font-size: 12px;
      line-height: 1;
      color: #015fc9;

      &.hl-tag-empty {
        cursor: pointer;
        border: 1px solid #e5e5e5;
        color: rgba(0, 0, 0, 0.45);
      }
    }
  }

  .hl-title-list {
    border: 1px solid #e5e5e5;
    border-bottom: 0;
    display: flex;

    .sel-list {
      // display: flex;
      // flex-wrap: wrap;
    }

    .htl-item-wrap {
      display: flex;
      justify-content: space-between;
      align-content: center;

      .htl-item-left {
        flex: 1;
        word-wrap: break-word;
      }

      .htl-expand-right {
        color: rgba(0, 0, 0, 0.45);
        width: 61px;
        height: 20px;
        background: #f5f5f5;
        border-radius: 2px;
        font-size: 12px;
        line-height: 20px;
        text-align: center;
        margin: 10px 16px;
        flex-shrink: 0;
        cursor: pointer;
      }
    }

    .htl-item {
      display: inline-block;
      line-height: 20px;
      font-size: 14px;
      color: rgba(0, 0, 0, 0.65);
      padding: 10px;
      cursor: pointer;

      &.active {
        color: #015fc9;
      }
    }

    .htl-label {
      min-width: 100px;
      text-align: center;
      padding: 10px 16px;
      margin-right: 6px;
      color: rgba(0, 0, 0, 0.25);
      background: #f3f3f3;
    }

    &.border-bot {
      border: 1px solid #e5e5e5;
    }
  }

  .hl-search {
    height: 40px;
    margin-top: 16px;
    background-color: #f5f5f5;
    border: 1px solid #e5e5e5;
    display: flex;
    padding: 6px;
    align-items: center;
    justify-content: space-between;

    .hl-left {
      display: flex;
      align-items: center;
    }

    .hl-right {
      display: flex;
      align-items: center;
    }

    .hls-item {
      font-size: 14px;
      background: #fff;
      letter-spacing: 0;
      padding: 0 10px;
      height: 28px;
      border: 1px solid #e5e5e5;
      margin-left: -1px;
      position: relative;

      &.cur-pointer {
        cursor: pointer;
      }

      &.border-r {
        border-right: 1px solid #e5e5e5;
      }

      :deep(.no-controls) {
        .ant-input-number-sm {
          height: 28px;
        }

        .ant-input-number-handler-wrap {
          display: none;
        }
      }
    }

    .hls-sort {
      display: flex;
      align-items: center;
      cursor: pointer;

      &.active {
        color: #015fc9;
        border-color: #015fc9;
        z-index: 9;
      }

      .hlss-icons {
        margin-left: 6px;
        display: flex;
        flex-direction: column;

        .hlssi-item {
          line-height: 5px;
          font-size: 10px;
          color: rgba(0, 0, 0, 0.45);

          .anticon-caret-up {
            position: relative;
            top: 2px;
          }

          .anticon-caret-down {
            position: relative;
            top: -2px;
          }
        }

        .hlssi-active {
          color: #015fc9;
        }
      }
    }

    .hls-input {
      display: flex;
      align-items: center;
      margin-left: 16px;

      .hls-input-middle-text {
        padding: 0 3px;
      }
    }

    .hls-select {
      display: flex;
      position: relative;
      align-items: center;

      .hlss-item {
        margin-left: 6px;
        font-size: 10px;
      }

      .icon-up {
        display: none;
      }

      .icon-down {
        display: block;
      }

      &:hover {
        background-color: #fff;
        border-left: 1px solid #e5e5e5;
        border-right: 1px solid #e5e5e5;

        .icon-up {
          display: block;
        }

        .icon-down {
          display: none;
        }

        .hlss-options {
          display: block;
        }

        .hlss-options2 {
          display: block;
        }
      }

      .hlss-options {
        z-index: 9;
        display: none;
        position: absolute;
        width: 100%;
        background-color: #fff;
        border-left: 1px solid #e5e5e5;
        border-right: 1px solid #e5e5e5;
        border-bottom: 1px solid #e5e5e5;
        left: 0;
        top: 40px;

        .hlsso-item {
          text-align: center;
          height: 40px;
          font-size: 14px;
          color: rgba(0, 0, 0, 0.85);
          line-height: 40px;

          &:hover {
            color: #015fc9;
            cursor: pointer;
          }
        }
      }

      .hlss-options2 {
        z-index: 9;
        display: none;
        position: absolute;
        width: 294px;
        background-color: #fff;
        border-left: 1px solid #e5e5e5;
        border-right: 1px solid #e5e5e5;
        border-bottom: 1px solid #e5e5e5;
        left: 0;
        top: 40px;

        .hlsso-item {
          float: left;
          padding: 0 19px;
          text-align: left;
          height: 40px;
          font-size: 14px;
          color: rgba(0, 0, 0, 0.85);
          line-height: 40px;

          &:hover {
            color: #015fc9;
            cursor: pointer;
          }
        }
      }
    }

    .hls-page {
      display: flex;

      .hlsp-item {
        .hlspi-num {
          font-size: 14px;
          color: rgba(0, 0, 0, 0.65);

          &:first-child {
            padding-left: 14px;
          }

          &:last-child {
            padding-right: 14px;
          }

          &.hlspi_active {
            color: #015fc9;
          }
        }
      }
    }

    .hls-border-right-none {
      border-right: none;
    }

    .active {
      color: #015fc9;
      background-color: #fff;
    }
  }

  .opt-btns {
    padding: 16px 0;
    font-size: 0;

    .ant-btn {
      margin-right: 8px;
    }
  }

  .select-info {
    margin-bottom: 10px;
    padding: 0 16px;
    height: 40px;
    line-height: 40px;
    background: rgba(1, 95, 201, 0.06);
    border: 1px solid #015fc9;
    border-radius: 2px;
    font-size: 14px;

    .text {
      color: rgba(0, 0, 0, 0.65);
    }

    .clear-btn {
      color: #015fc9;
      cursor: pointer;
    }
  }

  .ant-empty {
    margin-top: 150px;
  }

  .main-pic {
    margin-top: 12px;
    margin-left: -20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    position: relative;
    min-height: 400px;

    .ant-spin {
      z-index: 10;
      position: absolute;
      left: 50%;
      top: 200px;
    }

    .mp-item {
      margin: 20px 0 0 20px;
      box-sizing: border-box;
      width: 224px;
      border: 1px solid #e5e5e5;

      &:hover {
        .mpi-pic {
          .mpip-btn {
            display: block;
          }
        }
      }

      .mpi-pic {
        position: relative;
        padding: 10px;

        .mpip-img {
          width: 204px;
          height: 204px;
        }

        .mpip-btn {
          display: none;
          position: absolute;
          left: 0;
          width: 100%;
          bottom: 0;
          opacity: 0.85;
          height: 40px;
          background: #015fc9;
          font-size: 14px;
          color: #fff;
          cursor: pointer;
          line-height: 40px;
          text-align: center;
        }
      }

      .mpi-title {
        padding: 28px 13px 0 13px;
        font-size: 18px;
        color: rgba(0, 0, 0, 0.85);
        line-height: 20px;

        .mpit-type-img {
          width: 26px;
        }
      }

      .mpi-text {
        padding: 6px 13px 0 13px;
        font-size: 14px;
        color: rgba(0, 0, 0, 0.65);
        line-height: 22px;
      }

      .mpi-flex {
        padding: 8px 13px 0 5px;
        display: flex;
        justify-content: space-between;

        &:last-child {
          padding: 8px 13px 28px 13px;
        }

        .mpif-left {
          font-size: 14px;
          color: rgba(0, 0, 0, 0.65);
          line-height: 22px;

          .mpifl-text {
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .mpifl-price {
            font-size: 20px;
            color: #ff4d4f;
            line-height: 22px;
            white-space: nowrap;
          }

          .mpifl-des {
            font-size: 14px;
            color: #ff4d4f;
            line-height: 22px;
            white-space: nowrap;
          }
        }

        .mpif-right {
          width: 70px;
          font-size: 14px;
          color: rgba(0, 0, 0, 0.45);
          line-height: 22px;

          .mpifr-text {
            width: 70px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            text-align: right;
          }

          .tag {
            display: inline-block;
            background: #e9eff9;
            border: 1px solid #cfd5e0;
            border-radius: 4px;
            font-size: 12px;
            color: #889dc4;
            padding: 1px 6px;
          }
        }
      }
    }
  }

  .main-list {
    margin-top: 12px;
    position: relative;
    min-height: 400px;

    .ant-spin {
      z-index: 10;
      position: absolute;
      left: 50%;
      top: 200px;
    }

    .ml-item {
      display: flex;
      padding: 16px 0;
      border-bottom: 1px solid #e5e5e5;
      align-items: center;

      .mli-pic {
        padding-right: 19px;

        .mlip-img {
          width: 120px;
          height: 120px;
        }
      }

      .select-check-box {
        margin-right: 20px;
      }

      .mli-box {
        flex: 1;

        .mlib-title {
          width: 100%;
          font-size: 18px;
          color: rgba(0, 0, 0, 0.85);
          line-height: 20px;
          margin-bottom: 8px;

          .type-img {
            width: 25px;
          }

          .tag {
            display: inline-block;
            background: #e9eff9;
            border: 1px solid #cfd5e0;
            border-radius: 4px;
            font-size: 12px;
            color: #889dc4;
            padding: 1px 6px;
          }
        }

        .mlib-main {
          width: 100%;
          display: flex;

          .mlib-item-1 {
            width: 260px;
          }

          .mlib-item-2 {
            width: 200px;
          }

          .mlib-item-3 {
            width: 160px;
          }

          .mlib-item-4 {
            width: 280px;

            .mlib-text {
              .mlibt-span {
                display: inline-block;
                width: 120px;
                text-align: left;
              }
            }
          }

          .mlib-item-1,
          .mlib-item-2,
          .mlib-item-3,
          .mlib-item-4 {
            box-sizing: border-box;
            padding-right: 24px;

            .mlib-text {
              font-size: 14px;
              color: rgba(0, 0, 0, 0.65);
              line-height: 22px;
              margin-bottom: 4px;

              .mlibt-num {
                font-size: 20px;
                color: #ff4d4f;
                line-height: 22px;
              }
            }
          }
        }

        .mlib-one-line {
          width: 100%;
        }
      }

      .mli-btn {
        width: 80px;
        text-align: right;
      }
    }
  }

  .main-pagination {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 24px;
    text-align: right;

    .mp-num {
      font-size: 14px;
      color: rgba(0, 0, 0, 0.65);
      text-align: right;
      padding-right: 16px;
    }
  }
}

.daodi-mall__text--bold {
  .ant-modal-content {
    .ant-modal-confirm-content {
      font-size: 16px;
      font-weight: 500;
      line-height: 24px;
    }

    .ant-modal-confirm-btns {
      .ant-btn:first-of-type {
        display: none;
      }
    }
  }
}
</style>
这是主页面代码