<template>
  <div class="container index-container">
    <el-card shadow="hover">
      <div slot="header" class="clearfix">
        <h3>{{ $route.query.datasetId ? '修改' : '新增' }}知识库</h3>
      </div>
      <el-row>
        <el-col :span="21" :offset="1">
          <el-form :model="model" ref="model" label-width="120px" :rules="rules">
            <el-form-item label="知识库名称：" prop="name">
              <el-input v-model="model.name"></el-input>
            </el-form-item>

            <el-form-item label="描述(可选)：" prop="description" requried>
              <el-input type="textarea" v-model="model.description"></el-input>
            </el-form-item>

            <el-form-item label="分段模式：" prop="segmentedMode" v-if="$route.query.datasetId">
              {{ model.segmentedMode | filterSegmentedMode }}
            </el-form-item>
            <el-form-item label="分段模式：" prop="segmentedMode" v-else>
              <el-radio-group v-model="model.segmentedMode">
                <el-radio :label="0">通用分段模式</el-radio>
                <el-radio :label="1">Q&A分段模式</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </el-col>

        <el-col :span="24" class="text-center">
          <el-button type="primary" size="medium" @click="save" v-if="!infoDialogVisible">
            {{ $route.query.datasetId ? '保存' : '创建' }}
          </el-button>
          <el-button size="medium" v-if="!infoDialogVisible" @click="$router.go(-1)">取消</el-button>
          <el-button size="medium" @click="jumpKnowledgeList" v-if="infoDialogVisible">返回知识库列表</el-button>
          <el-button size="medium" @click="jumpKnowledgeDetail" v-if="infoDialogVisible">查看知识库详情</el-button>
        </el-col>
      </el-row>
    </el-card>

    <!--    <el-dialog title="知识库操作成功" :visible.sync="infoDialogVisible" width="50%"></el-dialog>-->
  </div>
</template>
<script>
import 'nprogress/nprogress.css' // progress bar style

import { datasetCreate, datasetUpdate, getDatasetById } from '@/api/generatedApi'

export default {
  name: 'knowledgeForm',
  data() {
    return {
      infoDialogVisible: false,

      model: {
        description: '',
        name: '',
        segmentedMode: 0,
        id: null
      },
      rules: {
        name: [{ required: true, message: '请输入知识库名称', trigger: 'blur' }],
        segmentedMode: [{ required: true, message: '请选择分段模式' }]
      }
    }
  },
  props: {},
  watch: {},
  components: {},
  filters: {
    filterSegmentedMode(val) {
      switch (val) {
        case 0:
          return '传统分段模式'
        case 1:
          return ' Q&A分段模式'
        default:
          return '未知模式'
      }
    }
  },
  methods: {
    jumpKnowledgeList() {
      this.$router.push({
        path: '/knowledge/list'
      })
    },
    jumpKnowledgeDetail(item) {
      this.$router.push({
        path: '/knowledge/detail',
        query: {
          datasetId: this.model.id
        }
      })
    },

    getDetail() {
      let { datasetId } = this.$route.query
      if (!datasetId) return
      getDatasetById({ id: datasetId }).then(res => {
        this.model = {
          ...res.content.content
        }
      })
    },
    save() {
      this.$refs.model.validate(valid => {
        if (!valid) {
          return false
        }
        ;(!this.$route.query.datasetId ? datasetCreate : datasetUpdate)(this.model).then(res => {
          if (res) {
            // 添加保存成功的提示
            this.$message.success('保存成功')
            this.model.id = res.content.content.id
            this.infoDialogVisible = true
            // this.$router.go(-1)
          }
        })
      })
    }
  },
  created() {},
  mounted() {
    this.getDetail()
  },
  computed: {}
}
</script>
<style scoped lang="scss"></style>
