<template>
  <div class="w-100 h-100" :style="listStyle" ref="listBox" v-show="props.show" :class="'vivify '+ styleClass">
    <el-row class="w-100">
      <el-col :span="23" class="kf-input">
        <el-autocomplete
            v-model="search"
            :fetch-suggestions="querySearch"
            @select="handleSelect"
            class="w-100"
        >
          <template #default="{ item }">
            <div class="value">{{ item.value }} {{ item.desc }}</div>
          </template>
        </el-autocomplete>
      </el-col>
      <el-col :span="1" style="padding-left: 5px;">
        <el-button @click="queryChart">查询</el-button>
      </el-col>
    </el-row>
    <el-row class="w-100">
      <el-col :span="16">
        <img :src="chart" class="w-100 h-100" style="object-fit: none" v-if="chart != '' && type !== 'metric'"/>
        <div v-if="type === 'metric'" class="w-100 h-100" style="text-align: center;">
          <div class="w-100" style="font-size: 32px; color: white; margin: 40px;">{{metric.title}}</div>
          <div class="w-100" style="font-size: 64px; color: green; margin: 40px;">{{metric.data}}</div>
        </div>
      </el-col>
      <el-col :span="8">
        <el-input v-model="explain" type="textarea" rows="30" style="margin: 25px;"></el-input>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="jsx">
import { computed, getCurrentInstance, onMounted, ref, watch, onUnmounted } from 'vue'
import styleManager from '../utils/style.vue'
import eventManager from '../utils/event'
import pageModel from '../model/page'
import globalEvent from '@/utils/globalEvent'
import aiManager from '../utils/ai'

export default {
  name: 'kfAiChart',
  props: {
    props: {
      type: Object,
      default: () => {
      }
    },
    eventList: {
      type: Array,
      default: () => []
    },
    eventScript: {
      type: String
    }
  },
  widgetConfig: {
    parent: 'base',
    rank: 1,
    label: {
      zh: '智能图表'
    },
    category: '业务',
    component: 'kfAiChart',
    display: false,
    version: 1,
    icon: 'icon-anniu',
    defaultSize: {
      x: 800,
      y: 600
    },
    imgName: 'kfCard'
  },
  setup (props) {
    let container = ref(null)
    let listStyle = ref({})
    const { proxy } = getCurrentInstance()
    let defaultHandler = ref({})
    let styleClass = ref('')

    onMounted(() => {
      aiManager.init();
      refreshEvents()
      listStyle.value = styleManager.updateStyle(proxy)
      styleClass.value = styleManager.updateClass(proxy)
    })

    const refreshEvents = function (firstTime = false) {
      eventManager.registerEvent(proxy, () => {
      })
    }

    pageModel.watchProps(props, watch, proxy, (changes) => {
      if (styleManager.styleChanged('kfAiChart', changes)) {
        listStyle.value = styleManager.updateStyle(proxy)
      }
      if (styleManager.classChanged('kfAiChart', changes)) {
        styleClass.value = styleManager.updateClass(proxy)
      }
    })

    const eventHandler = computed(() => {
      return eventManager.loadEventHandler(defaultHandler, undefined, props.props.pageName)
    })

    const queryChart = function () {
      aiManager.query(search.value, 'Jinni').then(res => {
        if (res && res.data) {
          type.value = res.data.type
          if (res.data.type === 'metric') {
            if (res.data.data.metrics.length === 2) {
              metric.value = { title: res.data.data.metrics[0].value, data: res.data.data.metrics[1].value }
            } else {
              metric.value = { title: res.data.data.metrics[0].name, data: res.data.data.metrics[0].value }
            }
          } else {
            chart.value = 'data:image/png;base64,' + res.data.data.image
          }
          aiManager.insight(search.value, 'Jinni').then(res => {
            if (res && res.data) {
              explain.value = res.data.text
              let content = res.data.text.replaceAll('*', '')
              globalEvent.issueEvent('/ai_talk', { content: content })
            } else {
              explain.value = '无法获取相关数据解释信息'
            }
          })
        } else {
          explain.value = res.errmsg || '无法查询到相关数据'
        }
      })
    }

    const querySearch = function (queryString, cb) {
      aiManager.getAutoCompleteData(queryString).then(res => {
        if (res && res.data) {
          let result = res.data.map(item => {
            return { value: queryString + item.token.word, desc: item.token.prop }
          })
          cb(result)
        }
      })
    }

    const handleSelect = function (item) {
      //search.value = item.value
    }

    const chart = ref('')

    const type = ref('')

    const metric = ref({  })

    const search = ref('')

    const explain = ref('')

    onUnmounted(() => {
    })

    return {
      container,
      listStyle,
      styleClass,
      defaultHandler,
      eventHandler,
      queryChart, chart, search, explain, type, metric, querySearch, handleSelect
    }
  }
}
</script>

<style lang="scss">
.kf-input{
  .el-autocomplete{
    width: 100%;
    .el-input{
      .el-input__wrapper{
        width: 100%;
        background: transparent;
        border:none;
        outline: none;
        .el-input__inner{
          width: 100%;
          outline: none;
          background: transparent;
          box-shadow: none;
          border: none;
        }
      }
      .el-input__wrapper.is-focus{
        box-shadow: 0 0 0 1px #424243 inset;;
      }
    }
  }
}
</style>