<template>
  <div>
    <div v-if="drawer" class="help-center">
      <div class="help-container__control" @click="handleClose">
        <!-- <i class="el-icon-search strong"/> -->
        <span class="help-icon"/>
        <span class="strong">帮助中心</span>
        <span class="help-packUp"/>
      </div>
      <div ref="drawer" class="help-container">
        <!-- 搜索 -->
        <div class="help-container__search">
          <el-input
            size="small"
            placeholder="请输入内容"
            style="width: 232px;"
            suffix-icon="el-icon-search"
            @focus="handleSearch"
          />
        </div>
        <!-- 常见问题 文案动态可编辑配置 text-knowledge-title -->
        <div v-if="commonProblmList.length" class="help-container__commonProblm">
          <div class="knowledge-title">
            {{ textKnowledgeTitle }}
          </div>
          <template v-for="item in commonProblmList">
            <div :key="item.id" class="commonProblm-message" @click="handleOpenMessage(item)">
              <p style="margin: 0;padding: 0;line-height: 20px;">
                <span v-if="showTime" key="showTime" class="commonProblm-message__time">
                  {{ (item.gmtCreate || item.gmtModified) |moment('MM/DD') }}
                </span>
                <span v-else key="showTime" style="margin-right: 5px;">·</span>
                <span v-if="item.isNew === 1" class="hot-img" />
                {{ item.title }}
              </p>
            </div>
          </template>
        </div>
        <div v-if="learningCenterList.length && commonProblmList.length " style="border-bottom: 1px solid #d8dce5;"/>
        <!-- 学习中心 文案动态可编辑配置 video-knowledge-title -->
        <div v-if="learningCenterList.length" class="help-container__learningCenter">
          <div class="knowledge-title">
            {{ videoKnowledgeTitle }}
          </div>
          <template v-for="(item, index) in learningCenterList">
            <div :key="item.id" class="learningCenter-items" @click="handleOpenVedio(item)">
              <div class="learningCenter-items__title">
                <span v-if="item.isNew === 1" class="hot-img" />
                <span>{{ item.title }}</span>
              </div>
              <div class="learningCenter-items__status">
                <i class="el-icon-time mr2"/>
                <span style="margin-right:20px;">{{ item.gmtModified |moment('YYYY-MM-DD HH:mm:ss') }}</span>
                <i class="el-icon-view mr2"/>
                <span>{{ item.historyHot }}</span>
              </div>
              <div class="learningCenter-items__content">
                <img :src="item.content.imgUrl" class="learningCenter-items__img" alt="">
                <div class="learningCenter-items__control cover">
                  <i class="el-icon-caret-right"/>
                </div>
              </div>
              <div v-if="index !== learningCenterList.length - 1" style="border-bottom: 1px solid #E6EAEE; padding-top:16px;"/>
            </div>
          </template>
        </div>
        <div v-if="!commonProblmList.length && !learningCenterList.length" class="no-content">
          抱歉没有找到相关的帮助内容。
        </div>
      </div>
    </div>
    <!-- 常见问题弹窗 -->
    <el-dialog
      :visible.sync="messageVisible"
      :before-close="handleMessageClose"
      title=""
      width="650px"
    >
      <div class="dialog-container">
        <div class="dialog-header">
          <div class="dialog-title">{{ messageDetails.title }}</div>
          <div class="learningCenter-items__status" style="margin-bottom: 10px;">
            <i class="el-icon-time mr2"/>
            <span style="margin-right:20px;">{{ messageDetails.gmtModified |moment('YYYY-MM-DD HH:mm:ss') }}</span>
            <i class="el-icon-view mr2"/>
            <span>{{ messageDetails.historyHot }}</span>
          </div>
        </div>
        <div class="dialog-content">
          <div @click="previewImg($event)"  v-html="messageDetails.content"/>
          <div v-if="!hasFeedback" class="feedback">
            <div v-if="!hasSubmitFeedback" key="hasSubmitFeedback" class="feedback-content">
              <div class="feedback-disc">
                <span v-if="!isFeedBackHelp">这条知识点对您来说有用吗？</span>
                <span v-else>非常感谢您向我们提供反馈意见</span>
              </div>
              <div v-if="!isFeedBackHelp" key="isFeedBackHelp" class="feedback-like">
                <span>
                  <img v-if="isFeedBack" key="isCheckFeedBack" :src="feedbackCheckYes" class="feedback-icon">
                  <img v-else key="isCheckFeedBack" :src="feedbackYes" class="feedback-icon" @click="handleFeedbackYes('msg')">
                </span>
                <div style="width: 40px;"/>
                <span>
                  <img :src="feedbackNo" class="feedback-icon" @click="handleFeedbackNo">
                </span>
              </div>
              <div v-else key="isFeedBackHelp" class="feedback-comments">
                <el-input
                  :autosize="{ minRows: 5, maxRows: 5}"
                  v-model="feedbackContent"
                  maxlength="1000"
                  show-word-limit
                  type="textarea"
                  placeholder="为了更好的了解您的需求，请描述您觉得没有用的原因，非常感谢～（选填）"/>
                <el-button type="primary" class="feedback-comments__submit" @click="addfeedback(false)">提交</el-button>
              </div>
            </div>
            <div v-else key="hasSubmitFeedback" class="success-feedback">
              <span>
                <i class="el-icon-circle-check success-icon"/>
                提交成功，感谢您的反馈！
              </span>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
    <!-- 学习中心 -->
    <el-dialog
      :visible.sync="videoVisible"
      :before-close="handleVedioClose"
      title=""
      width="650px"
      class="videoDialog"
    >
      <div class="dialog-container">
        <div class="dialog-header">
          <div class="dialog-title">{{ centerDetails.title }}</div>
          <div class="learningCenter-items__status" style="margin-bottom: 10px;">
            <i class="el-icon-time mr2"/>
            <span style="margin-right:20px;">{{ centerDetails.gmtModified |moment('YYYY-MM-DD HH:mm:ss') }}</span>
            <i class="el-icon-view mr2"/>
            <span>{{ centerDetails.historyHot }}</span>
          </div>
        </div>
        <div class="dialog-content">
          <div v-if="!isOpenPlay" key="isOpenPlay" class="dialog-content__cover" @click="handleOpenPlay">
            <img :src="centerDetails.content && centerDetails.content['imgUrl']" class="dialog-content__img" alt="">
            <div class="dialog-content__control cover">
              <i class="el-icon-caret-right"/>
            </div>
          </div>
          <div v-else key="isOpenPlay" >
            <div v-if="videoVisible">
              <video
                :disablePictureInPicture="true"
                :src="centerDetails.mvCdnUrl"
                autoplay="autoplay"
                class="video"
                controls
                controlsList="nodownload noremoteplayback"
                style="height: 320px;"
                alt="" />
            </div>
          </div>
          <div style="margin-top: 10px;text-align: left;">
            {{ centerDetails.content && centerDetails.content['desc'] }}
            <div v-if="!hasFeedback" class="feedback">
              <div v-if="!hasSubmitFeedback" key="hasSubmitFeedback" class="feedback-content">
                <div class="feedback-disc">
                  <span v-if="!isFeedBackHelp">这条知识点对您来说有用吗？</span>
                  <span v-else>非常感谢您向我们提供反馈意见</span>
                </div>
                <div v-if="!isFeedBackHelp" key="isFeedBackHelp" class="feedback-like">
                  <span>
                    <img v-if="isFeedBack" key="isCheckFeedBack" :src="feedbackCheckYes" class="feedback-icon">
                    <img v-else key="isCheckFeedBack" :src="feedbackYes" class="feedback-icon" @click="handleFeedbackYes('vedio')">
                  </span>
                  <div style="width: 40px;"/>
                  <span>
                    <img :src="feedbackNo" class="feedback-icon" @click="handleFeedbackNo">
                  </span>
                </div>
                <div v-else key="isFeedBackHelp" class="feedback-comments">
                  <el-input
                    :autosize="{ minRows: 5, maxRows: 5}"
                    v-model="feedbackContent"
                    maxlength="1000"
                    show-word-limit
                    type="textarea"
                    placeholder="为了更好的了解您的需求，请描述您觉得没有用的原因，非常感谢～（选填）"/>
                  <el-button type="primary" class="feedback-comments__submit" @click="addfeedback(false, 'vedio')">提交</el-button>
                </div>
              </div>
              <div v-else key="hasSubmitFeedback" class="success-feedback">
                <span>
                  <i class="el-icon-circle-check success-icon"/>
                  提交成功，感谢您的反馈！
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- 搜索弹窗 -->
    <div v-if="isSearchWrap" class="search-layer-wrap" @keydown.self="handleWrapView">
      <div class="search-layer" @click.self="handleWrapView"/>
      <div class="search-block">
        <div class="search-input">
          <el-input
            ref="searchInput"
            v-model.trim="serachValue"
            :maxlength="50"
            prefix-icon="el-icon-search"
            clearable
            class="search-input__value"
            placeholder="请输入你要使用的功能，或遇到的问题"
            @input="search"
            @keydown.enter.native="handleSearchKnowledge"
          />
          <el-button
            style="padding: 0 20px;font-size: 16px;border-radius: 0 4px 4px 0;"
            type="primary"
            @click="handleSearchKnowledge"
          >
            搜索
          </el-button>
        </div>
        <div v-if="serachValue" class="search-result__block">
          <template v-if="isSHowWithout">
            <div class="search-result__nocontent">
              <p>
                抱歉没有找到相关的帮助内容，请尝试其他搜索词。
              </p>
              <div>
                <p>我们建议您：</p>
                <p>1、看看输入的文字是否有误。</p>
                <p>2、去掉可能没必要的字词如“的”、“吗”等</p>
              </div>
            </div>
          </template>
          <template v-else>
            <div v-if="quickFncData.length">
              <p class="search-shortcut-title ">快捷功能</p>
              <div v-loading="quickLoad" class="search-result__shared">
                <template v-for="tag in quickFncData">
                  <span :key="tag.id" class="span-style" @click="handleQuick(tag)" v-html="tag.resourceTitle" />
                </template>
              </div>
            </div>
            <div v-if="commonProblem.length && quickFncData.length" class="hr-dom">
              <hr class="hr-style">
            </div>
            <div v-if="commonProblem.length">
              <p class="search-shortcut-title">常见问题</p>
              <div class="search-result__list">
                <template v-for="problem in commonProblem">
                  <p
                    :key="problem.id"
                    class="result-list__item"
                    @click="handleCheckProblem(problem)"
                    v-html="problem.title"
                  />
                </template>
              </div>
            </div>

          </template>
        </div>
      </div>
    </div>
    <!-- 图片预览 -->
    <el-dialog
      title="图片预览"
      :visible.sync="dialogVisible"
      width="800px">
      <img width="100%" :src="viewSrc" alt="">
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import feedbackYes from './assets/yes.png'
import feedbackCheckYes from './assets/checkYes.png'
import feedbackNo from './assets/no.png'
import hot from './assets/huomiao.png'
import { debounce } from './utils'

