<!--
  Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

  https://www.mall4j.com/

  未经允许，不可做商业用途！

  版权所有，侵权必究！
-->

<template>
  <view class="Mall4j page-commodity-brand">
    <view class="title">
      <search-bar
        :key-word="name"
        :placeholder="$t('souSuoPinPaiMingCheng')"
        @handle-search="search"
      />
    </view>
    <empty-tips
      v-show="isLoaded && brandList.length<1"
      :tips-list="[$t('zanWuShuJu')]"
    />

    <view
      v-show="isLoaded && brandList.length"
      class="conter"
    >
      <view class="body">
        <view
          v-for="(item,index) in brandList"
          :key="index"
          :class="['list',dataForm.brandId===item.brandId?'active':'']"
          @tap="brandType(item)"
        >
          <text class="text">
            {{ item.name }}
          </text><text class="iconfont">
            &#xe659;
          </text>
        </view>
      </view>
      <view
        v-if="!falg && current>1"
        class="hint"
      >
        {{ $t('meiYouGengDuoShuJuLe') }}
      </view>
      <view class="delivery">
        <button
          class="button"
          type="primary"
          @tap="toProd"
        >
          {{ $t('queDing') }}
        </button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { computed, onMounted, reactive } from 'vue'

const Data = reactive({
  isLoaded: false, // 列表是否加载完毕
  name: '',
  current: 1,
  size: 20,
  total: 0,
  brandList: [],
  falg: true
})

const { isLoaded, name, brandList, current, falg } = toRefs(Data)

const prodStore = useProdStore()

const dataForm = computed(() => prodStore.dataForm)

onMounted(() => {
  getDataList()
  uni.setNavigationBarTitle({
    title: $t('xuanZePinPai')
  })
})

onReachBottom(() => {
  if (!Data.falg) {
    return
  }
  Data.current++
  getDataList({ current: Data.current })
})

const getDataList = ({ current = 1, brandName = '' } = {}) => {
  uni.showLoading({
    title: ''
  })
  Data.isLoaded = false
  http.request({
    url: '/admin/brand/listAvailableByCategoryAndName',
    method: 'GET',
    data: {
      categoryId: prodStore.dataForm.classifyName?.[0].categoryId,
      size: Data.size,
      current,
      brandName

    }
  }).then(({ data: res }) => {
    Data.isLoaded = true
    if (res.records.length === 0) {
      Data.falg = false
    }
    if (res.current === 1) {
      Data.brandList = res.records
    } else {
      Data.brandList = [...Data.brandList, ...res.records]
    }
    uni.hideLoading()
    Data.current = res.current
    Data.total = res.total
  })
}

// 搜索框
const search = (name) => {
  Data.brandList = []
  getDataList({ brandName: name })
}

const toProd = () => {
  uni.redirectTo({
    url: '/package-prod/pages/post-prod/post-prod'
  })
}

// 选择品牌
const brandType = (index) => {
  if (prodStore.dataForm.brandId === index.brandId) {
    prodStore.dataForm.brandId = null
    prodStore.dataForm.brandName = ''
  } else {
    prodStore.dataForm.brandId = index.brandId
    prodStore.dataForm.brandName = index.name
  }
}
</script>

<style lang="scss" scoped>
 .page-commodity-brand{
   display: flex;
   flex-direction: column;
   width: 100%;
    top: 0;
    left: 0;
    font-size: 28rpx;
    background-color: #f8f8f8;
    height: 100vh;
    color: #333;
    font-family: PingFang SC;

    .conter{
      margin-top: 36rpx;
      padding-bottom: 110rpx;
    }

    .title{
      padding: 20rpx 30rpx 32rpx;
      background-color: #fff;
      border-radius:0 0 10rpx 10rpx;

      // eslint-disable-next-line vue-scoped-css/no-unused-selector
      input{
        background-color: #F7F8FA;
        height: 64rpx;
        border-radius: 32rpx;
        padding-left: 30rpx;
        font-size: 24rpx;
      }
      // eslint-disable-next-line vue-scoped-css/no-unused-selector
      .uni-searchbar{
        padding: 0;
      }
    }

    .body{
      border-radius: 10rpx;
      padding: 0 30rpx;
      background-color: #fff;

      .list{
        height: 90rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom:2rpx solid #F2F2F2 ;

        .iconfont{
          font-size: 34rpx;
          color: #fff;
        }
        .text{
        max-width: 600rpx;
          white-space: nowrap;
          overflow: hidden;
          text-overflow:ellipsis
        }
      }

      .active{
          color: #082BA6;

          .iconfont{
           color: #082BA6;
        }

      }

    }
    .delivery{
      background-color: #fff;
      width: 700rpx;
      position: fixed;
      left: 0;
      bottom: 0;
      padding: 20rpx 30rpx;

      button{
        background-color: #082BA6;
      }
    }
    .hint{
      font-size: 24rpx;
      color: #999;
      text-align: center;
      background-color: #f2f3f7;
    }
  }
</style>
