<template>
  <div class="browse-business-card">
    <!-- 浏览名片时长 -->
    <div class="card-item-header">
      <CardTitle :data="data" />
      <p class="card-item-header-duration">{{ data.duration_desc }}</p>
    </div>
    <!-- 名片 -->
    <BusinessCard :data="filter_data" @onClick="onToggleRotate" :rotateFalg="rotateFalg" />
    <div class="column-step-vue-wrapper" v-if="showChooseModel">
      <ColumnSteps :data="filter_data" />
    </div>
    <CardFooter :data="data" :showUser="false" />
  </div>
</template>

<script>
import { formatSeconds, formatMoment } from "@RecordCard/utils/utils";
import ColumnSteps from './components/ColumnSteps.vue';
import BusinessCard from './components/BusinessCard.vue';
import useGetMaterialUrl from "@RecordCard/hooks/useGetMaterialUrl";
import CardTitle from "@RecordCard/components/Common/CardTitle/index.vue";
import CardFooter from "@RecordCard/components/Common/CardFooter/index.vue";
export default {
  name: "BrowseBusinessCard",
  components: {
    CardTitle,
    CardFooter,
    BusinessCard,
    ColumnSteps,
  },
  props: {
    data: {
      type: Object,
      default: () => {
        return {};
      },
    },
    is_trial: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      showChooseModel: false,
      rotateFalg: false,
    };
  },
  computed: {
    filter_data() {
      const { materials = [], child = [] } = this.data;
      const { material_logo, material_name } = materials[0] ?? {};
      const { material_name: interest_title } = materials[1] ?? {};
      const step_data = child.map(res => {
        const { icon, title, materials = [], event_id, duration, event_type, create_time } = res;
        const { material_name: material_title, material_scope, id } = materials[0] ?? {};
        const source_type = material_scope === 1 ? "user" : "corp";
        return {
          icon,
          title,
          material_title,
          material_url: useGetMaterialUrl({
            event_id,
            material_id: id,
            source_type,
          }),
          duration_desc: event_type === 1 && duration ? formatSeconds(duration) : "",
          create_time_desc: formatMoment(create_time, "MM月DD日 HH:mm:ss"),
        }
      })
      return {
        card_logo: material_logo,
        card_name: material_name,
        interest_title,
        step_data
      }
    },
  },
  provide() {
    return {
      is_trial: this.is_trial,
    };
  },
  methods: {
    onClick(data) {
      console.log('onClick', data);
    },
    onToggleRotate() {
      this.showChooseModel = !this.showChooseModel;
      this.rotateFalg = !this.rotateFalg
    }
  },
};
</script>

<style lang="scss" scoped>
.browse-business-card {
  width: 100%;

  .card-item-header {
    color: #000;
    font-size: $title-font-size;
    padding-left: j(5);
    font-weight: 500;
    @extend %flex-middle;

    &-duration {
      margin: 0 $left-right-spacing;
    }
  }

  .column-step-vue-wrapper {
    border: 1px solid #eee;
    padding: j(12);
    border-top: none;
    border-radius: 0  0 j(5) j(5);
  }

  .picClass {
    width: j(12);
    height: j(12);
  }

}
</style>
