<template>
  <div :class="`card ${active ? 'active' : ''}`">
    <component v-bind="$attrs" :is="filter_data.component_name" :data="filter_data" @onClickSharePath="onClickSharePath"
      @onBrowseDetail="onBrowseDetail" @onClickFollowRecord="onClickFollowRecord"
      @onClickCustomEvent="onClickCustomEvent" @onClickSubmitForm="onClickSubmitForm"
      @onClickCompanyName="onClickCompanyName" />
  </div>
</template>

<script>
import filterData from "./utils/filterData";
import Store from "@RecordCard/utils/store.js";
//CRM卡片
import CustomEvent from "./components/CRM/CustomEvent/index.vue";
import FollowUp from "./components/CRM/FollowUp/index.vue";
import WinOrder from "./components/CRM/WinOrder/index.vue";
import LoseOrder from "./components/CRM/LoseOrder/index.vue";
import ClueDistribution from "./components/CRM/ClueDistribution/index.vue";
import ClueDraw from "./components/CRM/ClueDraw/index.vue";
import ClueImportSea from "./components/CRM/ClueImportSea/index.vue";
import ClueRecycle from "./components/CRM/ClueRecycle/index.vue";
import ClueTransfer from "./components/CRM/ClueTransfer/index.vue";
import ClueOperInfo from "./components/CRM/ClueOperInfo/index.vue";
import ClueTransferClient from "./components/CRM/ClueTransferClient/index.vue";
import BOBaseCard from "./components/CRM/BusinessOpportunity/BaseCard/index.vue";
import BOStageChange from "./components/CRM/BusinessOpportunity/StageChange/index.vue";
import BOFailStage from "./components/CRM/BusinessOpportunity/FailStage/index.vue";
import BOSuccessStage from "./components/CRM/BusinessOpportunity/SuccessStage/index.vue";
import BOUpdateDetail from "./components/CRM/BusinessOpportunity/UpdateDetail/index.vue";
import BOCreate from "./components/CRM/BusinessOpportunity/Create/index.vue";
import BOAbandon from "./components/CRM/BusinessOpportunity/Abandon/index.vue";
import ClueRecovery from "./components/CRM/ClueRecovery/index.vue";
import Call from "./components/CRM/Call/index.vue";
import ClueReturnToSea from "./components/CRM/ClueReturnToSea/index.vue";

//微信生态卡片
import AddUser from "./components/Wechat/AddUser/index.vue";
import AddGroup from "./components/Wechat/AddGroup/index.vue";
import OperTag from "./components/Wechat/OperTag/index.vue";
import AddClient from "./components/Wechat/AddClient/index.vue";
import UserAction from "./components/Wechat/UserAction/index.vue";
import WorkInherit from "./components/Wechat/WorkInherit/index.vue";
import DeleteClient from "./components/Wechat/DeleteClient/index.vue";
import ArticleOrFile from "./components/Wechat/ArticleOrFile/index.vue";
import AddClientToCorp from "./components/Wechat/AddClientToCorp/index.vue";
import UpdateClientInfo from "./components/Wechat/UpdateClientInfo/index.vue";
import CompanyAddPeopleSettle from "./components/Wechat/CompanyAddPeopleSettle/index.vue";
import AddClientToCompany from "./components/Wechat/AddClientToCompany/index.vue";
import BrowseBusinessCard from "./components/Wechat/BrowseBusinessCard/index.vue";

