<template>
  <div class="cell">
    <div class="ellipsis" style="text-align: left;">
      <span class="item" v-for="item in list" :key="item">{{item}}</span>
    </div>
    <div class="action" :style="{ textAlign: list.length > 0 ? 'left' : 'center'}">
      <el-link type="info" class="btn-more" :class="{disabled: !state}" :disabled="!state" @click="handleEdit" >
        {{ list.length > 0 ? t('marketingApps.viewDetail') : t('marketingApps.addDomain') }}
      </el-link>
    </div>
  </div>
  <DomainForm ref="DomainFormRef" @refresh="handleUpdate()" />
</template>
<script setup lang="ts">
import { ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
const DomainForm = defineAsyncComponent(() => import('./domainForm.vue'));
import { SourceType  } from '../types';

const { t } = useI18n();
const props = defineProps(['domainList', 'rowData', 'state']);
const emit = defineEmits(['refresh']);
const list = ref<string[]>([]);
const DomainFormRef = ref();

watch(
  () => props.domainList,
  (newVal) => {
    list.value = [];
    let temp = '';
    (newVal || []).forEach((item: { sourceType: SourceType; domain: string; groupName: string; }) => {
      if (item.sourceType == SourceType.DOMAIN) {
        temp = item.domain;
      } else {
        temp = item.groupName;
      }
      list.value.push(temp);
    });
  },
  { immediate: true }
);

// 修改域名弹窗
const handleEdit = () => {
  DomainFormRef.value.openDialog(props.domainList, props.rowData);
};

const handleUpdate = () => {
  emit('refresh');
}
</script>
<style scoped lang="scss">
@import '/@/theme/mixins/index.scss';

.cell {
  padding: 10px 0;
  .item {
    box-sizing: border-box;
    padding: 4px 0;
    text-align: left;
    margin-right: 15px;
    color: #646464;
    line-height: 14px;
  }
  .action {
    width: 100%;
  }
  .ellipsis {
    @include text-ellipsis(2);
  }
  .btn-more {
    color: #167AF0;
    line-height: 18px;
    &.disabled {
      opacity: 0.68;
    }
  }
}
</style>