<script>
import AiDrag from "./AiDrag.vue";

export default {
  name: "AiAssist",
  components: {AiDrag},
  data() {
    return {
      dialog: false,
      prompt: ""
    }
  }
}
</script>

<template>
  <section class="AiAssist">
    <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">
      <dv-border-box-1 background-color="#001C30">
        <div class="inbox">
          <div>慧智会言</div>
          <el-input v-model="prompt" placeholder="您说,我在听~" clearable size="small">
            <template #append><i class="el-icon-microphone">语音输入</i></template>
          </el-input>
        </div>
      </dv-border-box-1>
    </ai-drag>
  </section>
</template>

<style scoped lang="scss">
.AiAssist {
  .avatar-text {
    text-align: center;
    color: white;
  }

  :deep(.assistDialog) {
    .border-box-content {
      padding: 8px 10px;
      width: initial;
    }

    .inbox {
      min-width: 400px;
      box-shadow: 4px 4px 10px #23ECFD inset, -4px -4px 10px #23ECFD inset;
      height: 100%;
      $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);
    }
  }
}
</style>
