<template>
  <page-container>
    <div class="merchant-list">
      <div class="table-header">
        <h1>商家列表</h1>
        <a-button type="primary" @click="showAddModal">添加商家</a-button>
      </div>
      
      <a-table 
        :columns="columns" 
        :data-source="tableData" 
        :pagination="pagination"
        :loading="loading"
        @change="handleTableChange"
        row-key="id"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'location'">
            <a @click="showMap(record)">查看位置</a>
          </template>
          <template v-if="column.key === 'create_time'">
            {{ formatDateTime(record.create_time) }}
          </template>
          <template v-if="column.key === 'action'">
            <a-button type="link" @click="handleManageImages(record)">管理图片</a-button>
          </template>
        </template>
      </a-table>

      <!-- 地图弹窗 -->
      <a-modal
        v-model:visible="mapVisible"
        title="商家位置"
        :footer="null"
        width="800px"
        @cancel="closeMap"
      >
        <div id="map-container" style="height: 500px;"></div>
      </a-modal>

      <!-- 添加商家模态框 -->
      <a-modal
        v-model:visible="addModalVisible"
        title="添加商家"
        :confirmLoading="confirmLoading"
        width="800px"
        @cancel="handleCancel"
      >
        <template #footer>
          <a-space>
            <a-button @click="handleCancel">取消</a-button>
            <a-button type="primary" :loading="confirmLoading" @click="handleAdd">
              保存
            </a-button>
          </a-space>
        </template>

        <a-form
          ref="formRef"
          :model="formState"
          :rules="rules"
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 16 }"
        >
          <a-form-item label="商家名称" name="name" required>
            <a-input v-model:value="formState.name" placeholder="请输入商家名称" />
          </a-form-item>

          <a-form-item label="营业时间" name="business_hours" required>
            <a-input v-model:value="formState.business_hours" placeholder="例如：10:30~20:30" />
          </a-form-item>

          <a-form-item label="联系电话" name="phone" required>
            <a-input v-model:value="formState.phone" placeholder="请输入联系电话" />
          </a-form-item>

          <a-form-item label="地址搜索">
            <a-auto-complete
              v-model:value="searchAddress"
              :options="searchOptions"
              placeholder="输入地址搜索"
              @change="handleSearch"
              @select="handleSelect"
              :loading="searchLoading"
              allow-clear
            />
          </a-form-item>

          <a-form-item label="地图选点" required>
            <div class="map-container">
              <div id="add-map-container" style="height: 300px;"></div>
            </div>
          </a-form-item>

          <a-form-item label="详细地址" name="address" required>
            <a-input v-model:value="formState.address" placeholder="请输入详细地址" />
          </a-form-item>

          <a-form-item label="经纬度" required>
            <a-input-group compact>
              <a-input-number
                v-model:value="formState.longitude"
                :min="-180"
                :max="180"
                style="width: 50%"
                placeholder="经度"
                disabled
              />
              <a-input-number
                v-model:value="formState.latitude"
                :min="-90"
                :max="90"
                style="width: 50%"
                placeholder="纬度"
                disabled
              />
            </a-input-group>
          </a-form-item>
        </a-form>
      </a-modal>

      <!-- 添加图片管理模态框 -->
      <a-modal
        v-model:visible="imageModalVisible"
        title="商家图片管理"
        width="800px"
        @ok="handleSaveImages"
        @cancel="handleCancelImages"
        :confirmLoading="imagesSaving"
        okText="保存"
      >
        <div class="image-wall">
          <a-upload
            v-model:fileList="fileList"
            :customRequest="handleUpload"
            list-type="picture-card"
            :multiple="true"
            @preview="handlePreview"
            @remove="handleRemove"
            accept="image/*"
          >
            <div v-if="fileList.length < 8">
              <plus-outlined />
              <div style="margin-top: 8px">上传图片</div>
            </div>
          </a-upload>
        </div>
      </a-modal>

      <!-- 图片预览模态框 -->
      <a-modal
        :visible="previewVisible"
        :title="previewTitle"
        :footer="null"
        @cancel="handlePreviewCancel"
      >
        <img :alt="previewTitle" style="width: 100%" :src="previewImage" />
      </a-modal>
    </div>
  </page-container>
</template>

