<template>
  <div class="cell">
    <div class="ellipsis" style="width: 100%; text-align: left;" v-for="(list, index) in [whitelist, blacklist]">
      <span class="title">{{ index == 0 ? t('marketingApps.whiteList') : t('marketingApps.blackList') }}</span>
      <span class="item" v-for="item in list" :key="item">{{item}}</span>
      <span class="item" v-if="list.length <= 0">--</span>
    </div>
    <div class="action">
      <el-link type="info" class="btn-more" :class="{disabled: !state}" :disabled="!state" @click="handleEdit" >
        {{ ipList.length > 0 ? t('marketingApps.viewDetail') : t('marketingApps.addIp')}}
      </el-link>
    </div>
  </div>
  <IpForm ref="IpFormRef" @refresh="handleUpdate()" />
</template>
<script setup lang="ts">
import { ref, watch } from 'vue';
const IpForm = defineAsyncComponent(() => import('./ipForm.vue'));
import { ipSplicing } from '/@/utils/ipUpdate';
import { SourceType, IpType } from '../types';
import { useI18n } from 'vue-i18n';

const props = defineProps(['ipList', 'rowData', 'state']);
const emit = defineEmits(['refresh']);
const { t } = useI18n();

const blacklist = ref([]);
const whitelist = ref([]);
const IpFormRef = ref();

watch(
  () => props.ipList,
  (newVal) => {
    blacklist.value = [];
    whitelist.value = [];
    let temp = '';
    (newVal || []).forEach(item => {
      if (item.sourceType == SourceType.DOMAIN) {
        temp = ipSplicing(item.startIp, item.endIp);
      } else {
        temp = item.groupName;
      }
      item.ipType == IpType.WHITE ? whitelist.value.push(temp) : blacklist.value.push(temp);
    });
  },
  { immediate: true }
);

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

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

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