<template>
  <div class="submit-form">
    <CardTitle :data="data" />
    <div class="content">
      <div v-for="(item, index) in form_list" :key="index" class="content-item">
        <span class="content-item-label">{{ item.label }}：</span>
        <span class="content-item-value" v-html="item.value"></span>
      </div>
    </div>
    <CardFooter :data="data" />
  </div>
</template>

<script>
import CardTitle from "@RecordCard/components/Common/CardTitle/index.vue";
import CardFooter from "@RecordCard/components/Common/CardFooter/index.vue";

const dict = {
  plan_name: "推广计划",
  group_name: "推广组",
  searchword: "广告搜索词",
  keyword: "广告关键词",
  creative_title: "创意标题",
  url: "落地页URL",
};

export default {
  name: "MarketInfo",
  components: { CardTitle, CardFooter },
  props: {
    data: {
      type: Object,
      default: () => {
        return null;
      },
    },
  },
  data() {
    return {};
  },
  computed: {
    form_list() {
      const { mkt_advertise_search = {} } = this.data;
      return Object.keys(dict).reduce((acc, item) => {
        if (mkt_advertise_search[item]) {
          acc.push({
            label: dict[item],
            value: mkt_advertise_search[item],
          });
        }
        return acc;
      }, []);
    },
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.submit-form {
  width: 100%;

  .content {
    @include cardContent(false);

    &-item {
      color: var(--wl-text-color-primary-2);

      &:not(:last-child) {
        margin-bottom: j(5);
      }

      &-label {
        margin-bottom: j(2);
      }

      &-value {
        font-weight: 500;
      }
    }
  }
}
</style>
