<template>
  <div class="metaData-container">
    <p class="title">
      元数据是关于文档的数据，用于描述文档的属性。元数据可以帮助您更好地组织和管理文档。
    </p>
    <el-button
      type="primary"
      size="medium"
      class="mt20 mb10"
      @click="addMetaData"
    >
      <i class="el-icon-plus"></i>添加元数据</el-button
    >
    <ul>
      <li
        v-for="(item, index) in list"
        :key="index"
        class="block flex justify-content-b "
        style="align-items: baseline"
      >
        <div class="flex" style="align-items: baseline">
          <i class="el-icon-reading"></i>
          <p class="ml5 mr10">{{ item.metadataKey }}</p>
          <p class="fs12">{{ item.dataType }}</p>
        </div>
        <div class="flex align-items-c" >
          <div class="amount">{{ item.amount ? item.amount :0}}个值</div>
          <div class="action-buttons">
            <el-button
              type="text"
              icon="el-icon-edit"
              @click="editMetaData(item,index)"
            ></el-button>
            <el-button
              type="text"
              icon="el-icon-delete"
              @click="deleteMeta(item)"
            ></el-button>
          </div>
        </div>
      </li>
    </ul>
<!--    <div class="flex mt20">-->
<!--      <el-switch v-model="value"> </el-switch>-->
<!--      <p class="ml5 fwb">内置</p>-->
<!--      <el-tooltip-->
<!--        class="item"-->
<!--        effect="dark"-->
<!--        content="内置元数据是系统预定义的元数据，您可以在此处查看和管理内置元数据。"-->
<!--        placement="top"-->
<!--      >-->
<!--        <i class="el-icon-info ml5" style="color: #909399;"></i>-->
<!--      </el-tooltip>-->
<!--    </div>-->
<!--    <ul>-->
<!--      <li-->
<!--        v-for="(item, index) in dataList"-->
<!--        :key="index"-->
<!--        class="flex justify-content-b"-->
<!--      >-->
<!--        <div class="flex">-->
<!--          <i class="el-icon-date"></i>-->
<!--          <p class="ml5 mr5">{{ item.metadataKey }}</p>-->
<!--          <p>{{ item.dataType }}</p>-->
<!--        </div>-->
<!--        <div>{{ item.status }}</div>-->
<!--      </li>-->
<!--    </ul>-->
    <!-- 新增元数据对话框 -->
    <r-dialog
      :title="isEdit ? '编辑元数据' : '新增元数据'"
      append-to-body
      :visible.sync="dialogVisible"
      width="30%"
    >
      <el-form :model="metaDataForm" label-width="80px" label-position="top" ref='form' :rules='rules'>
        <el-form-item label="类型" v-if="!isEdit" prop="dataType">
          <div class="type-selection">
            <span
              v-for="type in typeOptions"
              :key="type"
              class="type-option"
              :class="{ active: metaDataForm.dataType === type }"
              @click="chooseMetaData(type)"
            >
              {{ type }}
            </span>
          </div>
        </el-form-item>
        <el-form-item label="名称" prop='metadataKey'>
          <el-input
            v-model="metaDataForm.metadataKey"
            placeholder="请输入元数据名称"
            size='medium'
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" @click="handleCancel">取消</el-button>
        <el-button type="primary" size="medium" @click="handleSave"
          >保存</el-button
        >
      </div>
    </r-dialog>
  </div>
</template>

