<script setup lang="ts">
import { ref } from '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 submitsucessful from '../image/submit_successful.png'
const dialogVisible = ref(false)
const innerVisible = ref(false)
const isShowAngry = ref(false)
const isShowSmile = ref(false)
const isShowHappy = ref(false)
const isshowDetails_submit = ref(false)
const buttonDisabled = ref(true)
const isshowDetails = ref(true)
const isShowScoring = ref(true)
const SubmitText = ref()
interface AvaterItem {
  src: string
  src1: string
  itemsrc: string
  itemtext: string
  expression: string
  proposal: string
  itemtitle: string
  changecolortext: boolean
}
const avater = ref<AvaterItem[]>([])
const inputdetails = ref('')
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?',
    itemtitle: 'Highly dissatisfied',
    changecolortext: false
  },
  {
    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?',
    itemtitle: 'Dissatisfied',
    changecolortext: false
  },
  {
    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 ?',
    itemtitle: 'Neutral',
    changecolortext: false
  },
  {
    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. ',
    itemtitle: 'Satisfied',
    changecolortext: false
  },
  {
    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. ',
    itemtitle: 'Highly satisfied',
    changecolortext: false
  }
]
const checkboxGroup1 = ref([])
const checkboxGroup2 = ref([])
const evaluate = [
  'Functionality',
  'Data accuracy',
  'Look and feel',
  'Ease of use',
  'Website performance'
]
const happyevaluate = [
  'Functionality',
  'Data accuracy',
  'Look and feel',
  'Ease of use',
  'Website performance'
]
const Aspects = ref([
  'Highly Dissatisfied',
  'Dissatisfied',
  'Neutral',
  'Satisfied',
  'Highly Satisfied'
])
interface smileAspectsItem {
  title: string
  proposal: Array<string>
  radio: string
}
const smileAspects = ref<smileAspectsItem[]>([])
smileAspects.value = [
  {
    title: 'Functionality',
    proposal: ['Highly Dissatisfied', 'Dissatisfied', 'Neutral', 'Satisfied', 'Highly Satisfied'],
    radio: ''
  },
  {
    title: 'Data accuracy',
    proposal: ['Highly Dissatisfied', 'Dissatisfied', 'Neutral', 'Satisfied', 'Highly Satisfied'],
    radio: ''
  },
  {
    title: 'Look and feel',
    proposal: ['Highly Dissatisfied', 'Dissatisfied', 'Neutral', 'Satisfied', 'Highly Satisfied'],
    radio: ''
  },
  {
    title: 'Ease of use',
    proposal: ['Highly Dissatisfied', 'Dissatisfied', 'Neutral', 'Satisfied', 'Highly Satisfied'],
    radio: ''
  },
  {
    title: 'Website performance',
    proposal: ['Highly Dissatisfied', 'Dissatisfied', 'Neutral', 'Satisfied', 'Highly Satisfied'],
    radio: ''
  }
]
const closeDialog = () => {
  isShowAngry.value = false
  innerVisible.value = false
  dialogVisible.value = false
  isShowHappy.value = false
  isShowSmile.value = false
  isshowDetails_submit.value = false
  isshowDetails.value = true
  smilecheckbox.value = {}
  checkboxGroup1.value = []
  checkboxGroup2.value = []
  smileAspects.value.forEach((item: any) => {
    item.radio = ''
  })
  buttonDisabled.value = true
  inputdetails.value = ''
}
const mouseenter = (item: any) => {
  item.src = item.itemsrc
  item.changecolortext = true
}
const mouseout = (item: any) => {
  item.src = item.src1
  item.changecolortext = false
}
const InnerTitle = ref()
const InnerTileQues = ref()
const checkexpression = ref()
const OpenScoring = (item: any) => {
  dialogVisible.value = false
  innerVisible.value = true
  InnerTitle.value = item.itemtext
  InnerTileQues.value = item.proposal
  if (item.expression == 'angry') {
    SubmitText.value = 'Apologize once again for your experience.'
    checkexpression.value = 'angry'
    isShowAngry.value = true
  } else if (item.expression == 'sad') {
    SubmitText.value = 'Apologize once again for your experience.'
    checkexpression.value = 'sad'
    isShowAngry.value = true
  } else if (item.expression == 'smile') {
    SubmitText.value = 'We greatly appreciate your valuable time and feedback.'
    checkexpression.value = 'smile'
    isShowSmile.value = true
  } else if (item.expression == 'hhh') {
    SubmitText.value = 'Once again, thank you for your positive evaluation.'
    checkexpression.value = 'hhh'
    isShowHappy.value = true
  } else if (item.expression == 'happy') {
    SubmitText.value = 'Once again, thank you for your positive evaluation.'
    checkexpression.value = 'happy'
    isShowHappy.value = true
  }
}
const previous = () => {
  dialogVisible.value = true
  innerVisible.value = false
  isShowAngry.value = false
  isShowSmile.value = false
  isShowHappy.value = false
  smilecheckbox.value = {}
  checkboxGroup1.value = []
  checkboxGroup2.value = []
  smileAspects.value.forEach((item: any) => {
    item.radio = ''
  })
  buttonDisabled.value = true
}
// 选择后button变为可选择
const changeAngryDetails = () => {
  buttonDisabled.value = false
}
// 选择后button变为可选择
const changeHappyDetails = () => {
  buttonDisabled.value = false
}
let SmileObj: any = {}
const smilecheckbox = ref()
const changeSmileRadio = (title: any, value: any) => {
  SmileObj[title] = value
  smilecheckbox.value = SmileObj
  if (Object.keys(SmileObj).length == Aspects.value.length) {
    buttonDisabled.value = false
  }
}
// 提交details
const submitDetails = (val: any) => {
  if (checkboxGroup1.value.length) {
    $api
      .scoringgrade({
        suggestion: checkboxGroup1.value,
        proposal: val,
        expression: checkexpression.value
      })
      .then((res: any) => {
        if (res.code == 200) {
          isshowDetails_submit.value = true
          isshowDetails.value = false
          setTimeout(() => {
            closeDialog()
          }, 3000)
        }
      })
  } else if (checkboxGroup2.value.length) {
    $api
      .scoringgrade({
        suggestion: checkboxGroup2.value,
        proposal: val,
        expression: checkexpression.value
      })
      .then((res: any) => {
        if (res.code == 200) {
          isshowDetails_submit.value = true
          isshowDetails.value = false
          setTimeout(() => {
            closeDialog()
          }, 3000)
        }
      })
  } else {
    $api
      .scoringgrade({
        proposal: val,
        expression: checkexpression.value,
        ...smilecheckbox.value
      })
      .then((res: any) => {
        if (res.code == 200) {
          isshowDetails_submit.value = true
          isshowDetails.value = false
          setTimeout(() => {
            closeDialog()
          }, 3000)
        }
      })
  }
}
</script>

