<template>
  <div class="custom-back-warp">
    <subTop
      :title="topTitle"
      :postion="topPostion"
      :is-down="isDown"
      :down-title="downTitle"
      :label-field="labelField"
      :value-field="valueField"
      :down-width="downWidth"
      :options="options"
      @command="handeleCommand"
    ></subTop>
    <div class="custom-back-content">
      <slot name="back"></slot>
    </div>
  </div>
</template>
<script setup>
import subTop from '../components/subTop.vue';
import { isEmpty, getAssetsFile } from '@/utils';
import { ref, reactive, onMounted, watch } from 'vue';
import { useRouter } from 'vue-router';
import { useApp } from '@/hooks';

const router = useRouter();
const props = defineProps({
  topTitle: {
    type: String,
    default: '统计',
  },
  topPostion: {
    type: String,
    default: 'left',
  },
  options: {
    type: Array,
    default: () => {
      return [
        { label: '耿马镇', value: '42611' },
        { label: '勐撒镇', value: '9259' },
        { label: '勐永镇', value: '17787' },
        { label: '孟定镇', value: '42610' },
        { label: '勐简乡', value: '17788' },
        { label: '贺派乡', value: '40161' },
        { label: '四排山乡', value: '40163' },
        { label: '大兴乡', value: '40159' },
      ];
    },
  },
  isDown: {
    type: Boolean,
    default: false,
  },
  downTitle: {
    type: String,
    default: '全县',
  },
  labelField: {
    type: String,
    default: 'label',
  },
  valueField: {
    type: String,
    default: 'value',
  },
  downWidth: {
    type: String,
    default: '100px',
  },
});

const emit = defineEmits(['command']);
const handeleCommand = (data) => {
  emit('command', data);
};
</script>
<style lang="scss" scoped>
.custom-back-warp {
  height: 100%;
  width: 100%;
  .custom-back-content {
    height: calc(100% - 38px);
    width: 100%;
    padding: 10px 0;
    box-sizing: border-box;
  }
}
</style>