<script>
import { createMetadata, deleteMetadata, getMetadataList, updateMetadata} from '@/api/generatedApi/index'
export default {
  name: 'meteData',
  props: {
    datasetId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      rules:{
        metadataKey: [
          { required: true, message: '请输入元数据名称', trigger: 'blur' },
          // 元数据名称只能包含小写字母、数字和下划线，并且必须以小写字母开头
          { pattern: /^[a-z][a-z0-9_]*$/, message: '元数据名称只能包含小写字母、数字和下划线，并且必须以小写字母开头', trigger: 'blur' }
        ],
        dataType: [
          { required: true, message: '请选择元数据类型', trigger: 'blur' },
         ]
        },
      list: [],
      dataList: [
        {
          value: 'document_name',
          type: 'string',
          status: '已禁用'
        },
        {
          value: 'upload_date',
          type: 'string',
          status: '已禁用'
        }
      ],
      value: false,
      // 新增元数据对话框相关数据
      dialogVisible: false,
      metaDataForm: {
        // 类型
        dataType: 'String',
        // 值
        metadataKey: ''
      },
      typeOptions: ['String', 'Number', 'Time'],
      isEdit: false,
      currentEditIndex: -1,
      id: ''
    }
  },
  methods: {
    init() {
      this.getMetadata()
    },
    chooseMetaData(type) {

      switch (type){}

      this.metaDataForm.dataType = type
      this.metaDataForm = JSON.parse(JSON.stringify(this.metaDataForm))
    },
    getMetadata() {
      getMetadataList({datasetId: this.$route.query.datasetId}).then(res => {
        this.list = res.content.content
      })
    },
    addMetaData() {
      this.dialogVisible = true
      this.metaDataForm = {
        type: 'String',
        name: ''
      }
      this.isEdit = false
    },
    handleCancel() {
      this.dialogVisible = false
    },
    handleSave() {

      this.$refs.form.validate(e=>{
        if (e) {
          if (this.isEdit) {
            this.handleUpdate()
          } else {
            // 添加新的元数据到列表
            this.handleCreate()
          }
        }

      })



    },
    // 编辑
    handleUpdate() {
      let params = {
        datasetId: this.datasetId,
        id: this.id,
        metadataKey: this.metaDataForm.metadataKey
      }
      updateMetadata(params).then(res => {
        if (res) {
          this.$message.success('编辑元数据成功')
          this.getMetadata()
          this.handleCancel()
        }
      })
    },
    // 新增
    handleCreate() {
      let params = {
        datasetId: this.datasetId,
        metadataKey: this.metaDataForm.metadataKey,
        dataType: this.metaDataForm.dataType
      }
      createMetadata(params).then(res => {
        if (res) {
          this.$message.success('新增元数据成功')
          this.getMetadata()
          this.handleCancel()
          this.$emit('getDataList')
        }
      })
    },
    editMetaData(item, index) {
      this.dialogVisible = true
      this.metaDataForm.metadataKey = this.list[index].metadataKey
      this.isEdit = true
      this.id = item.id
      this.currentEditIndex = index
    },
    deleteMeta(item) {
      this.$messageBox(()=>{  this.handleDelete(item)},`确认删除该元数据吗？`, 'warning','提示')

      // this.$confirm(, {
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      //   type: 'warning'
      // }).then(() => {
      //
      // })
    },
    handleDelete(item) {
      deleteMetadata([item.id]).then(res => {
        if (res) {
          this.$message.success('删除元数据成功')
          this.getMetadata()
          this.handleCancel()
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/sass/renderSass/theme.scss';
.metaData-container {
  .title {
    color: #676f83;
    font-size: 13px;
    font-weight: 400;
    line-height: 19px;
  }
  ul li {
    list-style-type: none;
    padding: 10px;
    border: 1px solid rgb(234, 236, 240);
    margin: 10px 0;
    border-radius: 8px;
    div {
      p: first-child {
        color: #101828;
      }
      p:last-child {
        color: #676f83;
      }
    }
    .amount {
      color: #676f83;
    }
    .action-buttons {
      display: none;
      .el-button {
        margin: 0;
        padding: 0;
      }
    }
    &:hover {
      .action-buttons {
        display: block;
      }
      .amount {
        display: none;
      }
    }
  }
}
.type-selection {
  display: flex;
  .type-option {
    line-height: 15px!important;
    padding:  6px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    margin-right: 10px;
    cursor: pointer;
    &.active {
      border-color: $--color-primary;
    }
  }
}
</style>