<script>
import { defineComponent, ref, onMounted, nextTick } from 'vue'
import { message, Upload, Modal } from 'ant-design-vue'
import dayjs from 'dayjs'
import PageContainer from '@/components/PageContainer.vue'
import { loadAMap, createMap, createAutoComplete, createGeocoder } from '@/utils/amap.js'
import request from '@/utils/request'
import { PlusOutlined } from '@ant-design/icons-vue'

export default defineComponent({
  components: {
    PageContainer,
    PlusOutlined,
    AUpload: Upload,
    AModal: Modal
  },
  setup() {
    const loading = ref(false)
    const tableData = ref([])
    const mapVisible = ref(false)
    const currentMap = ref(null)
    const currentMarker = ref(null)
    
    const pagination = ref({
      current: 1,
      pageSize: 10,
      total: 0,
      showSizeChanger: true,
      showTotal: (total) => `共 ${total} 条记录`
    })

    const columns = [
      {
        title: 'ID',
        dataIndex: 'id',
        key: 'id',
        width: 80,
        align: 'center',
      },
      {
        title: '商家名称',
        dataIndex: 'name',
        key: 'name',
        width: 150,
      },
      {
        title: '营业时间',
        dataIndex: 'business_hours',
        key: 'business_hours',
        width: 150,
      },
      {
        title: '地址',
        dataIndex: 'address',
        key: 'address',
        width: 200,
      },
      {
        title: '位置',
        key: 'location',
        width: 100,
        align: 'center',
      },
      {
        title: '联系电话',
        dataIndex: 'phone',
        key: 'phone',
        width: 120,
      },
      {
        title: '创建时间',
        dataIndex: 'create_time',
        key: 'create_time',
        width: 180,
      },
      {
        title: '操作',
        key: 'action',
        width: 120,
        align: 'center',
        fixed: 'right'
      }
    ]

    // 格式化日期时间
    const formatDateTime = (value) => {
      if (!value) return ''
      return dayjs(value).format('YYYY-MM-DD HH:mm:ss')
    }

    // 获取商家列表数据
    const fetchData = async () => {
      try {
        loading.value = true
        const params = {
          skip: (pagination.value.current - 1) * pagination.value.pageSize,
          limit: pagination.value.pageSize
        }
        
        const res = await request.get('/api/merchant', { params })
        if (res.data) {
          tableData.value = res.data.items || []
          pagination.value.total = res.data.total || 0
        }
      } catch (error) {
        console.error('获取商家列表失败:', error)
      } finally {
        loading.value = false
      }
    }

    // 表格变化处理
    const handleTableChange = (pag) => {
      pagination.value.current = pag.current
      pagination.value.pageSize = pag.pageSize
      fetchData()
    }

    // 显示地图
    const showMap = async (record) => {
      mapVisible.value = true
      
      await nextTick()
      
      try {
        await loadAMap()
        
        if (!currentMap.value) {
          currentMap.value = createMap('map-container', {
            zoom: 15,
            viewMode: '3D'
          })
        }
        
        const position = [record.longitude, record.latitude]
        currentMap.value.setCenter(position)
        
        if (currentMarker.value) {
          currentMarker.value.remove()
        }
        
        currentMarker.value = new window.AMap.Marker({
          position,
          map: currentMap.value,
          title: record.name
        })
      } catch (error) {
        console.error('加载地图失败:', error)
        message.error('加载地图失败')
      }
    }

    // 关闭地图
    const closeMap = () => {
      mapVisible.value = false
    }

    // 添加商家相关
    const addModalVisible = ref(false)
    const confirmLoading = ref(false)
    const formRef = ref(null)
    const searchAddress = ref('')
    const searchOptions = ref([])
    const searchLoading = ref(false)
    const addMap = ref(null)
    const addMarker = ref(null)

    const formState = ref({
      name: '',
      business_hours: '',
      address: '',
      longitude: null,
      latitude: null,
      phone: ''
    })

    const rules = {
      name: [{ required: true, message: '请输入商家名称' }],
      business_hours: [{ required: true, message: '请输入营业时间' }],
      address: [{ required: true, message: '请输入详细地址' }],
      phone: [{ required: true, message: '请输入联系电话' }],
    }

    // 显示添加模态框
    const showAddModal = async () => {
      addModalVisible.value = true
      await nextTick()
      initAddMap()
    }

    // 初始化地图
    const initAddMap = async () => {
      try {
        await loadAMap()
        
        if (!addMap.value) {
          addMap.value = createMap('add-map-container', {
            zoom: 13,
            viewMode: '2D'
          })

          // 添加点击事件
          addMap.value.on('click', async (e) => {
            const { lng, lat } = e.lnglat
            updateMarkerPosition(lng, lat)
            
            // 逆地理编码获取地址
            const geocoder = createGeocoder()
            geocoder.getAddress([lng, lat], (status, result) => {
              if (status === 'complete' && result.info === 'OK') {
                const address = result.regeocode
                // 更新表单数据
                formState.value.address = address.formattedAddress
                formState.value.longitude = lng
                formState.value.latitude = lat
              } else {
                message.error('获取地址信息失败')
              }
            })
          })
        }
      } catch (error) {
        console.error('初始化地图失败:', error)
        message.error('初始化地图失败')
      }
    }

    // 更新标记位置
    const updateMarkerPosition = (lng, lat) => {
      if (addMarker.value) {
        addMarker.value.setPosition([lng, lat])
      } else {
        const AMap = window.AMap
        addMarker.value = new AMap.Marker({
          position: [lng, lat],
          map: addMap.value
        })
      }
    }

    // 地址搜索
    const handleSearch = async (value) => {
      if (!value || value.length < 2) {
        searchOptions.value = []
        return
      }

      try {
        searchLoading.value = true
        await loadAMap()
        
        const autoComplete = createAutoComplete()
        await new Promise((resolve, reject) => {
          autoComplete.search(value, (status, result) => {
            if (status === 'complete') {
              searchOptions.value = result.tips.map(tip => ({
                value: tip.name,
                label: `${tip.name} (${tip.district})`,
                location: tip.location
              }))
              resolve(result)
            } else {
              reject(new Error(status))
            }
            searchLoading.value = false
          })
        })
      } catch (error) {
        console.error('搜索地址失败:', error)
        searchLoading.value = false
        message.error('搜索地址失败')
      }
    }

    // 选择地址
    const handleSelect = (value, option) => {
      const selected = searchOptions.value.find(opt => opt.value === value)
      if (selected && selected.location) {
        const { lng, lat } = selected.location
        updateMarkerPosition(lng, lat)
        addMap.value.setCenter([lng, lat])
        
        // 使用逆地理编码获取完整地址
        const geocoder = createGeocoder()
        geocoder.getAddress([lng, lat], (status, result) => {
          if (status === 'complete' && result.info === 'OK') {
            const address = result.regeocode
            // 更新表单数据
            formState.value.address = address.formattedAddress
            formState.value.longitude = lng
            formState.value.latitude = lat
          } else {
            // 如果获取详细地址失败，至少使用搜索选中的地址
            formState.value.address = value
            formState.value.longitude = lng
            formState.value.latitude = lat
          }
        })
      }
    }

    // 提交表单
    const handleAdd = () => {
      formRef.value.validate().then(async () => {
        try {
          confirmLoading.value = true
          await request.post('/api/merchant', formState.value)
          message.success('添加成功')
          addModalVisible.value = false
          fetchData()
        } catch (error) {
          console.error('添加商家失败:', error)
        } finally {
          confirmLoading.value = false
        }
      })
    }

    // 取消添加
    const handleCancel = () => {
      formRef.value?.resetFields()
      addModalVisible.value = false
      if (addMarker.value) {
        addMarker.value.setMap(null)
        addMarker.value = null
      }
    }

    // 图片管理相关
    const imageModalVisible = ref(false)
    const imagesSaving = ref(false)
    const currentMerchant = ref(null)
    const fileList = ref([])
    const previewVisible = ref(false)
    const previewImage = ref('')
    const previewTitle = ref('')

    // 打开图片管理
    const handleManageImages = (record) => {
      currentMerchant.value = record
      imageModalVisible.value = true
      
      // 加载商家现有图片
      if (record.images && record.images.length > 0) {
        fileList.value = record.images.map((item, index) => ({
          uid: `-${index}`,
          name: item.image_url.substring(item.image_url.lastIndexOf('/') + 1),
          status: 'done',
          url: item.image_url,
          image_url: item.image_url,
          sort: item.sort
        }))
      } else {
        fileList.value = []
      }
    }

    // 处理图片上传
    const handleUpload = async ({ file, onSuccess, onError, onProgress }) => {
      const formData = new FormData()
      formData.append('files', file)

      try {
        onProgress({ percent: 50 })
        const res = await request.post('/api/upload/images', formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        })
        
        if (res.code === 200 && res.data && res.data.urls && res.data.urls.length > 0) {
          const url = res.data.urls[0]
          const fileInfo = {
            uid: `new-${Date.now()}`,
            name: url.substring(url.lastIndexOf('/') + 1),
            status: 'done',
            response: res.data,  // 保存完整的响应数据
            url: url,  // 用于预览显示
            sort: fileList.value.length
          }
          
          // 只更新本地文件列表，不保存到服务器
          fileList.value = [...fileList.value, fileInfo]
          onSuccess(res.data)  // 传入完整的响应数据
          message.success('上传成功')
        } else {
          throw new Error('上传失败')
        }
      } catch (error) {
        console.error('上传图片失败:', error)
        onError()
        message.error('上传失败')
      }
    }

    // 图片预览
    const handlePreview = async (file) => {
      previewImage.value = file.url || file.preview
      previewVisible.value = true
      previewTitle.value = file.name || file.url.substring(file.url.lastIndexOf('/') + 1)
    }

    // 关闭预览
    const handlePreviewCancel = () => {
      previewVisible.value = false
      previewTitle.value = ''
    }

    // 移除图片
    const handleRemove = async (file) => {
      // 只从本地文件列表中移除，不更新服务器
      fileList.value = fileList.value.filter(f => f.uid !== file.uid)
      return true
    }

    // 保存图片列表
    const handleSaveImages = async () => {
      try {
        imagesSaving.value = true
        
        // 构造符合接口要求的数据格式
        const data = {
          images: fileList.value.map((file, index) => {
            // 获取图片 URL 的优先级：
            // 1. 如果是新上传的图片，从 response.urls[0] 获取
            // 2. 如果是已有的图片，使用 url 字段
            const imageUrl = file.response?.urls?.[0] || file.url
            return {
              image_url: imageUrl,
              sort: index
            }
          })
        }

        // 打印检查数据
        console.log('Saving data:', data)

        const res = await request.put(`/api/merchant/${currentMerchant.value.id}`, data)
        if (res.code === 200) {
          message.success('保存成功')
          imageModalVisible.value = false
          fetchData()
        } else {
          throw new Error(res.message || '保存失败')
        }
      } catch (error) {
        console.error('保存失败:', error)
        message.error(error.message || '保存失败')
      } finally {
        imagesSaving.value = false
      }
    }

    // 取消图片管理
    const handleCancelImages = () => {
      fileList.value = []
      imageModalVisible.value = false
    }

    onMounted(() => {
      fetchData()
    })

    return {
      loading,
      columns,
      tableData,
      pagination,
      mapVisible,
      handleTableChange,
      showMap,
      closeMap,
      formatDateTime,
      addModalVisible,
      confirmLoading,
      formRef,
      formState,
      rules,
      searchAddress,
      searchOptions,
      searchLoading,
      showAddModal,
      handleSearch,
      handleSelect,
      handleAdd,
      handleCancel,
      imageModalVisible,
      imagesSaving,
      fileList,
      previewVisible,
      previewImage,
      previewTitle,
      handleManageImages,
      handleUpload,
      handlePreview,
      handlePreviewCancel,
      handleRemove,
      handleSaveImages,
      handleCancelImages
    }
  }
})
</script>

<style scoped>
.merchant-list {
  padding: 24px;
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.table-header h1 {
  margin: 0;
}

:deep(.ant-table-content) {
  overflow-x: auto;
}

.map-container {
  border: 1px solid #d9d9d9;
  border-radius: 2px;
  overflow: hidden;
}

.image-wall {
  padding: 24px;
  background: #fafafa;
  border-radius: 2px;
  min-height: 200px;
}

:deep(.ant-upload-select-picture-card) {
  width: 104px !important;
  height: 104px !important;
  margin: 0 8px 8px 0;
  border: 1px dashed #d9d9d9;
  border-radius: 2px;
  cursor: pointer;
  transition: border-color 0.3s;

  &:hover {
    border-color: #1890ff;
  }
}

:deep(.ant-upload-list-picture-card-container) {
  width: 104px;
  height: 104px;
  margin: 0 8px 8px 0;
}

:deep(.ant-upload-list-picture-card .ant-upload-list-item) {
  padding: 4px;
}

:deep(.ant-upload-select-picture-card i) {
  font-size: 32px;
  color: #999;
}

:deep(.ant-upload-select-picture-card .ant-upload-text) {
  margin-top: 8px;
  color: #666;
}
</style> 