<template>
  <div class="business-opportunity-card">
    <div class="tag" v-if="data['tag'] && tag_show">
      <p>{{ data.tag }}</p>
    </div>
    <div class="line-wrap" v-for="item in list" :key="item.id" v-show="item_show(item.key)">
      <div class="line">
        <p class="label">{{ item.label }}</p>
        <div class="info" :style="info_style(item)">
          <component
            :is="item.type || 'Default'"
            v-bind="Object.assign(item, $attrs)"
            :data="item.type === 'User' ? data[item.key] : data"
            v-model="data[item.key]"
            v-on="$listeners"
            v-if="!item.slot"
          ></component>
          <slot v-else :name="item.slot"></slot>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { business_opportunity_card_columns } from "./utils/dict";
import SelectStage from "./components/SelectStage/index.vue";
import Default from "./components/Default/index.vue";
import Input from "./components/Input/index.vue";
import WlUser from "@packages/components/Common/WlUser/src/index.vue";

export default {
  name: "BOCard",
  components: {
    SelectStage,
    Default,
    User: WlUser,
    Input,
  },
  props: {
    data: {
      type: Object,
      default: () => {},
    },
    list: {
      type: Array,
      default: () => business_opportunity_card_columns,
    },
  },
  computed: {
    info_style() {
      return (item) => {
        const { type = "" } = item;
        const { input_edit = false } = this.data;
        return { overflow: type === "Input" && input_edit ? "inherit" : "hidden" };
      };
    },
    item_show() {
      return (key) => {
        const { hidden = {} } = this.data;
        return !hidden[key];
      };
    },
    tag_show(){
      const {tagShow = null, input_edit = false} = this.data;
      return tagShow === null ? !input_edit : tagShow
    }
  },
};
</script>

<style lang="scss" scoped>
.business-opportunity-card {
  padding: j(12) j(16);
  background: #ffffff;
  border-radius: j(10);
  position: relative;
  box-sizing: border-box;
  .tag {
    position: absolute;
    width: fit-content;
    padding: j(2) j(6);
    border-bottom-left-radius: j(10);
    border-top-right-radius: j(10);
    top: -2px;
    right: -4px;
    color: rgba(41, 194, 191, 1);
    background-color: rgba(240, 255, 252, 1);
    transform: scale(0.9);
    z-index: 1;
    @extend %flex-middle-center;
  }
  .line-wrap {
    &:not(:last-child) {
      margin-bottom: j(14);
    }
  }
  .line {
    @extend %flex-middle;
    .label {
      flex-shrink: 0;
      font-size: j(14);
      color: #919699;
      margin-right: j(20);
    }
    .info {
      flex: 1;
      max-width: calc( 100% - 128px );
      @include textEllipsis(1);
    }
  }
}
</style>
