<template>
  <div style="margin-bottom: 10px;">
    <el-button type="success" @click="showForm">添加类别</el-button>
  </div>
  <el-dialog v-model="dialogVisible" title="节日" width="500">
    <el-form :model="festivalForm" label-width="auto" style="max-width: 600px" v-loading="loading">
      <el-form-item label="添加节日缩略图">
        <!-- 下面的event的作用,传入当前事件对象 -->
        <ImgSingleUpload @update:goodImgArr="festivalForm.url = $event"/>
      </el-form-item>
      <el-form-item label="节日名称">
        <el-input v-model="festivalForm.name" @input="changeInput"/>
      </el-form-item>
    </el-form>
    <template #footer #default="{ row, $index }">
      <div class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="addOrUpdateFestival" :disabled="submitable">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>
  <div class="table_page">
  <!-- 数据展示层 -->
  <el-table :data="tableData" border style="width: 100%;" :header-cell-style="{ 'text-align': 'center' }"
            @selection-change="handleSelectionChange" :cell-style="{ 'text-align': 'center', 'font-size': '16px' }">
    <el-table-column type="selection" width="55"></el-table-column>
    <el-table-column prop="url" label="节日图片">
      <template #default="scope"><img :src="downloadUrl + scope.row.url" alt="" style="height: 50px;"></template>
    </el-table-column>
    <el-table-column prop="name" label="节日名称"></el-table-column>
    <el-table-column prop="operation" label="操作">
      <template #default="scope">
        <el-popconfirm class="ml-5" confirm-button-text='确定' cancel-button-text='取消' icon="InfoFilled"
                       icon-color="red"
                       title="是否确认删除" @confirm="DeleteFestival(scope.row.name)" width=180>
          <template #reference>
            <el-button style="height: 25px" class="ml-5" type="danger">删除节日</el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
  </div>
</template>

<script setup lang="ts">
import {ElMessage, type UploadUserFile} from 'element-plus';
import {ErrorInfo, SuccessInfo, WarnInfo} from '@/utils/messageInfo';
import {onMounted, ref} from 'vue'
import myAxios from '@/api/myAxios';
import {downloadUrl} from '@/utils/formatImgUpload'
import ImgSingleUpload from "@/utils/imgUpload/ImgSingleUpload.vue";

const selectedItems = ref([])
const dialogVisible = ref(false)
const submitable = ref(true)  //提交按钮禁用状态
const loading = ref(false)  //加载
const festivalImg: any = ref<UploadUserFile[]>([])  //商品类别图片
//表单数据
const festivalForm = ref({
  id: 0,
  name: '',
  url: '',
})
//表格数据
const tableData = ref([])
//旗帜 表示点击添加类别(0)  和  点击修改类别两个状态(1)，因为我们共用一个表格
const flag = ref(0)
const tempImgUrl = ref('')  //暂存图片URL
const festivalArr : any = ref([])   //节日数组

//老套路 页面加载必须获取类别列表
onMounted(() => {
  getFestivalList()
})

//获取类别列表
const getFestivalList = async () => {
  const res = await myAxios.get('/festival/get')
  // console.log('表格数据--->',res.data)
  if (res.data.code === 1) {
    tableData.value = res.data.data
  } else {
    ElMessage.error('获取类别列表失败，请检查服务')
  }
}

//新增节日
const showForm = async () => {
  resetForm()
  tempImgUrl.value = ''
  festivalImg.value.splice(0, festivalImg.value.length)
  dialogVisible.value = true;
  flag.value = 0
}

//取消
const cancel = () => {
  dialogVisible.value = false
  resetForm()
}

//新增类别
const addOrUpdateFestival = async () => {
  //判空
  if (festivalForm.value.name?.indexOf(' ') !== -1 ||
      festivalForm.value.name == '') {
    ElMessage({
      type: 'warning',
      message: '不能为空格/空字符串'
    })
    return
  }
  //取消展示表单
  dialogVisible.value = false;
  console.log('添加的类别--->',festivalForm.value)
  const res = await myAxios.post('/festival/add', {
    name: festivalForm.value.name,
    url: festivalForm.value.url,
    //对齐后端请求体
  })
  console.log('后端返回的--->',res.data)
  if (res.data.code === 1) {
    //提交成功后，之间重置表格
    SuccessInfo('添加类别成功')
    resetForm()
  } else {
    ElMessage.error('提交失败')
  }
  await getFestivalList()
}
//重置表单
const resetForm = () => {
  festivalForm.value = {
    id: 0,
    name: '',
    url: ''
  }
};
const handleSelectionChange = (row: any) => {
  selectedItems.value = JSON.parse(JSON.stringify(row))
}
//删除节日  请求体里只传id即可
const DeleteFestival = async (name : string) => {
  const res = await myAxios.get('/festival/delete', {params:{ festivalName: name}})
  if (res.data.code === 1) {
    ElMessage({
      type: 'success',
      message: '删除成功',
    })
  }
  getFestivalList()
}
const changeInput = () => {  //当输入栏变化时解除禁用提交按钮
  submitable.value = false
}
</script>

<style scoped>
.table_page {
  min-width: 1000px;
  overflow: auto;
}

</style>