<template>
  <div>
    <div class="head-card" v-if="!docList.length">
      <p class="fwb fs16">元数据</p>
      <p class="desc">
        元数据是关于文档的数据，用于描述文档的属性。元数据可以帮助您更好地组织和管理文档。
      </p>
      <el-button type="primary" size="medium" @click="addMetaData"
        >开始标注 <i class="el-icon-right"></i
      ></el-button>
    </div>
    <div class="head-card" v-else>
      <div class="flex justify-content-b">
        <div class="flex">
          <p>元数据</p>
          <el-tooltip
            class="item"
            effect="dark"
            content="元数据是关于文档的数据，用于描述文档的属性。元数据可以帮助您更好地组织和管理文档。"
            placement="top"
          >
            <i class="el-icon-info ml5" style="color: #909399;"></i>
          </el-tooltip>
        </div>
      </div>
      <div class="doc">
        <ul>
          <li class="metadata-item" v-for="item in docList" :key="item.id">
            <div class="metadata-content flex align-items-c justify-content-b">
              <div class="metadata-key">{{ item.metadataKey || 'key' }}</div>
              <div class="metadata-value">{{ item.metadataValue }}</div>
            </div>
            <div class="metadata-actions">
              <i class="el-icon-edit" @click="editMeta(item)"></i>
              <i class="el-icon-delete" @click="deleteMeta(item)"></i>
            </div>
          </li>
        </ul>
      </div>
      <div class="text-right">
        <el-button type="primary" size="medium" @click="addMetaData"
          >添加元数据 <i class="el-icon-right"></i
        ></el-button>
      </div>
    </div>
    <r-dialog
      :visible.sync="dialog.visible"
      :close-on-click-modal="false"
      :appendToBody="true"
      @confirm="infoConfirm"
      width="500px"
      title="添加元数据值"
      :is-show-footer="false"
    >
      <div class="metadata-form">
        <div class="form-item">
          <label class="form-label">元数据类型</label>
          <el-select
            v-model="dialog.metadataId"
            placeholder="请选择元数据类型"
            filterable
            class="full-width"
            size="medium"
            @change="handleSelectChange"
          >
            <el-option
              v-for="item in list"
              :key="item.id"
              :label="item.metadataKey"
              :value="item.id"
            >
              <div class="select-option">
                <div class="flex align-items-c">
                  <i class="el-icon-collection-tag"></i>
                  <p class="ml5">{{ item.metadataKey }}</p>
                </div>
                <p class="data-type">{{ item.dataType }}</p>
              </div>
            </el-option>
          </el-select>
        </div>

        <div class="form-item">
          <label class="form-label">元数据值</label>
          <el-input
            v-model="dialog.metadataValue"
            placeholder="请输入元数据值"
            class="full-width"
            size="medium"
          ></el-input>
        </div>

        <div class="form-actions">
          <el-button @click="dialog.visible = false" size="small"
            >取消</el-button
          >
          <el-button type="primary" size="small" @click="infoConfirm"
            >确认</el-button
          >
        </div>

        <el-divider></el-divider>
        <div class="flex justify-content-b">
          <p @click="showMeta" style="cursor: pointer" class="theme-color">
            + 新建元数据
          </p>
          <p @click="toMetaData" style="cursor: pointer" class="theme-color">
            管理
            <i class="el-icon-top-right"></i>
          </p>
        </div>
      </div>
    </r-dialog>
    <!-- 编辑元数据值弹窗 -->
    <r-dialog
      :visible.sync="editDialog.visible"
      :close-on-click-modal="false"
      :appendToBody="true"
      width="500px"
      title="编辑元数据值"
      :is-show-footer="false"
    >
      <div class="metadata-form">
        <div class="form-item">
          <label class="form-label">元数据类型</label>
          <el-input
            v-model="editDialog.metadataKey"
            placeholder="元数据类型"
            class="full-width"
            size="medium"
            disabled
          ></el-input>
        </div>

        <div class="form-item">
          <label class="form-label">元数据值</label>
          <el-input
            v-model="editDialog.metadataValue"
            placeholder="请输入元数据值"
            class="full-width"
            size="medium"
          ></el-input>
        </div>

        <div class="form-actions">
          <el-button @click="editDialog.visible = false" size="small"
            >取消</el-button
          >
          <el-button type="primary" size="small" @click="updateMetaData"
            >确认</el-button
          >
        </div>
      </div>
    </r-dialog>
    <mete-data
      ref="metaData"
      style="visibility: hidden"
      :dataset-id="$route.query.datasetId"
      @getDataList="getList"
    ></mete-data>
  </div>
</template>
<script>
import {
  getMetadataList,
  getMetaDataDocList,
  addMetaDataDoc,
  deleteMetaDataDoc,
  updateMetaDataDoc
} from '@/api/generatedApi'
import MeteData from '@/views/knowledge/detail/components/metaData/Index.vue'

