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 {
    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() as any
    };
  },
  mounted() {
    this.getFilterList();
  },
  methods: {
    async getFilterList() {
      this.loading = true;
      try {
        const res = await request.get('/edu-app/open/mall/search/condition', {
          noAuthorization: true
        });
        this.dataShow = res.code === 200;
        const { brandList = [], productAttributeCategoryList = [] } =
          res.data || {};

        this.brandList = brandList;
        this.productAttributeCategoryList = productAttributeCategoryList;
      } 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>
          <Cell
            border={false}
            title={'商品类型'}
            v-slots={{
              label: () => (
                <RadioGroup
                  class={styles['radio-group']}
                  modelValue={this.params.productAttributeCategoryList}
                  onUpdate:modelValue={val =>
                    (this.params.productAttributeCategoryList = val)
                  }>
                  {this.productAttributeCategoryList.map(
                    (item: any, index: number) => (
                      <Radio
                        key={item.id}
                        class={styles.radio}
                        name={index}
                        onClick={() => {}}>
                        <Tag
                          size="large"
                          type={
                            index === this.params.productAttributeCategoryList
                              ? 'primary'
                              : 'default'
                          }>
                          {item.name}
                        </Tag>
                      </Radio>
                    )
                  )}
                </RadioGroup>
              )
            }}
          />
          <Cell
            border={false}
            title={'品牌'}
            v-slots={{
              label: () => (
                <RadioGroup
                  class={styles['radio-group']}
                  modelValue={this.params.brandList}
                  onUpdate:modelValue={val => (this.params.brandList = val)}>
                  {this.brandList.map((item: any, index: number) => (
                    <Radio
                      key={item.id}
                      class={styles.radio}
                      name={index}
                      onClick={() => {}}>
                      <Tag
                        size="large"
                        type={
                          index === this.params.brandList
                            ? 'primary'
                            : 'default'
                        }>
                        {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"
              color="linear-gradient(121deg, #FFD892 0%, #FFCB75 100%)"
              style={{ marginLeft: '8px' }}
              onClick={() => this.onFilterClick()}>
              确认
            </Button>
          </div>
        </div>
      </div>
    );
  }
});
