<template>
  <div class="app-container customer-control" :key="containerKey" >
    <div class="container-custom">
      <!-- 搜索栏 -->
      <div ref="searchBarRef" class="search-box">
        <div class="search-bar">
          <div class="search-bar-left">
            <el-form
              ref="searchForm"
              :inline="true"
              :model="formInline"
              class="demo-form-inline"
              :label-width="'auto'"
            >
              <el-form-item label="标题" prop="title">
                <el-input
                  v-model="formInline.title"
                  placeholder="请输入品牌名称"
                  clearable
                />
              </el-form-item>
              <el-form-item label="资讯分类" prop="category">
                <el-select v-model="formInline.category" placeholder="请选择资讯分类" clearable>
                  <el-option
                    v-for="dict in sys_good_category"
                    :key="dict.value" :label="dict.label" :value="dict.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="状态" prop="status">
                <el-select v-model="formInline.status" placeholder="请选择" clearable>
                  <el-option v-for="item in statusList" :key="item.id" :value="item.id" :label="item.name" />
                </el-select>
              </el-form-item>
              <el-form-item
                label="添加时间"
                prop="startDate"
                style="margin-right: 0"
              >
                <el-date-picker
                  v-model="formInline.startDate"
                  type="date"
                  value-format="YYYY-MM-DD"
                  placeholder="请选择起始日期"
                  clearable
                  :disabled-date="disableStartDate"
                  style="width: 160px"
                />
                <span
                  style="width: 30px; text-align: center; display: inline-block"
                >
                  -
                </span>
                <el-date-picker
                  v-model="formInline.endDate"
                  type="date"
                  value-format="YYYY-MM-DD"
                  placeholder="请选择截止日期"
                  clearable
                  :disabled-date="disableEndDate"
                  style="width: 160px"
                />
              </el-form-item>
            </el-form>
          </div>
          <div class="search-bar-right">
            <el-button class="el-button-gry" type="primary" icon="Search" @click="onSubmit"
              >查询</el-button
            >
            <el-button
              icon="Refresh"
              style="margin: 16px 0 0 0"
              @click="resetForm"
              >重置</el-button
            >
          </div>
        </div>
      </div>
      <!-- 表格 -->
      <div class="table-cont" :style="{ height: tableViewportHeight + 'px' }">
        <div class="table-toolbar">
          <el-button
            icon="delete"
            @click="batchDelete"
            :disabled="btnStatus"
            style="margin-right: 10px"
            >批量删除</el-button
          >
          <el-button type="primary" class="el-button-gry" icon="plus" @click="handleAdd"
              >添加内容</el-button
            >
        </div>
        <tableComponent
          :table-data="tableData"
          :columns="columns"
          :show-border="false"
          :show-selection="true"
          :header-cell-class-name="getHeaderClass"
          @page-change="handlePaginationChange"
          :loading="tableLoading"
          @selection-change="handleSelectionChange"
          :total="tableTotal"
          :current-page="formInline.current"
          :page-size="formInline.size"
          :showSort="true"
          :rowkey="'id'"
        >
        <!-- 自定义-图片 -->
          <template #coverUrl="slotProps">
            <div class="table-cell-img-box">
              <img :src="slotProps.row.coverUrl" class="table-cell-img" alt="" />
            </div>
          </template>
          <!-- 自定义-资讯分类 -->
          <template #category="slotProps">
            <span>{{ sys_good_category[parseInt(slotProps.row.category)]?.label}}</span>
          </template>
          <!-- 自定义-发布位置 -->
          <template #publishLocation="slotProps">
            <span>{{ sys_good_content[parseInt(slotProps.row.publishLocation)]?.label}}</span>
          </template>
          <!-- 自定义-状态 -->
          <template #status="slotProps">
            <span v-if="slotProps.row.status == 1" class="color-green"
              >使用中</span
            >
            <span v-else-if="slotProps.row.status == 0" class="color-red"
              >已停用</span
            >
          </template>

          <!-- 自定义-操作 -->         
          <template #action="slotProps">
            <el-button v-if="slotProps.row.status == 0" text class="el-button-custom" @click="startStop(slotProps.row)">启用</el-button>
            <el-button v-if="slotProps.row.status == 1" text class="el-button-custom" @click="startStop(slotProps.row)">停用</el-button>
            <el-button text class="el-button-custom" @click="handleEdit(slotProps.row)">编辑</el-button>
            <el-button text class="el-button-custom" @click="handleView(slotProps.row)">查看</el-button>
            <el-button text class="el-button-delete" @click="handleDelete(slotProps.row)">删除</el-button>
          </template>
        </tableComponent>
      </div>
    </div>
    <!-- 添加/编辑 -->
    <el-dialog v-model="dialogFormVisible" :title="dialogTitle" width="800" :close-on-click-modal="false">
      <el-form :disabled="disabled" :model="dialogForm" :label-width="'80'" :rules="dialogFormRules" ref="dialogRef">
        <el-form-item label="标题" prop="title">
          <el-input v-model="dialogForm.title" autocomplete="off" placeholder="请输入内容标题" />
        </el-form-item>
        <el-form-item label="封面" prop="coverUrl">
          <myUploadImage v-model="dialogForm.coverUrl" :limit="1" :disabled="disabled" ></myUploadImage>
        </el-form-item>
        <el-form-item label="资讯分类" prop="category">
          <el-select v-model="dialogForm.category" placeholder="请选择资讯分类">
            <el-option
              v-for="dict in sys_good_category"
              :key="dict.value" :label="dict.label" :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="发布位置" prop="publishLocation">
          <el-select v-model="dialogForm.publishLocation" placeholder="请选择发布位置">
            <el-option
              v-for="dict in sys_good_content"
              :key="dict.value" :label="dict.label" :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <div style="border: 1px solid #ccc; margin-top: 10px">
            <Toolbar
              :editor="editorRef"
              :defaultConfig="toolbarConfig"
              :mode="mode"
              style="border-bottom: 1px solid #ccc"
            />
            <Editor
              :defaultConfig="editorConfig"
              :mode="mode"
              :disabled="disabled"
              v-model="dialogForm.content"
              style="height: 200px; overflow-y: scroll"
              @onCreated="handleCreated"
              @onChange="handleChange"
              @onDestroyed="handleDestroyed"
              @onFocus="handleFocus"
              @onBlur="handleBlur"
              @customAlert="customAlert"
              @customPaste="customPaste"
            />
          </div>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button v-if="!disabled" type="primary" @click="onSaveCategory">
            保存
          </el-button>
          <el-button @click="cancelDialog">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, reactive, computed, onMounted, onBeforeUnmount } from "vue";
