<template>
  <container>
    <br />
    <a-card :bordered="false" type="inner">
      <a-form-model :label-col="{ flex: '70px' }" :wrapper-col="{ flex: '1' }">
        <a-form-model-item class="yo-filter-item" label="房屋性质">
          <a-radio-group :default-value="''" button-style="solid" size="small">
            <a-radio-button value>全部</a-radio-button>
            <a-radio-button value="1">住宅</a-radio-button>
            <a-radio-button value="2">非住宅</a-radio-button>
          </a-radio-group>
        </a-form-model-item>
        <a-divider class="mt-xs mb-xs" dashed />
        <a-form-model-item class="yo-filter-item" label="审核状态">
          <a-radio-group :default-value="''" button-style="solid" size="small">
            <a-radio-button value>全部</a-radio-button>
            <a-radio-button value="1">待建档</a-radio-button>
            <a-radio-button value="2">暂存</a-radio-button>
            <a-radio-button value="3">待提交</a-radio-button>
            <a-radio-button value="4">退回</a-radio-button>
            <a-radio-button value="5">待审核</a-radio-button>
            <a-radio-button value="6">审核通过</a-radio-button>
          </a-radio-group>
        </a-form-model-item>
        <a-divider class="mt-xs mb-xs" dashed />
        <a-form-model-item class="yo-filter-item" label="土地性质">
          <a-radio-group :default-value="''" button-style="solid" size="small">
            <a-radio-button value>全部</a-radio-button>
            <a-radio-button value="1">国有土地</a-radio-button>
            <a-radio-button value="2">集体土地</a-radio-button>
          </a-radio-group>
        </a-form-model-item>
        <a-divider class="mt-xs mb-xs" dashed />
        <a-form-model-item class="yo-filter-item" label="筛选范围">
          <a-cascader class="w-400" placeholder="请选择区域" />
        </a-form-model-item>
        <a-divider class="mt-xs mb-xs" dashed />
        <div class="text-center">
          <a-button class="mr-xs" type="primary">查询</a-button>
          <a-button>导出Excel</a-button>
        </div>
      </a-form-model>
    </a-card>
    <StatisticsCharts v-if="renderList.indexOf('charts') > -1" v-show="type === 'charts'" />
    <StatisticsTable v-if="renderList.indexOf('table') > -1" v-show="type === 'table'" />
  </container>
</template>
<script>
import StatisticsCharts from './charts';
import StatisticsTable from './table';

export default {
  components: {
    StatisticsCharts,
    StatisticsTable,
  },

  props: {
    type: {
      type: String,
      default: 'charts',
    },
  },

  data() {
    return {
      renderList: ['charts'],
    };
  },

  watch: {
    type() {
      if (this.renderList.indexOf(this.type) === -1) {
        this.renderList.push(this.type);
      }
    },
  },
};
</script>