<template>
  <el-dialog :visible="visible" width="260px" top="38vh" :show-close="false" @close="dialogClose">
    <span class="tone-pinyin">{{ tonePinyin }}</span>
    <span class="content-text">{{ selectContent }}</span>
    <el-input v-model="numberPinyin" autocomplete="off" placeholder="请输入正确的拼音" @blur="convertTonePinyin" />
    <span class="tips">一到四声分别用数字1-4表示，轻声用0表示。</span>
    <template slot="footer">
      <el-button size="medium" @click="dialogClose">取消</el-button>
      <el-button type="primary" size="medium" @click="confirm">保存</el-button>
    </template>
  </el-dialog>
</template>

<script>
import { addTone, handleToneValue } from '@/utils/common';
export default {
  name: 'CorrectPinyin',
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
    selectContent: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      tonePinyin: '',
      numberPinyin: '',
    };
  },
  methods: {
    // 将数字拼音转换为声调拼音
    convertTonePinyin() {
      this.tonePinyin = this.numberPinyin
        .trim()
        .split(/\s+/)
        .map((item) => {
          return handleToneValue(item);
        })
        .map((item) =>
          item.map(({ number, con }) => (number && con ? addTone(Number(number), con) : number || con || '')),
        )
        .filter((item) => item.length > 0)
        .join(' ');
    },
    dialogClose() {
      this.$emit('update:visible', false);
      this.tonePinyin = '';
      this.numberPinyin = '';
    },
    confirm() {
      this.$emit('update:visible', false);
      this.$emit('fillTonePinyin', this.tonePinyin);
      this.tonePinyin = '';
      this.numberPinyin = '';
    },
  },
};
</script>

<style lang="scss" scoped>
.el-dialog {
  :deep &__header {
    padding: 0;
  }

  :deep &__body {
    display: flex;
    flex-direction: column;
    row-gap: 8px;
    align-items: center;
    padding: 24px;

    .tone-pinyin {
      font-size: 20px;
    }

    .content-text {
      margin-top: -12px;
      font-size: 28px;
    }

    .tips {
      font-size: 12px;
      color: #a0a0a0;
      text-align: left;
    }
  }

  :deep &__footer {
    display: flex;
    padding: 8px;

    .el-button {
      flex: 1;
    }
  }
}
</style>
