<template>
  <div>
    <!-- <p class="welcome">欢迎来到OOIN小助手</p> -->
    <!-- <p class="welcome-en">Welcome to the The little assistant who speaks to each other.</p> -->
    <div class="table-con">
      <div class="head">
        <a-button type="primary"  @click="handleAdd" class="add-btn">创建知识库</a-button>
      </div>
      <a-table
        ref="table"
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        
        @change="handleTableChange"
      >
        <template slot="status" slot-scope="t">
          <a-icon type="check-circle" theme="twoTone" two-tone-color="#52c41a"/>
          <span>{{ t.status }}</span>
        </template>
        <template slot="openStatus" slot-scope="t">
          <a-switch checkedChildren="是" unCheckedChildren="否" v-model="t.openStatus"/>
        </template>

        <span slot="action" slot-scope="text, record">
          <a-button type="link" @click="handleUpload(record.id)" style="padding: 0">添加</a-button>
          <a-button type="link" @click="handleDetail(record.id)" style="padding: 0">详情</a-button>
          <!-- <a-button type="link" @click="handleChat(record)" style="padding: 0">问询</a-button> -->
          <a-button type="link" style="padding: 0" @click="handleDel(record.id)">删除</a-button>
        </span>
      </a-table>
    </div>
    <a-modal :visible="createAddVisible" @cancel="handleCancel" @ok="handleSave"
             :confirmLoading="confirmLoading">
      <a-form-model :model="model" ref="form" :rules="validatorRules">
        <a-form-model-item label="名称" prop="name">
          <a-input v-model="model.name" placeholder="请输入名称"></a-input>
        </a-form-model-item>
        <a-form-model-item label="描述" prop="desc">
          <a-input type="textarea" v-model="model.desc" placeholder="请输入描述"></a-input>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
    <Upload ref="upload" @uploadSave="uploadSave"></Upload>
    <a-modal
      title="提示"
      :visible="visible"
      :confirm-loading="confirmLoading"
      @ok="handleDelete"
      @cancel="handleDelCancel"
    >
      <div class="del-box">
        <a-icon type="info-circle" theme="twoTone" two-tone-color="red" style="font-size: 20px;"/>
        <p class="del-title">
          确定删除吗?
        </p>
      </div>
    </a-modal>
  </div>
</template>

<script>
import {addDataset, deleteDataset, listPage} from "../../api";
import moment from "moment";
import {filterObj, formatDateTime} from "../../utils";
import Upload from '../upload'

