import { Popup, Col, Row, Icon, Tag, Sticky, Tabs, Tab } from 'vant'
import { defineComponent } from 'vue'
import TabList from '../components/tab-list'
import styles from './index.module.less'
import iconFilter from '@/common/images/icon_filter.png'
import GoodsFilterList from '../modal/goods-filter-list'
import ColSearch from '@/components/col-search'
import request from '@/helpers/request'
import { useEventTracking } from '@/helpers/hooks'
import ColHeader from '@/components/col-header'
export default defineComponent({
  name: 'goods-list',
  data() {
    const query = this.$route.query
    return {
      tabListShow: query.id ? false : true,
      typeId: 0,
      filterActive: 0,
      filterListShow: false,
      productCategory: {
        active: 0,
        name: query.tag || '',
        id: Number(query.id) || 0,
        children: []
      },
      productAttributeCategory: {
        children: [],
        name: '',
        id: 0
      },
      brand: {
        name: '',
        id: 0
      },
      keyword: '' as any,
      autofocus: false
    }
  },
  computed: {
    getProductAttributeCategory() {
      if (this.productCategory.id) {
        if (this.productCategory.children) {
          const child = (this.productCategory.children[
            this.productCategory.active
          ] || {}) as any
          return child.id || ''
        }
        this.productCategory.id
      }
      return 0
    }
  },
  async mounted() {
    this.$nextTick(() => {
      if (this.$route.query.input === 'focus') {
        const input: HTMLInputElement = document.querySelector(
          '.van-field__control'
        ) as HTMLInputElement
        input.focus()
      }
    })

    if (this.productCategory.id) {
      try {
        const res = await request.get(
          '/api-mall-portal/product/search/condition'
        )
        if (res.code === 200) {
          this.setFilter({
            productCategory: res.data.productCategorySmallVoList.find(
              (n: any) => n.id === this.productCategory.id
            ),
            productAttributeCategory: undefined,
            brand: undefined
          })
        }
      } catch (err) {}
    }
    this.tabListShow = true

    useEventTracking('商品列表')
  },
  methods: {
    onFilter(n: number) {
      if (this.filterActive === 3 && n === 3) n = 4
      if (this.filterActive === 4 && n === 3) n = 3
      if (this.filterActive === n) return
      this.filterActive = n
      this.$nextTick(() => {
        this.onSearch()
      })
    },
    setFilter({ productCategory, productAttributeCategory, brand }) {
      // console.log(productCategory.active)
      if (productCategory && productCategory.active === undefined) {
        productCategory.active = 0
      }
      this.productCategory = productCategory
        ? productCategory
        : { id: 0, name: '' }
      this.productAttributeCategory = productAttributeCategory
        ? productAttributeCategory
        : { id: 0, name: '' }
      this.brand = brand ? brand : { id: 0, name: '' }
      this.$nextTick(() => {
        this.onSearch()
        this.filterListShow = false
      })
    },

    onToggleTag() {
      const tabList = this.$refs.tabList as any
      if (tabList.loading) return
      // this.productCategory.active = i
      this.$nextTick(() => {
        this.onSearch()
      })
    },

    onClearTag(key: string) {
      this[key] = { id: 0, name: '' }
      const goodsFilter = this.$refs.goodsFilter as any
      if (goodsFilter) {
        if (key === 'productCategory') {
          goodsFilter.setParams('productCategorySmallVoList')
        } else if (key === 'productAttributeCategory') {
          goodsFilter.setParams('productAttributeCategoryList')
        } else {
          goodsFilter.setParams('brandList')
        }
      }
      this.$nextTick(() => {
        this.onSearch()
      })
    },
    onSearch() {
      const tabList = this.$refs.tabList as any
      tabList.onSearch()
    },
    searchBtn(keyword?: string) {
      this.keyword = keyword
      console.log(this.keyword)
      this.$nextTick(() => {
        this.onSearch()
      })
    }
  },
  render() {
    return (
      <div>
        <Sticky>
          <ColHeader border={false} />
          <ColSearch modelValue={this.keyword} onSearch={this.searchBtn} />
          <Row class={styles['filter-top']} align="center">
            <Col
              span={6}
              class={this.filterActive === 0 ? styles.active : ''}
              onClick={() => this.onFilter(0)}
            >
              综合排序
            </Col>
            <Col
              span={6}
              class={
                this.filterActive === 3 || this.filterActive === 4
                  ? styles.active
                  : ''
              }
              onClick={() => this.onFilter(3)}
            >
              价格
              <div class={styles.filterSort}>
                <Icon
                  class={this.filterActive === 3 ? styles['icon-active'] : ''}
                  style={{ transform: 'rotate(-90deg)' }}
                  name="play"
                  size={12}
                />
                <Icon
                  class={[
                    styles.iconSort,
                    this.filterActive === 4 ? [styles['icon-active']] : ''
                  ]}
                  style={{ transform: 'rotate(90deg)' }}
                  name="play"
                  size={12}
                />
              </div>
            </Col>
            {/* <Col
              span={6}
              class={this.filterActive === 2 ? styles.active : ''}
              onClick={() => this.onFilter(2)}
            >
              销量
            </Col> */}
            <Col
              style={{ marginLeft: 'auto' }}
              span={6}
              class={styles.filterBtn}
              onClick={() => (this.filterListShow = true)}
            >
              筛选
              <Icon name={iconFilter} size={18} />
            </Col>
          </Row>

          {this.productCategory.id &&
          this.productCategory.children &&
          this.productCategory.children.length ? (
            <Tabs
              class={styles['filter-productCategory']}
              shrink
              ellipsis={false}
              v-model:active={this.productCategory.active}
              onChange={() => this.onToggleTag()}
            >
              {this.productCategory &&
                this.productCategory.children.map((n: any, i: number) => (
                  <Tab
                    name={i}
                    title={n.name}
                    v-slots={{
                      title: () => (
                        <div
                          class={[
                            styles['filter-tag'],
                            this.productCategory.active === i
                              ? styles['filter-tag-checked']
                              : ''
                          ]}
                        >
                          {n.name}
                        </div>
                      )
                    }}
                  ></Tab>
                ))}
            </Tabs>
          ) : null}
        </Sticky>

        <div class={styles.filterTagWrap}>
          {this.productAttributeCategory.id ? (
            <Tag
              class={styles.filterTag}
              closeable={true}
              onClose={() => this.onClearTag('productAttributeCategory')}
            >
              {this.productAttributeCategory.name}
            </Tag>
          ) : (
            ''
          )}
          {this.brand.id ? (
            <Tag
              class={styles.filterTag}
              closeable={true}
              onClose={() => this.onClearTag('brand')}
            >
              {this.brand.name}
            </Tag>
          ) : (
            ''
          )}
        </div>

        {this.tabListShow ? (
          <TabList
            ref="tabList"
            typeId={Number(this.getProductAttributeCategory)}
            productAttributeCategoryId={this.productAttributeCategory.id}
            brandId={this.brand.id}
            sort={this.filterActive}
            keyword={this.keyword}
          />
        ) : null}

        <Popup
          show={this.filterListShow}
          closeable
          position="bottom"
          round
          onClose={() => {
            this.filterListShow = false
          }}
        >
          <GoodsFilterList
            cateGoryId={this.productCategory.id}
            ref="goodsFilter"
            setFilter={this.setFilter}
          />
        </Popup>
      </div>
    )
  }
})
