<script setup lang="ts">
import { ref } from 'vue'
import DialogUe from '../components/DialogUe.vue'
import DialogColorful from '../components/DialogColorful.vue'

const isShow = ref(true)
const visible = ref(false)
const isLoaded = ref(false)
const isShowAngry = ref(false)
const isShowHappy = ref(false)
const isShowSmile = ref(false)
const isLoaded_share = ref(false)
const isshowexpression = ref(true)
const isshowexpression_details = ref(false)
const isshowDetails_submit = ref(false)
const isshowDetails = ref(true)
interface AvaterItem {
  src: string
  itemsrc: string
  itemtext: string
  expression: string
  proposal: string
}
const avater = ref<AvaterItem[]>([])
const colorfulSrc = ref()
const dialogcontent = ref()
const angryproposal = ref()
const smileproposal = ref()
const clickSrc = ref('/src/styles/images/score_normal.png')
avater.value = [
  {
    src: '/src/styles/images/score_angry.png',
    itemsrc: '/src/styles/images/angry_2.png',
    itemtext: 'We are so sorry for the inconveniences. We value your experience immensely. ',
    expression: 'angry',
    proposal: 'Could you please tell us which aspects of the system you are dissatisfied with?'
  },
  {
    src: '/src/styles/images/score_sad.png',
    itemsrc: '/src/styles/images/sad_2.png',
    itemtext: 'We are so sorry for the inconveniences. We value your experience immensely. ',
    expression: 'angry',
    proposal: 'Could you please tell us which aspects of the system you are dissatisfied with?'
  },
  {
    src: '/src/styles/images/score_smile.png',
    itemsrc: '/src/styles/images/smile_2.png',
    itemtext: 'Thank you for sharing your thoughts with us. We value your experience greatly.',
    expression: 'smile',
    proposal: 'Could you share what aspects you liked and what could be improved ?'
  },
  {
    src: '/src/styles/images/score_hhh.png',
    itemsrc: '/src/styles/images/hhh_2.png',
    itemtext: 'Thank you very much for giving us a satisfied rating on our service or system.',
    expression: 'happy',
    proposal: 'We are curious to learn more about what specifically made you feel satisfied. '
  },
  {
    src: '/src/styles/images/score_happy.png',
    itemsrc: '/src/styles/images/happy_2.png',
    itemtext: 'Thank you very much for giving us a satisfied rating on our service or system.',
    expression: 'happy',
    proposal: 'We are curious to learn more about what specifically made you feel satisfied. '
  }
]
const dialogVisible = ref(false)