export default {
  data() {
    return {
      confirmLoading: false,
      visible:false,
      delId:'',
      validatorRules: {
        name: [
          {required: true, message: '请输入知识库名称'}
        ],
        desc: [
          {required: true, message: '请输入知识库描述'}
        ],
      },
      defaultModel: {
        name: '',
        desc: '',
        embedding_mode_id: '42f63a3d-427e-11ef-b3ec-a8a1595801ab'
      },
      model: {},
      createAddVisible: false,
      createAddUploadVisible:false,

      /* 分页参数 */
      ipagination: {
        current: 1,
        pageSize: 10,
        //pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return " 共" + total + "条"
        },
        //showSizeChanger: true,
        total: 0
      },
      loading: false,
      dataSource: [],
      // 查询条件
      queryParam: {name: '',},
      // 表头
      columns: [
      {
          title: 'NO',
          key: 'index',
          width: 80,
          customRender: (text, record, index) => `${index + 1}`
        },
        {
          title: '知识库名称',
          dataIndex: 'name'
        },
        {
          title: '描述',
          dataIndex: 'desc'
        },
        {
          title: '文档个数',
          dataIndex: 'document_count'
        },
        {
          title: '创建时间',
          dataIndex: 'create_time',
          customRender: (text, record) => {
            return formatDateTime(text, 'yyyy-MM-dd HH:mm:ss')
          }
        },
        {
          title: '更新时间',
          dataIndex: 'update_time',
          customRender: (text, record) => {
            return formatDateTime(text, 'yyyy-MM-dd HH:mm:ss')
          }
        },
        {
          title: '操作',
          dataIndex: 'action',
          fixed: "right",
          width: 160,
          scopedSlots: {customRender: 'action'},
        }
      ],
    }
  },
  components: {Upload},
  created() {
    this.loadData()
  },
  methods: {
    handleDel(id){
      this.delId = id
      this.visible = true
    },
    handleDelCancel(){
      this.visible = false
    },
    uploadSave(){
      this.loadData()
    },
    handleDetail(id) {
      this.$router.push({
        path: '/detail',
        query: {
          id: id
        }
      })
    },
    handleChat(record) {
      this.$router.push({
        path: '/chat',
        query: {
          id: record.id
        }
      })
    },
    getQueryParams() {
      var param = Object.assign({}, this.queryParam)
      param.pageNum = this.ipagination.current
      param.pageSize = this.ipagination.pageSize
      return filterObj(param)
    },
    async loadData(arg) {
      if (arg === 1) {
        this.ipagination.current = 1;
      }
      var params = this.getQueryParams()//查询条件
      this.loading = true;
      try {
        const result = await listPage(params)
        if (result.code === 200) {
          this.dataSource = result.data.records.filter(item => item.name !== 'sql'); 
          this.ipagination.total = this.dataSource.length;
        } else {
          this.$message.warning(result.message)
        }
      } catch (e) {
        throw e
      } finally {
        this.loading = false
      }
    },
    handleSave() {
      this.$refs.form.validate(async ok => {
        if (ok) {
          this.confirmLoading = true
          try {
            const result = await addDataset(this.model)
            if (result.code === 200) {
              this.$message.success('新增成功')
              this.handleCancel()
            } else {
              this.$message.warning(result.message)
            }
          } catch (e) {
            throw e
          } finally {
            this.confirmLoading = false
          }
        }
      })
    },
    handleCancel() {
      this.createAddVisible = false
      this.model = Object.assign({}, this.defaultModel)
      this.loadData()
    },
    handleAdd() {
      this.createAddVisible = true
      this.model = Object.assign({}, this.defaultModel)
    },
    handleUpload(id) {
      this.$refs.upload.add(id)
    },
    async handleDelete() {
      try {
        const result = await deleteDataset({id:this.delId})
        if (result.code === 200) {
          this.$message.success('删除成功')
          this.handleDelCancel()
        } else {
          this.$message.warning(result.message)
        }
      } catch (e) {
        throw e
      } finally {
        this.loadData()
      }
    },
    handleTableChange(pagination, filters, sorter) {
      this.ipagination = pagination
      this.loadData()
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .ant-table {
  background: #18181b; //更改背景颜色



  .ant-table-thead > tr > th, .ant-table-tbody > tr > td {
    padding: 10px;
    color: #ffffff; //更改字体颜色
  }


//update table specific styles

  .ant-table-thead > tr > th {
    background: #27272a !important;
    color: #a1a1aa !important;
    border-bottom: 1px solid #27272a;
  }

  .ant-table-tbody > tr > td {
    background: #18181b;
    border-bottom: 1px solid #27272a;
  }
  
  .ant-table-tbody > tr:hover > td {
    background: #27272a !important;
  }

  //pagination style
  /deep/ .ant-pagination-item {
    background: #272721;
    border-color: #3f3f46;
    a {
      color: #ffffff;
    }
    &:hover {
      border-color: #ef4444;
    }
  }

  /deep/ .ant-pagination-item-active {
    background: #ef4444;
    border-color: #ef4444;
}

//button styles
/deep/ .ant-btn-primary {
  background: #ef4444;
  border-color: #ef4444;
  &:hover {
    background: #dc2626;
    border-color: #dc2626;
  }
}

/deep/ .ant-btn-link {
  &:first-child {
    color: #ef4444;
    &:hover {
      color: #dc2626;
    }
  }
  &:not(:first-child) {
    color: #ef4444;
    &:hover {
      color: #dc2626;
    }
  }
}
 
.welcome{
  font-family: arial, arial;
  font-weight: 500;
  font-size: 28px;
  color: #ef4444;
  line-height: 42px;
  text-align: left;
  font-style: normal;
  padding-top: 12px;
  margin-bottom: 24px;
}
.welcome-en{
  font-family: arial, arial; //更改字体
  font-weight: 400;
  font-size: 16px;
  color: #a1a1aa; //更改字体颜色
  line-height: 24px;
  text-align: left;
  font-style: normal;
  margin-bottom: 22px;
}

// .title {
//   text-align: left;
//   font-size: 18px;
//   color: #000;
//   margin-bottom: 16px;
//   position: relative;
//   padding-left: 14px;

//   &::before {
//     content: "";
//     position: absolute;
//     top: 2px;
//     height: 20px;
//     left: 0;
//     bottom: 0;
//     border-right: 3px solid #1890ff;
//     transform: scaleY(1);
//     opacity: 1;
//     transition: transform .15s cubic-bezier(.645, .045, .355, 1), opacity .15s cubic-bezier(.645, .045, .355, 1);
//   }
// }
.table-con{
  background: #18181b; //更改背景颜色
  border-radius: 10px;
  border: 1px solid #27272a; //添加边框
  padding:20px;
}


.head {
  text-align: left;
  margin-bottom: 0 0 32px 0;
  .add-btn{
    // width: 80px;
    height: 34px;
    background: #ef4444; //更改背景颜色
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.2); //添加阴影
    border-radius: 4px;
    &:hover {
      background: #dc2626;
    }
  }
}


//   .mr10 {
//     margin-right: 10px;
//   }
// }
// /deep/.ant-table-thead > tr > th{
//   background: #DCE7FF !important;
// }


:deep(.ant-modal) {
  .ant-modal-content {
    background-color: #18181b !important;
    
    .ant-modal-header {
      background-color: #18181b !important;
      border-bottom: 1px solid #27272a !important;
      
      .ant-modal-title {
        color: #ffffff !important;
      }
    }
    
    .ant-modal-body {
      background-color: #18181b !important;
      
      .ant-form-item-label > label {
        color: #ffffff !important;
      }
      
      .ant-input {
        background-color: #27272a !important;
        border-color: #3f3f46 !important;
        color: #ffffff !important;
        
        &:hover, &:focus {
          border-color: #ef4444 !important;
        }
        
        &::placeholder {
          color: #71717a !important;
        }
      }
      
      .ant-input-textarea {
        textarea {
          background-color: #27272a !important;
          border-color: #3f3f46 !important;
          color: #ffffff !important;
          
          &:hover, &:focus {
            border-color: #ef4444 !important;
          }
          
          &::placeholder {
            color: #71717a !important;
          }
        }
      }
    }
    
    .ant-modal-footer {
      background-color: #18181b !important;
      border-top: 1px solid #27272a !important;
      
      .ant-btn-default {
        background-color: #27272a !important;
        border-color: #3f3f46 !important;
        color: #ffffff !important;
        
        &:hover {
          background-color: #3f3f46 !important;
          border-color: #52525b !important;
        }
      }
      
      .ant-btn-primary {
        background-color: #ef4444 !important;
        border-color: #ef4444 !important;
        
        &:hover {
          background-color: #dc2626 !important;
          border-color: #dc2626 !important;
        }
      }
    }
  }
  
  .ant-modal-close {
    color: #a1a1aa !important;
    
    &:hover {
      color: #ef4444 !important;
    }
  }
}

.del-box {
  display: flex;
  margin: 0 40px;
  padding: 20px 0;
  align-items: center;
  
  .del-title {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 16px;
    color: #ffffff;
    line-height: 19px;
    text-align: left;
    font-style: normal;
    margin-bottom: 0;
    margin-left: 12px;
  }
}

// // Add styles for action buttons
// /deep/ {
//   .ant-btn-link {
//     &:first-child {
//       color: #60a5fa; // Blue for view button
//       &:hover {
//         color: #3b82f6;
//       }
//     }
//     &:not(:first-child) {
//       color: #ef4444; // Red for other actions
//       &:hover {
//         color: #dc2626;
//       }
//     }
  }

/deep/ .ant-table-pagination.ant-pagination {
  //background-color: #18181b;
  //padding: 16px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 16px 24px;
  background-color: #27272a !important;
  border-top: 1px solid #27272a;
  margin: 0 !important;
  width: 100%;
  position: relative;



  // Left side total count
  .ant-pagination-total-text {
      position: absolute;
      left: 24px;
        color: #a1a1aa;
    }

    // New section for prev/next buttons
    .ant-pagination-prev,
    .ant-pagination-next {
        min-width: 32px;
        height: 32px;
        background: #3f3f46;
        border: none;
        border-radius: 4px;
        margin: 0 4px;

        .ant-pagination-item-link {
            background: transparent;
            color: #ffffff;
            border: none;
        }

        &:hover {
            background: #52525b;
        }
    }

    .ant-pagination-item {
      //background-color: #27272a;
      //border-color: #27272a;
      min-width: 32px;
      height: 32px;
      line-height: 32px;
      background: #3f3f46;
      border: none;
      border-radius: 4px;
      margin: 0 4 px;
        
      a {
          color: #ffffff;
      }

      &:hover {
            background-color: #52525b;
        }
        
      &.ant-pagination-item-active {
          background-color: #ef4444;
          //border-color: #ef4444;

          &:hover {
                background-color: #dc2626;
            }
      }
    }

    // Next and Prev buttons
    // .ant-pagination-prev,
    // .ant-pagination-next {
    //     min-width: 32px;
    //     height: 32px;
    //     line-height: 32px;
    //     border-radius: 4px;
    //     background-color: #27272a;
    //     margin: 0 4px;
        
    //     .ant-pagination-item-link {
    //         background-color: transparent;
    //         border: none;
    //         color: #ffffff;
    //     }

    //     &:hover {
    //         background-color: #3f3f46;
    //     }
    // }

    // dropdown
    .ant-pagination-options {
      &::after {
        content: "10 条/页";
        color: #a1a1aa;
        margin-left: 16px;
        font-size: 14px;
        line-height: 32px;
      }
    }
    //   margin-left: 16px;
    //   background: #ef4444;
    //   border-radius: 4px;
    //   padding: 0 8px;
    //   height: 32px;
    //   line-height: 32px;
    //   //color: #a1a1aa;
    //     .ant-select-selector {
    //         background-color: #ef4444 !important;
    //         border: none !important;
    //         border-radius: 4px !important;
    //         //color: #ffffff !important;
    //         height: 32px !important;
    //         padding: 0 12px !important;
    //         //line-height: 32px !important;
    //     }

        // .ant-select-selection-item {
        //     color: #ffffff !important;
        //     line-height: 30px !important;
        // }
        // .ant-select-arrow {
        //     color: #ffffff;
        //     right: 12px;
        // }

        }
            
</style>

<style lang="less" scoped>
// All your existing styles remain exactly the same here
// Including that closing curly brace }
</style>

<!-- Add this new style block right here -->
<style lang="less">
.ant-modal {
  .ant-modal-content {
    background-color: #18181b !important;
    
    .ant-modal-header {
      background-color: #18181b !important;
      border-bottom: 1px solid #27272a !important;
      
      .ant-modal-title {
        color: #ffffff !important;
      }
    }
    
    .ant-modal-body {
      background-color: #18181b !important;
      
      .ant-form-item-label > label {
        color: #ffffff !important;
      }
      
      .ant-input {
        background-color: #27272a !important;
        border-color: #3f3f46 !important;
        color: #ffffff !important;
        
        &:hover, &:focus {
          border-color: #ef4444 !important;
        }
        
        &::placeholder {
          color: #71717a !important;
        }
      }
      
      .ant-input-textarea {
        textarea {
          background-color: #27272a !important;
          border-color: #3f3f46 !important;
          color: #ffffff !important;
          
          &:hover, &:focus {
            border-color: #ef4444 !important;
          }
          
          &::placeholder {
            color: #71717a !important;
          }
        }
      }
    }
    
    .ant-modal-footer {
      background-color: #18181b !important;
      border-top: 1px solid #27272a !important;
      
      .ant-btn-default {
        background-color: #27272a !important;
        border-color: #3f3f46 !important;
        color: #ffffff !important;
        
        &:hover {
          background-color: #3f3f46 !important;
          border-color: #52525b !important;
        }
      }
      
      .ant-btn-primary {
        background-color: #ef4444 !important;
        border-color: #ef4444 !important;
        
        &:hover {
          background-color: #dc2626 !important;
          border-color: #dc2626 !important;
        }
      }
    }
  }
  
  .ant-modal-close {
    color: #a1a1aa !important;
    
    &:hover {
      color: #ef4444 !important;
    }
  }
}
</style>