Component({
  externalClasses: ['wr-class'],

  options: {
    multipleSlots: true,
  },

  properties: {
    overall: {
      type: Number,
      value: 1,
      observer(overall) {
        this.setData({
          overall,
        });
      },
    },
    typeall: {
      type: Number,
      value: 1,
      observer(typeall) {
        this.setData({
          typeall,
        });
      },
    },
    type: {
      type: String,
      value: '',
      observer(type) {
        this.setData({
          type,
        });
      },
    },
    areaall: {
      type: Number,
      value: 1,
      observer(areaall) {
        this.setData({
          areaall,
        });
      },
    },
    area: {
      type: String,
      value: '',
      observer(area) {
        this.setData({
          area,
        });
      },
    },
    ageall: {
      type: Number,
      value: 1,
      observer(ageall) {
        this.setData({
          ageall,
        });
      },
    },
    age: {
      type: String,
      value: '',
      observer(age) {
        this.setData({
          age,
        });
      },
    },
    layout: {
      type: Number,
      value: 1,
      observer(layout) {
        this.setData({
          layout,
        });
      },
    },
    sorts: {
      type: String,
      value: '',
      observer(sorts) {
        this.setData({
          sorts,
        });
      },
    },
    color: {
      type: String,
      value: 'limegreen',
    },
    name: {
      type: String,
      value: '',
      observer(name) {
        this.setData({
          name,
        });
      },
    },
    index: {
      type: Number,
      value: 0,
      observer(index) {
        this.setData({
          index,
        });
      },
    },
  },

  data: {
   
  },

  methods: {
    onChangeShowAction() {
      const {
        layout
      } = this.data;
      const nextLayout = layout === 1 ? 0 : 1;
      this.triggerEvent('change', {
        ...this.properties,
        layout: nextLayout
      });
    },

    handlePriseSort() {
      const {
        sorts
      } = this.data;
      this.triggerEvent('change', {
        ...this.properties,
        overall: 1,
        sorts: sorts === 'desc' ? 'asc' : 'desc',
        index: 4
      });
    },

    open() {
      this.triggerEvent('showFilterPopup', {
        show: true,
      });
    },

    onOverallAction() {
      const {
        area
      } = this.data;
      this.triggerEvent('change', {
        ...this.properties,
        areaall: 1,
        area: area === 'desc' ? 'asc' : 'desc',
        index: 1
      });
    },
    onTypeAction() {
      const {
        type
      } = this.data;
      this.triggerEvent('change', {
        ...this.properties,
        typeall: 1,
        type: type === 'desc' ? 'asc' : 'desc',
        index: 2
      });
    },
    onAgeallAction() {
      const {
        age
      } = this.data;
      this.triggerEvent('change', {
        ...this.properties,
        ageall: 1,
        age: age === 'desc' ? 'asc' : 'desc',
        index: 3
      });
    },
  },
});