// 控制表情normal的显隐
const showPopver = () => {
  isShow.value = false
}
// 控制popover的显隐
const showScore = (item: any) => {
  visible.value = false
  dialogVisible.value = true
  clickSrc.value = item.itemsrc
  isShow.value = true
  colorfulSrc.value = item.itemsrc
  setTimeout(() => {
    isLoaded.value = true
    dialogcontent.value = item.itemtext
    if (item.expression == 'angry') {
      setTimeout(() => {
        isShowAngry.value = true
        angryproposal.value = item.proposal
      }, 1500)
    } else if (item.expression == 'smile') {
      setTimeout(() => {
        isShowSmile.value = true
        smileproposal.value = item.proposal
      }, 1500)
    } else {
      setTimeout(() => {
        isShowHappy.value = true
        angryproposal.value = item.proposal
      }, 1500)
    }
  }, 1000)
}
const avatarClick = () => {
  visible.value = true
  isshowDetails.value = true
}
//关闭对话框后，隐藏有动画的对话框
const closeDialog = () => {
  isLoaded.value = false
  isLoaded.value = false
  isLoaded_share.value = false
  isShowAngry.value = false
  isShowHappy.value = false
  isshowDetails.value = false
  isShowSmile.value = false
  isshowexpression_details.value = false
}
//生气表情，选择建议后显示对话
const changeAngryDetails = () => {
  setTimeout(() => {
    isLoaded_share.value = true
    setTimeout(() => {
      isshowexpression_details.value = true
    }, 1500)
  }, 1500)
}
//开心表情，选择建议后显示对话
const changeHappybuttonbox = () => {
  setTimeout(() => {
    isLoaded_share.value = true
    setTimeout(() => {
      isshowexpression_details.value = true
    }, 1500)
  }, 1500)
}
// smile提交后显示对话
const changeSmileRadio = (val: any) => {
  if (Object.keys(val).length == 5) {
    changeAngryDetails()
  }
}
// 提交details
const submitDetails = (val: any) => {
  console.log(val)
  isshowDetails_submit.value = true
}
</script>
<template>
  <div class="scoring" :style="[{ display: isShow ? 'flex' : 'none' }]">
    <el-popover
      @show="showPopver"
      :visible="visible"
      placement="left"
      trigger="click"
      :width="367"
      popper-class="popver_class"
    >
      <template #reference>
        <el-avatar
          @click="avatarClick"
          :style="[{ display: isShow ? 'block' : 'none' }]"
          :size="46"
          shape="square"
          :src="clickSrc"
        />
      </template>
      <div class="flex">
        <el-popover
          placement="top"
          :width="260"
          trigger="hover"
          v-for="(item, index) in avater"
          :key="index"
          content="How satisfied are you with this system?"
        >
          <template #reference>
            <div class="score">
              <el-avatar @click="showScore(item)" :size="40" shape="square" :src="item.src" />
            </div>
          </template>
        </el-popover>
      </div>
    </el-popover>
    <el-dialog
      v-model="dialogVisible"
      title="Hi,Caroline!"
      :destroy-on-close="true"
      @close="closeDialog"
      width="640"
      :modal="false"
      top="0"
      class="scoreDialog"
      custom-class="my-dialog"
      :close-on-click-modal="false"
    >
      <div v-if="isshowDetails">
        <DialogUe content="How satisfied are you with this system ?" dialogWidth="298px"></DialogUe>
        <DialogColorful
          :colorfulSrc="colorfulSrc"
          :isshowexpression="isshowexpression"
        ></DialogColorful>
        <transition name="fade">
          <DialogUe v-if="isLoaded" :content="dialogcontent" dialogWidth="573px"></DialogUe>
        </transition>
        <transition name="fade" v-if="isShowAngry">
          <DialogUe
            :content="angryproposal"
            :isShowAngry="isShowAngry"
            @changeAngryDetails="changeAngryDetails"
            dialogWidth="573px"
          ></DialogUe>
        </transition>
        <transition name="fade" v-if="isShowHappy">
          <DialogUe
            :content="angryproposal"
            :isShowHappy="isShowHappy"
            @changeHappybuttonbox="changeHappybuttonbox"
            dialogWidth="573px"
          ></DialogUe>
        </transition>
        <transition name="fade" v-if="isShowSmile">
          <DialogUe
            :isShowSmile="isShowSmile"
            @changeSmileRadio="changeSmileRadio"
            :content="smileproposal"
            dialogWidth="573px"
          ></DialogUe>
        </transition>
        <transition name="fade" v-if="isLoaded_share">
          <DialogUe
            content="Would you like to share more details with us?"
            dialogWidth="334px"
          ></DialogUe>
        </transition>
        <transition name="fade" v-if="isshowexpression_details">
          <DialogColorful
            :isshowDetails="isshowexpression_details"
            @submitDetails="submitDetails"
          ></DialogColorful>
        </transition>
      </div>
      <el-result
        class="result"
        v-if="isshowDetails_submit"
        icon="success"
        title="Submit Successful"
      >
        <template #icon>
          <el-image src="/src/styles/images/submit_successful.png" />
        </template>
        <template #sub-title>
          <div class="sub_title_text">Apologize once again for your experience.</div>
          <div class="sub_title_text">
            We are committed to working hard to provide better services.
          </div>
        </template>
      </el-result>
    </el-dialog>
  </div>
</template>

<style lang="scss">
.scoring {
  width: 64px;
  height: 64px;
  border-radius: 12px 0 0 12px;
  background-color: #fff;
  position: absolute;
  z-index: 2013;
  right: 0;
  bottom: 168px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.el-avatar {
  background-color: #fff;
  cursor: pointer;
}
.flex {
  display: flex;
  height: 64px;
  align-items: center;
}
.score {
  margin: 0 16px;
}
.el-popover.popver_class {
  border-radius: 12px 0 0 12px !important;
  box-shadow: none;
  filter: drop-shadow(-2px 2px 12px rgba(0, 0, 0, 0.15));
  right: 0 !important;
}
.el-dialog.scoreDialog {
  position: absolute;
  margin-bottom: 0;
  right: 0;
  bottom: 168px;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 3s;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
.sub_title_text {
  color: var(--color-neutral-3);
}
.result {
  height: 578px;
}
</style>