<template>
  <div>
    <div class="gva-search-box">
      <el-form :inline="true" :model="searchInfo" class="demo-form-inline" @keyup.enter="onSubmit">
        <el-form-item label="讲师">
          <div style="display:flex;gap:8px;align-items:center">
            <el-input v-model="searchInfo.teacher_name" placeholder="请选择讲师" clearable style="width: 220px" readonly />
            <el-button type="primary" plain @click="openTeacherChoose('search')">选择讲师</el-button>
            <el-button @click="clearTeacher('search')">清空</el-button>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="search" @click="onSubmit">查询</el-button>
          <el-button icon="refresh" @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="gva-table-box">
      <div class="gva-btn-list">
        <el-button type="primary" icon="plus" @click="openEdit('create')">新增</el-button>
        <el-button type="warning" icon="edit" @click="openBatchEdit" :disabled="selectedRows.length === 0">
          批量编辑价格 ({{ selectedRows.length }})
        </el-button>
      </div>

      <el-table ref="multipleTable" style="width: 100%" tooltip-effect="dark" :data="tableData" row-key="ID"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column type="index" label="#" width="60" />
        <el-table-column align="left" label="ID" prop="ID" width="100" />
        <el-table-column align="left" label="标题" prop="title" min-width="160" />
        <el-table-column align="left" label="讲师ID" prop="teacher_id" width="110" />
        <el-table-column align="left" label="讲师" prop="teacher_name" min-width="140" />
        <el-table-column align="left" label="头像" width="120">
          <template #default="scope">
            <el-image v-if="scope.row.avatar" style="width: 60px; height: 60px" :src="scope.row.avatar"
              :preview-src-list="[scope.row.avatar]" fit="cover" />
            <span v-else>无</span>
          </template>
        </el-table-column>
        <el-table-column align="left" label="价格" prop="price" width="120">
          <template #default="{ row }">
            {{ formatPrice(row.price) }}
          </template>
        </el-table-column>
        <el-table-column align="left" label="更新时间" prop="UpdatedAt" width="180">
          <template #default="{ row }">{{ formatDate(row.UpdatedAt) }}</template>
        </el-table-column>
        <el-table-column align="left" label="描述" prop="desc" min-width="200" show-overflow-tooltip />
        <el-table-column align="left" label="操作" fixed="right" width="160">
          <template #default="{ row }">
            <el-button type="primary" link @click="openEdit('update', row)">编辑</el-button>
            <el-button type="danger" link @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="gva-pagination">
        <el-pagination layout="total, sizes, prev, pager, next, jumper" :current-page="page" :page-size="pageSize"
          :page-sizes="[10, 30, 50, 100]" :total="total" @current-change="handleCurrentChange"
          @size-change="handleSizeChange" />
      </div>
    </div>

    <!-- 选择讲师弹窗 -->
    <userChoose ref="userChooseRef" title="选择讲师人员" @getRecipientInfo="onChooseTeacher" />

    <!-- 批量编辑价格弹窗 -->
    <el-dialog v-model="batchEditVisible" title="批量编辑价格" width="600px" :before-close="closeBatchEdit">
      <div style="margin-bottom: 20px;">
        <el-alert :title="`已选择 ${selectedRows.length} 个讲师包月服务`" type="info" show-icon :closable="false" />
      </div>

      <div class="batch-edit-content">
        <el-form :model="batchForm" ref="batchFormRef" :rules="batchRules" label-width="120px">
          <el-form-item label="统一价格(元)" prop="adjustValue">
            <el-input-number v-model="batchForm.adjustValue" :precision="2" :step="0.01" :min="0.01"
              placeholder="请输入统一设置的价格" style="width: 200px" />
            <span style="margin-left: 8px; color: #666;">元</span>
          </el-form-item>
          <div style="font-size: 12px; color: #999; margin-top: -10px; margin-bottom: 20px;">
            所有选中的讲师包月服务将被设置为相同的价格
          </div>
        </el-form>

        <div style="margin-top: 20px;">
          <h4>预览效果：</h4>
          <el-table :data="previewData" style="width: 100%" max-height="300">
            <el-table-column prop="title" label="标题" min-width="150" />
            <el-table-column prop="teacher_name" label="讲师" width="100" />
            <el-table-column label="原价格" width="100">
              <template #default="{ row }">
                <span style="color: #909399;">{{ formatPrice(row.originalPrice) }}</span>
              </template>
            </el-table-column>
            <el-table-column label="新价格" width="100">
              <template #default="{ row }">
                <span style="color: #67c23a; font-weight: bold;">{{ formatPrice(row.newPrice) }}</span>
              </template>
            </el-table-column>
            <el-table-column label="变化" width="100">
              <template #default="{ row }">
                <span :style="{ color: row.change >= 0 ? '#67c23a' : '#f56c6c' }">
                  {{ row.change >= 0 ? '+' : '' }}{{ formatPrice(row.change) }}
                </span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closeBatchEdit">取消</el-button>
          <el-button type="primary" @click="submitBatchEdit" :loading="batchLoading">
            确定更新 ({{ selectedRows.length }} 项)
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 新增/编辑 抽屉 -->
    <el-drawer destroy-on-close :size="'520px'" v-model="dialogVisible" :show-close="false" :before-close="closeDialog">
      <template #header>
        <div class="flex justify-between items-center">
          <span class="text-lg">{{ editType === 'create' ? '新增讲师包月' : '编辑讲师包月' }}</span>
          <div>
            <el-button :loading="btnLoading" type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="closeDialog">取 消</el-button>
          </div>
        </div>
      </template>
      <el-form :model="formData" ref="formRef" label-position="top" :rules="rules">
        <el-form-item label="标题" prop="title">
          <el-input v-model="formData.title" placeholder="请输入标题" />
        </el-form-item>
        <el-form-item label="讲师" prop="teacher_id">
          <div style="display:flex;gap:8px;align-items:center;width:100%">
            <el-input v-model="formData.teacher_name" placeholder="请选择讲师" readonly />
            <el-button type="primary" plain @click="openTeacherChoose('form')">选择讲师</el-button>
          </div>
        </el-form-item>
        <el-form-item label="价格(元)" prop="price">
          <el-input v-model.number="formData.price" type="number" min="0" placeholder="请输入价格" />
        </el-form-item>
        <el-form-item label="描述" prop="desc">
          <el-input v-model="formData.desc" type="textarea" :rows="4" placeholder="请输入描述" />
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { list as getTeacherVipList, add as createTeacherVip, edit as updateTeacherVip, del as deleteTeacherVip, detail as getDetail, batchUpdatePrice } from '@/api/goods/teacherVip'
import { ElMessageBox, ElMessage } from 'element-plus'
import { formatDate } from '@/utils/format'
import userChoose from '@/components/userChoose/index.vue'

