<template>
  <div class="animated fadeInRight report-repair-container">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card class="box-card">
          <div slot="header" class="flex justify-between">
            <span>{{ $t('reportRepair.queryCondition') }}</span>
            <div style="float: right;">
              <el-button type="text" @click="_moreCondition()">
                {{ reportRepairInfo.moreCondition ? $t('reportRepair.hide') : $t('reportRepair.more') }}
              </el-button>
            </div>
          </div>
          <div class="card-body">
            <el-row :gutter="20">
              <el-col :span="4">
                <el-date-picker v-model="reportRepairInfo.conditions.beginStartTime" type="date"
                  :placeholder="$t('reportRepair.beginStartTimePlaceholder')" style="width: 100%;" />
              </el-col>
              <el-col :span="4">
                <el-date-picker v-model="reportRepairInfo.conditions.beginEndTime" type="date"
                  :placeholder="$t('reportRepair.beginEndTimePlaceholder')" style="width: 100%;"
                  @change="validateBeginTime" />
              </el-col>
              <el-col :span="4">
                <el-date-picker v-model="reportRepairInfo.conditions.finishStartTime" type="date"
                  :placeholder="$t('reportRepair.finishStartTimePlaceholder')" style="width: 100%;" />
              </el-col>
              <el-col :span="4">
                <el-date-picker v-model="reportRepairInfo.conditions.finishEndTime" type="date"
                  :placeholder="$t('reportRepair.finishEndTimePlaceholder')" style="width: 100%;"
                  @change="validateFinishTime" />
              </el-col>
              <el-col :span="4" v-if="reportRepairInfo.communitys.length > 1">
                <el-select v-model="reportRepairInfo.conditions.communityId"
                  :placeholder="$t('reportRepair.communityPlaceholder')" style="width: 100%;" @change="_changCommunity">
                  <el-option v-for="item in reportRepairInfo.communitys" :key="item.communityId" :label="item.name"
                    :value="item.communityId" />
                </el-select>
              </el-col>
              <el-col :span="4">
                <el-button type="primary" @click="_queryMethod">
                  <i class="el-icon-search"></i>
                  {{ $t('reportRepair.search') }}
                </el-button>
                <el-button @click="_resetMethod" style="margin-left: 10px;">
                  <i class="el-icon-refresh"></i>
                  {{ $t('reportRepair.reset') }}
                </el-button>
              </el-col>
            </el-row>

            <el-row :gutter="20" v-show="reportRepairInfo.moreCondition">
              <el-col :span="4">
                <el-select v-model="reportRepairInfo.conditions.staffId"
                  :placeholder="$t('reportRepair.staffPlaceholder')" style="width: 100%;">
                  <el-option v-for="item in reportRepairInfo.repairUsers" :key="item.staffId" :label="item.staffName"
                    :value="item.staffId" />
                </el-select>
              </el-col>
              <el-col :span="4">
                <el-select v-model="reportRepairInfo.conditions.state" :placeholder="$t('reportRepair.statePlaceholder')"
                  style="width: 100%;">
                  <template v-for="item in reportRepairInfo.states">
                  <el-option :key="item.statusCd" :label="item.name"
                    :value="item.statusCd" v-if="item.statusCd != '10005'" />
                  </template>
                </el-select>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="24">
        <el-card class="box-card">
          <div slot="header" class="flex justify-between">
            <div>
              <span>{{ $t('reportRepair.reportTitle') }}</span>
              <el-tooltip :content="$t('reportRepair.tooltip')" placement="top">
                <i class="el-icon-info" style="cursor: pointer; margin-left: 10px;"></i>
              </el-tooltip>
            </div>
            <div style="float: right;">
              <el-button type="primary" size="small" @click="_exportFee">
                <i class="el-icon-download"></i>
                {{ $t('reportRepair.export') }}
              </el-button>
            </div>
          </div>
          <div class="card-body">
            <el-table :data="reportRepairInfo.repairs" border style="width: 100%" v-loading="loading">
              <el-table-column prop="index" :label="$t('reportRepair.repairId')" align="center" width="80">
                <template slot-scope="scope">
                  {{ scope.$index + 1 }}
                </template>
              </el-table-column>
              <el-table-column prop="staffId" :label="$t('reportRepair.staffId')" align="center" />
              <el-table-column prop="staffName" :label="$t('reportRepair.staffName')" align="center" />
              <el-table-column prop="dealAmount" :label="$t('reportRepair.dealing')" align="center" />
              <el-table-column prop="dispatchAmount" :label="$t('reportRepair.dispatch')" align="center" />
              <el-table-column prop="transferOrderAmount" :label="$t('reportRepair.transfer')" align="center" />
              <el-table-column prop="chargebackAmount" :label="$t('reportRepair.chargeback')" align="center" />
              <el-table-column prop="returnAmount" :label="$t('reportRepair.returnVisit')" align="center" />
              <el-table-column prop="statementAmount" :label="$t('reportRepair.finished')" align="center" />
              <el-table-column prop="score" :label="$t('reportRepair.score')" align="center">
                <template slot-scope="scope">
                  {{ scope.row.score || '-' }}
                </template>
              </el-table-column>
            </el-table>

            <el-table :data="[{}]" border style="width: 100%; margin-top: 20px;">
              <el-table-column :label="$t('reportRepair.statistics')" align="center" width="80"
                class-name="statistics-cell" />
              <el-table-column label="---" align="center" class-name="statistics-cell" />
              <el-table-column label="---" align="center" class-name="statistics-cell" />
              <el-table-column :label="reportRepairInfo.conditions.dealNumber" align="center"
                class-name="statistics-cell" />
              <el-table-column :label="reportRepairInfo.conditions.dispatchNumber" align="center"
                class-name="statistics-cell" />
              <el-table-column :label="reportRepairInfo.conditions.transferOrderNumber" align="center"
                class-name="statistics-cell" />
              <el-table-column :label="reportRepairInfo.conditions.chargebackNumber" align="center"
                class-name="statistics-cell" />
              <el-table-column :label="reportRepairInfo.conditions.returnNumber" align="center"
                class-name="statistics-cell" />
              <el-table-column :label="reportRepairInfo.conditions.statementNumber" align="center"
                class-name="statistics-cell" />
              <el-table-column label="---" align="center" class-name="statistics-cell" />
            </el-table>

            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
              :current-page="page.current" :page-sizes="[10, 20, 30, 50]" :page-size="page.size"
              layout="total, sizes, prev, pager, next, jumper" :total="page.total" style="margin-top: 20px;" />
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { queryRepair, exportData, listMyEnteredCommunitys } from '@/api/report/reportRepairApi'
import { getDict } from '@/api/community/communityApi'
import { getCommunityId } from '@/api/community/communityApi'

