<template>
  <div class="pa-3 white">
    <m-filter :option="filter" @search="handleSearch" />
    <m-table
      ref="tableRefs"
      class="mt-3"
      :loading="loading"
      :headers="headers"
      :items="items"
      :total="total"
      :page-info="pageInfo"
      :is-tools="false"
      @delete="handleDelete"
      @pageHandleChange="pageHandleChange"
      @sort="handleSort"
    >
      <template #navBtn>
        <v-btn class="buttons" rounded color="primary" @click="handleAddTo()">添加到训练集</v-btn>
      </template>
      <template #actions="{ item }">
        <v-btn color="primary" text @click="handleEdit(item)">编辑</v-btn>
        <v-btn color="primary" text :disabled="item.is_in_training_data" @click="handleAddTo([item.id])">添加到训练集</v-btn>
        <v-btn color="error" text @click="handleDelete(item.id)">删除</v-btn>
      </template>
      <template #is_thumb_up="{ item }">
        <v-chip :color="item.is_thumb_up ? 'success' : 'error'" small>{{ item.is_thumb_up ? '赞同' : '不赞同' }}</v-chip>
      </template>
      <template #is_in_training_data="{ item }">
        <v-chip :color="item.is_in_training_data ? 'success' : 'error'" small>{{ item.is_in_training_data ? '是' : '否' }}</v-chip>
      </template>
      <template #sql="{ item }">
        <Tooltip :text="item.sql" width="300"></Tooltip>
      </template>
      <template #question="{ item }">
        <Tooltip :text="item.question" width="300"></Tooltip>
      </template>
    </m-table>
    <ModelQaEdit ref="modelQaEditRefs"></ModelQaEdit>
  </div>
</template>

<script>
import Tooltip from '@/components/Tooltip'
import MFilter from '@/components/Filter'
import MTable from '@/components/List/table.vue'
import ModelQaEdit from './modelQaEdit.vue'
import {
  getFeedbackList,
  deleteFeedback,
  addFeedbackToTraining
} from '@/api/dataChart'
export default {
  name: 'model-qa',
  components: { MFilter, MTable, ModelQaEdit, Tooltip },
  data () {
    return {
      loading: false,
      filter: {
        list: [
          {
            type: 'autocomplete',
            value: null,
            label: '赞同与否',
            key: 'is_thumb_up',
            items: [
              { label: '赞同', value: true },
              { label: '不赞同', value: false }
            ]
          },
          {
            label: '创建时间',
            type: 'datePicker',
            key: 'create_time',
            value: null,
            dateType: 'date',
            placeholder: '请选择创建时间',
            clearable: true
          }
        ]
      },
      queryData: {},
      headers: [
        { text: '问题', align: 'start', value: 'question' },
        { text: 'sql', align: 'start', value: 'sql' },
        { text: '反馈', align: 'center', value: 'is_thumb_up' },
        { text: '是否已加入训练数据', align: 'center', value: 'is_in_training_data' },
        { text: '创建时间', align: 'start', value: 'create_time' },
        { text: '操作', align: 'start', value: 'actions' }
      ],
      itemData: {},
      items: [],
      orders: [],
      pageInfo: {
        size: 10,
        current: 1
      },
      total: 0
    }
  },
  created () {
    this.init()
  },
  methods: {
    async init () {
      try {
        this.loading = true
        const { data } = await getFeedbackList({
          ...this.queryData,
          page: this.pageInfo.current,
          page_size: this.pageInfo.size
        })
        this.items = data.records
        this.total = data.pagination.total
      } catch (error) {
        this.$snackbar.error(error)
      } finally {
        this.loading = false
      }
    },
    handleSearch (val) {
      Object.assign(this.queryData, val)
      this.pageInfo.current = 1
      this.init()
    },
    async handleEdit (item) {
      this.$refs.modelQaEditRefs.open(item)
    },
    handleAddTo (ids) {
      console.log(ids)
      const feedbackIds = ids ?? this.$refs.tableRefs.ids
      console.log(feedbackIds)
      if (!feedbackIds.length) {
        this.$snackbar.warning('请选择需要添加的数据')
        return
      }
      this.$confirm('提示', '是否添加到训练集').then(async _ => {
        try {
          await addFeedbackToTraining({ feedback_ids: feedbackIds })
          this.$snackbar.success('添加成功')
          this.init()
        } catch (error) {
          this.$snackbar.error('添加失败')
        }
      })
    },
    handleDelete (ids, item) {
      this.$confirm('提示', '是否删除该选项')
        .then(async () => {
          try {
            await deleteFeedback({ id: item.feedback_id })
            this.$snackbar.success('删除成功')
            this.init()
          } catch (error) {
            this.$snackbar.error('删除失败')
          }
        })
    },
    pageHandleChange (page) {
      this.pageInfo.current = page
      this.init()
    },
    handleSort (val) {
      this.orders = val
      this.init()
    },
    handleSubmit () {}
  }
}
</script>

<style lang="scss" scoped>

</style>
