<template>
  <div class="cleaning-container">
    <el-card shadow="never" class="search-card">
      <el-form :inline="true" :model="searchForm" size="small">
        <el-form-item label="作业人">
          <el-select v-model="searchForm.userId" placeholder="全部" filterable clearable>
            <el-option v-for="user in userList" :key="user.user_id" :label="user.name" :value="user.user_id" />
          </el-select>
        </el-form-item>
        <el-form-item label="时间范围">
          <el-date-picker v-model="dateRange" type="datetimerange"
                          range-separator="至" start-placeholder="开始" end-placeholder="结束"
                          format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch" icon="el-icon-search">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card shadow="never">
      <div slot="header"><span>保洁作业记录</span></div>
      <el-table :data="tableData" border stripe size="small" v-loading="loading">
        <el-table-column prop="user_name" label="作业人" width="100" />
        <el-table-column prop="work_area" label="作业区域" min-width="180" />
        <el-table-column prop="work_content" label="作业内容" min-width="200" />
        <el-table-column prop="work_time" label="作业时间" width="180" />
        <el-table-column prop="longitude" label="经度" width="120" />
        <el-table-column prop="latitude" label="纬度" width="120" />
        <el-table-column prop="remark" label="备注" min-width="150" />
        <el-table-column label="操作" width="80" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="showDetail(scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="margin-top: 16px; text-align: right;"
        @size-change="handleSizeChange" @current-change="handlePageChange"
        :current-page="pagination.page" :page-sizes="[10, 20, 50, 100]"
        :page-size="pagination.row" :total="pagination.total"
        layout="total, sizes, prev, pager, next, jumper" />
    </el-card>

    <el-dialog title="作业详情" :visible.sync="detailVisible" width="500px">
      <el-descriptions :column="1" border size="small" v-if="currentRecord">
        <el-descriptions-item label="作业人">{{ currentRecord.user_name }}</el-descriptions-item>
        <el-descriptions-item label="作业区域">{{ currentRecord.work_area }}</el-descriptions-item>
        <el-descriptions-item label="作业内容">{{ currentRecord.work_content }}</el-descriptions-item>
        <el-descriptions-item label="作业时间">{{ currentRecord.work_time }}</el-descriptions-item>
        <el-descriptions-item label="坐标">{{ currentRecord.longitude }}, {{ currentRecord.latitude }}</el-descriptions-item>
        <el-descriptions-item label="作业图片">
          <template v-if="parseImages(currentRecord.images).length">
            <el-image v-for="(url, i) in parseImages(currentRecord.images)" :key="i"
                      :src="url" style="width: 80px; height: 80px; margin-right: 8px;"
                      :preview-src-list="parseImages(currentRecord.images)" fit="cover" />
          </template>
          <span v-else>无</span>
        </el-descriptions-item>
        <el-descriptions-item label="备注">{{ currentRecord.remark || '无' }}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script>
import { queryCleaningRecords } from '@/api/property/propertyApi'
import { queryPropertyUsers } from '@/api/property/propertyApi'

export default {
  name: 'CleaningView',
  data() {
    return {
      searchForm: { userId: '' },
      dateRange: [],
      userList: [],
      tableData: [],
      loading: false,
      pagination: { page: 1, row: 20, total: 0 },
      detailVisible: false,
      currentRecord: null
    }
  },
  mounted() { this.loadUsers(); this.handleSearch() },
  methods: {
    async loadUsers() {
      try {
        const res = await queryPropertyUsers({ workType: 'CLEANING', page: 1, row: 200 })
        this.userList = res.data && res.data.data || []
      } catch (e) { console.error(e) }
    },
    async handleSearch() {
      this.loading = true
      try {
        const params = { page: this.pagination.page, row: this.pagination.row, ...this.searchForm }
        Object.keys(params).forEach(k => { if (!params[k]) delete params[k] })
        if (this.dateRange && this.dateRange.length === 2) {
          params.startTime = this.dateRange[0]; params.endTime = this.dateRange[1]
        }
        const res = await queryCleaningRecords(params)
        this.tableData = res.data && res.data.data || []
        this.pagination.total = res.data && res.data.total || 0
      } catch (e) { this.$message.error('查询失败') }
      finally { this.loading = false }
    },
    parseImages(images) {
      if (!images) return []
      try { return JSON.parse(images) } catch (e) { return [] }
    },
    showDetail(row) { this.currentRecord = row; this.detailVisible = true },
    handleSizeChange(val) { this.pagination.row = val; this.handleSearch() },
    handlePageChange(val) { this.pagination.page = val; this.handleSearch() }
  }
}
</script>

<style scoped>
.cleaning-container { padding: 16px; }
.search-card { margin-bottom: 16px; }
</style>
