<script setup lang="ts">
import { ref } from 'vue'
import DialogUe from '../components/DialogUe.vue'
import DialogColorful from '../components/DialogColorful.vue'
import angryPng from '../image/score_angry.png'
import angryPng2 from '../image/angry_2.png'
import sadPng from '../image/score_sad.png'
import sadPng2 from '../image/sad_2.png'
import smilePng from '../image/score_smile.png'
import smilePng2 from '../image/smile_2.png'
import hhhPng from '../image/score_hhh.png'
import hhhPng2 from '../image/hhh_2.png'
import happyPng from '../image/score_happy.png'
import happyPng2 from '../image/happy_2.png'
import normalPng from '../image/score_normal.png'
import submitsucessful from '../image/submit_successful.png'

// 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
  src1: 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(normalPng)
avater.value = [
  {
    src: angryPng,
    src1: angryPng,
    itemsrc: angryPng2,
    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: sadPng,
    src1: sadPng,
    itemsrc: sadPng2,
    itemtext: 'We are so sorry for the inconveniences. We value your experience immensely. ',
    expression: 'sad',
    proposal: 'Could you please tell us which aspects of the system you are dissatisfied with?'
  },
  {
    src: smilePng,
    src1: smilePng,
    itemsrc: smilePng2,
    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: hhhPng,
    src1: hhhPng,
    itemsrc: hhhPng2,
    itemtext: 'Thank you very much for giving us a satisfied rating on our service or system.',
    expression: 'hhh',
    proposal: 'We are curious to learn more about what specifically made you feel satisfied. '
  },
  {
    src: happyPng,
    src1: happyPng,
    itemsrc: happyPng2,
    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 checkexpression = ref()
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') {
      SubmitText.value = 'Apologize once again for your experience.'
      checkexpression.value = 'angry'
      setTimeout(() => {
        isShowAngry.value = true
        angryproposal.value = item.proposal
      }, 1000)
    } else if (item.expression == 'sad') {
      SubmitText.value = 'Apologize once again for your experience.'
      checkexpression.value = 'sad'
      setTimeout(() => {
        isShowAngry.value = true
        angryproposal.value = item.proposal
      }, 1000)
    } else if (item.expression == 'smile') {
      SubmitText.value = 'We greatly appreciate your valuable time and feedback.'
      checkexpression.value = 'smile'
      setTimeout(() => {
        isShowSmile.value = true
        smileproposal.value = item.proposal
      }, 1000)
    } else if (item.expression == 'hhh') {
      SubmitText.value = 'Once again, thank you for your positive evaluation.'
      checkexpression.value = 'hhh'
      setTimeout(() => {
        isShowHappy.value = true
        angryproposal.value = item.proposal
      }, 1000)
    } else if (item.expression == 'happy') {
      SubmitText.value = 'Once again, thank you for your positive evaluation.'
      checkexpression.value = 'happy'
      setTimeout(() => {
        isShowHappy.value = true
        angryproposal.value = item.proposal
      }, 1000)
    }
  }, 1000)
}
const avatarClick = () => {
  visible.value = !visible.value
  isshowDetails.value = true
}
//关闭对话框后，隐藏有动画的对话框
const closeDialog = () => {
  setTimeout(() => {
    isLoaded.value = false
    isLoaded_share.value = false
    isShowAngry.value = false
    isShowHappy.value = false
    isShowSmile.value = false
    isshowexpression_details.value = false
    isshowDetails_submit.value = false
    smileCheckbox.value = {}
    angryCheckbox.value = []
    happyCheckbox.value = []
  }, 1500)
}
//生气表情，选择建议后显示对话
const angryCheckbox = ref([])
const happyCheckbox = ref([])
const smileCheckbox = ref()
const changeAngryDetails = (val: any) => {
  angryCheckbox.value = val
  setTimeout(() => {
    isLoaded_share.value = true
    setTimeout(() => {
      isshowexpression_details.value = true
      setTimeout(() => {
        document.getElementById('moreMerchant').scrollIntoView()
      }, 200)
    }, 1000)
  }, 500)
}
//开心表情，选择建议后显示对话
const changeHappybuttonbox = (val: any) => {
  happyCheckbox.value = val
  setTimeout(() => {
    isLoaded_share.value = true
    setTimeout(() => {
      isshowexpression_details.value = true
      setTimeout(() => {
        document.getElementById('moreMerchant').scrollIntoView()
      }, 200)
    }, 1000)
  }, 500)
}
// smile提交后显示对话
const changeSmileRadio = (val: any) => {
  smileCheckbox.value = val
  if (Object.keys(val).length == 5) {
    setTimeout(() => {
      isLoaded_share.value = true
      setTimeout(() => {
        isshowexpression_details.value = true
        setTimeout(() => {
          document.getElementById('moreMerchant').scrollIntoView()
        }, 200)
      }, 1000)
    }, 500)
  }
}
// 提交details
const submitDetails = (val: any) => {
  if (angryCheckbox.value.length) {
    $api
      .scoringgrade({
        suggestion: angryCheckbox.value,
        proposal: val,
        expression: checkexpression.value
      })
      .then((res: any) => {
        if (res.code == 200) {
          isshowDetails.value = false
          isshowDetails_submit.value = true
          setTimeout(() => {
            isshowDetails_submit.value = false
            dialogVisible.value = false
          }, 3000)
        }
      })
  } else if (happyCheckbox.value.length) {
    $api
      .scoringgrade({
        suggestion: happyCheckbox.value,
        proposal: val,
        expression: checkexpression.value
      })
      .then((res: any) => {
        if (res.code == 200) {
          isshowDetails.value = false
          isshowDetails_submit.value = true
          setTimeout(() => {
            isshowDetails_submit.value = false
            dialogVisible.value = false
          }, 3000)
        }
      })
  } else {
    let obj: any = {}
    obj.Complete_funtionality = smileCheckbox.value['Complete funtionality']
    obj.Accurate_data = smileCheckbox.value['Accurate data']
    obj.Clear_information = smileCheckbox.value['Clear information']
    obj.Easy_to_use = smileCheckbox.value['Easy to use']
    obj.System_Performance = smileCheckbox.value['System Performance']
    $api
      .scoringgrade({
        proposal: val,
        expression: checkexpression.value,
        ...obj
      })
      .then((res: any) => {
        if (res.code == 200) {
          isshowDetails.value = false
          isshowDetails_submit.value = true
          setTimeout(() => {
            isshowDetails_submit.value = false
            dialogVisible.value = false
          }, 3000)
        }
      })
  }
}
const mouseenter = (item: any) => {
  item.src = item.itemsrc
}
const mouseout = (item: any) => {
  item.src = item.src1
}
const SubmitText = ref()
</script>
<template>
  <div class="scoring">
    <el-popover
      :visible="visible"
      placement="left"
      trigger="click"
      :width="367"
      popper-class="popver_class"
    >
      <template #reference>
        <el-avatar @click="avatarClick" :size="46" shape="square" :src="clickSrc" />
      </template>
      <div class="score_flex">
        <el-popover
          placement="top"
          :width="276"
          trigger="hover"
          v-for="(item, index) in avater"
          :key="index"
          popper-class="avater_popver"
          content="How satisfied are you with this system?"
        >
          <template #reference>
            <div class="score">
              <el-avatar
                @mouseenter="mouseenter(item)"
                @mouseout="mouseout(item)"
                @click="showScore(item)"
                :size="40"
                shape="square"
                :src="item.src"
              />
            </div>
          </template>
        </el-popover>
      </div>
    </el-popover>
    <el-dialog
      v-model="dialogVisible"
      title="Hi!"
      :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" id="moreMerchant" 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="submitsucessful" />
        </template>
        <template #sub-title>
          <div class="sub_title_text">{{ SubmitText }}</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;
  box-shadow: -2px 2px 12px rgba(0, 0, 0, 15%);
  z-index: 2013;
  right: 0;
  bottom: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.el-avatar {
  background-color: #fff;
  cursor: pointer;
}
.score_flex {
  display: flex;
  height: 64px;
  align-items: center;
  position: absolute;
  right: 64px;
  top: -30px;
  background-color: white;
  border-radius: 12px 0 0 12px;
}
.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;
  height: 0;
  background: transparent;
  z-index: 2013 !important;
  border: none;
}
.el-dialog.scoreDialog {
  position: absolute;
  margin-bottom: 0;
  right: 0;
  bottom: 60px;
  max-height: 640px;
  overflow-y: scroll;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 1s;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
.sub_title_text {
  color: var(--color-neutral-3);
  font-size: 14px;
  line-height: 21px;
}
.result {
  height: 560px;
  padding: 0;
}
.avater_popver {
  padding-left: 8px !important;
  color: var(--color-neutral-1) !important;
}
</style>
