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

  https://www.mall4j.com/

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

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

<template>
  <view class="Mall4j page-select-type">
    <!-- <pord-title :prodTitle="'商品类目'" :isOpen="isOpen" @close="close" /> -->
    <view class="title">
      <search-bar
        :key-word="typeName"
        :placeholder="dataForm.selectType==1?$t('qingShuRuSanJiFenLei'):$t('qingShuRuSouSuoLeiMu')"
        @handle-search="search"
      />
    </view>
    <!-- 平台类目 -->
    <empty-tips
      v-if="isLoaded && ((dataForm.selectType==1&&firstCat.dataList.length===0)||(dataForm.selectType==2&&shopList.length===0))"
      :tips-list="[$t('zanWuShuJu')]"
    />

    <view
      v-if="dataForm.selectType==1"
      class="select"
    >
      <view
        v-if="firstCat.dataList[0]"
        class="category"
      >
        <view
          v-for="(item,index) in classifyNames"
          :key="index"
          class="category-level"
          @tap="classifyChange(item,index)"
        >
          <text class="name">
            {{ item.categoryName || '' }}
          </text>
          <text
            v-if="item.categoryName && index!==2"
            class="arrow"
          >
            >
          </text>
        </view>
        <text
          v-show="!classifyNames[2].categoryName||!classifyNames[2].categoryId"
          class="active"
        >
          {{ classifyGrade[firstCat.dataList[0].grade] }}
        </text>
      </view>
      <view
        v-for="(item,index) in firstCat.dataList"
        :key="index"
        :class="item.categoryId===dataForm.categoryId?'active list':'list'"
        @tap="switchProdType(item)"
      >
        <view>
          <text>{{ item.categoryName }}</text>
        </view>
        <view
          v-show="item.status"
          class="iconfont"
        >
          &#xe775;
        </view>
        <view
          v-show="item.categoryId===dataForm.categoryId"
          class="iconfont pitchOn"
        >
          &#xe659;
        </view>
      </view>
    </view>
    <!-- 店铺类目 -->
    <view
      v-if="dataForm.selectType==2"
      class="select"
    >
      <view
        v-for="(item,index) in shopList"
        :key="index"
        :class="item.categoryId===dataForm.shopCategoryId?'active list':'list'"
        @tap="shopIdChange(item)"
      >
        <view>
          <text>{{ item.categoryName }}</text>
        </view>
        <view
          v-if="item.categoryId===dataForm.shopCategoryId"
          class="iconfont check"
        >
          &#xe659;
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
const Data = reactive({
  isLoaded: false, // 列表是否加载完毕
  typeName: '',
  allDataList: [],
  shopDataList: [],
  shopList: [],
  shopId: null,

  classifyGrade: [$t('yiJiFenLei'), $t('erJiFenLei'), $t('sanJiFenLei')],
  classifyNames: [
    { categoryName: '', categoryId: null },
    { categoryName: '', categoryId: null },
    { categoryName: '', categoryId: null }
  ],

  firstCat: {
    id: 0,
    categoryName: '',
    dataList: []
  }
})

const { isLoaded, typeName, shopList, classifyGrade, classifyNames, firstCat } = toRefs(Data)

const prodStore = useProdStore()

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

onMounted(() => {
  uni.setNavigationBarTitle({ title: prodStore.dataForm.selectType === 1 ? $t('pingTaiLeiMu') : $t('dianPuLeiMu') })

  if (prodStore.dataForm.selectType === 1) {
    getDataList()
  } else if (prodStore.dataForm.selectType === 2) {
    getShopDataList()
  }
  if (prodStore.dataForm.classifyName[2].categoryId) {
    Data.classifyNames = prodStore.dataForm.classifyName
  }
})