const page = ref(1)
const total = ref(0)
const pageSize = ref(10)
const tableData = ref([])
const searchInfo = ref({ teacher_id: undefined, teacher_name: '' })

// 批量编辑相关
const selectedRows = ref([])
const batchEditVisible = ref(false)
const batchLoading = ref(false)
const batchFormRef = ref(null)
const batchForm = ref({
  adjustValue: 0
})

const batchRules = {
  adjustValue: [
    { required: true, message: '请输入统一价格', trigger: 'blur' },
    { type: 'number', min: 0.01, message: '价格必须大于0', trigger: 'blur' }
  ]
}

// 讲师选择
const userChooseRef = ref()
const chooseScene = ref('search')
const openTeacherChoose = (scene) => {
  chooseScene.value = scene
  userChooseRef.value && userChooseRef.value.open()
}
const clearTeacher = (scene) => {
  if (scene === 'search') {
    searchInfo.value.teacher_id = undefined
    searchInfo.value.teacher_name = ''
  } else {
    formData.value.teacher_id = undefined
    formData.value.teacher_name = ''
  }
}
const onChooseTeacher = (data) => {
  const id = data.id || data.ID
  const name = data.nick_name || data.username || data.name
  if (chooseScene.value === 'search') {
    searchInfo.value.teacher_id = id
    searchInfo.value.teacher_name = name
  } else {
    formData.value.teacher_id = id
    formData.value.teacher_name = name
  }
}

const formatPrice = (val) => {
  if (val === null || val === undefined) return '-'
  const yuan = Number(val) / 100
  return `${yuan.toFixed(2)} 元`
}

const onReset = () => {
  searchInfo.value = { teacher_id: undefined }
  page.value = 1
  getTableData()
}

const onSubmit = () => {
  page.value = 1
  getTableData()
}

const handleSizeChange = (val) => {
  pageSize.value = val
  getTableData()
}

const handleCurrentChange = (val) => {
  page.value = val
  getTableData()
}

const getTableData = async () => {
  const params = { page: page.value, pageSize: pageSize.value }
  if (searchInfo.value.teacher_id !== undefined && searchInfo.value.teacher_id !== '' && searchInfo.value.teacher_id !== null) {
    params.teacher_id = searchInfo.value.teacher_id
  }
  const res = await getTeacherVipList(params)
  if (res.code === 0) {
    tableData.value = res.data.list || []
    total.value = res.data.total || 0
    page.value = res.data.page || page.value
    pageSize.value = res.data.pageSize || pageSize.value
  }
}

getTableData()

