import request from '@/helpers/request'
import {
  Loading,
  Tag,
  Cell,
  RadioGroup,
  Radio,
  Divider,
  Row,
  Col,
  Button
} from 'vant'
import { defineComponent } from 'vue'
import styles from './index.module.less'
const init = () => {
  return {
    productCategorySmallVoList: null as any,
    productAttributeCategoryList: null as any,
    brandList: null as any
  }
}
export default defineComponent({
  name: 'goods-filter-list',
  props: {
    setFilter: {
      type: Function,
      default: (item: any) => {}
    },
    cateGoryId: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      dataShow: true, // 判断是否有数据
      loading: false,
      brandList: [],
      productAttributeCategoryList: [],
      productCategorySmallVoList: [],
      params: init()
    }
  },
  mounted() {
    this.getFilterList()
  },
  methods: {
    async getFilterList() {
      this.loading = true
      try {
        const res = await request.get(
          '/api-mall-portal/product/search/condition'
        )
        this.dataShow = res.code === 200
        const {
          brandList = [],
          productAttributeCategoryList = [],
          productCategorySmallVoList = []
        } = res.data || {}

        this.brandList = brandList
        this.productAttributeCategoryList = productAttributeCategoryList
        this.productCategorySmallVoList = productCategorySmallVoList

        if (this.cateGoryId) {
          let i = productCategorySmallVoList.findIndex(
            n => n.id == this.cateGoryId
          )
          this.params.productCategorySmallVoList = i > -1 ? i : null
        }
      } catch {
        this.dataShow = false
      }
      this.loading = false
    },
    // 筛选条件
    onFilterClick() {
      this.setFilter({
        productCategory:
          this.productCategorySmallVoList[
            this.params.productCategorySmallVoList
          ],
        productAttributeCategory:
          this.productAttributeCategoryList[
            this.params.productAttributeCategoryList
          ],
        brand: this.brandList[this.params.brandList]
      })
    },

    setParams(key: string) {
      this.params[key] = null
    }
  },
  render() {
    return (
      <div>
        {this.loading && (
          <div class={styles.loading}>
            <Loading color="var(--van-primary)" />
          </div>
        )}
        <div class={styles.filterWrap}>
          <div class={styles.titlePopup}>筛选</div>
          {Object.keys(this.params).map((key: string) => (
            <Cell
              border={false}
              v-slots={{
                title: () => (
                  <div>
                    {key === 'productCategorySmallVoList'
                      ? '商品分类'
                      : key === 'productAttributeCategoryList'
                      ? '商品类型'
                      : '品牌'}
                  </div>
                ),
                label: () => (
                  <RadioGroup
                    class={styles['radio-group']}
                    modelValue={this.params[key]}
                    onUpdate:modelValue={val => (this.params[key] = val)}
                  >
                    {this[key].map((item: any, index: number) => {
                      const isActive = index === this.params[key]
                      const type = isActive ? 'primary' : 'default'
                      return (
                        <Radio
                          class={styles.radio}
                          name={index}
                          onClick={() => {}}
                        >
                          <Tag size="large" type={type}>
                            {item.name}
                          </Tag>
                        </Radio>
                      )
                    })}
                  </RadioGroup>
                )
              }}
            />
          ))}
          <Divider style={{ margin: '0' }} />
          <div class={styles.filterAction}>
            <Button
              round
              style={{ marginRight: '8px' }}
              onClick={() => (this.params = init())}
            >
              重置
            </Button>
            <Button
              round
              type="primary"
              style={{ marginLeft: '8px' }}
              onClick={() => this.onFilterClick()}
            >
              确认
            </Button>
          </div>
        </div>
      </div>
    )
  }
})
