<script setup lang="ts">
import { globalStore } from '@/stores'
import { storeToRefs } from 'pinia'

const bg = `url(${import.meta.env.VITE_OSS_URL}/urm/header_bg.svg) 100%/cover no-repeat`
const progress_bg = `url(${import.meta.env.VITE_OSS_URL}/urm/progress_bg.svg) 100%/cover`

const { system } = storeToRefs(globalStore())

interface VolumeItem {
  label: string
  key: string
  valueKey: string
  statusKey: string
}

const volumeList = ref<VolumeItem[]>([
  // {
  //     label: '音乐',
  //     key: 'music',
  //     valueKey: 'musicVolume',
  //     statusKey: 'musicStatus',
  // },
  // {
  //   label: '音效',
  //   key: 'effects',
  //   valueKey: 'effectsVolume',
  //   statusKey: 'effectsStatus',
  // },
])

// 播放速率
const rate_0_5 = 0.5
const rate_0_75 = 0.75
const rate_1 = 1
const rateOptions = [
  {
    label: '0.5',
    value: rate_0_5,
  },
  {
    label: '0.75',
    value: rate_0_75,
  },
  {
    label: '1',
    value: rate_1,
  },
]
</script>
<template>
  <div class="voice_module">
    <!-- 播放速率 -->
    <div class="rate_setting setting_box">
      <div
        class="header"
        :style="{
          background: bg,
        }"
      >
        播放速率
      </div>
      <div class="setting_item">
        <div class="item">
          <div class="label">播放速率</div>
          <select-tab v-model="system.volume.playbackRate" :data-list="rateOptions" />
        </div>
      </div>
    </div>
    <!-- 音量设置 -->
    <div v-if="volumeList.length" class="volume_setting setting_box">
      <div
        class="header"
        :style="{
          background: bg,
        }"
      >
        音量设置
      </div>
      <div class="voice_setting setting_item">
        <div v-for="item in volumeList" :key="item.key" class="item">
          <div class="label">{{ item.label }}</div>
          <div class="switch">
            <el-switch v-model="(system.volume as any)[item.statusKey]">
              <template #active-action>
                <Icon name="open_switch" width="70" height="56"></Icon>
              </template>
              <template #inactive-action>
                <Icon name="close_switch" width="70" height="56"></Icon>
              </template>
            </el-switch>
          </div>
          <div class="volume_control">
            <el-slider v-model="(system.volume as any)[item.valueKey]" :show-tooltip="false" />
            <span class="rate">{{ (system.volume as any)[item.valueKey] }}%</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 操作设置 -->
    <!-- <div v-if="!isWeb" class="operation_setting">
            <div
                class="header"
                :style="{
                    background: bg,
                }"
            >
                操作设置
            </div>
            <div class="setting_list">
                <div class="item" @click="openBridge('wifi')">
                    <div>网络设置</div>
                    <Icon class="arrow_icon" name="system_setting_right_arrow" size="60" />
                </div>
                <div class="item" @click="openBridge('setting')">
                    <div>系统设置</div>
                    <Icon class="arrow_icon" name="system_setting_right_arrow" size="60" />
                </div>
            </div>
        </div> -->
  </div>
</template>
<style lang="scss" scoped>
.voice_module {
  padding: 4.5vh 0 0 14px;
  width: 100%;
  height: 100%;
  font-family: $font-special;

  :deep(.el-switch) {
    --el-switch-on-color: rgba(0, 0, 0, 0.35);
    --el-switch-off-color: rgba(0, 0, 0, 0.35);
    width: 100px;
    position: relative;
    &.is-checked {
      .el-switch__action {
        left: calc(100% - 35px);
      }
    }
    .el-switch__core {
      width: 100px;
      height: 2.67vh;
      border-radius: 2.5vh;
      border: none;
      box-shadow: 0 0 0.42vh 0 rgba(0, 0, 0, 0.25) inset;
    }
    .el-switch__action {
      position: absolute;
      width: 70px;
      height: 4.67vh;
      left: -35px;
    }
  }

  :deep(.el-slider) {
    .el-slider__runway {
      height: 2.67vh;
      border-radius: 2.5vh;
      background-color: rgba(0, 0, 0, 0.35);
      .el-slider__bar {
        top: -0.33vh;
        height: 3vh;
        border-radius: 2.5vh;
        box-shadow: 0 0.42vh 0.42vh 0 rgba(0, 0, 0, 0.25);
        background: linear-gradient(248.87deg, #4de798 26.9%, #a2fb6e 79.86%);
        background: v-bind(progress_bg);
      }
      .el-slider__button-wrapper {
        width: 56px;
        height: 4.67vh;
        top: -1.25vh;
        .el-slider__button {
          width: 56px;
          height: 4.67vh;
          box-shadow: 0 0.33vh 0.33vh 0 rgba(0, 0, 0, 0.15);
          border: none;
          background: radial-gradient(189.06% 189.06% at 49.22% 50.78%, #ffffff 0%, #becadf 100%);
          &.dragging {
            transform: unset !important;
          }
          &.hover {
            transform: unset !important;
          }
          &:hover {
            transform: unset !important;
          }
        }
      }
    }
  }

  .rate_setting {
    :deep(.select-list) {
      .data-item {
        width: 180px;
      }
    }
  }

  .setting_box {
    width: 100%;
    .header {
      width: 61.17vh;
      height: 12.5vh;
      font-size: 3.33vh;
      padding: 1.83vh 0 0 146px;
      line-height: 6vh;
      color: #ffffff;
    }

    .setting_item {
      width: 100%;
      min-height: 11.83vh;
      height: auto;
      margin-top: -3.83vh;
      left: 0;
      padding: $space-6 $space-8 0 $space-8;
      border-radius: 3.33vh;
      background: $white-gradient;
      z-index: 99;

      .item {
        display: flex;
        align-items: center;
        margin-bottom: $space-6_h;
        color: $font-color;
        font-size: 2.67vh;
        line-height: 4vh;

        .label {
          color: $font-tag-color;
          font-size: 3.33vh;
          line-height: 5vh;
          white-space: nowrap;
          margin-right: 56px;
        }
      }
    }
  }

  .volume_setting {
    .voice_setting {
      .item {
        .switch {
          width: 132px;
          margin: 0 $space-7;
        }

        .volume_control {
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: calc(100% - 218px);

          .rate {
            flex-shrink: 0;
            display: inline-block;
            text-align: center;
            width: 110px;
            margin-left: $space-7;
          }
        }
      }
    }
  }
  .operation_setting {
    margin: $space-6 0;
    width: 100%;
    .header {
      margin-left: -14px;
      width: 734px;
      height: 12.5vh;
      font-size: 3.33vh;
      padding: 1.83vh 0 0 146px;
      line-height: 6vh;
      color: #ffffff;
    }
    .setting_list {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      font-family: $font-special;
      margin-top: -3.83vh;
      width: 1322px;
      padding: $space-6 $space-8;
      color: rgba(75, 75, 104, 1);
      font-size: 3.33vh;
      border-radius: 3.33vh;
      background: $white-gradient;
      z-index: 99;
      box-sizing: border-box;
      .item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        margin-bottom: $space-6_h;
        &:last-child {
          margin-bottom: 0;
        }
      }
      .arrow_icon {
        cursor: pointer;
      }
    }
  }
}
</style>
