<script setup lang="ts">
import { ref } from 'vue'

const props = defineProps({
  content: String,
  dialogWidth: String,
  isShowAngry: Boolean,
  isShowSmile: Boolean,
  isShowHappy: Boolean
})
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 emits = defineEmits(['changeAngryDetails', 'changeSmileRadio', 'changeHappybuttonbox'])
const changebuttonbox = () => {
  emits('changeAngryDetails', checkboxGroup1.value)
}
const changeHappybuttonbox = () => {
  emits('changeHappybuttonbox', checkboxGroup2.value)
}
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: ''
  }
]
let SmileObj: any = {}
const changeSmileRadio = (title: any, value: any) => {
  SmileObj[title] = value
  emits('changeSmileRadio', SmileObj)
}
</script>
<template>
  <div style="margin-bottom: 8px">
    <div class="dialogue" :style="{ width: props.dialogWidth }">
      {{ props.content }}
      <div v-if="props.isShowAngry" class="dialogflex">
        <el-checkbox-group v-model="checkboxGroup1" size="large">
          <el-checkbox-button
            @change="changebuttonbox"
            v-for="item in evaluate"
            :key="item"
            :value="item"
          >
            {{ item }}
          </el-checkbox-button>
        </el-checkbox-group>
      </div>
      <div v-if="props.isShowHappy" class="dialogflex">
        <el-checkbox-group v-model="checkboxGroup2" size="large">
          <el-checkbox-button
            @change="changeHappybuttonbox"
            v-for="item in happyevaluate"
            :key="item"
            :value="item"
          >
            {{ item }}
          </el-checkbox-button>
        </el-checkbox-group>
      </div>
      <div v-if="props.isShowSmile">
        <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>
    <div class="vector"><img class="vector_img" src="../image/bubble_corner.png" /></div>
  </div>
</template>
<style lang="scss" scoped>
.dialogflex {
  display: flex;
  margin-top: 8px;
}
.dialogue {
  color: var(--tag-info-text-color);
  font-size: var(--font-size-4);
  border-radius: var(--border-radius-12) var(--border-radius-12) var(--border-radius-12) 0;
  background-color: #f2f4f7;
  padding: 8px;
}
.vector {
  height: 8px;
}
.vector_img {
  vertical-align: top;
}
:deep(.el-checkbox-button__inner) {
  color: var(--tag-info-text-color);
  font-size: var(--font-size-3);
  font-weight: 400;
  padding: 0;
  width: 180px;
  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);
}
.smile_flex {
  display: flex;
  margin-top: 20px;
}
.smile_title_left {
  width: 176px;
}
.smile_title_right {
  display: flex;
}
.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>