<script setup lang="ts">
import { toRefs } from 'vue'
import { propTypes } from '@/utils/propTypes'
import { useI18n } from '@/hooks/web/useI18n'
const { t } = useI18n()

const props = defineProps({
  title: propTypes.string,
  baseWidth: {
    required: false,
    type: String,
    default: '100%'
  },
  actionSelection: {
    required: true,
    type: Object
  },
  themes: {
    type: String,
    default: 'dark'
  }
})

const selectionChange = () => {
  // do selection
}

const { actionSelection } = toRefs(props)
</script>

<template>
  <el-popover
    placement="right-start"
    width="auto"
    :popper-style="'max-width:' + baseWidth"
    trigger="click"
    :show-arrow="false"
  >
    <template #reference>
      <span class="option-set ed-dialog__title"
        >{{ t('visualization.linkage_setting') }}
        <el-icon style="margin: 5px 0 0 5px"><Setting /></el-icon
      ></span>
    </template>
    <el-row>
      {{ t('visualization.select_linkage_tips') }}
    </el-row>
    <el-row>
      <el-radio-group
        style="margin-top: 12px"
        v-model="actionSelection.linkageActive"
        @change="selectionChange"
        class="radio_group"
      >
        <el-radio value="custom"
          ><span style="font-weight: normal">
            {{ t('visualization.linkage_option1') }}
          </span></el-radio
        >
        <el-radio value="auto"
          ><span style="font-weight: normal">{{
            t('visualization.linkage_option2')
          }}</span></el-radio
        >
      </el-radio-group>
    </el-row>
  </el-popover>
</template>
<style lang="less" scoped>
.option-set {
  position: absolute;
  display: flex;
  left: 24px;
  top: 30px;
}
.radio_group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
</style>