<template>
  <a-card
    class="question-history"
    id="question-history"
    size="small"
    :bordered="false"
    :bodyStyle="{ height:'100%', overflowY: 'auto'}">
    <a-tabs v-model="activeKey" :tabBarStyle="{ textAlign: 'center',height:'100%' }" tabPosition="top">
      <a-tab-pane key="1" tab="会话历史">
        <a-button type="dashed" block style="font-size: 20px; height: 50px" @click="createData.showCreateDialog = true">
          <a-icon type="plus" />
          新建会话
        </a-button>
        <a-list item-layout="horizontal" :data-source="questions">
          <a-list-item
            slot="renderItem"
            :class="renderItem.key === currentKey ? 'question-history-active' : 'question-history-inactive'"
            slot-scope="renderItem,index"
            @click="handleOpenFavorite(renderItem)">
            <a-list-item-meta
              :title="renderItem.title"
              :description="renderItem.date"
            />
            <a-space>
              <a-tooltip title="删除对话">
                <a-icon
                  type="delete"
                  theme="filled"
                  class="delClass"
                  @click.stop="delQuestion(renderItem,index)"/>
              </a-tooltip>
            </a-space>
          </a-list-item>
        </a-list>
      </a-tab-pane>
    </a-tabs>
    <a-modal
      title="新建会话"
      :visible="createData.showCreateDialog"
      @ok="createDialogOk"
      @cancel="createDialogCancel">
      <a-form-model
        ref="createForm"
        :model="createData.form"
        :rules="createData.rules"
        :label-col="createData.labelCol"
        :wrapper-col="createData.wrapperCol">
        <a-form-model-item label="会话名称" prop="dialogName">
          <a-input v-model="createData.form.dialogName" placeholder="请输入会话名称"/>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </a-card>
</template>

<script>
import { indexedDB } from '@vue2-client/utils/indexedDB'

export default {
  props: {
    currentKey: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      activeKey: '1',
      questions: [], // 你的问题历史
      item: {},
      //  新建会话窗口
      createData: {
        showCreateDialog: false,
        form: {
          dialogName: undefined
        },
        rules: {
          dialogName: [
            { required: true, message: '请输入会话名称', trigger: 'blur' }
          ],
        },
        labelCol: { span: 4 },
        wrapperCol: { span: 14 }
      }
    }
  },
  mounted () {
    this.loadData()
  },
  methods: {
    //  新建会话
    createDialogOk () {
      this.$refs.createForm.validate((val) => {
        if (val) {
          const randomStr = Math.random().toString(36).substring(2, 6)
          const name = 'newQuestion-' + this.createData.form.dialogName + '-' + randomStr
          indexedDB.add(name, { title: this.createData.form.dialogName, questionList: [], key: name })
          this.$refs.createForm.resetFields()
          this.createData.showCreateDialog = false
          this.$emit('afterCreateDialog')
        }
      })
    },
    //  新建会话关闭
    createDialogCancel () {
      this.$refs.createForm.resetFields()
      this.createData.showCreateDialog = false
    },
    //  加载indexedDB数据库中的数据
    loadData () {
      indexedDB.getAll((data) => {
        const questions = []
        for (const datum of data) {
          if (datum.key.includes('newQuestion')) {
            questions.push(datum.data)
          }
        }
        this.questions = questions
        }
      )
    },
    //  点击单个对话触发
    handleOpenFavorite (item) {
      this.$emit('handleOpenFavorite', item)
    },
    //  删除会话
    delQuestion (item, index) {
      console.log('item', item)
      console.log('index', index)
      // 删除对话历史
      const that = this
      this.$confirm({
        title: '提醒',
        content: h => <div style="color:red;">确认删除该会话吗？</div>,
        onOk () {
          indexedDB.delete(item.key)
          that.loadData()
          if (that.currentKey === item.key) {
            that.$emit('afterDelDialog', item)
          }
          that.$message.success('删除成功')
        },
        onCancel () {
        },
        class: 'test',
      })
    },
  }
}
</script>

<style scoped lang="less">

#question-history {

  margin-right: 10px;
  height: 100%;
  border-radius: 8px;

  .question-history-active-bug {
    border-left: 4px solid #FF0036;
    border-radius: 4px;
    padding: 18px 18px 18px 14px;
    background-color: rgba(#ff0000, 0.04);
  }

  .question-history-active {
    border-left: 4px solid #1890FF;
    border-radius: 4px;
    padding: 18px 18px 18px 14px;
  }

  .question-history-inactive-bug {
    border-radius: 4px;
    padding: 18px;
    background-color: rgba(#ff0000, 0.04);
  }

  .question-history-inactive {
    border-radius: 4px;
    padding: 18px;
  }

  .ant-list-item-meta /deep/ {
    width: 60%;
  }

  .ant-list-item-meta-content /deep/ {
    width: 98%;
  }

  .ant-list-item-meta-title /deep/ {
    width: 90%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .ant-card {
    height: 100%;
    overflow-y: auto;
  }

  .startActive {
    color: #FFD700;
    font-size: 1rem;
  }

  .startInactive {
    font-size: 1rem;
  }

  .delClass {
    font-size: 1rem;
    color: #777;
  }

  .reSearch {
    font-size: 1rem;
    color: #1890FF;
  }

  .reSearch:hover {
    animation: rotate 0.5s ease-in-out both;
  }

  @keyframes rotate {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(180deg);
    }
  }

  .startActive, .startInactive, .reSearch {
    transition: transform 0.1s;
  }

  .startActive:hover, .startInactive:hover {
    animation: shake 0.5s ease-in-out both;
  }

  @keyframes shake {
    0% {
      transform: rotate(0deg);
    }
    25% {
      transform: rotate(-20deg);
    }
    50% {
      transform: rotate(0deg);
    }
    75% {
      transform: rotate(20deg);
    }
    100% {
      transform: rotate(0deg);
    }
  }

  .pullQuestion {
    width: 100%;
    margin-bottom: 10px;
  }

  .evaluation {

  }

  .mgtop-20 {
    margin-top: 20px;
  }

  .questionItemDivider {
    position: absolute;
    top: -25px
  }

  .questionItem {
    position: relative;
  }
}

.scroller {
  height: 100%;
  overflow-y: auto;
}
</style>
