<template>
    <el-contaier>
        <el-row>
            <el-col :span="5">
                <el-input v-model="name" placeholder="任务分类" style="width: 200px"></el-input>
            </el-col>
            <el-col :span="5">
                <el-input v-model="cateId" placeholder="任务名称" style="width: 200px"></el-input>
            </el-col>

            <el-col :span="6">
                <el-button type="primary" size="mini" @click="getTaskManageList()">查询</el-button>
                <el-button type="success" size="mini" @click="add()">新增</el-button>
            </el-col>
        </el-row>
        <el-row>
            <template>
                <el-table
                        :data="tableData"
                        border
                        style="width: 100%"
                        height="500">
<!--                    <el-table-column-->
<!--                            fixed-->
<!--                            prop="id"-->
<!--                            label="代码"-->
<!--                            width="150">-->
<!--                    </el-table-column>-->
                    <el-table-column
                            prop="name"
                            label="名称"
                            width="150"
                            show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                            prop="cateId"
                            label="分类"
                            width="50"
                            show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                            prop="dateRule"
                            label="日期规则"
                            width="300"
                            show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                            prop="form"
                            label="表单"
                            width="300"
                            show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                            prop="creator"
                            label="创建者"
                            width="80"
                            show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                        prop="creatorId"
                        label="创建者Id"
                        width="80"
                        show-overflow-tooltip>
                    </el-table-column>
                  <el-table-column
                      prop="createTime"
                      label="创建时间"
                      width="120"
                      show-overflow-tooltip>
                  </el-table-column>
                  <el-table-column
                      prop="updateTime"
                      label="更新时间"
                      width="120"
                      show-overflow-tooltip>
                  </el-table-column>
                    <el-table-column
                            fixed="right"
                            label="操作"
                            width="160"
                            align="left">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    type="primary"
                                    plain
                                    @click="handleClick(scope.row)"
                                    style="margin-right: 5px;">
                                编辑
                            </el-button>
                            <el-button
                                    size="mini"
                                    type="danger"
                                    plain
                                    @click="applyDel(scope.row)">
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
        </el-row>
        <el-row>
            <el-dialog
                    :title="dialogMap[dialogApply]"
                    :visible.sync="dialogVisible"
                    width="30%"
                    :before-close="handleClose">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="任务名称" prop="name">
                        <el-input v-model="ruleForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="任务分类" prop="cateId">
                        <el-input v-model="ruleForm.cateId"></el-input>
                    </el-form-item>
                    <el-form-item label="日期规则" prop="dateRule">
                        <el-input v-model="ruleForm.dateRule"></el-input>
                    </el-form-item>
                    <el-form-item label="表单" prop="form">
                        <el-input v-model="ruleForm.form"></el-input>
                    </el-form-item>
                    <el-form-item label="创建者" prop="creator">
                        <el-input v-model="ruleForm.creator"></el-input>
                    </el-form-item>
                    <el-form-item label="创建者Id" prop="creatorId">
                      <el-input v-model="ruleForm.creatorId"></el-input>
                    </el-form-item>
                    <el-form-item label="创建时间" prop="createTime">
                      <el-input
                          v-model="ruleForm.createTime"
                          readonly
                          disabled
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="更新时间" prop="updateTime">
                      <el-input
                          v-model="ruleForm.updateTime"
                          readonly
                          disabled
                      ></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                        <el-button @click="resetForm('ruleForm')">取消</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
        </el-row>
        <el-row>
            <el-col :span="12">
                <div class="block">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="page"
                            :page-sizes="[10, 20, 30, 40]"
                            :page-size="pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total">
                    </el-pagination>
                </div>
            </el-col>

        </el-row>
    </el-contaier>
</template>

<script>

