<!-- 详情 -->
<template>
  <div class="box">
    <el-card class="box-card" v-for="(item,index) in newList" :key="item.id">
      <div slot="header">
        <div class="clearfix">

          <span class="omit"> <el-tag style="margin-right:10px">{{ index+1 }}</el-tag>{{item.metadata.source}}</span>
          <div style="flex-shrink: 0;">
            <!-- <el-button type="primary" icon="el-icon-edit" circle size="mini" @click="edit(item)"></el-button>
            <el-button type="danger" icon="el-icon-delete" circle size="mini" @click="del(item)"></el-button> -->
            <i class="el-icon-edit" @click="edit(item)"></i>
            <i class="el-icon-delete" @click="del(item)"></i>
          </div>
        </div>

      </div>
      <div class="item">
        <span v-if="!item.isEdit">{{item.page_content }}</span>
        <div v-else class="text">
          <el-input ref="text" type="textarea" style=" font-size: 14px;" v-model="item.page_content ">
          </el-input>
          <div class="buttonBox">
            <el-button size="mini" @click="changValue(item)">确认</el-button>
            <el-button size="mini" @click="cancel(item)">取消</el-button>
          </div>
        </div>

      </div>
    </el-card>
    <div class="box-card" style="height:0px" v-for="item in 4" :key="item"></div>
    <el-row slot="pagination" type="flex" justify="end" style="margin-top: 16px;width: 100%;">
      <el-pagination :total="totalCount" :current-page="tableData.page_number" :page-size="tableData.page_size" :page-sizes="[10, 20, 50, 100]" layout="total, prev, pager, next, sizes" @current-change="(current)=>getList(current,tableData.page_size)" @size-change="(size)=>getList(tableData.page_number,size)">
      </el-pagination>
    </el-row>
  </div>
</template>

<script>
import { KnowledgeManage } from '@/api/gptController.js'
export default {
  data() {
    return {
      newList: [],
      totalCount: 0,
      tableData: {
        page_number: 1, // 当前页数
        page_size: 10 // 每页显示个数
      }
    }
  },
  props: ['list', 'knowledgeName', 'fileName'],
  components: {},

  computed: {},

  mounted() {
    this.getList()
  },

  methods: {
    getList(pageNumber = this.tableData.page_number, pageSize = this.tableData.page_size) {
      this.tableData.page_size = pageSize
      this.tableData.page_number = pageNumber
      let list = this.list
      let params = { knowledge_base_name: this.knowledgeName, file_name: this.fileName, page_number: pageNumber, page_size: pageSize }
      KnowledgeManage.listDocs(this, params)
        .then((res) => {
          let data = JSON.parse(res.data)
          list = data.data
          this.totalCount = data.total_count
          this.newList = list.map((item) => {
            return {
              isEdit: false,
              oldContent: item.page_content,
              ...item
            }
          })
        })
        .catch((e) => {
          console.log(e)
        })
    },

    changValue(item) {
      //
      let params = {
        knowledge_base_name: this.knowledgeName,
        docs: {
          [item.id]: {
            page_content: item.page_content,
            metadata: {
              source: item.metadata.source,
              id: item.id
            },
            type: item.type,
            id: item.id,
            score: item.score
          }
        }
      }
      KnowledgeManage.updateDocsById(this, params)
        .then(() => {
          item.isEdit = false
        })
        .catch(() => {})
    },
    cancel(item) {
      item.page_content = item.oldContent
      item.isEdit = false
    },
    edit(item) {
      item.isEdit = true
      this.$nextTick(() => {
        this.$refs.text[0].focus()
      })
    },
    del(item) {
      let params = {
        knowledge_base_name: this.knowledgeName,
        doc_ids: [item.id]
      }
      this.$confirm('是否确认删除', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        KnowledgeManage.deleteDocsById(this, params)
          .then((res) => {
            this.getList()
          })
          .catch(() => {})
      })
    }
  }
}
</script>
<style scoped>
.text {
  font-size: 14px;
  height: calc(100% - 40px);
}

.item {
  margin-bottom: 18px;
  height: 210px;
  overflow: auto;
}
.clearfix {
  height: 50px;
  line-height: 50px;
  font-size: 16px;
  display: flex;
  justify-content: space-between;
}

.box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.box-card {
  width: 280px;
  margin-bottom: 20px;
  height: 300px;
  font-size: 14px;
}
div /deep/ .el-textarea__inner,
div /deep/.el-textarea {
  height: 100%;
}
.buttonBox {
  margin-top: 10px;
  width: 100%;

  padding-left: calc(100% - 124px);
}
.el-icon-edit,
.el-icon-delete {
  cursor: pointer;
  margin-left: 10px;
}
.el-icon-edit:hover {
  color: #0092ff;
}
.el-icon-delete:hover {
  color: #f56c6c;
}
</style>