import tableComponent from "@/components/tableComponent.vue";
import myUploadImage from "@/components/myUploadImage.vue";
import Mock from "mockjs";
import {getInformation,addConten,updateInformation,deleteInformation,getInfo,updateInformationEnable} from "@/api/content/index";
// import { getDicts } from "@/api/system/dict/data";
const { proxy } = getCurrentInstance()
const { sys_good_category,sys_good_content} = proxy.useDict("sys_good_category","sys_good_content")
// console.log('sys_good_category资讯分类',sys_good_category);
// console.log('sys_good_content发布位置',sys_good_content);

import { id } from "element-plus/es/locales.mjs";
import { ElMessage,ElMessageBox } from "element-plus";

import '@wangeditor/editor/dist/css/style.css';
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { getToken } from "@/utils/auth"

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()

const toolbarConfig = {}
const editorConfig = reactive({
  placeholder: '请输入内容...',
  MENU_CONF: {
    uploadImage: {
      server: import.meta.env.VITE_APP_BASE_API + "/uploadApis/upload",
      fieldName: 'file',
      maxFileSize: 10 * 1024 * 1024,
      maxNumberOfFiles: 1,
      allowedFileTypes: ['image/*'],
      headers: {
        'Authorization': 'Bearer ' + getToken(),
      },
      // 自定义上传结果处理
      customInsert(res, insertFn) {
    console.log('customInsert 被调用:', res)  // 检查是否执行
    if (res.code === 200) {
      insertFn("http://gov-cloud.oss-cn-chengdu.aliyuncs.com/"+res.data.url, '', '')
    }
  }
    }
  }
})
const mode = 'default' // 或 'simple'

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})

const handleCreated = (editor) => {
  editorRef.value = editor // 记录 editor 实例，重要！
}

// 自动暴露所有顶层绑定
defineExpose({
  editorRef,
  mode,
  toolbarConfig,
  editorConfig,
  handleCreated
})

const containerKey = ref(0)

const formInline = reactive({
  id: "",
  title: "",//商品名称
  useNum:'',//使用数量
  status: "",//状态
  startDate: "",//开始时间
  endDate: "",//结束时间
  category: "",//分类
  current: 1,
  size: 10,
});

