<template>
  <el-dialog
    :title="$t('exportFeeImportExcel.title')"
    :visible.sync="visible"
    width="70%"
    :before-close="handleClose"
  >
    <el-form label-width="120px">
      <el-form-item :label="$t('exportFeeImportExcel.floor')">
        <div>
          <el-checkbox 
            v-model="isFloorAll" 
            @change="toggleAllFloors"
          >{{ $t('exportFeeImportExcel.all') }}</el-checkbox>
          <el-checkbox
            v-for="item in floors"
            :key="item.floorId"
            v-model="selectedFloorIds"
            :label="item.floorId"
            @change="handleFloorChange"
            class="margin-left"
          >{{ item.floorName }}</el-checkbox>
        </div>
      </el-form-item>

      <el-form-item :label="$t('exportFeeImportExcel.feeItem')">
        <div>
          <el-checkbox 
            v-model="isConfigAll" 
            @change="toggleAllConfigs"
          >{{ $t('exportFeeImportExcel.all') }}</el-checkbox>
          <el-checkbox
            v-for="item in configs"
            :key="item.configId"
            v-model="selectedConfigIds"
            :label="item.configId"
            @change="handleConfigChange"
            class="margin-left"
          >{{ item.feeName }}</el-checkbox>
        </div>
      </el-form-item>
    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">{{ $t('common.cancel') }}</el-button>
      <el-button type="primary" @click="handleExport">{{ $t('common.export') }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { exportData, listFeeConfigs, queryFloors } from '@/api/fee/exportFeeImportExcelApi'
import { getCommunityId } from '@/api/community/communityApi'

export default {
  name: 'ExportFeeImportExcel',
  data() {
    return {
      visible: false,
      isFloorAll: true,
      isConfigAll: true,
      selectedFloorIds: [],
      selectedConfigIds: [],
      floors: [],
      configs: []
    }
  },
  computed: {
    communityId() {
      return getCommunityId()
    }
  },
  methods: {
    open() {
      this.visible = true
      this.loadFloors()
      this.loadConfigs()
    },
    
    loadFloors() {
      queryFloors({
        page: 1,
        row: 150,
        communityId: this.communityId
      }).then(response => {
        this.floors = response.data.apiFloorDataVoList
        this.selectedFloorIds = this.floors.map(item => item.floorId)
      })
    },
    
    loadConfigs() {
      listFeeConfigs({
        page: 1,
        row: 100,
        communityId: this.communityId,
        isDefault: 'F'
      }).then(response => {
        this.configs = response.data.feeConfigs
        this.selectedConfigIds = this.configs.map(item => item.configId)
      })
    },
    
    toggleAllFloors() {
      this.selectedFloorIds = this.isFloorAll 
        ? this.floors.map(item => item.floorId)
        : []
    },
    
    toggleAllConfigs() {
      this.selectedConfigIds = this.isConfigAll
        ? this.configs.map(item => item.configId)
        : []
    },
    
    handleFloorChange() {
      this.isFloorAll = this.selectedFloorIds.length === this.floors.length
    },
    
    handleConfigChange() {
      this.isConfigAll = this.selectedConfigIds.length === this.configs.length
    },
    
    handleExport() {
      const params = {
        floorIds: this.selectedFloorIds.join(','),
        configIds: this.selectedConfigIds.join(','),
        communityId: this.communityId,
        type: '1001',
        pagePath: 'exportCreateFeeTemplate'
      }
      
      exportData(params).then(response => {
        this.$message.success(response.data.msg)
        if (response.data.code === 0) {
          this.handleClose()
          this.$router.push('/pages/property/downloadTempFile?tab=下载中心')
        }
      }).catch(error => {
        this.$message.error(error.message)
      })
    },
    
    handleClose() {
      this.visible = false
      this.reset()
    },
    
    reset() {
      this.isFloorAll = true
      this.isConfigAll = true
      this.selectedFloorIds = []
      this.selectedConfigIds = []
    }
  }
}
</script>

<style scoped>
.margin-left {
  margin-left: 15px;
}
</style>