<template>
  <div class="online-faq">
    <el-tabs v-model="nowCheckType" type="card" @tab-click="handleClick">
      <el-tab-pane
        label="我的提问"
        name="myIssues"
        :lazy="true"
        style="overflow: auto"
        v-if="$store.user.baseRole !== 2"
      >
        <div class="issues-list-box faq-main-flex">
          <div
            class="main-left"
            v-infinite-scroll="load"
            v-loading="listLoading"
          >
            <el-empty
              v-if="!myIssues.length"
              description="当前暂无提问"
            ></el-empty>
            <div
              :class="[
                'issues-box',
                { 'issues-box-check': nowCheckIndex == i },
                { 'issues-box-add': !issues.id ? true : false },
                { 'issues-box-reply': issues.status ? true : false },
              ]"
              v-for="(issues, i) in myIssues"
              :key="issues.id"
              @click="changData(i)"
            >
              <div class="issues-content">
                <div class="issues-title">{{ issues.title }}</div>
                <div class="issues-content-info" v-html="issues?.explain"></div>
              </div>
              <div class="issues-box-floor">
                <div class="anser-user-name">
                  <span>{{
                    issues.answer_person_name != null
                      ? "@" + issues.answer_person_name.split(",").join(" @")
                      : ""
                  }}</span>
                </div>
                <div class="create-time">{{ issues.create_time }}</div>
              </div>
            </div>
          </div>
          <div class="main-right">
            <FAQInfo
              v-show="nowCheckInfo"
              @saveAfter="saveAfter"
              :nowCheckInfo="nowCheckInfo"
              @cancelAdd="cancelAdd"
            ></FAQInfo>
            <el-empty
              v-show="!nowCheckInfo"
              description="当前暂未选中提问的问题"
            ></el-empty>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane
        label="我的回答"
        name="myAnswer"
        :lazy="true"
        style="overflow: auto"
      >
        <div class="answer-list-box faq-main-flex">
          <div class="main-left" v-infinite-scroll="load">
            <el-empty
              v-if="!myAnswer.length"
              description="当前暂无回答"
            ></el-empty>
            <div
              :class="[
                'issues-box',
                {
                  'issues-box-check': nowCheckAnserIndex == i,
                  'issues-box-reply': answer.status ? true : false,
                },
              ]"
              v-for="(answer, i) in myAnswer"
              :key="answer.id"
              @click="changData(i)"
            >
              <div class="issues-content issues-content-answer">
                <div class="issues-title">{{ answer.title }}</div>
                <div class="issues-content-info" v-html="answer?.explain"></div>
              </div>
              <div class="issues-box-floor issues-box-floor-answer">
                <div class="anser-user-name">
                  <span>回答时间：{{ answer.answerTime }}</span>
                </div>
                <div class="create-time">
                  提问时间：{{ answer.issuesCreateTime }}
                </div>
              </div>
            </div>
          </div>
          <div class="main-right">
            <FAQInfo
              v-show="nowCheckAnserInfo"
              @saveAfter="saveAfter"
              :nowCheckInfo="nowCheckAnserInfo"
              :disabled="true"
              :isAnswerPage="true"
              @cancelAnswer="cancelAnswer"
              @saveAnswer="saveAnswer"
            ></FAQInfo>
            <el-empty
              v-show="!nowCheckAnserInfo"
              description="当前暂未选中回答的问题"
            ></el-empty>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <div class="add-issues-box" v-if="nowCheckType == 'myIssues'">
      <el-button @click="addIssues"
        ><i class="el-icon-plus"></i> 添加问题</el-button
      >
    </div>
  </div>
</template>