let isADD = ref(true);
const dialogFormVisible = ref(false);
const dialogRef = ref(null);
const dialogTitle = ref("添加品牌");
const categoryList = ref([]);
const disabled = ref(false);
let dialogForm = reactive({
    id: "",
    title: "",
    coverUrl:"",
    content:"",
    category:"",
    publishLocation:'',
});
const dialogFormRules = ref({
    title:  [
        { required: true, message: "请输入品牌名称", trigger: "blur" },
    ],
    coverUrl:  [
        { required: true, message: "请上传封面", trigger: "blur" },
    ],
    content:  [
        { required: true, message: "请输入内容", trigger: "blur" },
    ],
    category:  [
        { required: true, message: "请选择分类", trigger: "blur" },
    ],
    publishLocation:  [
        { required: true, message: "请选择发布位置", trigger: "blur" },
    ],
});

const statusList = ref([
    { name: "使用中", id: "1" },
    { name: "已停用", id: "0" },
]);

// 禁用开始日期的逻辑（不能晚于已选的结束日期）
const disableStartDate = (time) => {
  if (!formInline.endDate) return false;
  const endDate = new Date(formInline.endDate);
  return time.getTime() > endDate.getTime();
};

// 禁用结束日期的逻辑（不能早于已选的开始日期）
const disableEndDate = (time) => {
  if (!formInline.startDate) return false;
  const startDate = new Date(formInline.startDate).setHours(0, 0, 0, 0);
  const currentDate = new Date(time).setHours(0, 0, 0, 0);
  return currentDate < startDate;
};

const searchForm = ref(null);

// 加载数据
const loadData = async () => {

  tableLoading.value = true;
  let prams = { ...formInline };

  try {
    prams.startDate = formInline.startDate ? formInline.startDate + " 00:00:00" : "";
    prams.endDate = formInline.endDate ? formInline.endDate + " 23:59:59" : "";
    let response = await getInformation(prams);
    if (response.code == 200) {
      tableData.value = response.data.records;
      tableTotal.value = response.data.total;
    }
  } catch (error) {
    
  }
  tableLoading.value = false;
};

const onSubmit = () => {
  formInline.current = 1;
  loadData();
};

const resetForm = () => {
  searchForm.value.resetFields();
  formInline.endDate = "";
  loadData();
};

// 表格数据
const tableData = ref([]);
const selectedIds = ref([]);
const btnStatus = computed(() => {
  return selectedIds.value.length <= 0;
});
const tableLoading = ref(false);
const tableTotal = ref(0);
let nowClickRow = ref({});
// 列配置
const columns = ref([
  { prop: "title", label: "标题" },
  { prop: "coverUrl", label: "封面", slotName: "coverUrl",},
  { prop: "category", label: "资讯分类", slotName: "category",},
  { prop: "publishLocation", label: "发布位置", slotName: "publishLocation",},
  { prop: "createTime", label: "发布日期",},
  { prop: "views", label: "浏览量",},
  { prop: "status", label: "状态", slotName: "status",},
  { prop: "action", label: "操作", slotName: "action",width: "180",align: "center" },
]);
// 自定义表头类名,也可以在columns指定列中添加headerClassName: 'custom-header'
const getHeaderClass = ({ column }) => {
  return "custom-header";
};
// 分页变化
const handlePaginationChange = ({ page, pageSize }) => {
  // console.log("分页变化:", page, pageSize);
  formInline.current = page;
  formInline.size = pageSize;
  // 这里可以调用API获取新数据
  loadData();
};
// 多选框变化
const handleSelectionChange = (selection) => {
  // console.log("选中项:", selection);
  selectedIds.value = [];
  selection.forEach(element => {
    selectedIds.value.push(element.id);
  });
};

// 批量删除
const batchDelete = async () => {
  // deleteGoods(selectedIds.value.join(","));
  ElMessageBox.confirm("确定要删除选中的数据吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
       deleteGoods(selectedIds.value);
    })
    .catch(() => {
      ElMessage.info("已取消删除");
    })
  
};
const deleteGoods = async (param) => {
  // console.log("批量删除参数:", param);
  
  try {
    tableLoading.value = true;
    let res = await deleteInformation(param);
    tableLoading.value = false;
    if (res.code == 200) {
      ElMessage.success("删除成功");
      loadData();
    } else {
      ElMessage.error(res.msg);
    }
  } catch (error) {
    tableLoading.value = false;
  }
};

