<template>
  <div class="data-search">
    <el-form :inline="true" :model="queryForm" class="demo-form-inline">
      <el-form-item label="文件名:">
        <el-input
          v-model="queryForm.object_name"
          placeholder="请填写文件名"
        ></el-input>
      </el-form-item>

      <el-form-item label="解析状态:">
        <el-select
          v-model="queryForm.run"
          clearable
          class="m-2"
          placeholder="请选择状态"
          size="large"
        >
          <el-option
            v-for="item in categoryList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="文件类型:">
          <el-select v-model="queryForm.type" class="m-2" clearable placeholder="请选择文件类型" size="large">
              <el-option
                v-for="item in typeList"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
        </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">
          <svg-icon icon-class="search" /> 搜索</el-button
        >
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          class="el-icon-circle-plus-outline"
          @click="addDocument"
          >新增文件</el-button
        >
        <!-- <el-popover placement="bottom" trigger="click">
          <el-button @click="newFile">新建空文件</el-button>
          <el-button
            type="primary"
            class="el-icon-circle-plus-outline"
            slot="reference"
          >
            新增文件</el-button
          >
        </el-popover> -->
      </el-form-item>
    </el-form>
    <el-dialog
      title="创建知识库"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form :model="creatForm" ref="creatRef" :rules="creatRules">
        <el-form-item label="文件名称:" prop="bucket_name">
          <el-input
            v-model="creatForm.bucket_name"
            placeholder="请输入文件名称"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="submitBuck">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="上传文件"
      :visible.sync="uploadVisible"
      width="30%"
      :before-close="handleUploadClose"
    >
      <el-form :model="uploadForm" ref="uploadRef" :rules="uploadRules">
        <el-form-item>
          <el-upload
            class="upload-demo custom-upload"
            drag
            :action="url + '/minio/post'"
            :data="{
              bucket_id: queryForm.bucket_id,
              user_id: queryForm.user_id,
              doc_type_id:0
            }"
            multiple
            :on-change="handleFileChange"
            :file-list="fileList"
            :on-success="handleAvatarSuccess"
            :on-error="handleUploadError"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>
            <!-- <div class="el-upload__tip" slot="tip">
              只能上传jpg/png文件，且不超过500kb
            </div> -->
          </el-upload>
        </el-form-item>
      </el-form>
      <!--  <span slot="footer" class="dialog-footer">
        <el-button @click="handleUploadClose">取 消</el-button>
        <el-button type="primary" @click="submitUpload">确 定</el-button>
      </span> -->
    </el-dialog>
  </div>
</template>

<script>
import { getBucketContents, postUpload,getSuffixName } from "@/api/knowledge";
export default {
  props: {
    queryForm: {
      type: Object,
      default: () => {
        return {
          page: 1,
          pageSize: 10,
          bucket_id: "",
          user_id: "",
        };
      },
    },
  },
  data() {
    // 自定义验证函数
    const validateBucketName = (rule, value, callback) => {
      const regex = /^[a-z0-9-]{3,63}$/;
      if (!regex.test(value)) {
        callback(
          new Error(
            "名称必须在 3-63 个字符之间，只能包含小写字母、数字和连字符"
          )
        );
      } else {
        callback();
      }
    };
    return {
      statusOptions: [
        {
          value: "",
          label: "请选择状态",
        },
        {
          value: 5,
          label: "启用",
        },
        {
          value: 6,
          label: "停用",
        },
      ],
      dialogVisible: false,
      categoryList: [
        {
          value: "0",
          label: "未解析",
        },
        {
          value: "1",
          label: "解析中",
        },

        {
          value: "3",
          label: "成功",
        },
        {
          value: "4",
          label: "失败",
        },
        {
          value: "5",
          label: "待处理",
        },
      ],
      creatForm: {
        bucket_name: "",
      }, //知识库名称
      creatRules: {
        bucket_name: [
          { required: true, message: "请输入知识库名称", trigger: "blur" },
          /*  { validator: validateBucketName, trigger: "blur" }, */
        ],
      },
      uploadVisible: false,
      uploadRules: {},
      uploadForm: {},
      fileList: [],
      url: "",
      typeList:[
       /*  {
          label:'xls',
          value:'xls',
        },
        {
          label:'xlsx',
          value:'xlsx',
        },
        {
          label:'pdf',
          value:'pdf',
        },
        {
          label:'jpg',
          value:'jpg',
        },
        {
          label:'png',
          value:'png',
        }, */
      ]
    };
  },
  mounted() {
    this.url = process.env.VUE_APP_BASE_API;
    this.queryForm.bucket_id = this.$route.query.id;
    this.queryForm.user_id = this.$store.state.user.id;
    this.getType()
  },
  methods: {
    onCreate(e) {
      this.dialogVisible = true;
    },
    //搜索
    onSubmit() {
     
      this.$emit("bindSetQuery", this.$props.queryForm);
    },
    /* 创建模版 */
    addDocument() {
      this.uploadVisible = true;
    },
    /* 新建空文件 */
    newFile() {},
    /* 关闭 */
    handleClose(done) {
      done();
    },
    /* 提交 */
    submitBuck() {
      this.$refs.creatRef.validate((valid) => {
        if (valid) {
          createBucket(this.creatForm).then((res) => {
            if (res.status !== 200) return;
            this.dialogVisible = false;
            this.onSubmit();
            this.creatForm = {};
          });
        } else {
          this.$message.error("请填写知识库名称");
        }
      });
    },
    /* 上传关闭 */
    handleUploadClose(done) {
      done();
    },
    /*  */
    handleFileChange(file, fileList) {
      this.fileList = fileList.map((f) => f.raw);
    },

    handleRemove(file, fileList) {
      this.fileList = fileList;
    },
    handleAvatarSuccess(response, res, file) {
      if (response.status == 200) {
        
        this.$emit("bindSetQuery", this.$props.queryForm);
        this.$message.success("添加成功!");
        this.uploadVisible = false;
      } else {
        this.$message.warning(response.message);
        this.removeFile(file);
      }
    },
    handleUploadError(err, file, fileList) {
      this.$message.error("上传失败: " + err.message);
      this.removeFile(file);
    },

    removeFile(file) {
      this.$refs.upload.handleRemove(file);
    },

    handleUploadClose() {
      this.uploadVisible = false;
      this.fileList = [];
    },
    getType(){
      getSuffixName().then(res=>{
       this.typeList=res.data
      })
    }
    /* submitUpload() {
      this.fileList.map((el) => {
        postUpload({ bucket_name: this.queryForm.bucket_name, file: el }).then(
          (res) => {
            console.log(res);
          }
        );
      });
    }, */
  },
};
</script>

<style lang="scss">
@import "./dataSearch.scss";
.custom-upload {
  .el-upload {
    width: 100%;
    .el-upload-dragger {
      width: 100%;
    }
  }
}
</style>
