<script setup lang="ts">
import {ref} from 'vue'
import {useRouter} from 'vue-router';
import { Calendar, Search } from '@element-plus/icons-vue';
import { addTemplate,editTemplate,deleteTemplate,templatePage,templateDetails } from '@/api/promtWordList/index'
import {PromptTemplateVO} from '@/api/promtWordList/types'
const router = useRouter()

const defaultProps = ref()
const pageSize = ref<number>(10)
const pageNum = ref<number>(1)
const total = ref<number>()
const templateData = ref<PromptTemplateVO[]>([
  {
  name:'creative-writing-template',
  type:'user',
  status:1,
  version:'v1.5',
  updatedAt:'2025-07-20 14:28:14'
  },
  {
    name:'bug-fix-assisant',
    type:'system',
    status:0,
    version:'v1.5',
    updatedAt:'2025-07-20 14:30:28'
  }
])

interface Tree{
  label:string
  children?: Tree[]
}
const data : Tree[] = [
  {label:'全部提示词'},
  {label:'聊天对话'},
  {
    label:'内容创作',
    children : [
      {label:'文案撰写'},
      {label:'文章生成'}
    ]
  }
]
const createTime = ref('')


const handleNodeClick = () => {

}
const fetchTemplatePage = async () => {
  const data = {
    pageNum:pageNum,
    pageSize:pageSize,
  }
  const res = await templatePage(data)
  if(res.code===0){
    pageNum.value = res.current
    total.value = res.total
    templateData.value = res.records
  }
}
const handleDelete = (value) => {
  ElMessageBox.confirm(
    '此操作将永久删除,不可撤销',
    '警告',
    {
      confirmButtonText:'确定',
      cancelButtonText:'取消',
      type:'warning'
    }
  ).then(
    doDelete(value.id)
  )
}
const doDelete = async (id) => {
  const res = await deleteTemplate(id)
  if(res.code===0){
    ElMessage({
      message:'删除成功',
      type:'success'
    })
    fetchTemplatePage()
  }
}
const edit = () =>{
  router.push('/editPromptWord')
}
</script>

<template>
  <el-container>
    <el-aside width="200px" style="padding-top: 0">
      <el-container>
        <el-header>
          <h4>提示词分类</h4>
        </el-header>
        <el-main>
          <el-tree
            :data="data"
            :props="defaultProps"
            @node-click = "handleNodeClick"
          >
          </el-tree>
        </el-main>
      </el-container>
    </el-aside>
    <el-container>
      <el-header>
        <h3>提示词管理</h3>
      </el-header>
      <el-main>
        <el-row>
          <el-col :span="16">
            <el-input placeholder="搜索提示词名称,描述..." :prefix-icon="Search"/>
          </el-col>
          <el-col :span="3" :offset="1">
            <el-form-item label="类型">
              <el-select>
                <el-option/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="3" :offset="1">
            <el-form-item label="状态">
              <el-select>
                <el-option/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="创建时间:">
              <el-date-picker
                v-model="createTime"
                type="daterange"
                start-placeholder="年 -月-日"
                end-placeholder="年 -月-日"
                range-separator="至"
                format="YYYY-MM-DD"
                class="custom-date-picker"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="1" :offset="1">
            <el-button>重置</el-button>
          </el-col>
          <el-col :span="1" :offset="1">
            <el-button type="primary">查询</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-table
            :data="templateData"
            empty-text="暂无数据"
            height="400px"
          >
            <el-table-column label="序号">
              <template #default="scope">
                {{scope.$index+1}}
              </template>
            </el-table-column>
            <el-table-column label="模板名称" prop="name"/>
            <el-table-column label="模板类型" prop="type"/>
            <el-table-column label="分类"/>
            <el-table-column label="状态">
              <template #default="scope">
                <span v-if="scope?.row.status===1" class="enabled">
                  启用
                </span>
                <span v-else-if="scope?.row.status===0" class="disabled">
                  禁用
                </span>
              </template>
            </el-table-column>
            <el-table-column label="版本号" prop="version"/>
            <el-table-column label="最后更新时间" prop="updatedAt"/>
            <el-table-column label="操作">
              <template #default="scope">
                <el-icon color="#1890ff" size="25px" class="icon-gap"><View /></el-icon>
                <el-icon color="#1890ff" size="25px" class="icon-gap" @click="edit(scope.$index,scope.row)"><Edit /></el-icon>
                <el-icon color="#1890ff" size="25px" class="icon-gap"><List /></el-icon>
                <el-icon size="25px" class="icon-gap" @click="handleDelete(scope.row)"><Delete /></el-icon>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
        <div class="page-right">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="10"
            :page-size="pageSize"
          />
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<style scoped lang="scss">
.icon-gap{
  padding-left: 5px;
}
.page-right{
  float: right;
}

.enabled{
  color: #b7eb8f;
  background-color: #f6ffed;  /* 浅绿色背景（Ant Design等常用配色） */
}
.disabled {
  color: #bfbfbf;            /* 浅灰色文字 */
  background-color: #f5f5f5; /* 可选：浅灰色背景 */
  cursor: not-allowed;       /* 禁用光标状态 */
}
</style>
