<template>
  <div v-loading="loading">
    <el-form inline>
      <el-form-item>
        <el-button type="success" icon="Plus" @click="openDialog('add')">新增</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Refresh" @click="fetchData">刷新</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="list" size="small" height="505" border stripe>
      <el-table-column label="编码" align="center" width="120" prop="booth_code" />
      <el-table-column label="名称" align="center" width="200" prop="booth_name" />
      <el-table-column label="IP地址" align="center" width="200" prop="ip_address" />
      <el-table-column label="备注" align="center" prop="description" />
      <el-table-column label="操作" align="center" width="200" fixed="right">
        <template #default="scope">
          <el-button text type="primary" icon="Edit" @click="openDialog('edit', scope.row)">修改</el-button>
          <el-button text type="primary" icon="Delete" @click="handleDelete(scope.row.ID)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div style="display: flex; justify-content: flex-end; margin-top: 10px">
      <el-pagination
        v-model:current-page="query.page"
        v-model:page-size="query.page_size"
        :page-sizes="[10, 30, 50, 100]"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @current-change="fetchData"
        @size-change="onSizeChange"
      />
    </div>

    <el-dialog
      v-model="dialogVisible"
      :title="isEdit ? '编辑岗亭' : '新增岗亭'"
      width="600"
    >
      <el-form label-width="120">
        <el-form-item label="岗亭编码：">
          <el-input v-model="form.booth_code" />
        </el-form-item>
        <el-form-item label="岗亭名称：">
          <el-input v-model="form.booth_name" />
        </el-form-item>
        <el-form-item label="IP地址：">
          <el-input v-model="form.ip_address" />
        </el-form-item>
        <el-form-item label="备注：">
          <el-input v-model="form.description" type="textarea" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm">确认</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, watch } from 'vue'
import {
  obtainGuardBoothList,
  addGuardBooth,
  editGuardBooth,
  deleteGuardBooth,
} from '@/api/guardBooth'
import { ElMessage, ElMessageBox } from 'element-plus'

const props = defineProps({
  parkId: {
    type: Number,
    default: 0,
  },
})

const loading = ref(false)
const list = ref([])
const total = ref(0)
const query = reactive({
  parking_lot_id: 0,
  page: 1,
  page_size: 10,
})

const fetchData = async () => {
  if (!props.parkId || props.parkId === 0) {
    list.value = []
    total.value = 0
    return
  }
  loading.value = true
  query.parking_lot_id = props.parkId
  try {
    const res = await obtainGuardBoothList({ ...query })
    if (res.code === 0) {
      list.value = res.data.list || []
      total.value = res.data.total || 0
    }
  } finally {
    loading.value = false
  }
}

const onSizeChange = (val) => {
  query.page_size = val
  query.page = 1
  fetchData()
}

// Dialog
const dialogVisible = ref(false)
const isEdit = ref(false)
const form = reactive({
  id: 0,
  booth_code: '',
  booth_name: '',
  ip_address: '',
  description: '',
  parking_lot_id: 0,
})

const openDialog = (mode, row) => {
  isEdit.value = mode === 'edit'
  if (mode === 'edit' && row) {
    form.id = row.ID
    form.booth_code = row.booth_code
    form.booth_name = row.booth_name
    form.ip_address = row.ip_address
    form.description = row.description
    form.parking_lot_id = row.parking_lot_id
  } else {
    form.id = 0
    form.booth_code = ''
    form.booth_name = ''
    form.ip_address = ''
    form.description = ''
    form.parking_lot_id = props.parkId
  }
  dialogVisible.value = true
}

const submitForm = async () => {
  if (!form.booth_code || !form.booth_name || !form.ip_address) {
    ElMessage.error('请填写完整信息')
    return
  }
  form.parking_lot_id = props.parkId
  if (isEdit.value) {
    const res = await editGuardBooth(form)
    if (res.code === 0) {
      ElMessage.success('编辑成功')
      dialogVisible.value = false
      await fetchData()
    }
  } else {
    const res = await addGuardBooth(form)
    if (res.code === 0) {
      ElMessage.success('新增成功')
      dialogVisible.value = false
      await fetchData()
    }
  }
}

const handleDelete = (id) => {
  ElMessageBox.confirm('确定删除该岗亭吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async () => {
      const res = await deleteGuardBooth(id)
      if (res.code === 0) {
        ElMessage.success('删除成功')
        await fetchData()
      }
    })
    .catch(() => {
      ElMessage.info('已取消删除')
    })
}

watch(
  () => props.parkId,
  (val) => {
    query.page = 1
    fetchData()
  },
  { immediate: true }
)
</script>
