<template>
  <div class="app-container">

    <!-- 查询和其他操作 -->
    <div class="filter-container">
      <el-input v-model="listQuery.name" clearable class="filter-item" style="width: 160px;" placeholder="请输入关键字" />
      <el-input v-model="listQuery.label" clearable class="filter-item" style="width: 160px;" placeholder="请选择标签" />
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查找</el-button>
      <el-button class="filter-item" type="primary" icon="el-icon-edit" @click="handleCreate">添加</el-button>
    </div>

    <el-dialog :visible.sync="faqVisiable" title="智库维护">
      <el-form ref="faq" :rules="rules" :model="faq" label-width="150px">
        <el-form-item label="FAQ标题" prop="name">
          <el-input v-model="faq.name" />
        </el-form-item>

        <el-row>
          <el-col :span="12">
            <el-form-item label="所属分类" prop="categoryId">
              <el-cascader
                v-model="faq.categoryId"
                :options="categoryList"
                expand-trigger="hover"
                clearable
                @change="handleCategoryChange"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否置顶" prop="isTop">
              <el-radio-group v-model="faq.isTop">
                <el-radio :label="false">不置顶</el-radio>
                <el-radio :label="true">置顶</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="标签">
          <el-select v-model="faq.label" clearable>
            <el-option
              v-for="item in labelList"
              :key="item.id"
              :label="item.label"
              :value="item.id"
            />
          </el-select>

          <el-button class="button-new-keyword" type="primary" @click="showInput">+ 增加</el-button>
        </el-form-item>

        <el-form-item label="详细内容">
          <editor v-model="faq.content" :init="editorInit" />
        </el-form-item>
      </el-form>

      <div class="op-container">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleSave">保存</el-button>
      </div>

    </el-dialog>

    <div class="table-layout" :model="faq">
      <el-row>
        <el-col :span="6" class="table-cell-title">
          <tree :nodes="nodes" :setting="setting" />
        </el-col>
        <el-col :span="18" class="table-cell-title">
          <div class="crumbs" aria-label="路径">
            <el-breadcrumb separator=">">
              <el-breadcrumb-item>{{ path.level1 }}</el-breadcrumb-item>
              <el-breadcrumb-item>{{ path.level2 }}</el-breadcrumb-item>
              <el-breadcrumb-item>{{ path.level3 }}</el-breadcrumb-item>
            </el-breadcrumb>
            <span class="span-right">2020-10-22 10:00:23</span>
          </div>
          <div class="goods-detail-box" v-html="faq.content" />
        </el-col>
      </el-row>

    </div>
  </div>

</template>

<script>
import { listFAQ, create, listCatAndLabel, detail } from '@/api/faq'
import BackToTop from '@/components/BackToTop'
import tree from 'vue-giant-tree'
import Editor from '@tinymce/tinymce-vue'
import { MessageBox } from 'element-ui'

export default {
  name: 'FaqList',
  components: { BackToTop, tree, Editor },
  data() {
    return {
      categoryList: [],
      labelList: [],
      faq: {
        content: '',
        name: '',
        isTop: false
      },
      path: {
        level1: '',
        level2: '',
        level3: ''
      },
      setting: {
        data: {
          simpleData: {
            enable: true,
            idKey: 'id',
            pIdKey: 'pid',
            rootPId: 0
          }
        },
        callback: {
          onClick: this.handleTreeNodeClick
        }
      },
      nodes: [],
      total: 0,
      listLoading: true,
      faqVisiable: false,
      submiting: false, // 商品提交中 防止多次提交
      listQuery: {
        label: undefined,
        name: undefined
      },
      rules: {
        title: [{ required: true, message: '标题不能为空', trigger: 'blur' }],
        categoryId: [{ type: 'number', required: true, message: '请选择分类', trigger: 'change' }]
      },
      editorInit: {
        language: 'zh_CN',
        height: 300,
        convert_urls: false,

        plugins: [
          'advlist anchor autolink autosave code codesample colorpicker colorpicker contextmenu directionality emoticons fullscreen hr image imagetools importcss insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount'
        ],
        toolbar: [
          'searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript code codesample',
          'hr bullist numlist link image charmap preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen'
        ],
        images_upload_handler: function(blobInfo, success, failure) {
          const formData = new FormData()
          formData.append('file', blobInfo.blob())
          createStorage(formData)
            .then(res => {
              success(res.data.data.url)
            })
            .catch(() => {
              failure('上传失败，请重新上传')
            })
        }
      }
    }
  },
  computed: {
    headers() {
      return {
        'X-JZ-Admin-Token': getToken()
      }
    }
  },
  created() {
    listCatAndLabel().then(response => {
      this.categoryList = response.data.data.categoryList
      this.labelList = response.data.data.labelList
    })

    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      listFAQ(this.listQuery)
        .then(response => {
          this.nodes = response.data.data
          this.listLoading = false
        })
        .catch(() => {
          this.nodes = []
          this.listLoading = false
        })
    },
    handleTreeNodeClick(event, treeId, treeNode) {
      const level = treeNode['level']
      if (level == 0) {
        this.path.level1 = treeNode['name']
        this.path.level2 = ''
        this.path.level3 = ''
      } else if (level == 1) {
        this.path.level1 = treeNode.getParentNode()['name']
        this.path.level2 = treeNode['name']
        this.path.level3 = ''
      } else {
        this.path.level1 = treeNode.getParentNode().getParentNode()['name']
        this.path.level2 = treeNode.getParentNode()['name']
        this.path.level3 = treeNode['name']

        // 查询明细
        detail(treeNode.id)
          .then(response => {
            console.info(response)
            const faq_title = "<p style='font-size:28px;color:#606266;font-weight:600;text-align:center'>" + treeNode['name'] + '</p>'
            this.faq.content = faq_title + response.data.data
          })
      }
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },

    handleCreate() {
      this.faqVisiable = true
    },
    handleSave() {
      if (this.submiting) return
      this.submiting = true
      console.info(this.faq)
      create(this.faq)
        .then(response => {
          this.$notify.success({
            title: '成功',
            message: '创建成功'
          })
          this.faqVisiable = false
          this.getList(); console.info(response.data)
          this.nodes.push(response.data)
        })
        .catch(response => {
          MessageBox.alert('业务错误：' + response.data.errmsg, '警告', {
            confirmButtonText: '确定',
            type: 'error'
          })
        })
      this.submiting = false
    },
    handleOnhot(row) {
      onhot(row)
        .then(response => {
          this.$notify.success({
            title: '成功',
            message: '商品设置热卖成功'
          })
        })
        .catch(response => {
          this.$notify.error({
            title: '失败',
            message: response.data.errmsg
          })
        })
    },
    handleCancel() {
      this.faqVisiable = false
    },
    handleCategoryChange(value) {
      this.faq.categoryId = value[value.length - 1]
    }
  }
}
</script>

  <style>
.table-layout {
  margin-top: 20px;
  /*border-left: 1px solid #DCDFE6;
           border-top: 1px solid #DCDFE6;*/
}
.table-expand {
  font-size: 0;
}
.table-expand label {
  width: 100px;
  color: #99a9bf;
}
.table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
}
.gallery {
  width: 80px;
  margin-right: 10px;
}

.el-table th.gutter {
  display: table-cell !important;
}
.op-container {
  display: flex;
  justify-content: center;
}
.span-right{
float: right;
color: #606266;
font-weight: 400 !important;
font-size: 14px;
}
</style>