//市场卡片
import BaiduAdv from "./components/Market/BaiduAdv/index.vue";
import ChatRecord from "./components/Market/ChatRecord/index.vue";
import SubmitForm from "./components/Market/SubmitForm/index.vue";
import MomentsAdv from "./components/Market/MomentsAdv/index.vue";
import ShortMessage from "./components/Market/ShortMessage/index.vue";
import OceanEngineAdv from "./components/Market/OceanEngineAdv/index.vue";
import SearchKeyWords from "./components/Market/SearchKeyWords/index.vue";
import SubmitEnrollForm from "./components/Market/SubmitEnrollForm/index.vue";
import MarketFormSearch from "./components/Market/MarketFormSearch/index.vue";
import OfficialAccountAdv from "./components/Market/OfficialAccountAdv/index.vue";
import VisitorCheckIn from "./components/Market/VisitorCheckIn/index.vue";
import MarketAdvInfo from "./components/Market/MarketAdvInfo/index.vue";
export default {
  name: "WeilingRecordCard",
  components: {
    //CRM
    BOBaseCard,
    BOCreate,
    BOAbandon,
    BOStageChange,
    BOUpdateDetail,
    BOFailStage,
    BOSuccessStage,
    ClueDistribution,
    ClueDraw,
    ClueImportSea,
    ClueRecycle,
    ClueTransfer,
    ClueOperInfo,
    ClueTransferClient,
    FollowUp,
    WinOrder,
    LoseOrder,
    CustomEvent,
    ClueRecovery,
    Call,
    ClueReturnToSea,
    //微信生态
    AddUser,
    AddGroup,
    UserAction,
    ArticleOrFile,
    OperTag,
    AddClientToCorp,
    DeleteClient,
    AddClient,
    AddClientToCompany,
    UpdateClientInfo,
    WorkInherit,
    BrowseBusinessCard,
    CompanyAddPeopleSettle,
    //市场
    BaiduAdv,
    ChatRecord,
    SubmitForm,
    MomentsAdv,
    ShortMessage,
    OceanEngineAdv,
    SearchKeyWords,
    SubmitEnrollForm,
    MarketFormSearch,
    OfficialAccountAdv,
    VisitorCheckIn,
    MarketAdvInfo
  },
  props: {
    env_data: {
      type: Object,
      default: () => {
        return {
          sid: "",
          token: "",
          domain: "",
          corp_id: "",
          node_env: "",
        };
      },
    },
    data: {
      type: Object,
      default: () => {
        return {};
      },
    },
    active: {
      type: Boolean,
      default: false,
    },
    /**
     * 卡片组件使用场景，有以下值
     * client  客户画像
     * group   群画像
     * company 企业画像
     * clue    线索画像
     * business 商机
     */
    scene: {
      type: String,
      default: "",
    },
    external_userid: {
      type: String,
      default: "",
    },
    external_chatid: {
      type: String,
      default: "",
    },
    is_trial: {
      type: Boolean,
      default: false,
    },
    user_id: {
      type: String,
      default: "",
    },
    //商机id
    business_id: {
      type: String,
      default: "",
    }
  },
  computed: {
    filter_data() {
      return filterData(this.data);
    },
  },
  beforeMount() {
    const { sid, corp_id, node_env, domain, token, rc_id } = this.env_data;
    Store.sid = sid;
    Store.rc_id = rc_id;
    Store.token = token;
    Store.domain = domain;
    Store.corp_id = corp_id;
    Store.node_env = node_env;
  },
  provide() {
    return {
      // scene: 'clue',
      scene: this.scene,
      external_userid: this.external_userid,
      external_chatid: this.external_chatid,
      is_trial: this.is_trial,
      user_id: this.user_id,
      business_id: this.business_id,
    };
  },
  methods: {
    onClickSharePath(val) {
      this.$emit("onClickSharePath", val);
    },
    onBrowseDetail(val) {
      this.$emit("onBrowseDetail", val);
    },
    onClickFollowRecord(val) {
      this.$emit("onClickFollowRecord", val);
    },
    onClickSubmitForm(val) {
      this.$emit("onClickSubmitForm", val);
    },
    onClickCustomEvent(val) {
      this.$emit("onClickCustomEvent", val);
    },
    onClickCompanyName(val) {
      this.$emit("onClickCompanyName", val);
    },
  }
};
</script>

<style lang="scss" scoped>
.card {
  width: 100%;
  padding: 0 j(10);
  color: var(--wl-text-color-placeholder, #c1c1c1);
  font-weight: 400;
  font-size: j(14);
  background-color: #fff;
  box-sizing: border-box;
  min-height: j(50);
  box-shadow: 0 j(2) j(15) rgba(0, 0, 0, 0.03);
  @extend %flex-middle;

  &.active {
    animation: activeBlink 1000ms 2;

    :deep(.content) {
      animation: activeContentBlink 1000ms 2;
    }
  }

  @keyframes activeBlink {
    from {
      background-color: transparent;
    }

    50% {
      background-color: rgba(255, 185, 4, 0.2);
    }

    to {
      background-color: transparent;
    }
  }

  @keyframes activeContentBlink {
    from {
      background-color: transparent;
    }

    50% {
      background-color: rgba(250, 236, 200, 0.1);
    }

    to {
      background-color: transparent;
    }
  }

  &Light:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: j(-5);
    left: 0;
    right: j(-15);
    border: 2px solid red;
  }
}
</style>