export default {
  name: 'MetadataOperator',
  components: { MeteData },
  data() {
    return {
      isShowOperator: false,
      docList: [],
      dialog: {
        visible: false,
        name: '',
        metadataId: null,
        metadataValue: ''
      },
      editDialog: {
        visible: false,
        id: null,
        metadataKey: '',
        metadataValue: '',
        metadataId: null
      },
      list: [],
      documentId: ''
    }
  },
  created() {},
  methods: {
    init(id) {
      this.documentId = id
      this.getDocList()
      this.getList()
    },
    getDocList() {
      getMetaDataDocList({
        documentId: this.documentId
      }).then(res => {
        if (res) {
          this.docList = res.content.content
        }
      })
    },
    getList() {
      getMetadataList({ datasetId: this.$route.query.datasetId }).then(res => {
        if (res) {
          this.list = res.content.content
        }
      })
    },
    startRemark() {
      this.isShowOperator = true
    },
    handleCancel() {
      this.isShowOperator = false
    },
    handleSave() {},
    addMetaData() {
      this.dialog.visible = true
      this.dialog.metadataId = null
      this.dialog.metadataValue = ''
      this.getList()
    },
    deleteMeta(item) {
      this.$messageBox(() => {
        let params = {
          datasetId: this.$route.query.datasetId,
          documentId: this.documentId,
          ids: [item.id]
        }
        deleteMetaDataDoc(params).then(res => {
          if (res) {
            this.$message.success('删除元数据成功')
            this.getDocList()
          }
        })
      })
    },
    editMeta(item) {
      this.editDialog.visible = true
      this.editDialog.id = item.id
      this.editDialog.metadataKey = item.metadataKey
      this.editDialog.metadataValue = item.metadataValue
      this.editDialog.metadataId = item.metadataId
    },
    infoConfirm() {
      // 处理确认逻辑
      if (this.dialog.metadataId && this.dialog.metadataValue) {
        let params = {
          datasetId: this.$route.query.datasetId,
          documentId: this.documentId,
          ...this.dialog
        }
        addMetaDataDoc(params).then(res => {
          if (res) {
            this.$message.success('添加元数据成功')
            this.getDocList()
          }
        })
        // 这里可以添加保存逻辑
        this.dialog.visible = false
      } else {
        this.$message.warning('请选择元数据类型并输入值')
      }
    },
    toMetaData() {
      this.dialog.visible = false
      this.$emit('close')
      this.$emit('openMetaDrawer')
    },
    handleSelectChange(value) {},
    //
    showMeta() {
      this.$refs.metaData.addMetaData()
    },
    updateMetaData() {
      if (!this.editDialog.metadataValue) {
        this.$message.warning('请输入元数据值')
        return
      }

      let params = {
        id: this.editDialog.id,
        datasetId: this.$route.query.datasetId,
        documentId: this.documentId,
        metadataId: this.editDialog.metadataId,
        metadataValue: this.editDialog.metadataValue
      }

      updateMetaDataDoc(params)
        .then(res => {
          if (res) {
            this.$message.success('更新元数据成功')
            this.getDocList()
            this.editDialog.visible = false
          }
        })
        .catch(err => {
          console.error('更新元数据失败', err)
        })
    }
  }
}
</script>
<style scoped lang="scss">
.head-card {
  padding: 15px;
  border-radius: 8px;
  border-bottom: 1px solid #ebeef5;
  color: #70778d;
  //background-color: #c8ceda33;
  font-size: 14px;
  margin-bottom: 10px;
  p:first-child {
    font-weight: bold;
    font-size: 14px;
    color: #000;
  }
  .desc {
    margin: 15px 0;
  }
}

.metadata-form {
  padding: 10px;

  .form-item {
    margin-bottom: 20px;
  }

  .form-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #606266;
  }

  .full-width {
    width: 100%;
  }

  .form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
  }

  .manage-link {
    color: #409eff;
    cursor: pointer;

    &:hover {
      text-decoration: underline;
    }
  }
}
.select-option {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .data-type {
    color: #909399;
    font-size: 12px;
  }
}
.doc {
  ul {
    padding: 0;
    margin: 15px 0;
  }

  .metadata-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style-type: none;
    margin-bottom: 12px;
    border-radius: 4px;
  }

  .metadata-content {
    flex: 1;
    background: #f5f7fa;
    padding: 8px 16px;
    border-radius: 5px;
    &:hover {
      background: #eef1f6;
    }
  }

  .metadata-key {
    font-weight: 500;
    color: #303133;
    margin-bottom: 4px;
    font-size: 14px;
  }

  .metadata-value {
    color: #606266;
    font-size: 13px;
  }

  .metadata-actions {
    display: flex;
    align-items: center;

    i {
      cursor: pointer;
      font-size: 16px;
      color: #909399;
      margin-left: 12px;

      &:hover {
        color: #409eff;
      }

      &.el-icon-delete:hover {
        color: #f56c6c;
      }
    }
  }
}
.ml10 {
  margin-left: 10px;
}

.mr5 {
  margin-right: 5px;
}
</style>
