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 '../images/icon-filter.png';
import iconSearchY from '../images/icon-search-y.png';
import GoodsFilterList from '../modal/goods-filter-list';
import ColSearch from '@/components/m-search';
import MSticky from '@/components/m-sticky';
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: []
      } as any,
      productAttributeCategory: {
        children: [],
        name: '',
        id: 0
      } as any,
      brand: {
        name: '',
        id: 0
      },
      keyword: '' as any,
      autofocus: false
    };
  },
  computed: {
    getProductAttributeCategory() {
      if (this.productCategory.id) {
        if (this.productCategory.children) {
          let 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') {
        let input: HTMLInputElement = document.querySelector(
          '.van-field__control'
        ) as HTMLInputElement;
        input.focus();
      }
    });
    this.tabListShow = true;
  },
  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 }: any) {
      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() {
      let tabList = this.$refs.tabList as any;
      if (tabList.loading) return;
      this.$nextTick(() => {
        this.onSearch();
      });
    },

    onClearTag(key: string) {
      if (key === 'productCategory') {
        this.productCategory = { id: 0, name: '' };
      } else if (key === 'productAttributeCategory') {
        this.productAttributeCategory = { id: 0, name: '' };
      } else {
        this.brand = { id: 0, name: '' };
      }
      // this[key] = { id: 0, name: '' };
      let goodsFilter = this.$refs.goodsFilter as any;
      if (goodsFilter) {
        if (key === 'productAttributeCategory') {
          goodsFilter.setParams('productAttributeCategoryList');
        } else {
          goodsFilter.setParams('brandList');
        }
      }
      this.$nextTick(() => {
        this.onSearch();
      });
    },
    onSearch() {
      let tabList = this.$refs.tabList as any;
      tabList.onSearch();
    },
    searchBtn(keyword?: string) {
      this.keyword = keyword;
      this.$nextTick(() => {
        this.onSearch();
      });
    }
  },
  render() {
    return (
      <div>
        <MSticky>
          <ColSearch
            modelValue={this.keyword}
            searchIcon={iconSearchY}
            onSearch={this.searchBtn}
            placeholder="请输入商品名称">
            {{
              left: () => (
                <Icon
                  class={styles.arrowLeft}
                  name="arrow-left"
                  onClick={() => this.$router.back()}
                />
              )
            }}
          </ColSearch>
          <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
              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}
        </MSticky>

        <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"
            style={{
              height: 'calc(100vh - var(--header-height))'
            }}
            showAdd={true}
            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>
    );
  }
});
