<template>
  <div class="bo-create-card">
    <div class="header">
      <CardTitle class="title" :data="title_data" :need_user="true">
        <template slot="card-title-more">
          <span>创建</span>
          <span>{{ title_data.business_opp_name ? "商机" : "" }}&nbsp;</span>
          <a :href="title_data.business_opp_url" class="need-color">{{ title_data.business_opp_name || "商机" }}</a>
        </template>
      </CardTitle>
    </div>
    <div class="content">
      <div class="list-wrap" v-if="data.update_after">
        <p class="title">更新后：</p>
        <div class="list">
          <div class="card-item" v-for="(item, index) in data.update_after" :key="item.label + index">
            <ListCard :data="item">
              <template v-if="item.slot">
                <slot :name="item.slot" />
              </template>
            </ListCard>
          </div>
        </div>
      </div>
      <div class="list-wrap" v-if="data.update_before">
        <p class="title">更新前：</p>
        <div class="list">
          <div class="card-item" v-for="(item, index) in data.update_before" :key="item.label + index">
            <ListCard :data="item">
              <template v-if="item.slot">
                <slot :name="item.slot" />
              </template>
            </ListCard>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CardTitle from "@RecordCard/components/Common/CardTitle/index.vue";
import ListCard from "@RecordCard/components/CRM/BusinessOpportunity/components/ListCard/index.vue";
import useGetBusinessOpportunityUrl from "@RecordCard/hooks/useGetBusinessOpportunityUrl";
import useGetStaffHomePageUrl from "@RecordCard/hooks/useGetStaffHomePageUrl";
export default {
  name: "BoCreateCard",
  components: { CardTitle, ListCard },
  props: {
    data: {
      type: Object,
      default: () => { },
    },
  },
  computed: {
    title_data() {
      const { source_id = "", user_info = {}, materials = [] } = this.data;
      const [material = {}] = materials;
      const { material_name = "" } = material;
      const { id = "" } = user_info;
      const url = useGetStaffHomePageUrl(id);
      const boUrl = useGetBusinessOpportunityUrl(source_id);
      return {
        ...this.data,
        user_info: {
          ...user_info,
          href: id ? url : "",
        },
        business_opp_url: source_id ? boUrl : "javascriptvoid(0)",
        business_opp_name: material_name,
        title: "",
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.bo-create-card {
  background: #ffffff;
  box-sizing: border-box;
  padding: j(10px) 0;

  .header {
    .title {
      flex-wrap: wrap;

      .company {
        margin-left: j(6px);
      }
      .need-color {
        color:  var(--wl-primary-color-dark, #2950b8);
        font-weight: 500;
        margin: 0 j(5);
      }
    }
  }

  .content {
    .list-wrap {
      margin-top: j(12px);

      .title {
        font-size: j(14px);
        color: #000000;

      }

      .list {
        margin-top: j(6px);
        background: var(--wl-primary-color-lightest, #f7fbfe);
        border-radius: j(10px);
        padding: j(10px);
        box-sizing: border-box;

        .card-item {
          &:not(:last-child) {
            margin-bottom: j(8px);
          }
        }
      }
    }
  }
}
</style>
