<!--  -->
<template>
  <div class="FAQ-info">
    <div class="issues-info-box">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="问题名称：" prop="name">
          <el-input
            v-model="ruleForm.title"
            placeholder="请输入问题名称"
            style="width: 300px"
          ></el-input>
        </el-form-item>
        <el-form-item label="问题描述：" prop="content">
          <el-input
            type="textarea"
            placeholder="请输入问题描述"
            v-model="ruleForm.content"
          ></el-input>
        </el-form-item>
        <el-form-item label="解答人：" prop="content">
          <el-tag
            v-for="(answer, index) in nowSelectUser"
            :key="index"
            type="success"
            class="user-tag"
            closable
            @close="deleteUser(answer)"
            >{{ answer.name }}</el-tag
          >
          <el-select
            class="self-select"
            id="self-select"
            v-model="nowSelectUser"
            @change="selectChange"
            :loading="getUserLoading"
            :multiple="true"
            value-key="id"
          >
            <el-option-group
              v-for="group in teachAndStudent"
              :key="group.label"
              :label="group.label"
            >
              <el-option
                v-for="item in group.options"
                :key="item.id"
                :label="item.name"
                :value="item"
              >
              </el-option>
            </el-option-group>
          </el-select>
        </el-form-item>
      </el-form>
      <div class="send-issues-button">
        <el-button type="primary" round> {{'发送问题'}} </el-button>
      </div>
    </div>
    <h2
      class="v-title"
      v-if="ruleForm.answer && ruleForm.answer.length > 0"
      style="margin-left: 15px"
    >
      问题解答详情
    </h2>
    <div
      class="issues-answer-box"
      v-if="ruleForm.answer && ruleForm.answer.length > 0"
    >
      <div
        class="answer-info-box"
        v-for="(anser, index) in ruleForm.answer"
        :key="anser.id"
      >
        <span class="answer-info-title">解答{{ index + 1 }}：</span>
        <div class="answer-info">
          <div class="answer-info-text">
            <strong class="answer-info-username"
              >/{{ anser.answer_person.name }}/： </strong
            >{{ anser.content }}
          </div>
          <div class="reply-time">
            最后解答日期：{{ new Date(anser.updateTime).format("yyyy-MM-dd") }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import { findAllTeacherApi } from '@/api/system/user'
import { deepClone } from '../utils'
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
export default {
  props: {
    nowCheckInfo: {
      type: Object,
      default: () => {}
    }
  },
  // import引入的组件需要注入到对象中才能使用
  data () {
    // 这里存放数据
    return {
      rules: {
        name: [
          { required: true, message: '请输入问题名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ]
      },
      ruleForm: {},
      isShowAddPersion: false,
      teachAndStudent: [
        {
          label: '老师',
          options: [
            {
              ID: '1',
              label: '上海'
            },
            {
              value: 'Beijing',
              label: '北京'
            }
          ]
        },
        {
          label: '学生',
          options: [
            {
              id: 'fe34d4c9-0cc4-46c7-b165-439d1d5ea448',
              name: '路翔宇'
            },
            {
              id: '737a19eb-2079-4127-bddc-3ad1b0caf9ab',
              name: '王'
            }
          ]
        }
      ],
      getUserLoading: [],
      nowSelectUser: [],
      baseSelectUser: [],
      delOnceHaveUser: []
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {
    nowCheckInfo () {
      this.nowSelectUser = []
      this.baseSelectUser = [
      ]
      this.delOnceHaveUser = []

      this.ruleForm = deepClone(this.nowCheckInfo)
      this.nowSelectUser = this.ruleForm.answer
        ? this.ruleForm.answer.map((item) => {
          return {
            id: item.answer_person.id,
            name: item.answer_person.name
          }
        })
        : []

      this.baseSelectUser = deepClone(this.nowSelectUser)
    }
  },
  // 方法集合
  methods: {
    deleteUser (info) {

    },
    async addAnswerPersion () {
      this.teachAndStudent = [{}, {
        label: '学生',
        options: [
          {
            id: 'fe34d4c9-0cc4-46c7-b165-439d1d5ea448',
            name: '路翔宇'
          },
          {
            id: '737a19eb-2079-4127-bddc-3ad1b0caf9ab',
            name: '王'
          }
        ]
      }]
      this.isShowAddPersion = true
      this.getUserLoading = true
      const { data } = await findAllTeacherApi()
      const allUser = [...data]
      allUser.forEach((user) => {
        if (
          this.nowSelectUser[user.id] ||
          user.id === '99694d3a-0b37-451e-8eb5-de0463ff8154'
        ) {
          user.answerId = this.nowSelectUser[user.id]?.answerId || 132
        }
      })

      this.teachAndStudent.splice(0, 1, {
        label: '老师',
        options: data
      })

      this.getUserLoading = false
    },
    selectChange (e, x) {
      const nowSel = {}
      this.nowSelectUser.forEach((item) => {
        nowSel[item.id] = { ...item }
      })
      for (let k = 0; k < this.baseSelectUser.length; k++) {
        if (!nowSel[this.baseSelectUser[k].id]) {
          this.delOnceHaveUser.push(this.baseSelectUser[k])
          this.baseSelectUser.splice(k, 1)
          k--
        }
      }
      for (let k = 0; k < this.delOnceHaveUser.length; k++) {
        if (nowSel[this.delOnceHaveUser[k].id]) {
          this.baseSelectUser.push(this.delOnceHaveUser[k])
          this.delOnceHaveUser.splice(k, 1)
          k--
        }
      }

      return false
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    const selfSelect = document.getElementsByClassName('self-select')[0]
    selfSelect.addEventListener('click', () => {
      this.addAnswerPersion()
    })
  },
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeUnmount () {}, // 生命周期 - 销毁之前
  unmounted () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
.issues-answer-box {
  padding-left: 10px;
}
.add-answe-persion-button {
  border: 1px dashed $--color-primary;
  color: $--color-primary;
}
.send-issues-button {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
.user-tag {
  margin-right: 10px;
}
::v-deep .el-form-item__content {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  .self-select {
    .el-select__tags {
      display: none;
    }
    .el-input {
      cursor: pointer;
      width: 130px;
      height: 35px;
      border-radius: 4px;
      border: 1px dashed $--color-primary;
      color: $--color-primary;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .el-input::before {
      content: "";
      font-family: "element-icons" !important;
      font-size: 15px;
      font-weight: 700;
      padding-right: 5px;
    }
    .el-input::after {
      content: "添加解答人";
      font-size: 13px;
      display: block;
    }
    input {
      display: none;
    }
    .el-input__suffix {
      display: none;
    }
  }
}

.answer-info-box {
  display: flex;
  padding: 15px 0;

  .answer-info-title {
    width: 100px;
    text-align: right;
    font-size: 14px;
    font-weight: 700;
  }
  .answer-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    border: 1px solid #999999;
    height: 150px;
    border-radius: 4px;
    overflow-y: auto;
    padding: 5px;
    position: relative;

    .answer-info-username {
      color: $--color-primary;
      font-size: 14px;
      font-weight: 700;
    }
    .answer-info-text {
      flex: 1;
      overflow-y: auto;
    }
  }
  .reply-time {
    width: 100%;
    text-align: right;
    padding: 3px 0;
    color: $--color-primary;
    font-size: 12px;
  }
}
</style>
