<template>
  <div class="knowledgebase">
    <div class="left">
      <p>知识目录</p>
      <div class="content">
        <Tree @Func="TreeFunc" />
      </div>
    </div>
    <div class="center">
      <p>识别特征<i
          title="反馈"
          class="el-icon-question error"
          @click="ErrorFunc"
        >反馈</i></p>
      <div
        class="content"
        v-html="content"
      >
      </div>
      <div class="flex">
        <div>
          <el-button
            :disabled="btns.a"
            type="success"
            @click="BtnFunc('-')"
          >上一页</el-button>
        </div>
        <div>
          <el-button
            :disabled="btns.b"
            type="success"
            @click="BtnFunc('+')"
          >下一页 </el-button>
        </div>
      </div>
    </div>
    <div class="right">
      <p>{{subject_name}}</p>
      <div class="content">
        <p>{{name}}</p>
      </div>
    </div>
    <el-dialog
      title="反馈"
      :visible.sync="dialogTableVisible"
    >
      <el-form
        ref="form"
        :rules="rules"
        :model="form"
        label-width="80px"
      >
        <el-form-item
          label="错误类型"
          prop="type"
        >
          <el-radio-group v-model="form.type">
            <el-radio label="名称错误"></el-radio>
            <el-radio label="特征错误"></el-radio>
            <el-radio label="图片错误"></el-radio>
            <el-radio label="其他"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="错误描述">
          <el-input
            type="textarea"
            v-model="form.desc"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="onSubmit('form')"
          >提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>

const Tree = () => import("@/views/Home/pages/components/knowledge_tree");
import Home from '@/api/home';
export default {
  components: {
    Tree
  },
  data () {
    return {
      form: { desc: '', type: '' },
      rules: {
        type: [{ required: true, message: '请选择错误类型！', trigger: 'change' }]
      },
      dialogTableVisible: false,//反馈
      id: '',
      content: "<h1>Hello world!</h1>",
      subject_name: "",
      name: "",
      btns: {
        a: true,
        b: false
      },
      active: {
        chapter: '',
        limit: 1,
        page: 1,
      }
    }
  },
  created () {
    this.Request({ limit: 1, page: 1 });
  },
  methods: {
    // 反馈
    ErrorFunc () {
      this.dialogTableVisible = true;
    },
    onSubmit (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let { type, desc } = this.form;
          let arr = [{ id: 1, name: '名称错误' }, { id: 2, name: '特征错误' }, { id: 3, name: "图片错误" }, { id: 4, name: "其他" }];
          let obj = arr.filter(item => item.name == type);
          Home.knowledgebase_error({ type: obj[0].id, desc, main: this.id }).then(res => { this.dialogTableVisible = false, this.form = { desc: '', type: '' } })
        }
      });
    },
    // 树形结构请求
    TreeFunc (data) {
      this.active = {
        chapter: data["chapter"],
        limit: 1,
        page: 1
      };
      this.Request({
        chapter: data["chapter"],
        limit: 1,
        page: 1
      })
    },
    // 请求数据
    Request (data = {}) {
      try {
        Home.knowledgebase_data(data).then(res => {
          let { currentPage, totalPage, data } = res;
          this.btns = currentPage == 1 ? { ...this.btns, a: true } : { ...this.btns, a: false };
          this.btns = currentPage == totalPage ? { ...this.btns, b: true } : { ...this.btns, b: false };
          this.content = data[0]["feature"];
          this.active = { ...this.active, page: currentPage }
          this.name = data[0]["name"];
          this.subject_name = data[0]["subject_name"];
          this.id = data[0]["id"];
        });
      } catch (err) {
        console.error(`数据处理错误：${err}`)
      }
    },
    //  按钮事件
    BtnFunc (data) {
      const Map = (data) => {
        let obj = { ...this.active, page: this.active.page + data }
        return obj
      }
      data == "+" ? this.Request(Map(1)) : this.Request(Map(-1));
    }
  }
}
</script>
<style lang="less" scoped>
.knowledgebase {
  display: flex;
  .left,
  .right,
  .center {
    border: 1px solid #eee;
    border-radius: 2px;
    padding: 5px;
    & > p:first-child {
      margin-top: 0;
      margin-bottom: 5px;
      padding: 0 5px;
      background-color: #f2f2f2;
      box-sizing: border-box;
      line-height: 30px;
      font-size: 14px;
      color: #666;
      font-weight: bold;
      position: relative;
      .error {
        position: absolute;
        right: 5px;
        line-height: 30px;
      }
    }
    .content {
      min-height: 50vh;
    }
    .flex {
      margin-top: 20px;
      display: flex;
      justify-content: space-around;
    }
  }
  .left {
    width: 300px;
  }
  .center {
    width: 100%;
    margin: 0 20px;
  }
  .right {
    width: 300px;
    .content {
      p {
        margin: 0;
        margin-bottom: 5px;
        color: #f03;
      }
    }
  }
}
</style>