//  添加商品
const handleAdd = () => {
  disabled.value = false;
  nextTick(() => {
    if (editorRef.value) {
      editorRef.value.enable(); // 重新启用编辑器
    }
  });
resetDlg();
  dialogTitle.value = "添加品牌";
    isADD.value = true;
  dialogFormVisible.value = true;
  // console.log(formInline);
};
//提交保存
const onSaveCategory = async () => { 
  dialogRef.value.validate(async (valid) => { 
    if (valid) { 
      if(isADD.value){
        let response = await addConten(dialogForm);
        if (response.code === 200) {
          dialogFormVisible.value = false;
          ElMessage.success("新增成功！");
          dialogRef.value.resetFields();
          containerKey.value++ // 修改 key 值强制刷新
          loadData();
        }
      } else { 
        let response = await updateInformation(dialogForm);
        if (response.code === 200) {
          dialogFormVisible.value = false;
          ElMessage.success("编辑成功！");
          dialogRef.value.resetFields();
          containerKey.value++ // 修改 key 值强制刷新
          loadData();
        }
      }
    }
  });
};

//启用停用
const startStop = async (row) => {
  let status = row.status == 1 ? 0 : 1;
  let params = { id: row.id, status: status };
  let response = await updateInformationEnable(params);
  if (response.code === 200) {
    ElMessage.success("操作成功！");
    loadData();
  } else {
    ElMessage.error(response.message);
  }
};

// 编辑操作
const handleEdit = async(row) => {
  disabled.value = false;
  nextTick(() => {
    if (editorRef.value) {
      editorRef.value.enable(); // 重新启用编辑器
    }
  });
  resetDlg();
    isADD.value = false;
  dialogFormVisible.value = true;
  let response = await getInfo(row.id);
  if (response.code === 200) {
    Object.assign(dialogForm, response.data); // 保持响应性
    dialogTitle.value = "编辑品牌";
  } else {
    ElMessage.error(response.message);
  }
};
// 查看操作
const handleView = async(row) => {
  disabled.value = true;
  resetDlg();
  isADD.value = false;
  dialogFormVisible.value = true;
  let response = await getInfo(row.id);
  if (response.code === 200) {
    Object.assign(dialogForm, response.data); // 保持响应性
    dialogTitle.value = "查看品牌";
    nextTick(() => {
      if (editorRef.value) {
        editorRef.value.disable(); // 调用编辑器禁用API
      }
    });
  } else {
    ElMessage.error(response.message);
  }
};
// 删除操作
const handleDelete = async(row) => {
  //提示一下是否确定删除
  ElMessageBox.confirm("确定要删除吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      let response = await deleteInformation(row.id);
      if (response.code === 200) {
        ElMessage.success("品牌删除成功！");
        loadData();
      } else {
        ElMessage.error(response.message);
      }
    })
    .catch(() => {
      ElMessage.info("已取消删除");
    })
  
};
//取消弹框
const cancelDialog = () => {
  resetDlg();
};

const resetDlg= () => {
  dialogRef.value?.resetFields(); // 重置表单验证状态
  Object.assign(dialogForm, {  // 保持响应性，手动清空字段
    id: "",
    title: "",
    imgPath: "",
    code: ""
  });
  dialogFormVisible.value = false;
}

const titleRef = ref(null);
const searchBarRef = ref(null);
const tableViewportHeight = ref(0);
// 精确计算可用高度
const calculateTableHeight = () => {
  // 获取窗口总高度
  const windowHeight = window.innerHeight;

  // 获取各组件高度
  const headerHeight = titleRef.value?.$el?.offsetHeight || 0;
  const searchBarHeight = searchBarRef.value?.offsetHeight || 0;

  // 计算容器内边距补偿（根据实际样式调整）
  const paddingCompensation = 130;

  // 最终计算
  tableViewportHeight.value =
    windowHeight - headerHeight - searchBarHeight - paddingCompensation;
  // console.log(tableViewportHeight.value);
};
// 组件挂载时加载数据
onMounted(() => {
  loadData();

  calculateTableHeight();

  // 添加响应式监听
  window.addEventListener("resize", calculateTableHeight);

  // 监听DOM变化（适用于动态变化的header/searchbar）
  const observer = new ResizeObserver(calculateTableHeight);
  if (titleRef.value?.$el) observer.observe(titleRef.value.$el);
  if (searchBarRef.value) observer.observe(searchBarRef.value);
});
onBeforeUnmount(() => {
  window.removeEventListener("resize", calculateTableHeight);
});
</script>
<style lang="scss" scoped>
.table-toolbar {
  width: 300px;
  height: 50px;
  position: absolute;
  right: 0;
  top: 0;
  display: flex;
  justify-content: end;
  padding: 14px 16px 0 0;
}
</style>
