<template>
  <div class="filter-component">
    <el-radio-group class="shipber-layout-box" v-model="type">
      <el-radio :label="0">全button</el-radio>
      <el-radio :label="1">全filter</el-radio>
      <el-radio :label="2">部分button</el-radio>
    </el-radio-group>
    <div class="shipber-layout-box right">
      <adb-filter-button-group
        v-model="filters"
        :filter-options="filterOptions"
      >
        <template slot="checkbox" slot-scope="{ option }">
          {{ option.label + 'lhstock' }}
        </template>
        <template slot="checkbox2" slot-scope="{ option }">
          {{ option.label + '2222' }}
        </template>
      </adb-filter-button-group>
    </div>
    <adb-filter-tag
      v-model="filters"
      :filter-option="filterOptions"
      type="test"
    ></adb-filter-tag>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator';
import { UIFilterOption } from 'types/filter';
import { getDateForQuery } from '@adber/shipber-ui/utils/filters';

@Component({})
export default class FilterComponent extends Vue {
  private boolButton = false;

  private type = 0;

  @Watch('type')
  handleWatch(val) {
    this.filterOptions = this.filterOptions.map((d, i) => {
      let bool = false;
      switch (+val) {
        case 0:
          bool = true;
          break;
        case 1:
          bool = false;
          break;
        default:
          bool = i % 2 === 0;
          break;
      }
      d.is_button = bool;
      return d;
    });
  }

  private filterOptions: UIFilterOption[] = (function () {
    const arr: UIFilterOption[] = [
      {
        label: 'Checkbox',
        key: 'Checkbox',
        type: 'checkbox',
        // slot: 'checkbox',
        options: [
          { label: 'Fedex', value: 'FEDEX' },
          { label: 'UPS', value: 'UPS' },
          { label: 'Pitnet Bowers', value: 'PB' },
          // { label: 'STAMPS', value: 'STAMPS' },
          // { label: 'Fedex', value: 'FEDEX1' },
          // { label: 'UPS', value: 'UPS1' },
          // { label: 'Pitnet Bowers', value: 'PB1' },
          // { label: 'STAMPS', value: 'STAMPS1' },
        ],
      },
      {
        label: 'Amount Range',
        key: 'Amount',
        type: 'amount-range',
      },
      {
        label: 'Number Range',
        key: 'Number',
        type: 'number-range',
      },
      {
        label: 'Picker',
        key: 'Picker',
        type: 'date-picker',
        date_options: {
          type: 'daterange',
        },
      },
      {
        label: 'Select',
        key: 'Select',
        type: 'select',
        options: [
          { label: 'Fedex', value: 'FEDEX' },
          { label: 'UPS', value: 'UPS' },
          { label: 'Pitnet Bowers', value: 'PB' },
          { label: 'STAMPS', value: 'STAMPS' },
        ],
        is_button: true,
      },
      {
        label: 'Radio',
        key: 'Radio',
        type: 'radio',
        options: [
          { label: 'Fedex', value: 'FEDEX' },
          { label: 'UPS', value: 'UPS' },
          { label: 'Pitnet Bowers', value: 'PB' },
          { label: 'STAMPS', value: 'STAMPS' },
          { label: 'Fedex', value: 'FEDEX1' },
          { label: 'UPS', value: 'UPS1' },
          { label: 'Pitnet Bowers', value: 'PB1' },
          { label: 'STAMPS', value: 'STAMPS1' },
        ],
        is_button: true,
      },
    ];
    arr.forEach((d) => (d.is_button = true));
    return arr;
  })();

  private filters = getDateForQuery({}, this.filterOptions);
}
</script>

<style lang="scss">
.filter-component {
  flex: 1 1 auto;
}
</style>
