<script>
import AiDrag from "./AiDrag.vue";
import {Loading} from "element-ui";
import AiDvSvg from "./layout/AiDvSvg/AiDvSvg.vue";
import AiEchart from "dui/packages/tools/AiEchart.vue";

export default {
  name: "AiAssist",
  components: {AiEchart, AiDvSvg, AiDrag},
  data() {
    return {
      dialog: false,
      prompt: "",
      content: "",
      assistPos: {},
      reply: {
        table: [
          {address: "张家堡街道", count: 132, handle: 132},
          {address: "徐家湾街道", count: 125, handle: 225},
          {address: "未央湖街道", count: 157, handle: 572},
          {address: "辛家庙街道", count: 142, handle: 422},
          {address: "六村堡街道", count: 233, handle: 453},
        ],
        chart: {
          ops: {
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            color: '#00EFFF',
            yAxis: {
              type: 'category',
              axisLine: {
                show: true,
                lineStyle: {
                  color: 'rgba(179, 223, 255, 0.5)',
                  width: 1
                }
              },
              axisLabel: {
                color: '#8FABBF',
              },
              axisTick: {
                alignWithLabel: true,
                show: false
              },
              data: ['贷款', '诈骗', '失火', '消防', '醉酒']
            },
            xAxis: {
              type: 'value',
              axisLabel: {
                color: '#8FABBF',
                interval: 0
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: 'rgba(61, 82, 102, 0.65)',
                  width: 1,
                  type: 'dashed'
                }
              }
            },
            grid: {
              left: '4%',
              right: '1%',
              bottom:0,
              top: 0,
              containLabel: true
            },
            series: [
              {
                data: [919, 1210, 9794, 3559, 743],
                type: 'bar',
                barWidth: '25%',
                itemStyle: {
                  color: {
                    type: 'linear', x: 1, y: 0, x2: 0, y2: 0, colorStops: [
                      {offset: 0, color: '#02FEFF'},
                      {offset: 1, color: '#00527d1c'}
                    ]
                  }
                },
                backgroundStyle: {
                  color: '#00527d1c'
                }
              }
            ]
          }
        }
      }
    }
  },
  computed: {
    isAiResult: v => v.content == "您好!一下是这个月敏感词触发情况概览:"
  },
  methods: {
    confirm() {
      const loading = Loading.service({fullscreen: true, text: "助手回复中...", background: "rgba(0, 0, 0, 0.2)"});
      if (/(网格建设|居民报事|居民档案|两委干部|敏感词)/.test(this.prompt)) {
        setTimeout(() => {
          loading.close()
          this.content = "您好!一下是这个月敏感词触发情况概览:"
        }, 3000)
      } else {
        this.content = "抱歉，我还没有学习到关于这个话题的内容，无法提供相关信息。您可以选择其他问题，我将努力为您解答。"
        loading.close()
        // this.dialog = false
      }
      this.prompt = ""
    },
  },
  watch: {
    dialog(v) {
      document.body.onclick = v ? () => this.dialog = false : null
      if (!v) {
        this.content = ""
      }
    }
  },
  mounted() {
    const {x, y} = this.$el.getBoundingClientRect()
    this.assistPos = {left: `calc(50vw - ${x}px)`, top: `calc(50vh - ${y}px)`}
  }
}
</script>

<template>
  <section class="AiAssist" @click.stop>
    <div class="pointer" @click="dialog=true">
      <img src="https://cdn.cunwuyun.cn/dvcp/dv/aiIcon.png"/>
      <div class="avatar-text" v-text="'全局AI助手'"/>
    </div>
    <ai-drag class="assistDialog" v-if="dialog" :resizable="false">
      <div class="inbox" :style="assistPos">
        <dv-border-box-1 v-if="!content" background-color="#001C30">
          <div class="title mar-b32 mar-t16">慧智会言</div>
          <el-input v-model="prompt" placeholder="您说,我在听~" clearable size="small">
            <template #append><i class="el-icon-microphone">语音输入</i></template>
          </el-input>
          <div class="flex center gap-8 mar-t56">
            <div class="btn" @click="dialog=false">取消</div>
            <div class="btn" @click="confirm">确定</div>
          </div>
        </dv-border-box-1>
        <ai-dv-svg v-else class="reply" @close="dialog=false">
          <div class="w100" v-html="content"/>
          <template v-if="isAiResult">
            <div class="glass flex mar-v8">
              <div class="sta fill">网格员总人数<span>5118</span>
                <p>人</p></div>
              <div class="sta">网格划分<span>3118</span>
                <p>个</p></div>
            </div>
            <h2>敏感词处理情况</h2>
            <el-table size="mini" :data="reply.table" stripe class="w100 mar-v8">
              <el-table-column prop="address" label="地方"/>
              <el-table-column prop="count" label="触发次数" width="100" align="right"/>
              <el-table-column prop="handle" label="已处理" width="100" align="right"/>
            </el-table>
            <h2>敏感词触发统计</h2>
            <ai-echart v-bind="reply.chart" class="mar-v8" id="KeywordChart"/>
            <div class="flex column">
              <div class="btn">导出到本地</div>
            </div>
          </template>
        </ai-dv-svg>
      </div>
    </ai-drag>
  </section>