// 获取平台类目
const getDataList = () => {
  Data.isLoaded = false
  http.request({
    url: '/prod/category/listAvailableSigningCategory',
    method: 'GET',
    data: {

    }
  }).then(({ data }) => {
    Data.isLoaded = true
    Data.allDataList = data
    if (prodStore.dataForm.classifyName[prodStore.dataForm.classifyName.length - 1].categoryName) {
      Data.firstCat.dataList = Data.allDataList.filter(item => item.parentId === prodStore.dataForm.classifyName[prodStore.dataForm.classifyName.length - 1].parentId)
    } else {
      Data.firstCat.dataList = Data.allDataList.filter(item => item.grade === 0 && item.status)
    }
  })
}

// 获取店铺类目
const getShopDataList = () => {
  Data.isLoaded = false
  http.request({
    url: '/prod/category/listCategory',
    method: 'GET',
    data: {
      status: 1
    }
  }).then(({ data }) => {
    Data.isLoaded = true
    Data.shopDataList = data
    Data.shopList = Data.shopDataList
    if (Data.shopList.length === 0) {
      uni.showToast({
        title: $t('qingQianWangPcDuanXinZengDianPuLeiMu'),
        mask: true,
        icon: 'none',
        duration: 1500
      })
    }
  })
}

// 平台类目选择
const switchProdType = (index) => {
  if (index.status) {
    Data.firstCat.dataList = Data.allDataList.filter(item => item.parentId === index.categoryId)
    Data.classifyNames[index.grade] = JSON.parse(JSON.stringify(index))
  } else {
    // console.log(index.grade)
    Data.classifyNames[index.grade] = JSON.parse(JSON.stringify(index))

    Data.firstCat.id = index.categoryId

    const fatherClassify = Data.allDataList.filter(item => item.categoryId === index.parentId)
    Data.classifyNames[fatherClassify[0].grade] = JSON.parse(JSON.stringify(fatherClassify[0]))

    // 处理直接搜索没有一二级分类
    if (!Data.classifyNames[0].categoryName || !Data.classifyNames[1].categoryName) {
      Data.classifyNames[1] = (Data.allDataList.filter(item => item.categoryId === Data.classifyNames[2].parentId))[0]
      Data.classifyNames[0] = (Data.allDataList.filter(item => item.categoryId === Data.classifyNames[1].parentId))[0]
    }
    if (prodStore.dataForm.categoryId !== index.categoryId) {
      prodStore.dataForm.brandId = null
      prodStore.dataForm.brandName = ''
    }
    prodStore.dataForm.categoryId = index.categoryId
    prodStore.dataForm.classifyName = Data.classifyNames
    prodStore.selected.categoryName = prodStore.dataForm.classifyName.map(item => {
      return item.categoryName
    }).join('/')

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

// 选择店铺分类
const shopIdChange = (value) => {
  Data.shopId = value.categoryId
  // eslint-disable-next-line vue/no-mutating-props
  prodStore.dataForm.shopCategoryId = Data.shopId
  prodStore.selected.shopCategoryName = value.categoryName
  uni.redirectTo({
    url: '/package-prod/pages/post-prod/post-prod'
  })
}

// 面包屑导航
const classifyChange = (val, index) => {
  // console.log(index)
  Data.firstCat.dataList = Data.allDataList.filter(item => item.parentId === val.parentId)
  prodStore.dataForm.classifyName.forEach((item, i) => {
    if (i >= index) {
      item.categoryName = ''
    }
  })
}

// 搜索框
const search = (typeName) => {
  if (typeName === '') {
    Data.firstCat.dataList = Data.allDataList.filter(item => (item.grade === 0))
    reset()

    return
  }
  if (prodStore.dataForm.selectType === 1) {
    Data.firstCat.dataList = Data.allDataList.filter(item => (item.categoryName.indexOf(typeName) !== -1 && !item.status))
  } else {
    Data.shopList = Data.shopDataList.filter(item => (item.categoryName.indexOf(typeName) !== -1))
  }
  reset()
}

// 重置面包屑导航
const reset = () => {
  Data.classifyNames = [
    { categoryName: '', categoryId: null },
    { categoryName: '', categoryId: null },
    { categoryName: '', categoryId: null }
  ]
}
</script>

<style lang="scss" scoped>
@use "select-type";
</style>
