<script setup lang="ts">
import { ref, watch, computed } from 'vue'
import Light_methods from '../images/illustration_system massage@2x.png'
import Dark_methods from '../images/illustration_system massage_darkmode@2x.png'
import { useThemeStore } from '@/stores/modules/theme'

const themeStore = useThemeStore()

const checkMethodList = ref()
checkMethodList.value = []
let savesubscribeobj: any = {}
const props = defineProps({
  MethodsData: Object
})
const MethodsImg = computed(() => {
  return themeStore.theme === 'dark' ? Dark_methods : Light_methods
})

const methods_data = ref(props.MethodsData)
watch(
  () => props.MethodsData,
  (current) => {
    methods_data.value = current
    MethodsInit()
  }
)
const emits = defineEmits(['ChangeMethodsAdd'])
// 初始设置Methods
const MethodsInit = () => {
  if (methods_data.value?.method_display != undefined) {
    if (methods_data.value?.method_display.indexOf('Email') != -1) {
      checkMethodList.value.push('By Email')
    }
  }
  if (methods_data.value?.method_display != undefined) {
    if (methods_data.value?.method_display.indexOf('System Message') != -1) {
      checkMethodList.value.push('By System Message')
    }
  }
  changeMethod(checkMethodList.value)
}

// 选中Method
const changeMethod = (val: any) => {
  if (val.indexOf('By Email') != -1) {
    savesubscribeobj.method_by_email = true
  } else {
    savesubscribeobj.method_by_email = false
  }
  if (val.indexOf('By System Message') != -1) {
    savesubscribeobj.method_by_message = true
  } else {
    savesubscribeobj.method_by_message = false
  }
  if (val.length != 0) {
    savesubscribeobj.method_display = val.map((e: any) => e.replace('By ', '')).join(',')
  } else {
    savesubscribeobj.method_display = ''
  }
  emits('ChangeMethodsAdd', checkMethodList.value, savesubscribeobj)
}
const user_type = localStorage.getItem('user_type')

// 删除 Frequency tag
const handleCloseMethods = () => {
  checkMethodList.value = []
}

defineExpose({
  handleCloseMethods
})
</script>
<template>
  <div style="margin-top: 11px">
    <div class="Method">
      <el-checkbox-group v-model="checkMethodList" @change="changeMethod">
        <el-checkbox
          class="methodcheckbox"
          value="By Email"
          v-if="user_type != null && user_type != 'customer'"
        >
          <div>By Email</div>
          <div class="methos_image"><img src="../images/illustration_email@2x.png" /></div>
        </el-checkbox>
        <el-checkbox class="methodcheckbox" value="By System Message">
          <div>By System Message</div>
          <div class="methos_image">
            <img :src="MethodsImg" />
          </div>
        </el-checkbox>
      </el-checkbox-group>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.methodcheckbox {
  align-items: start;
  height: fit-content;
  width: 49%;
  margin-right: 5px;
  background-color: var(--color-system-notification-bg);
  border-radius: 6px;
  padding: 11px 0 0 13px;
}
.methos_image {
  margin: 9px 0;
}
</style>