<template>
  <r-dialog
    :visible.sync="visible"
    :title="(datasetId ? `修改` : `新增`) + '知识库'"
    destroy-on-close
    width="500px"
  >
    <div slot="header" class="clearfix">
      <h3>{{ datasetId ? '修改' : '新增' }}</h3>
    </div>
    <el-row>
      <el-col>
        <el-form
          :model="model"
          ref="model"
          label-width="120px"
          :rules="rules"
          label-position="top"
        >
          <el-form-item label="知识库名称：" prop="name">
            <el-input v-model="model.name" size="medium"></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="visibleRange">
            <otherSelect :model="model"></otherSelect>
          </el-form-item>
          <el-form-item
            label="分段模式："
            prop="segmentedMode"
            v-if="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-item label="图标" prop="image" required>
            <r-cropper @getFiles="getFiles" :url="model.image"></r-cropper>
            <div class="mt10">
              <div>默认图标</div>
              <img
                :src="`${static}/loadImage/knowledge-${item}.png`"
                alt=""
                v-for="item in 5"
                style="width: 40px;height: 40px;cursor: pointer"
                class="mr10"
                @click="chooseImage(item)"
              />
            </div>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <div slot="footer" :span="24">
      <el-button
        size="medium"
        v-if="!infoDialogVisible"
        @click="resetForm(), $emit('update:visible', false)"
        >取消</el-button
      >
      <el-button
        type="primary"
        size="medium"
        @click="save"
        v-if="!infoDialogVisible"
      >
        {{ datasetId ? '保存' : '创建' }}
      </el-button>
      <el-button
        size="medium"
        @click="jumpKnowledgeList"
        v-if="infoDialogVisible"
        >返回知识库列表</el-button
      >
      <el-button
        size="medium"
        @click="jumpKnowledgeDetail"
        v-if="infoDialogVisible"
        >查看知识库详情</el-button
      >
    </div>
  </r-dialog>

  <!--    <el-dialog title="知识库操作成功" :visible.sync="infoDialogVisible" width="50%"></el-dialog>-->
</template>
<script>
import 'nprogress/nprogress.css' // progress bar style
import otherSelect from '@/views/knowledge/detail/components/otherSelect/otherIndex.vue'
import {
  datasetCreate,
  datasetUpdate,
  getDatasetById,
  uploadImage
} from '@/api/generatedApi'

export default {
  name: 'knowledgeForm',
  data() {
    return {
      static: process.env.VUE_APP_STATIC,
      uploadList: [],
      imageList: [],
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,

      infoDialogVisible: false,

      model: {
        description: '',
        name: '',
        segmentedMode: 0,
        id: null,
        imageType: 'upload-img',
        image: null,
        visibleRange: 0
      },
      rules: {
        name: [
          { required: true, message: '请输入知识库名称', trigger: 'blur' }
        ],
        visibleRange: [{ required: true, message: '请选择可见权限' }],
        image: [{ required: true, message: '请上传知识库图标' }],
        segmentedMode: [{ required: true, message: '请选择分段模式' }]
      }
    }
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    datasetId: {
      type: String,
      default: ''
    }
  },
  watch: {
    visible: {
      handler(val) {
        this.$nextTick(() => {
          this.$emit('update:visible', val)

          if (this.datasetId) {
            this.getDetail()
          } else {
            this.model = {
              description: '',
              name: '',
              segmentedMode: 0,
              visibleRange: 0,
              userIds: [],
              image: null,
              imageType: 'upload-img',
              id: null
            }
          }
        })
      },
      immediate: true
    }

    // datasetId(val) {
    //   if (val) {
    //     this.getDetail()
    //   } else {
    //     this.model = {
    //       description: '',
    //       name: '',
    //       segmentedMode: 0,
    //       visibleRange: 0,
    //       userIds: [],
    //       image: null,
    //       imageType: 'upload-img',
    //       id: null
    //     }
    //   }
    // }
  },
  components: {
    otherSelect
  },
  filters: {
    filterSegmentedMode(val) {
      switch (val) {
        case 0:
          return '传统分段模式'
        case 1:
          return ' Q&A分段模式'
        default:
          return '未知模式'
      }
    }
  },
  methods: {
    chooseImage(item) {
      this.model.image = `${
        process.env.VUE_APP_STATIC
      }/loadImage/knowledge-${item}.png`
    },
    getFiles(file) {
      let formData = new FormData()
      formData.append('file', file[0])
      uploadImage(formData).then(res => {
        if (res) {
          this.$set(this.model, 'image', res.content.content.imageUrl)
        }
      })
    },

    handleRemove(file) {},
    jumpKnowledgeList() {
      this.$router.push({
        path: '/knowledge/list'
      })
    },
    jumpKnowledgeDetail(item) {
      this.$router.push({
        path: '/knowledge/detail',
        query: {
          datasetId: this.model.id
        }
      })
    },

    getDetail() {
      if (!this.datasetId) return
      getDatasetById({ id: this.datasetId }).then(res => {
        this.model = {
          ...res.content.content,
          visibleRange: res.content.content.visibleRange
            ? res.content.content.visibleRange
            : 0
        }
      })
    },
    resetForm() {
      this.model = {
        description: '',
        name: '',
        segmentedMode: 0,
        visibleRange: '',
        userIds: [],
        image: null,
        imageType: 'upload-img',
        id: null
      }
    },

    save() {
      this.$refs.model.validate(valid => {
        if (!valid) {
          return false
        }

        // this.model.visibleRange = 0/**/
        ;(!this.datasetId ? datasetCreate : datasetUpdate)(this.model).then(
          res => {
            if (res) {
              // 添加保存成功的提示
              this.$message.success('保存成功')
              // this.model.id = res.content.content.id
              // this.infoDialogVisible = true
              this.$emit('update:visible', false)

              this.resetForm()

              // this.$router.go(-1)
            }
          }
        )
      })
    }
  },
  created() {},
  mounted() {
    this.getDetail()
  },
  computed: {}
}
</script>
<style scoped lang="scss">
.el-upload--picture-card {
  width: 50px;
  height: 50px;
}
</style>