</template>

<style scoped lang="scss">
$theme-color: #23ECFD;
.AiAssist {
  color: white;
  font-size: 14px;

  .avatar-text {
    text-align: center;
    color: white;
  }

  :deep(.assistDialog) {
    .border-box-content {
      padding: 16px 28px;
      position: relative;
      $gap-v: 6px;
      $gap-h: 8px;

      &:after {
        position: absolute;
        left: $gap-h;
        right: $gap-h;
        top: $gap-v;
        bottom: $gap-v;
        content: " ";
        box-shadow: 4px 4px 10px $theme-color inset, -4px -4px 10px $theme-color inset;
        $v: 14px;
        $vv: calc(100% - #{$v});
        clip-path: polygon($v 0, $vv 0, 100% $v, 100% $vv, $vv 100%, $v 100%, 0 $vv, 0 $v);
        pointer-events: none;
      }
    }

    .inbox {
      width: 400px;
      height: 230px;
      position: fixed;
      transform: translate(-50%, -50%);

      .title {
        text-align: center;
        font-size: 14px;
        background-image: url("https://cdn.cunwuyun.cn/dvcp/dv/weiyang/titleBg.png");
        background-repeat: no-repeat;
        background-position: center bottom;
      }

      .el-input {
        input {
          background: transparent;
          border-color: $theme-color;
          color: white;

          &::placeholder {
            color: #B3DAE5;
          }
        }

        .el-input-group__append {
          user-select: none;
          color: white;
          background: $theme-color;
          border-color: $theme-color;
        }
      }
    }

    .reply {
      font-size: 14px;

      .glass {
        width: 100%;
        padding: 18px 14px;
        background: hsla(0, 0%, 100%, .04);
      }

      .sta {
        display: flex;
        align-items: baseline;
        gap: 4px;
        font-size: 12px;

        span {
          font-family: D-DIN;
          font-size: 18px;
          color: $theme-color;
        }

        p {
          color: $theme-color;
        }
      }

      h2 {
        font-size: 14px;
        height: 30px;
        line-height: 30px;
        padding: 0px 10px;
        background-image: linear-gradient(270deg, rgba(31, 67, 102, 0), rgba(31, 78, 102, 0.4));
      }

      .el-table {
        font-size: 13px;
        color: #fff;
        background-color: transparent !important;

        .el-table__header {
          background: rgba(33, 180, 253, 0.1);
        }

        &::before {
          display: none !important;
        }

        tr.el-table__row--striped td {
          background: rgba(33, 180, 253, 0.1) !important;
        }

        .el-table th.el-table__cell {
          background: transparent !important;
        }

        .el-table__header tr th:first-child .cell {
          padding-left: 20px !important;
        }

        .el-table__header tr th.is-right .cell {
          padding-right: 20px !important;
        }

        .el-table__body tr td.is-right .cell {
          padding-right: 20px !important;
        }

        .el-table__body tr td:first-child .cell {
          padding-left: 20px !important;
        }

        &.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
          background-color: rgba(33, 180, 253, 0.1) !important;
        }

        td.el-table__cell, th.el-table__cell.is-leaf {
          border-bottom: none !important;
        }

        th.el-table__cell {
          background-color: transparent !important;
        }

        tr {
          background-color: transparent !important;
        }

        .el-table__cell {
          padding: 7px 0;
          color: #d0e1e8;
        }

        .el-table__header tr .cell {
          color: #02FEFF !important;
        }
      }

      #KeywordChart {
        width: 100%;
        height: 180px;
      }
    }
  }

  .btn {
    background-image: linear-gradient(180deg, #5ac8f666 0%, #01336566 84%);
    box-shadow: inset 0 2px 8px 0 #33bbff80;
    border-radius: 4px;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
    padding: 0 16px;
  }
}
</style>