<template>
  <div class="scoring_dashboard" v-if="isShowScoring">
    <div class="scoring_left">
      <img class="scoring_img" src="../image/dashboard_scoring.png" />
      <div>How satisfied are you with this system ?</div>
      <div class="das_share" @click="dialogVisible = true">Share Your Feedback</div>
      <el-dialog
        v-model="dialogVisible"
        :destroy-on-close="true"
        width="640"
        :modal="false"
        class="scoreDialog2"
        custom-class="my-dialog"
        :close-on-click-modal="false"
      >
        <div class="das_title">How satisfied are you with this system ?</div>
        <div class="das_flex">
          <div class="das_score" v-for="(item, index) in avater" :key="index">
            <el-avatar
              :size="40"
              @mouseenter="mouseenter(item)"
              @mouseout="mouseout(item)"
              shape="square"
              :src="item.src"
              @click="OpenScoring(item)"
            />
            <div class="das_itemtitle" :class="item.changecolortext ? 'changecolortext' : ''">
              {{ item.itemtitle }}
            </div>
          </div>
        </div>
      </el-dialog>
      <el-dialog
        v-model="innerVisible"
        width="640"
        :modal="false"
        class="scoreDialog2"
        :destroy-on-close="true"
        @close="closeDialog"
      >
        <div class="dialog" v-if="isshowDetails">
          <div class="das_in_title">
            {{ InnerTitle }}
          </div>
          <div class="das_in_ques">
            <div class="typography">*</div>
            {{ InnerTileQues }}
          </div>
          <div v-if="isShowAngry" class="dialogflex">
            <el-checkbox-group v-model="checkboxGroup1" size="large">
              <el-checkbox-button
                @change="changeAngryDetails"
                v-for="item in evaluate"
                :key="item"
                :value="item"
              >
                {{ item }}
              </el-checkbox-button>
            </el-checkbox-group>
          </div>
          <div v-if="isShowSmile" style="margin-bottom: 48px">
            <div class="smile_flex">
              <div class="smile_title_left"></div>
              <div class="smile_title_right">
                <div class="smile_title" v-for="item in Aspects" :key="item">
                  {{ item }}
                </div>
              </div>
            </div>
            <div class="smile_content_flex" v-for="(item, index) in smileAspects" :key="index">
              <div class="smile_title_left content_left">{{ item.title }}</div>
              <div class="smile_title_right content_right">
                <el-radio-group
                  v-model="item.radio"
                  @change="changeSmileRadio(item.title, item.radio)"
                >
                  <el-radio
                    class="smile_radio"
                    v-for="proposal in item.proposal"
                    :value="proposal"
                    :key="proposal"
                  ></el-radio>
                </el-radio-group>
              </div>
            </div>
          </div>
          <div v-if="isShowHappy" style="margin-bottom: 48px">
            <el-checkbox-group v-model="checkboxGroup2" size="large">
              <el-checkbox-button
                @change="changeHappyDetails"
                v-for="item in happyevaluate"
                :key="item"
                :value="item"
              >
                {{ item }}
              </el-checkbox-button>
            </el-checkbox-group>
          </div>
          <div class="das_in_ques" style="margin: 0">
            Would you like to share more details with us?
          </div>
          <div>
            <el-input
              class="inputdetails"
              v-model="inputdetails"
              style="width: 592px"
              :rows="4"
              type="textarea"
              placeholder="We look forward to hearing from you. Thank you for helping to build a better customer system."
            />
          </div>
          <div class="buttom">
            <div class="previous" @click="previous">
              <span class="iconfont_icon">
                <svg class="iconfont" aria-hidden="true">
                  <use xlink:href="#icon-icon_back_b"></use>
                </svg>
              </span>
              Previous
            </div>
            <div class="button_submit">
              <el-button
                :disabled="buttonDisabled"
                class="submit_button el-button--dark"
                @click="submitDetails(inputdetails)"
                >Submit</el-button
              >
            </div>
          </div>
        </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>
    <div @click="isShowScoring = false" style="cursor: pointer">
      <span class="iconfont_icon">
        <svg class="iconfont" aria-hidden="true">
          <use xlink:href="#icon-icon_reject_b"></use>
        </svg>
      </span>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.scoring_dashboard {
  display: flex;
  justify-content: space-between;
  padding-right: 24px;
  align-items: center;
  background: linear-gradient(
    251deg,
    rgba(255, 255, 255, 0.3),
    rgba(255, 244, 235, 0.5) 22.66%,
    rgba(240, 243, 255, 0.5) 44.57%,
    rgba(224, 247, 249, 0.6) 80.46%,
    rgba(255, 255, 255, 0.3)
  );
  height: 48px;
}
.scoring_img {
  margin-right: 8px;
  width: 24px;
  height: 24px;
}
.scoring_left {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 90%;
}
.das_share {
  color: #ed6d00;
  font-size: 12px;
  font-weight: 400;
  margin-left: 8px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.das_title {
  font-weight: 700;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.das_flex {
  display: flex;
  height: 64px;
  align-items: center;
  justify-content: center;
  margin-top: 24px;
}
.das_score {
  width: 104px;
  text-align: center;
}
.das_score:last-child {
  margin-right: 0;
}
.das_itemtitle {
  font-size: 12px;
  margin-top: 9px;
}
.changecolortext {
  color: #ed6d00;
}
.das_in_title {
  font-weight: 700;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #ed6d00;
  width: 480px;
}
.dialog {
  display: flex;
  align-items: center;
  flex-direction: column;
}
.buttom {
  display: flex;
  width: 592px;
  align-items: center;
  margin-top: 8px;
  justify-content: space-between;
}
.submit_button {
  width: 180px;
  height: 40px;
}
.button_submit {
  display: flex;
  justify-content: end;
}
:deep(.el-button > span) {
  color: #ffffff !important;
  font-weight: 400;
  font-size: var(--font-size-3);
}
:deep(.el-button.is-disabled) {
  background-color: #bfc1c3;
}
.previous {
  cursor: pointer;
  display: flex;
}
.das_in_ques {
  font-size: 16px;
  font-weight: 700;
  width: 592px;
  margin: 40px 0 16px 0;
  display: flex;
}
.typography {
  color: #c9353f;
}
.dialogflex {
  display: flex;
  margin-bottom: 40px;
}
:deep(.el-checkbox-button__inner) {
  color: var(--tag-info-text-color);
  font-size: var(--font-size-3);
  font-weight: 400;
  padding: 0;
  width: 180px !important;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-6);
  margin-bottom: 8px;
}
:deep(.el-checkbox-button__inner:hover) {
  color: var(--color-theme);
  background-color: var(--color-btn-default-bg-hover);
  border-color: var(--color-btn-default-bg-hover);
}
:deep(.el-checkbox-button.is-focus .el-checkbox-button__inner) {
  border-color: transparent;
}
:deep(.el-checkbox-button:first-child .el-checkbox-button__inner) {
  border-left: 1px solid var(--color-border);
  border-top-left-radius: var(--border-radius-6);
  border-bottom-left-radius: var(--border-radius-6);
}
:deep(.el-checkbox-button:last-child .el-checkbox-button__inner) {
  border-top-right-radius: var(--border-radius-6);
  border-bottom-right-radius: var(--border-radius-6);
}
:deep(.el-checkbox-button:nth-child(3n + 1)) {
  margin-right: 8px;
}
:deep(.el-checkbox-button:nth-child(3n + 2)) {
  margin-right: 8px;
}
:deep(.el-checkbox-button.is-checked .el-checkbox-button__inner) {
  color: #ffffff;
  background-color: var(--color-theme);
  border-color: var(--color-theme);
}
.inputdetails {
  margin-top: 8px;
}
:deep(.el-textarea) {
  .el-textarea__inner {
    resize: none; // 去除右下角图标
    padding: 5px 7px 5px 10px;
  }
}
.smile_flex {
  display: flex;
}
.smile_title_left {
  width: 176px;
}
.smile_title_right {
  display: flex;
  width: 414px;
}
.smile_title {
  width: 75.4px;
  font-size: var(--font-size-2);
  line-height: 16px;
  font-weight: 400;
  display: flex;
  justify-content: center;
  align-items: end;
  text-align: center;
}
.smile_content_flex {
  display: flex;
  margin-top: 8px;
}
.content_left {
  height: 41px;
  background-color: #fff;
  font-weight: 400;
  border: 1px solid var(--color-border);
  font-size: var(--font-size-3);
  border-radius: 6px 0 0 6px;
  display: flex;
  align-items: center;
  padding-left: 7px;
}
.smile_radio {
  width: 75.4px;
  display: flex;
  justify-content: center;
}
.content_right {
  background-color: #e0e2e6;
  border-radius: 0 6px 6px 0;
}
.el-radio {
  margin-right: 0;
}
</style>