import {getCategoryList, getTaskManageList, updateTaskManage, addTaskManage, delTaskManage} from "../../../api/AiCustoms/CustomsTask";

    export default {
        data() {
            return {
                tableData: [],
                dialogVisible:false,
                ruleForm:{
                    id:'',
                    name:'',
                    cateId:'',
                    dateRule:'',
                    form:'',
                    creator:'',
                    creatorId:'',
                    createTime:'',
                    updateTime:''
                },
                rules:{
                    name: [
                        { required: true, message: '请输入任务名称', trigger: 'blur' },
                        { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
                    ],
                    cateId: [
                        { required: true, message: '请输入任务分类', trigger: 'blur' }
                    ],
                    dateRule: [
                        { required: true, message: '请输入日期规则', trigger: 'blur' }
                    ],
                    form: [
                        { required: true, message: '请输入表单', trigger: 'blur' }
                    ]
                },
                dialogMap: {
                    update: '编辑',
                    create: '新增'
                },
                dialogApply: 'create',
                page:1,
                pageSize:10,
                total:0,
                name:'',
                cateId:''
            }
        },

        mounted() {
            this.getTaskManageList();

          // // 使用 $nextTick 确保 DOM 渲染完成后再加载脚本
          // this.$nextTick(() => {
          //   // 添加 Dify Chatbot 配置
          //   window.difyChatbotConfig = {
          //     token: 'VrcUZBXmDOhvn7SQ',
          //     baseUrl: 'http://ai.15miaoo.com:17999',
          //     systemVariables: {
          //       // user_id: 'YOU CAN DEFINE USER ID HERE',
          //     },
          //   };
          //
          //   // 动态加载脚本
          //   this.loadDifyScript();
          // });
        },

        // // 添加 beforeDestroy 钩子来清理资源
        // beforeDestroy() {
        //   // 移除聊天机器人相关的DOM元素
        //   const chatbotElements = [
        //     document.getElementById('dify-chatbot-bubble-button'),
        //     document.getElementById('dify-chatbot-bubble-window'),
        //     document.getElementById('VrcUZBXmDOhvn7SQ')
        //   ];
        //
        //   chatbotElements.forEach(element => {
        //     if (element && element.parentNode) {
        //       element.parentNode.removeChild(element);
        //     }
        //   });
        //
        //   // 清理可能存在的全局配置
        //   if (window.difyChatbotConfig) {
        //     delete window.difyChatbotConfig;
        //   }
        // },

        methods: {
            getTaskManageList() {
              getTaskManageList({name:this.name,cateId:this.cateId,page:this.page,pageSize:this.pageSize}).then((response) => {
                console.log(this.page)
                console.log(this.pageSize)
                const code = response.data.code;
                if (code != 200){
                  return this.$message.error('获取任务列表失败！')
                }
                this.tableData = response.data.data.rows;
                this.total = response.data.data.total;
                this.$message.success('获取任务列表成功！')
              }).catch(erroe => {
                this.$message.error(erroe.toString())
              })
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageSize=val;
                this.getTaskManageList();
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.page=val;
                this.getTaskManageList();
            },
            handleClick(row) {
                this.ruleForm=JSON.parse(JSON.stringify(row));
                this.dialogApply='update';
                this.dialogVisible=true;
            },
            submitForm(formName) {
                this.$refs[formName].validate(async (valid) => {
                    if (!valid){
                      console.log('error submit!!');
                      return false;
                    }
                    try {
                      let response;
                      if (this.dialogApply === 'create'){
                        response = await addTaskManage(this.ruleForm);
                      } else if (this.dialogApply === 'update'){
                        response = await updateTaskManage(this.ruleForm);
                      }
                      const code = response.data.code;
                      if (code !== 200){
                        this.$message.error(this.dialogApply === 'create' ? '新增失败！' : '更新失败！')
                        return;
                      }
                      this.$message.success(this.dialogApply === 'create' ? '新增成功！' : '更新成功！')
                      this.dialogVisible=false;
                      this.name = this.ruleForm.name;
                      this.cateId = this.ruleForm.cateId;
                      this.getTaskManageList();
                    } catch (error) {
                      this.$message.error(error.toString())
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
                this.dialogVisible=false;
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            // 删除
            applyDel(row) {
                // 弹框询问是否删除？
                this.$confirm('此操作永久删除该消息收发记录, 是否继续?', '警告', {
                        confirmButtonText: '确定删除',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }
                ).then(() => {
                    // 删除
                    const delIds = [row.id];
                    delTaskManage(delIds).then((response) => {
                      const code =response.data.code;
                      if (code != 200){
                        return this.$message.error('删除失败！')
                      }
                      this.$message.success('删除成功！')
                    }).catch(error => {
                      this.$message.error(error.toString())
                    })
                    this.name = row.name;
                    this.cateId = row.cateId;
                    this.getTaskManageList();
                }).catch(() => {
                })
            },
            add(){
                this.ruleForm={
                    id:'',
                    name:'',
                    cateId:'',
                    dateRule:'',
                    form:'',
                    creator:'',
                    creatorId:'',
                    createTime:'',
                    updateTime:''
                };
                this.dialogApply='create';
                this.dialogVisible=true;
            },
          // loadDifyScript() {
          //   // 检查是否已经加载过脚本
          //   if (document.getElementById('VrcUZBXmDOhvn7SQ')) {
          //     return;
          //   }
          //
          //   const script = document.createElement('script');
          //   script.src = 'http://ai.15miaoo.com:17999/embed.min.js';
          //   script.id = 'VrcUZBXmDOhvn7SQ';
          //   script.defer = true;
          //   document.head.appendChild(script);
          // }
        }
    }
</script>

<!--<style>/* 原有样式 */-->
<!--#dify-chatbot-bubble-button {-->
<!--  background-color: #1C64F2 !important;-->
<!--}-->
<!--#dify-chatbot-bubble-window {-->
<!--  width: 24rem !important;-->
<!--  height: 40rem !important;-->
<!--}-->
<!--</style>-->