<template>
  <el-row>
    <el-col :span="5">
      <el-card shadow="never" class="park-list-card">
        <template #header>
          <div class="card-header">
            <span style="font-weight: 550">停车场列表</span>
            <el-button text type="success" icon="Plus" @click="openCreateDialog" />
            <el-button text type="primary" icon="Refresh" @click="fetchParkList" />
          </div>
        </template>
        <el-menu
          :default-active="activeIndex.toString()"
          background-color="#f5f5f5"
          @select="handleMenuSelect"
        >
          <el-menu-item
            v-for="(item, index) in parkStore.parkList"
            :key="item.ID"
            :index="index.toString()"
          >
            <div class="menu-item-content">
              <span>{{ item.lot_name }}</span>
              <div class="menu-item-actions">
                <el-icon @click.stop="openEditDialog(item)"><Edit /></el-icon>
                <el-icon @click.stop="handleDelete(item.ID)"><Delete /></el-icon>
              </div>
            </div>
          </el-menu-item>
        </el-menu>
      </el-card>
    </el-col>

    <el-col :span="18" :offset="1">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="车场详情" name="detail">
          <lot-detail
            :park-id="parkStore.parkId"
            @edit="openEditDialog"
            @delete="handleDelete"
          />
        </el-tab-pane>
        <el-tab-pane label="岗亭管理" name="booth">
          <booth :park-id="parkStore.parkId" />
        </el-tab-pane>
        <el-tab-pane label="通道管理" name="channel">
          <channel :park-id="parkStore.parkId" />
        </el-tab-pane>
        <el-tab-pane label="设备管理" name="device">
          <device :park-id="parkStore.parkId" />
        </el-tab-pane>
      </el-tabs>
    </el-col>

    <!-- 新增/编辑停车场 Dialog -->
    <el-dialog
      v-model="dialogVisible"
      :title="isEdit ? '编辑停车场' : '新增停车场'"
      width="500"
    >
      <el-form label-width="120">
        <el-form-item label="区域编码：">
          <el-input v-model="form.lot_code" />
        </el-form-item>
        <el-form-item label="区域名称：">
          <el-input v-model="form.lot_name" />
        </el-form-item>
        <el-form-item label="区域容量：">
          <el-input v-model="form.capacity" type="number" />
        </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>
  </el-row>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { useParkAreaStore } from '@/pinia/parkArea'
import {
  obtainPullOverList,
  addPullOver,
  editPullOver,
  removePullOver,
} from '@/api/pullOver'
import { ElMessage, ElMessageBox } from 'element-plus'
import lotDetail from './lotDetail.vue'
import booth from './booth.vue'
import channel from './channel.vue'
import device from './device.vue'

const parkStore = useParkAreaStore()
const activeTab = ref('detail')

const activeIndex = computed(() => {
  const idx = parkStore.parkList.findIndex((item) => item.ID === parkStore.parkId)
  return idx >= 0 ? idx.toString() : '0'
})

// 获取停车场列表
const fetchParkList = async () => {
  const res = await obtainPullOverList()
  if (res.code === 0) {
    const list = res.data.list || []
    parkStore.changeList(list)
  }
}

// 菜单选择
const handleMenuSelect = (index) => {
  const item = parkStore.parkList[parseInt(index)]
  if (item) {
    parkStore.changeId(item.ID)
  }
}

// 新增/编辑 dialog
const dialogVisible = ref(false)
const isEdit = ref(false)
const form = reactive({
  id: 0,
  lot_code: '',
  lot_name: '',
  capacity: 0,
  description: '',
})

const openCreateDialog = () => {
  isEdit.value = false
  form.id = 0
  form.lot_code = ''
  form.lot_name = ''
  form.capacity = 0
  form.description = ''
  dialogVisible.value = true
}

const openEditDialog = (item) => {
  isEdit.value = true
  form.id = item.ID
  form.lot_code = item.lot_code
  form.lot_name = item.lot_name
  form.capacity = item.capacity
  form.description = item.description
  dialogVisible.value = true
}

const submitForm = async () => {
  form.capacity = Number(form.capacity)
  if (isEdit.value) {
    const res = await editPullOver(form)
    if (res.code === 0) {
      ElMessage.success('编辑成功')
      dialogVisible.value = false
      await fetchParkList()
    }
  } else {
    const res = await addPullOver(form)
    if (res.code === 0) {
      ElMessage.success('新增成功')
      dialogVisible.value = false
      await fetchParkList()
    }
  }
}

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

onMounted(() => {
  fetchParkList()
})
</script>

<style scoped lang="scss">
.park-list-card {
  min-height: 600px;

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

.menu-item-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;

  .menu-item-actions {
    display: flex;
    gap: 4px;
  }
}
</style>