<script>
import {
  getMyIssuesAPI,
  getMyAnswerAPI,
  getIssuesInfo
  // createIssuesAPI,
  // editorIssuesAPI,
  // answerAPI
} from '@/api/online-course/online-FAQ'
import FAQInfo from '../components/FAQ-info.vue'
import { deepClone } from '../utils'
import { dataReportMixin } from '@/utils/data-report'
export default {
  data () {
    return {
      nowCheckType: 'myIssues',
      listLoading: false,
      issuesPageInfo: {
        page: 0,
        pageSize: 10,
        total: 0
      },
      answerPageInfo: {
        page: 0,
        pageSize: 10,
        total: 0
      },
      myIssues: [],
      myAnswer: [],
      nowCheckIndex: null,
      nowCheckAnserIndex: null,
      nowCheckInfo: null,
      nowCheckAnserInfo: null
    }
  },
  components: { FAQInfo },

  created () {
    if (this.$store.user.baseRole === 2) {
      this.nowCheckType = 'myAnswer'
    }
  },
  methods: {
    handleClick (e) {
      if (this.nowCheckAnserIndex == null) {
        this.nowCheckAnserIndex = 0
      }
    },
    changData (i) {
      if (this.nowCheckType === 'myIssues') {
        if (this.nowCheckInfo !== null && !this.nowCheckInfo.id) {
          this.$message('请完成当前问题编辑，再切换')
          return
        }
        this.nowCheckIndex = i
      } else {
        if (this.nowCheckAnserInfo !== null && !this.nowCheckAnserInfo.id) {
          this.$message('请完成当前问题编辑，再切换')
          return
        }
        this.nowCheckAnserIndex = i
      }
    },
    async getMyIssuesLsit () {
      this.listLoading = true
      const { data } = await getMyIssuesAPI(this.issuesPageInfo)
      this.myIssues.push(...data)
      this.listLoading = false
    },
    async getMyAnswerList () {
      this.listLoading = true
      const { data } = await getMyAnswerAPI(this.answerPageInfo)
      this.myAnswer.push(...data)
      !this.nowCheckAnserInfo && (this.nowCheckAnserInfo = this.myAnswer[0])
      this.listLoading = false
    },
    load () {
      const type = this.nowCheckType
      const page =
        type === 'myIssues'
          ? this.issuesPageInfo.page
          : this.answerPageInfo.page
      const pageSize =
        type === 'myIssues'
          ? this.issuesPageInfo.pageSize
          : this.answerPageInfo.pageSize
      const list = type === 'myIssues' ? this.myIssues : this.myAnswer
      const isOk = page * pageSize <= list.length
      if (isOk) {
        if (this.nowCheckType === 'myIssues') {
          this.issuesPageInfo.page++
          this.getMyIssuesLsit()
        } else if (this.nowCheckType === 'myAnswer') {
          this.answerPageInfo.page++
          this.getMyAnswerList()
        }
      }
    },
    cancelAdd () {
      if (!this.nowCheckInfo.id) {
        this.myIssues.splice(0, 1)
      }
      this.nowCheckIndex = null
      this.nowCheckInfo = null
      // if (this.nowCheckInfo.id) {
      //   this.nowCheckInfo = deepClone(
      //     this.myIssues[this.nowCheckIndex].myDataInfo
      //   )
      // } else {
      //   this.myIssues.splice(this.nowCheckIndex, 1)
      //   this.nowCheckIndex = 0
      // }
    },
    cancelAnswer () {
      this.nowCheckAnserIndex = null
    },
    async saveAfter (res) {
      const isEditor = res.isEditor
      res = res.res
      this.page = 1
      const issues = await getIssuesInfo(res.data.id)
      if (isEditor) {
        this.myIssues[this.nowCheckIndex] = issues.data
      } else {
        this.myIssues[0].id = res.data.id
        this.myIssues[0].title = res.data.title
        this.myIssues[0].explain = res.data.explain
        this.myIssues[0].create_time = res.data.create_time
      }
      this.$set(this, 'nowCheckInfo', issues.data)
      this.myIssues[0].answer_person_name = issues.data.answer
        .map((ans) => ans.answer_person.name)
        .join(',')
    },
    addIssues () {
      if (
        this.nowCheckInfo !== null &&
        this.myIssues.length > 0 &&
        !this.myIssues[this.nowCheckIndex]?.id
      ) {
        this.$message('请完成当前问题编辑，再新增')
        return
      }
      this.myIssues.unshift({
        title: '',
        content: '',
        explain: '',
        answerPersonIds: []
      })
      this.nowCheckIndex = 0
      this.nowCheckInfo = deepClone(this.myIssues[0])
    },
    saveAnswer (data) {
      this.myAnswer[this.nowCheckAnserIndex] = data
    }
  },
  watch: {
    async nowCheckIndex () {
      if (this.nowCheckIndex === null) {
        this.nowCheckInfo = null
        return
      }
      const id = this.myIssues[this.nowCheckIndex]?.id
      if (id) {
        if (this.myIssues[this.nowCheckIndex].myDataInfo) {
          const nowCheckInfo = deepClone(
            this.myIssues[this.nowCheckIndex].myDataInfo
          )
          this.$set(this, 'nowCheckInfo', nowCheckInfo)
        } else {
          const issues = await getIssuesInfo(id)
          this.$set(this, 'nowCheckInfo', issues.data)
          this.myIssues[this.nowCheckIndex].myDataInfo = issues.data
        }
      } else {
        this.$set(this, 'nowCheckInfo', this.myIssues[0])
      }
    },
    nowCheckAnserIndex () {
      if (this.nowCheckAnserIndex === null) {
        this.nowCheckAnserInfo = null
        return
      }
      this.$set(
        this,
        'nowCheckAnserInfo',
        this.myAnswer[this.nowCheckAnserIndex]
      )
    }
  },

  mixins: [
    /**
     * 数据上报
     */
    dataReportMixin('ONLINE_FAQ')
  ]
}
</script>

