import ColResult from '@/components/col-result'
import request from '@/helpers/request'
import { List, Popup } from 'vant'
import { defineComponent } from 'vue'
import AddGoodsCart from '../../modal/add-goods-cart'
import Goods from '../goods'
import styles from './index.module.less'

export default defineComponent({
  name: 'tab-list',
  props: {
    // 商品分类ID
    typeId: {
      type: Number,
      default: 0
    },
    // 商品类型ID
    productAttributeCategoryId: {
      type: Number,
      default: 0
    },
    // 品牌 ID
    brandId: {
      type: Number,
      default: 0
    },
    sort: {
      type: Number,
      defalut: 0
    },
    keyword: {
      type: String as any,
      defalut: ''
    },
    isTab: {
      type: Boolean,
      default: false
    },
    onOpenWebView: {
      type: Function,
      default: (a: any) => {}
    }
  },
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      params: {
        productCategoryId: undefined as any,
        productAttributeCategoryId: undefined as any,
        brandId: null as any,
        sort: null as any, // 1->按新品；2->按销量；3->价格从低到高；4->价格从高到低
        keyword: '',
        pageNum: 1,
        pageSize: 20
      },
      addGoodsShow: false,
      selectGoodsItem: {} as any
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    onSearch() {
      this.finished = false
      this.list = []
      this.params.pageNum = 1
      this.getList() // list组件没有触发, 手动触发获取数据
    },
    async getList() {
      this.loading = true
      try {
        let params = this.params
        params.productCategoryId = this.typeId ? this.typeId : undefined // 商品分类
        params.productAttributeCategoryId = this.productAttributeCategoryId // 商品类型
          ? this.productAttributeCategoryId
          : undefined
        params.brandId = this.brandId ? this.brandId : undefined // 品牌
        params.sort = this.sort ? this.sort : undefined
        params.keyword = this.keyword ? this.keyword : undefined
        const res = await request.post('/api-mall-portal/product/search', {
          data: {
            ...params
          }
        })
        
        const result = res.data || {}
        // 处理重复请求数据
        if (this.list.length > 0 && result.pageNum === 1) {
          return
        }
        this.list = this.list.concat(result.list || [])
        this.finished = result.pageNum >= result.totalPage
        this.params.pageNum = result.pageNum + 1
      } catch {
        this.finished = true
      }
      this.loading = false
    },
    onDetailClick(item: any) {
      if (this.isTab) {
        let url = this.$router.resolve({
          path: '/goodsDetail',
          query: { id: item.id }
        }).fullPath

        this.onOpenWebView(url)
        return
      }
      this.$router.push({
        path: '/goodsDetail',
        query: {
          id: item.id
        }
      })
    },
    onBuyClick(item: any) {
      this.selectGoodsItem = item
      this.addGoodsShow = true
    }
  },
  render() {
    return (
      <div class={styles.tabList}>
        <List
          v-model:loading={this.loading}
          finished={this.finished}
          finishedText=""
          immediateCheck={false}
          class={[styles.goodsList, 'mb12']}
          onLoad={this.getList}
        >
          {this.list.length && this.list.map((item: any) => (
            <Goods
              style={{ marginTop: '12px' }}
              item={item}
              onItemClick={this.onDetailClick}
              onBuyClick={this.onBuyClick}
            />
          )) || null}
          { !this.loading && !this.list.length && <ColResult btnStatus={false} classImgSize="SMALL" tips="暂无商品" /> || null}
        </List>

        <Popup
          show={this.addGoodsShow}
          closeable
          position="bottom"
          round
          onClose={() => {
            this.addGoodsShow = false
          }}
        >
          <AddGoodsCart item={this.selectGoodsItem} />
        </Popup>
      </div>
    )
  }
})