export default {
  name: 'ReportRepairList',
  data() {
    return {
      loading: false,
      reportRepairInfo: {
        repairs: [],
        communitys: [],
        total: 0,
        records: 1,
        moreCondition: false,
        states: [],
        repairUsers: [],
        conditions: {
          staffId: '',
          staffName: '',
          state: '',
          stateName: '',
          amount: '',
          beginStartTime: '',
          beginEndTime: '',
          finishStartTime: '',
          finishEndTime: '',
          dealNumber: '',
          dispatchNumber: '',
          transferOrderNumber: '',
          chargebackNumber: '',
          statementNumber: '',
          returnNumber: '',
          score: '',
          communityId: ''
        }
      },
      page: {
        current: 1,
        size: 10,
        total: 0
      }
    }
  },
  created() {
    this._initMethod()
  },
  methods: {
    async _initMethod() {
      this.reportRepairInfo.conditions.communityId = getCommunityId()
      await this._loadStaffCommunitys()
      await this._listRepairs(this.page.current, this.page.size)

      try {
        const states = await getDict('r_repair_user', 'state')
        this.reportRepairInfo.states = states
      } catch (error) {
        console.error('获取字典数据失败:', error)
      }
    },
    validateBeginTime() {
      if (this.reportRepairInfo.conditions.beginStartTime && this.reportRepairInfo.conditions.beginEndTime) {
        const start = new Date(this.reportRepairInfo.conditions.beginStartTime).getTime()
        const end = new Date(this.reportRepairInfo.conditions.beginEndTime).getTime()
        if (start > end) {
          this.$message.error(this.$t('reportRepair.timeError'))
          this.reportRepairInfo.conditions.beginEndTime = ''
        }
      }
    },
    validateFinishTime() {
      if (this.reportRepairInfo.conditions.finishStartTime && this.reportRepairInfo.conditions.finishEndTime) {
        const start = new Date(this.reportRepairInfo.conditions.finishStartTime).getTime()
        const end = new Date(this.reportRepairInfo.conditions.finishEndTime).getTime()
        if (start > end) {
          this.$message.error(this.$t('reportRepair.timeError'))
          this.reportRepairInfo.conditions.finishEndTime = ''
        }
      }
    },
    async _listRepairs(page, size) {
      this.loading = true
      try {
        const params = {
          page,
          row: size,
          ...this.reportRepairInfo.conditions
        }

        const res = await queryRepair(params)
        this.reportRepairInfo.repairs = res.data
        this.reportRepairInfo.repairUsers = res.sumTotal
        this.reportRepairInfo.conditions.dealNumber = res.rep.dealNumber
        this.reportRepairInfo.conditions.dispatchNumber = res.rep.dispatchNumber
        this.reportRepairInfo.conditions.transferOrderNumber = res.rep.transferOrderNumber
        this.reportRepairInfo.conditions.chargebackNumber = res.rep.chargebackNumber
        this.reportRepairInfo.conditions.statementNumber = res.rep.statementNumber
        this.reportRepairInfo.conditions.returnNumber = res.rep.returnNumber
        this.page.total = res.records
      } catch (error) {
        console.error('查询报修汇总失败:', error)
      } finally {
        this.loading = false
      }
    },
    _queryMethod() {
      this.page.current = 1
      this._listRepairs(this.page.current, this.page.size)
    },
    _resetMethod() {
      this.reportRepairInfo.conditions = {
        ...this.reportRepairInfo.conditions,
        staffId: '',
        staffName: '',
        beginStartTime: '',
        beginEndTime: '',
        finishStartTime: '',
        finishEndTime: '',
        state: '',
        stateName: ''
      }
      this._listRepairs(this.page.current, this.page.size)
    },
    _moreCondition() {
      this.reportRepairInfo.moreCondition = !this.reportRepairInfo.moreCondition
    },
    async _exportFee() {
      try {
        const params = {
          pagePath: 'reportRepairDetail',
          ...this.reportRepairInfo.conditions
        }

        const res = await exportData(params )
        this.$message.success(res.msg)
        if (res.code === 0) {
          this.$router.push('/pages/property/downloadTempFile?tab=下载中心')
        }
      } catch (error) {
        console.error('导出失败:', error)
      }
    },
    async _loadStaffCommunitys() {
      try {
        const params = {
          _uid: '123mlkdinkldldijdhuudjdjkkd',
          page: 1,
          row: 100
        }

        const res = await listMyEnteredCommunitys(params)
        this.reportRepairInfo.communitys = res.communitys
      } catch (error) {
        console.error('获取小区列表失败:', error)
      }
    },
    _changCommunity() {
      this._listRepairs(this.page.current, this.page.size)
    },
    handleSizeChange(val) {
      this.page.size = val
      this._listRepairs(this.page.current, this.page.size)
    },
    handleCurrentChange(val) {
      this.page.current = val
      this._listRepairs(this.page.current, this.page.size)
    }
  }
}
</script>

<style lang="scss" scoped>
.report-repair-container {
  padding: 20px;

  .box-card {
    margin-bottom: 20px;

    .clearfix {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .card-body {
      padding: 20px 0;
    }
  }

  .el-table {
    margin-top: 20px;

    .statistics-cell {
      font-size: 18px;
      color: red;
    }
  }

  .el-pagination {
    margin-top: 20px;
    text-align: right;
  }
}
</style>