// ============== 新增/编辑/删除 ==============
const dialogVisible = ref(false)
const formRef = ref()
const btnLoading = ref(false)
const editType = ref('create')
const formData = ref({
  ID: undefined,
  title: '',
  teacher_id: undefined,
  teacher_name: '',
  price: 0,
  desc: ''
})
const rules = {
  title: [{ required: true, message: '请输入标题', trigger: ['blur', 'input'] }],
  teacher_id: [{ required: true, message: '请选择讲师', trigger: ['change', 'blur'] }],
  price: [{ required: true, message: '请输入价格', trigger: ['blur', 'input'] }]
}

const resetForm = () => {
  formData.value = { ID: undefined, title: '', teacher_id: undefined, teacher_name: '', price: 0, desc: '' }
}

const openEdit = async (type, row) => {
  editType.value = type
  if (type === 'update' && row?.ID) {
    const res = await getDetail({ id: row.ID })
    if (res.code === 0) {
      const data = { ...res.data }
      if (data.price !== null && data.price !== undefined) {
        data.price = Number(data.price) / 100
      }
      formData.value = { ...formData.value, ...data }
    }
  } else {
    resetForm()
  }
  dialogVisible.value = true
}

const closeDialog = () => {
  dialogVisible.value = false
  resetForm()
}

const submitForm = () => {
  formRef.value?.validate(async (valid) => {
    if (!valid) return
    btnLoading.value = true
    const payload = { ...formData.value }
    // 元 -> 分
    if (payload.price !== null && payload.price !== undefined) {
      payload.price = Math.round(Number(payload.price) * 100)
    }
    let res
    if (editType.value === 'create') {
      res = await createTeacherVip(payload)
    } else {
      res = await updateTeacherVip(payload)
    }
    btnLoading.value = false
    if (res && res.code === 0) {
      ElMessage.success('保存成功')
      closeDialog()
      getTableData()
    }
  })
}

const handleDelete = async (row) => {
  try {
    await ElMessageBox.confirm('确定要删除该记录吗？', '提示', { type: 'warning' })
    const res = await deleteTeacherVip({ ID: row.ID })
    if (res.code === 0) {
      ElMessage.success('删除成功')
      getTableData()
    }
  } catch { /* 用户取消 */ }
}

// ============== 批量编辑相关 ==============
const handleSelectionChange = (selection) => {
  selectedRows.value = selection
}

const openBatchEdit = () => {
  if (selectedRows.value.length === 0) {
    ElMessage.warning('请先选择要编辑的记录')
    return
  }
  batchForm.value = {
    adjustValue: 0
  }
  batchEditVisible.value = true
}

const closeBatchEdit = () => {
  batchEditVisible.value = false
  batchFormRef.value?.resetFields()
}



// 计算预览数据
const previewData = computed(() => {
  if (!selectedRows.value.length || !batchForm.value.adjustValue) {
    return selectedRows.value.map(row => ({
      ...row,
      originalPrice: row.price,
      newPrice: row.price,
      change: 0
    }))
  }

  return selectedRows.value.map(row => {
    const originalPrice = row.price
    // 统一设置为固定价格（元转分）
    const newPrice = Math.round(batchForm.value.adjustValue * 100)

    return {
      ...row,
      originalPrice,
      newPrice: Math.max(0, newPrice),
      change: newPrice - originalPrice
    }
  })
})

const submitBatchEdit = async () => {
  if (!batchFormRef.value) return

  await batchFormRef.value.validate(async (valid) => {
    if (!valid) return

    if (selectedRows.value.length === 0) {
      ElMessage.warning('请先选择要编辑的记录')
      return
    }



    try {
      await ElMessageBox.confirm(
        `确定要将选中的 ${selectedRows.value.length} 个讲师包月服务的价格统一设置为 ${batchForm.value.adjustValue} 元吗？`,
        '批量更新确认',
        { type: 'warning' }
      )

      batchLoading.value = true

      // 准备批量更新数据 - 根据新的接口格式
      const ids = selectedRows.value.map(item => item.ID)
      const price = Math.round(batchForm.value.adjustValue * 100) // 统一价格（元转分）

      const res = await batchUpdatePrice({
        ids: ids,
        price: price
      })

      if (res.code === 0) {
        ElMessage.success('批量更新成功')
        closeBatchEdit()
        selectedRows.value = []
        getTableData()
      } else {
        ElMessage.error(res.msg || '批量更新失败')
      }
    } catch (error) {
      if (error !== 'cancel') {
        ElMessage.error('批量更新失败')
      }
    } finally {
      batchLoading.value = false
    }
  })
}
</script>

<style scoped>
.batch-edit-content {
  .el-form-item {
    margin-bottom: 20px;
  }

  .el-radio-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .el-radio {
    margin-right: 0;
    margin-bottom: 8px;
  }
}

.gva-btn-list {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.gva-search-box {
  padding: 20px;
  background: #fff;
  border-radius: 4px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.gva-table-box {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.gva-pagination {
  margin-top: 20px;
  text-align: right;
}
</style>
