<template>
  <div class="comprehensive-center-list">
    <div class="search-div">
      <Row class="mb10">
        <!-- <Col span="6">
          <span>市州：</span>
          <Select v-model="searchInfo.cityId" :clearable="true" style="width:70%" placeholder="请选择市州">
            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </Col>
        <Col span="6">
          <span>县（市、区）：</span>
          <Select v-model="searchInfo.areaId" :clearable="true" style="width:70%" placeholder="请选择县区">
            <Option v-for="item in areaList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </Col> -->
        <Col span="6">
          <Button type="primary" @click="handleSearch">搜索</Button>
          <Button  style="margin-left: 10px;" type="primary" @click="handleAdd">新增</Button>
          <!-- <Button style="margin-left: 10px;" @click="handleReset">重置</Button> -->
        </Col>
        <!-- <Col span="6" style="text-align: right;">
          <Button type="primary" @click="handleAdd">新增</Button>
        </Col> -->
      </Row>
    </div>

    <div class="table-div">
      <Table
        :columns="columns"
        :data="tableData"
        :loading="loading"
        border
        stripe
      >
        <template slot-scope="{ row }" slot="action">
          <Button type="primary" size="small" style="margin-right: 5px;" @click="handleEdit(row)">编辑</Button>
          <Button type="error" size="small" @click="handleDelete(row)">删除</Button>
        </template>
      </Table>
      <Page
        :total="total"
        :current="pageInfo.page"
        :page-size="pageInfo.pageSize"
        show-total
        show-elevator
        @on-change="handlePageChange"
        @on-page-size-change="handlePageSizeChange"
        style="margin-top: 20px; text-align: right;"
      />
    </div>
  </div>
</template>

<script>
import { getComprehensiveCenterList, deleteComprehensiveCenter } from '@/api/contradiction'

export default {
  name: 'ComprehensiveCenterList',
  data () {
    return {
      loading: false,
      searchInfo: {
        cityId: '',
        areaId: ''
      },
      cityList: [
        { label: '长春', value: '1' },
        { label: '吉林', value: '2' },
        { label: '四平', value: '3' },
        { label: '辽源', value: '4' },
        { label: '通化', value: '5' },
        { label: '白山', value: '6' },
        { label: '松原', value: '7' },
        { label: '白城', value: '8' },
        { label: '延边', value: '9' },
        { label: '梅河口', value: '10' }
      ],
      areaList: [],
      tableData: [],
      total: 0,
      pageInfo: {
        page: 1,
        pageSize: 10
      },
      columns: [
        {
          title: '序号',
          type: 'index',
          width: 80,
          align: 'center'
        },
        {
          title: '市州',
          key: 'city_name',
          align: 'center',
          minWidth: 100
        },
        {
          title: '县（市、区）',
          key: 'area_name',
          align: 'center',
          minWidth: 120
        },
        {
          title: '面积（平方米）',
          key: 'square_measure',
          align: 'center',
          minWidth: 120
        },
        {
          title: '编制人数',
          key: 'authorized_strength',
          align: 'center',
          minWidth: 100
        },
        {
          title: '实有人数',
          key: 'actual_number',
          align: 'center',
          minWidth: 100
        },
        {
          title: '操作',
          slot: 'action',
          align: 'center',
          width: 150,
          fixed: 'right'
        }
      ]
    }
  },
  mounted () {
    this.loadData()
  },
  methods: {
    // 加载数据
    async loadData () {
      this.loading = true
      try {
        const params = {
          ...this.searchInfo,
          page: this.pageInfo.page,
          pageSize: this.pageInfo.pageSize
        }
        const response = await getComprehensiveCenterList(params)
        if (response.data && response.data.errcode === 0) {
          this.tableData = response.data.data || []
          this.total = response.data.data.total || 0
        } else {
          this.$Message.error(response.data.errmsg || '加载数据失败')
        }
      } catch (error) {
        console.error('加载数据失败:', error)
        this.$Message.error('加载数据失败')
      } finally {
        this.loading = false
      }
    },
    // 搜索
    handleSearch () {
      this.pageInfo.page = 1
      this.loadData()
    },
    // 重置
    handleReset () {
      this.searchInfo = {
        cityId: '',
        areaId: ''
      }
      this.pageInfo.page = 1
      this.loadData()
    },
    // 新增
    handleAdd () {
      this.$router.push({
        name: 'ComprehensiveCenterForm',
        params: { type: 'add' }
      })
    },
    // 编辑
    handleEdit (row) {
      this.$router.push({
        name: 'ComprehensiveCenterForm',
        params: { type: 'edit', id: row.id }
      })
    },
    // 删除
    handleDelete (row) {
      this.$Modal.confirm({
        title: '确认删除',
        content: '确定要删除这条记录吗？',
        onOk: async () => {
          try {
            const response = await deleteComprehensiveCenter({ id: row.id, del_flag: 1 })
            if (response.data && response.data.errcode === 0) {
              this.$Message.success('删除成功')
              this.loadData()
            } else {
              this.$Message.error(response.data.errmsg || '删除失败')
            }
          } catch (error) {
            console.error('删除失败:', error)
            this.$Message.error('删除失败')
          }
        }
      })
    },
    // 分页变化
    handlePageChange (page) {
      this.pageInfo.page = page
      this.loadData()
    },
    // 每页条数变化
    handlePageSizeChange (pageSize) {
      this.pageInfo.pageSize = pageSize
      this.pageInfo.page = 1
      this.loadData()
    }
  }
}
</script>

<style scoped lang="less">
.comprehensive-center-list {
  padding: 20px;

  .search-div {
    background: #f5f5f5;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 4px;
  }

  .mb10 {
    margin-bottom: 10px;
  }

  .table-div {
    background: #fff;
    padding: 15px;
    border-radius: 4px;
  }
}
</style>
