<template>
  <div class="margin-top">
    <el-row class="margin-top-lg">
      <el-col :span="8" class="text-right"></el-col>
    </el-row>
    <div class="margin-top">
      <el-table :data="pointPlanInfo.plans" style="width: 100%">
        <el-table-column prop="inspectionPlanName" :label="$t('inspectionPlan.planName')" align="center"></el-table-column>
        <el-table-column prop="inspectionRouteName" :label="$t('inspectionPlan.planRoute')" align="center"></el-table-column>
        <el-table-column prop="inspectionPlanPeriodName" :label="$t('inspectionPlan.planPeriod')" align="center"></el-table-column>
        <el-table-column prop="signTypeName" :label="$t('inspectionPlan.signType')" align="center"></el-table-column>
        <el-table-column :label="$t('inspectionPlan.dateRange')" align="center">
          <template slot-scope="scope">
            {{ scope.row.startDate }}~{{ scope.row.endDate }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('inspectionPlan.timeRange')" align="center">
          <template slot-scope="scope">
            {{ scope.row.startTime }}~{{ scope.row.endTime }}
          </template>
        </el-table-column>
        <el-table-column prop="beforeTime" :label="$t('inspectionPlan.taskAhead')" align="center"></el-table-column>
        <el-table-column prop="createUserName" :label="$t('inspectionPlan.creator')" align="center"></el-table-column>
        <el-table-column prop="createTime" :label="$t('inspectionPlan.createTime')" align="center"></el-table-column>
        <el-table-column :label="$t('inspectionPlan.inspector')" align="center">
          <template slot-scope="scope">
            <div v-for="(staff, i) in scope.row.staffs" :key="i">{{ staff.staffName }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="stateName" :label="$t('inspectionPlan.status')" align="center"></el-table-column>
      </el-table>
      
      <el-row class="margin-top">
        <el-col :span="4"></el-col>
        <el-col :span="20" class="text-right">
          <el-pagination
            @current-change="handlePageChange"
            :current-page.sync="currentPage"
            :page-size="pageSize"
            layout="prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { queryPointInspectionPlan } from '@/api/inspection/pointPlanApi'
import { getCommunityId } from '@/api/community/communityApi'

export default {
  name: 'PointPlan',
  props: {
    inspectionId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      pointPlanInfo: {
        plans: [],
        planUserName: '',
        inspectionStartTime: '',
        inspectionEndTime: ''
      },
      currentPage: 1,
      pageSize: 10,
      total: 0
    }
  },
  watch: {
    inspectionId(newVal) {
      if (newVal) {
        this._loadPointPlanData(this.currentPage, this.pageSize)
      }
    }
  },
  methods: {
    async _loadPointPlanData(page, row) {
      try {
        const communityId = getCommunityId()
        const params = {
          communityId,
          inspectionId: this.inspectionId,
          planUserName: this.pointPlanInfo.planUserName,
          inspectionStartTime: this.pointPlanInfo.inspectionStartTime,
          inspectionEndTime: this.pointPlanInfo.inspectionEndTime,
          page,
          row
        }
        
        const res = await queryPointInspectionPlan(params)
        this.pointPlanInfo.plans = res.data
        this.total = res.total
      } catch (error) {
        console.error('加载计划数据失败:', error)
      }
    },
    
    handlePageChange(currentPage) {
      this._loadPointPlanData(currentPage, this.pageSize)
    },
    
    refresh() {
      this.currentPage = 1
      this._loadPointPlanData(this.currentPage, this.pageSize)
    },
    
    setPlanUserName(name) {
      this.pointPlanInfo.planUserName = name
    },
    
    setDateRange(startTime, endTime) {
      this.pointPlanInfo.inspectionStartTime = startTime
      this.pointPlanInfo.inspectionEndTime = endTime
    }
  }
}
</script>