<template>
  <SearchTable
    title="服务对账"
    ref="searchTableRef"
    v-model="formData"
    @submit="handleSubmit"
  >
    <template #slot-form>
      <el-col :span="isTablet ? 12 : 6">
        <el-form-item label="月份" prop="vin" label-width="120px">
          <el-date-picker
            v-model="formData.month"
            type="monthrange"
            range-separator="至"
            start-placeholder="开始月份"
            end-placeholder="结束月份"
          />
        </el-form-item>
      </el-col>
    </template>
    <template #slot-table>
      <el-table-column label="月份" prop="month" min-width="200" />
      <el-table-column label="服务类型" prop="serviceType" min-width="200" />
      <el-table-column label="调用次数" prop="time" min-width="200" />
    </template>
  </SearchTable>
</template>

<script>
import SearchTable from '@/components/SearchTable'

export default {
  name: 'CheckAccount',
  components: { SearchTable },
  data() {
    return {
      isTablet: window.OS.isTablet,
      formData: {}
    }
  },
  methods: {
    /**
     * 触发提交方法
     * @param formData 当前表单填写的内容
     * @param callback 回调函数
     */
    handleSubmit(formData, callback) {
      console.log('formData: ', formData)
      callback({ list: [], total: 0 })
    }
  }
}
</script>

<style lang="scss">

</style>