<style lang="scss" scoped>
.online-faq {
  height: 100%;
  position: relative;
}
.add-issues-box {
  position: absolute;
  right: 10px;
  top: -6px;
  z-index: 1;
  button {
    border: 1px dashed $--color-primary;
    color: $--color-primary;
  }
}
::v-deep .v-title {
  padding-left: 6px;
  font-size: 15px;
  border-left: 6px solid $--color-primary;
}
.faq-main-flex {
  display: flex;
  height: 100%;
  .main-left {
    width: 250px;
    min-width: 250px;
    border-right: 1px solid #f0f1f3;
    padding: 0 5px;
    overflow-y: auto;
  }
  .main-right {
    flex: 1;
  }
}
.issues-box:hover {
  background-color: $--background-color-base;
}
.issues-box:first-child {
  margin-top: 5px;
}
::v-deep .w-e-toolbar {
  border-radius: 5px 5px 0 0;
}
.issues-box {
  cursor: pointer;
  width: 100%;
  height: 120px;
  border: 1px solid $--color-primary;
  border-radius: 4px;
  padding: 5px;
  margin-bottom: 10px;

  .issues-content {
    height: 85px;
  }
  .issues-content-answer {
    height: 75px;
  }
  .issues-title {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: $--color-primary;
    font-weight: 700;
    padding-bottom: 10px;
  }
  .issues-content-info {
    font-size: 12px;
    color: #c3c3c3;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    letter-spacing: 2px;
  }

  .issues-box-floor {
    display: flex;
    font-size: 12px;
    justify-content: space-between;
    color: $--color-primary;
    .anser-user-name {
      width: 150px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
  .issues-box-floor-answer {
    display: flex;
    justify-content: space-between;
    .anser-user-name {
      width: 50%;
      white-space: unset;
      text-overflow: unset;
    }
    .create-time {
      width: 50%;
    }
  }
}
.issues-box-check {
  // border-width: 3px;
  box-shadow: 0 0 2px 2px $--color-primary;
}
.issues-box-add {
  display: none;
}
.issues-box-reply {
  border-color: #67c23a;
}
::v-deep .el-form-item__label {
  font-weight: 700;
  color: black;
}
::v-deep .el-tabs {
  height: 100%;
  display: flex;
  flex-direction: column;
  .el-tab-pane {
    height: 100%;
    > div {
      height: 100%;
      overflow: auto;
    }
  }
  .el-tabs__content {
    flex: 1;
  }
}

::v-deep .el-tabs--card > .el-tabs__header {
  border: none;
  border-bottom: 1px solid #e4e7ed;
}

::v-deep .el-tabs__nav-scroll {
  border: none;

  .el-tabs__nav {
    // all:unset;
    border: unset;
    border-bottom: 1px solid #e4e7ed;

    .el-tabs__item {
      padding: 0 30px !important;
      border-radius: 4px 4px 0 0 !important;
      border: 0;
      background: #fff;
      color: $--color-primary;

      &.is-active {
        background: $--color-primary;
        color: #fff;
      }
    }
  }
}
</style>