export default {
  name: 'HelpCenterSidebar',
  props: {
    platForm: {
      type: String,
      default: null
    },
    visible: {
      type: Boolean,
      default: true
    },
    httpMethods: {
      type: Function,
      default: null
    },
    logTakeIn: {
      type: Function,
      default: null
    },
    moduleType: {
      type: String,
      default: ''
    },
    textKnowledgeTitle: {
      type: String,
      default: '常见问题'
    },
    videoKnowledgeTitle: {
      type: String,
      default: '学习中心'
    },
    showTime: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isSearchWrap: false,
      hot,
      feedbackYes,
      feedbackNo,
      feedbackCheckYes,
      isOpenPlay: false,
      drawer: true,
      messageVisible: false, // 常见问题提示弹窗
      videoVisible: false, // 学习中心提示弹窗
      commonProblmList: [], // 常见问题列表
      learningCenterList: [], // 学习中心列表
      messageDetails: {}, // 消息详情弹窗内容
      centerDetails: {}, // 学习中心参数列表
      pageId: null,
      temporaryInfo: [], // 暂时保存用户信息
      isCheckFeedBack: false, // 是否已经点赞
      isFeedBack: false, // 判断页面是否已经反馈过
      isFeedBackHelp: false, // 判断是否有帮助
      feedbackContent: null,
      hasFeedback: true,
      serachValue: '',
      hasSubmitFeedback: false,
      quickFncData: [], // 搜索内容快捷功能
      commonProblem: [], // 常见问题
      isRollbackSearchWrap: false, // 是否展示弹窗
      quickLoad: true,
      dialogVisible: false,
      viewSrc: ''
    }
  },
  computed: {
    ...mapGetters(['resourceList', 'userInfo', 'platformResources']),
    isSHowWithout() {
      return !this.commonProblem.length && !this.quickFncData.length && this.serachValue
    }
  },
  watch: {
    visible: {
      handler(val) {
        this.drawer = val
      }
    },
    '$route': {
      handler() {
        this.filterRouter(this.platForm)
      }
    },
    serachValue: {
      handler(val) {
        // 禁止输入表情
        const regStrEmoji = /[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[A9|AE]\u3030|\uA9|\uAE|\u3030/gi
        // 禁止输入特殊字符
        const special = /[`~!@#$%^&*()_\-+=<>?:"{}|,./;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、]/img
        if (!val) {
          this.quickFncData = []
          this.commonProblem = []
        }
        this.$nextTick(() => {
          this.serachValue = val.replace(regStrEmoji, '').replace(special, '')
        })
      }
    },
    quickFncData() {
      this.quickLoad = !(this.quickFncData.length > 0)
    }
  },
  created() {
    document.onkeydown = (e) => {
      const that = this
      const el = e || event || window.event
      if (el && el.keyCode === 27) {
        that.isSearchWrap = false
      }
    }
  },
  mounted() {
    this.filterRouter(this.platForm)
  },
  methods: {
    // ---------------------  搜索  -------------------------
    search() {
      this.serachValue = this.serachValue.trim()
      if (this.serachValue && this.serachValue.length) {
        debounce(this.getResourceKnowledge(), 600)
        debounce(this.handleSearchKnowledge(), 600)
      }
    },
    // 搜索功能埋点收容
    async searchCommonEventLog() {
      const requestParams = {
        url: '/admin/v1/common/log/search',
        method: 'post',
        data: {
          pid: 'admin',
          version: '1.0',
          page: this.$route.meta.logEvent,
          click: this.$route.meta.logEvent + '_Show',
          searchText: this.serachValue,
          functionCount: 0,
          questionCount: this.commonProblem.length || 0
        }
      }
      await this.httpMethods(requestParams)
    },
    // 搜索结果跳转埋点收容
    async searchClickCommonEventLog(msg) {
      // 埋点信息去除标题中的HTML标签
      const reg = /<\/?.+?\/?>/g
      const requestParams = {
        url: '/admin/v1/common/log/searchclick',
        method: 'post',
        data: {
          pid: 'admin',
          version: '1.0',
          page: this.$route.meta.logEvent,
          click: this.$route.meta.logEvent + '_show',
          searchText: this.serachValue,
          functionCount: 0,
          questionCount: this.commonProblem.length || 0,
          sercheClick: msg.title.replace(reg, '')
        }
      }
      await this.httpMethods(requestParams)
    },
    // 查看知识点
    handleCheckProblem(problem) {
      if (Number(problem.moduleType) === 1) {
        this.handleOpenMessage(problem, true)
      } else {
        this.handleOpenVedio(problem, true)
      }
      this.isSearchWrap = false
      this.searchClickCommonEventLog(problem)
    },
    handleQuick(tag) {
      const origin = window.location.origin
      let domainName = ''
      domainName = origin.includes('localhost') ? 'http://apitest.yueyuechuxing.cn' : origin
      if (tag.resourceUrl) window.open(domainName + '' + tag.resourceUrl)
    },
    handleSearchKnowledge() {
      if (this.serachValue && this.serachValue.length) {
        this.getResourceKnowledge()
        this.getCurrentResources()
      }
    },
    // 获取当前资源菜单列表
    async getResourceKnowledge() {
      const requestParams = {
        url: '/admin/v1/operation/resourceKnowledge/query',
        method: 'post',
        data: {
          keyWord: this.serachValue,
          highlightColor: '#3483FF'
        }
      }
      const { data } = await this.httpMethods(requestParams)
      this.commonProblem = data.items || []
      await this.searchCommonEventLog()
    },
    // 获取当前资源菜单列表
    async getCurrentResources() {
      const requestParams = {
        url: '/admin/v1/operation/resourceKnowledge/currentResources',
        method: 'post',
        data: {
          keyWord: this.serachValue
        }
      }
      const { data } = await this.httpMethods(requestParams)
      const newData = JSON.parse(JSON.stringify(data))
      const newQuickData = this.formatQuickData(newData)
      this.quickFncData = newQuickData || []
    },
    formatQuickData(data) {
      const inpNameArr = this.serachValue.split('')
      const newData = new Map()
      data.forEach((item) => {
        let resourceTitle = ''
        const nameArr = item.resourceName.split('')
        if (!!item.resourceUrl && !!item.resourceName) {
          resourceTitle = nameArr.map(nameI => {
            inpNameArr.forEach(inpI => {
              if (nameI === inpI) {
                nameI = `<span style="color:#3483FF">${nameI}</span>`
                if (!newData.has(item.resourceName)) {
                  newData.set(item.resourceName, item)
                }
              }
            })
            return nameI
          }).join('')
          item.resourceTitle = resourceTitle
        }
      })
      return [...newData.values()]
    },
    handleSearch() {
      // this.quickFncData = []
      // this.commonProblem = []
      // this.serachValue = ''
      // this.getResourceKnowledge()
      this.isSearchWrap = true
      this.$nextTick(() => {
        this.$refs['searchInput'] && this.$refs['searchInput'].focus()
      })
    },
    handleWrapView(e) {
      e.stopPropagation()
      e.cancelBubble = true
      this.isSearchWrap = false
      this.serachValue = ''
    },
    // 获取消息列表
    async filterRouter(platForm) {
      const routes = this.resourceList.find(item => item.resourceKey === String(platForm))
      this.mapRoutes(routes.subList)
      await this.getMessageList()
    },
    mapRoutes(data) {
      const pageName = this.$route.name
      data.map(item => {
        if (item.resourceKey === pageName) {
          const find = item.subList.find(page => page.resourceKey === pageName)
          if (find) {
            this.pageId = find.id
          } else {
            this.pageId = item.id
          }
        } else {
          this.mapRoutes(item.subList)
        }
      })
    },
    feedBackStatus(status) {
      this.isCheckFeedBack = status
      this.isFeedBack = status
      this.isFeedBackHelp = status
      this.feedbackContent = null
      this.hasSubmitFeedback = false
    },
    // 点击
    handleFeedbackYes(state = 'msg') {
      this.addfeedback(true, state)
    },
    handleFeedbackNo() {
      if (this.isFeedBack) return
      this.isFeedBackHelp = true
    },
    // 知识点是否反馈过
    async existFeedback(id) {
      const requestParams = {
        url: '/admin/v1/operation/feedback/existFeedback',
        method: 'post',
        data: {
          knowId: id
        }
      }
      this.feedBackStatus(false)
      const { data } = await this.httpMethods(requestParams)
      this.hasFeedback = data || false
    },
    mapRoutePath() {
      const routes = this.$route.matched
      let pathLink = ''
      routes.length && routes.map((item, index) => {
        if (index === 0) {
          pathLink = item.meta && item.meta.title
        } else {
          pathLink = pathLink + '/' + item.meta.title
        }
      })
      return pathLink
    },
    // 添加反馈
    async addfeedback(status, state = 'msg') {
      const { id, title } = state === 'msg' ? this.messageDetails : this.centerDetails
      const triggerPage = this.mapRoutePath()
      const requestParams = {
        url: '/admin/v1/operation/feedback/add',
        method: 'post',
        data: {
          knowId: id,
          knowTitle: title,
          moduleType: this.moduleType,
          triggerPage,
          feedbackEval: status ? '有帮助' : '无帮助',
          feedbackContent: this.feedbackContent
        }
      }
      const { data } = await this.httpMethods(requestParams)
      if (data) {
        this.isFeedBack = data
        this.isCheckFeedBack = true
      }
      if (!status) {
        this.hasSubmitFeedback = true
      }
    },
    // 统计浏览次数详情接口
    async getResourceKnowledgeInfo(id = null, status = 'msg') {
      const requestParams = {
        url: '/admin/v1/operation/resourceKnowledge/info',
        method: 'post',
        data: {
          id
        }
      }
      const { data } = await this.httpMethods(requestParams)

      if (status === 'msg') {
        this.messageDetails = data || {}
        this.messageVisible = true
      } else {
        const content = data.content && JSON.parse(data.content)
        this.centerDetails = {
          ...data,
          content
        }
        this.videoVisible = true
      }
      await this.existFeedback(id)
    },
    // 获取关联知识点相关资源
    async getMessageList() {
      const requestParams = {
        url: '/admin/v1/operation/resourceKnowledge/queryDetail',
        method: 'post',
        data: {
          id: this.pageId
        }
      }
      const { data } = await this.httpMethods(requestParams)
      if (data) {
        this.commonProblmList = data && data.filter(item => Number(item.moduleType) === 1)
        this.sortArray(this.commonProblmList)
        const learningCenterList = data && data.filter(item => Number(item.moduleType) === 4)
        this.learningCenterList = learningCenterList.map(item => {
          const content = JSON.parse(item.content)
          return {
            ...item,
            content
          }
        })
        this.sortArray(this.learningCenterList)
        this.sortDataList(this.commonProblmList)
        this.sortDataList(this.learningCenterList)
      } else {
        this.commonProblmList = []
        this.learningCenterList = []
      }
    },
    sortArray(data) {
      data.sort((a, b) => {
        return b.gmtModified < a.gmtModified ? 1 : -1
      })
    },
    sortDataList(data) {
      const flag = data.every(item => item.isNew === 0)
      if (flag) {
        data.sort((a, b) => a.historyHot > b.historyHot ? -1 : 1)
      } else {
        const newArray = data.filter(item => item.isNew === 1)
        const pvArray = data.filter(item => item.isNew === 0)
        newArray.sort((a, b) => a.gmtModified < b.gmtModified ? 1 : -1)
        pvArray.sort((a, b) => a.historyHot > b.historyHot ? -1 : 1)
        data.splice(0, data.length, ...newArray, ...pvArray)
      }
    },
    setLogTakeIn(obj) {
      if (this.$route.meta.logEvent) {
        const data = {
          version: '1.0',
          pid: 'admin',
          page: this.$route.meta.logEvent,
          click: obj.moduleType + '#' + obj.id
        }
        this.logTakeIn(data)
      }
    },
    handleOpenPlay() {
      this.isOpenPlay = true
    },
    handleOpen() {
      this.drawer = true
      this.$emit('closed', true)
    },
    handleClose() {
      this.drawer = false
      this.$emit('closed', false)
    },
    handleOpenVedio(obj, isSearchWrap = false) {
      this.isRollbackSearchWrap = !!isSearchWrap
      this.setLogTakeIn(obj)
      this.getResourceKnowledgeInfo(obj.id, 'vedio')
    },
    handleVedioClose() {
      this.videoVisible = false
      this.isOpenPlay = false
      if (this.isRollbackSearchWrap) {
        this.$nextTick(() => {
          this.isSearchWrap = true
        })
      }
      this.filterRouter(this.platForm)
    },
    handleOpenMessage(obj, isSearchWrap = false) {
      this.isRollbackSearchWrap = !!isSearchWrap
      this.setLogTakeIn(obj)
      this.getResourceKnowledgeInfo(obj.id, 'msg')
    },
    handleMessageClose() {
      this.messageVisible = false
      if (this.isRollbackSearchWrap) {
        this.$nextTick(() => {
          this.isSearchWrap = true
        })
      }
      this.filterRouter(this.platForm)
    },
    // 预览图片
    previewImg($event) {
      if ($event.target.tagName === 'IMG') {
        this.viewSrc = $event.target.src
        this.dialogVisible = true
      }
    },
  }
}
</script>

<style lang="scss">
.search-input .el-input__inner {
  height: 44px;
  line-height: 44px;
  border-radius: 4px 0 0 4px;
}
.search-input .el-button--mini, .el-button--small {
  border-radius: 0;
}
.help-center {
  .el-dialog__body {
    padding-top: 10px !important;;
  }
}
.dialog-content {
  text-align: center;
  img {
    width: 80%;
  }
  p {
    text-align: left;
    img {
      width: auto;
    }
    video {
      text-align: center;
      width: 100%;
      border-radius: 5px;
      outline:none;
      background: none;
      text-decoration: none;
    }
    a {
      color: blue;
    }
  }
}

</style>

<style lang="scss" scoped>
.hr-dom{
  padding: 0 15px !important;
  margin: 15px 0;
  .hr-style{
    background-color: #d5dedf;
    height:1px;
    border:none;
  }
}
.mr2 {
  margin-right: 2px;
}

.search-result__list {
  max-height: 350px;
  // overflow: auto;
}

.knowledge-title {
  font-size: 14px;
  color: #333333;
  letter-spacing: 0;
  line-height: 14px;
  font-weight: 500;
  padding:10px 14px 14px;
}

.search-layer-wrap {
  .search-layer {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 2002;
    background: rgba(0,0,0,.6);
  }
  .search-block {
    position: fixed;
    left: 50%;
    top: 120px;
    margin-left: -300px;
    z-index: 9999;
    width: 600px;
    .search-input {
      display: flex;
      justify-content: center;
      align-content: center;
    }
    .search-input__value {
      flex: 1;
    }

    .search-result__block {
      margin-top: 10px;
      background: #fff;
      padding: 20px 0;
      border-radius: 3px;
      box-shadow: 0 2px 3px rgba(0,0,0,.2);
      overflow: auto;
      .search-shortcut-title {
        margin: 0;
        font-size: 14px;
        color: #888;
        padding: 0 15px 5px;
      }
    }
    .search-result__nocontent {
      padding: 0 20px;
      font-size: 14px;
    }
    .search-result__shared {
      font-size: 10px;
      margin: 5px 15px 0px 10px;
      max-height: 300px;
      // overflow-y: scroll;
      cursor: pointer;
      .span-style {
        display: inline-block;
        padding: 5px;
        font-size: 14px;
        line-height: 15px;
      }
      .span-style:after {
        content:"  |";
        width:2px;
        height:18px;
        // padding-right:10px ;
        color: #cccccc;
      }
      .span-style:last-child::after{
        content: '';
      }
    }
    .result-list__item {
      margin: 7px 0;
      line-height: 25px;
      min-height: 25px;
      padding: 0 15px;
      font-size: 14px;
      cursor: pointer;
      border-left: 2px solid #ffffff;
    }
    .result-list__item:hover {
      background: #F5F5F5;
      border-left: 2px solid #3483FF;
    }
  }
}

.dialog {
  z-index: 2020;
}
.no-content {
  padding: 20px 14px 10px;
  font-size: 14px;
}

.hot-img {
  display: inline-block;
  width: 11px;
  min-width: 11px;
  height: 14px;
  background-image: url('./assets/huomiao.png');
  background-repeat:no-repeat;
  background-size:100% 100%;
  -moz-background-size:100% 100%;
  margin-right: 3px;
}

.feedback {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  padding: 30px 20px 0;
  .feedback-content {
    width: 100%;
  }
  .feedback-disc {
    padding-top: 20px;
    padding-bottom: 20px;
    border-top: 1px solid#E6EAEE;
    font-size: 16px;
    color: #666666;
    letter-spacing: 0;
    text-align: center;
  }
  .feedback-comments {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .feedback-comments__submit {
    width: 116px;
    height: 40px;
    margin: 20px 0;
  }
  .success-feedback {
    font-size: 28px;
    color: #333333;
    letter-spacing: 0;
    line-height: 28px;
    text-align: center;
    display: flex;
    align-items: center;
    height: 190px;
  }
   .success-icon {
      font-size: 34px;
      color: #2ab421;
    }
  .feedback-like {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .feedback-icon {
    width:38px;
    height:38px;
    border-radius: 20px;
    padding: 2px;
    // margin-right: 38px;
    cursor: pointer;
  }
}

.help-center {
  position: fixed;
  top: 60px;
  right: 0;
  width: 100%;
  max-width: 260px;
  height: calc(100vh - 60px);
  z-index: 1000;
  background: #FFFFFF;
  box-shadow: 0 1px 13px 0 #E5E9EE;
}
.help-container__control {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 43px;
  line-height: 43px;
  text-align: center;
  cursor: pointer;
  color: #000000;
  border-bottom: 1px solid #d8dce5;
  position: relative;
}

.help-icon {
  display: inline-block;
  width: 15px;
  height: 15px;
  background-image: url('./assets/help.png');
  background-repeat:no-repeat;
  background-size:100% 100%;
  -moz-background-size:100% 100%;
  margin-right: 8px;
}

.help-packUp {
  position: absolute;
  right: 17px;
  display: inline-block;
  width: 14px;
  height: 14px;
  background-image: url('./assets/packUp.png');
  background-repeat:no-repeat;
  background-size:100% 100%;
  -moz-background-size:100% 100%;
  text-align: right;
}

.help-container__search {
  display: flex;
  justify-content: center;
  align-content: center;
}

.strong {
  display: inline-block;
  font-size: 14px;
  color: #323233;
  font-weight: 500;
}
.help-container {
  height: calc(100vh - 103px);
  display: flex;
  flex-direction: column;
  overflow: auto;
  margin-top: 16px;
}

.help-container__tag {
  display: inline-block;
  padding: 2px 7px;
  background: red;
  text-align: center;
  font-size: 12px;
  color: #ffffff;
  border-radius: 3px;
}

.help-container__commonProblm {
  padding: 10px 0;
  .commonProblm-message {
    padding: 0 13px;
    display: flex;
    align-items: center;
    min-height: 34px;
    font-size: 14px;
    padding: 4px 0;
    cursor: pointer;
    color: #666666;
    padding:0 14px;
    border-left: 2px solid #ffffff;
  }
  .commonProblm-message:hover {
    background: #F5F5F5;
    border-left: 2px solid #3483FF;
  }
  .commonProblm-message__time {
    display: inline-block;
    width: 38px;
    font-size: 14px;
    color: #333333;
    margin-right: 4px;
  }
}

.help-container__learningCenter {
  padding: 10px 0;
}

.video {
  width: 100%;
  border-radius: 5px;
  outline:none;
  background: none;
  text-decoration: none;
}

.learningCenter-items {
  cursor: pointer;
  padding: 0 14px 16px;
  margin-bottom: 10px;
  .learningCenter-items__title {
    display: flex;
    align-items: center;
    &:nth-child(1) {
      font-size: 14px;
      color: #666666;
    }
  }
}
.learningCenter-items__status {
  font-size: 12px;
  color: #999999;
  letter-spacing: 0;
  line-height: 10px;
  padding: 9px 0 8px;
}

.learningCenter-items__content {
  width: 100%;
  height: 122px;
  position: relative;
  background: #E5E9EE;
  border-radius: 4px;
  .learningCenter-items__control{
    width: 44px;
    height: 44px;
    line-height: 44px;
    font-size: 26px;
    text-align: center;
  }
  .learningCenter-items__img {
    width: 100%;
    height: 100%;
  }
}

.learningCenter-items__content:hover {
  // transition: box-shadow .3s,border-color .3s,-webkit-box-shadow .3s;
  .learningCenter-items__control {
    box-shadow: 0 1px 13px 0 #E5E9EE;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-size: 28px;
    transition: all .1s;
  }
  .learningCenter-items__img  {
     box-shadow: 0 1px 13px 0 #E5E9EE;

  }
}

.dialog-container {
  min-height: 300px;
}

.cover {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background:rgba($color: #16120b, $alpha: 0.7);
  border-radius: 50%;
  color: #ffffff;
  cursor: pointer;
  transition: all .1s;
}

.dialog-header {
  border-bottom: 1px solid #e5e5e5;
  .dialog-title {
    font-size: 18px;
    color: #000000;
    font-weight: 400;
    line-height: 28px;
  }
}

.dialog-content {
  height: 400px;
  overflow: auto;
  padding-top: 15px;
  text-align: left;
  display: flex;
  flex-direction: column;
  .dialog-content__cover {
    width: 100%;
    position: relative;
    .dialog-content__img {
      width: 100%;
      height: 300px;
      border: 1px solid #e5e5e5;
      border-radius: 3px;
    }
    .dialog-content__control {
      width: 50px;
      height: 50px;
      text-align: center;
      line-height: 50px;
      font-size: 26px;
    }
    .dialog-content__control:hover {
      width: 60px;
      height: 60px;
      line-height: 60px;
      font-size: 30px;
    }
  }
}

</style>
