<template>
  <div class="follow-up" @click.stop="onClickFollowRecord">
    <FollowUpHeader />
    <div
      class="content-wrap"
      :class="{
        'content-marginBo-wrap': !(
          filter_data.reply_count > 0 && busInfoAllowShow
        ),
      }"
      v-if="busInfoAllowShow"
    >
      <div class="text-wrap">
        <!-- 超级模版 -->
        <template v-if="materialInfo.element_content_list.length > 0">
          <div class="content-title">
            <div class="line"></div>
            <div class="title">{{  materialInfo.template_name  }}</div>
            <div class="line"></div>
          </div>
          <div
            class="ele-item"
            v-for="ele in materialInfo.element_content_list"
            :key="ele.id"
          >
            <div class="ele-title" v-html="ele.element_title"></div>
            <div
              v-if="checkContentEmpty(ele)"
              class="element_content-empty-wrapper"
            >
              <div class="element_content-empty">--</div>
            </div>
            <template v-else>
              <div
                class="content-flex"
                @click="onClickCompanyName(ele, $event)"
              >
                <template v-if="hasCompanyId(ele)">
                  <WlPic
                    :src="ele.company_image_url"
                    v-if="ele.company_image_url"
                  />
                  <WlPic :src="en_default_logo" v-else />
                </template>
                <div class="ele-content" :class="{ 'text-color': hasCompanyId(ele) }" v-html="ele.element_content">
                </div>
              </div>
            </template>
          </div>
        </template>
        <!-- 存文本模版 -->
        <div class="content-html" v-html="filter_data.remark" v-else />
      </div>
      <!-- 图片列表 -->
      <div class="pic-list-wrap" v-if="filter_data.thumbnail_files.length > 0">
        <Pics
         
          @onClickPic="onClickFollowRecordPhoto"
         
          :target="filter_data.target"
         
          :data="filter_data.thumbnail_files"
       
        />
      </div>
      <div v-if="filter_data.need_chat">
        <ChatProgress />
      </div>
      <!-- 资料列表 -->
      <div class="file-list" v-if="filter_data.file_list.length > 0">
        <div
         
          class="file-item-wrap"
         
          v-for="item in filter_data.file_list"
         
          :key="item.name + item.size"
        
        >
          <div class="file-item" @click.stop="onClickFile(item)">
            <File :data="item" />
          </div>
        </div>
      </div>
      <!-- 定位 -->
      <Position v-if="coordinate_json" :coordinate_json="coordinate_json" />
    </div>
    <!-- 全部场景下不显示inner_footer_left_show -->
    <CardFooter
      :data="data"
      :inner_footer_left_show="false"
      :inner_footer_right_show="busInfoAllowShow"
    >
      <template slot="footerRight">
        <CommentNumber :data="filter_data.reply_count" />
      </template>
    </CardFooter>
  </div>
</template>

<script>
import WlPic from "weiling-mobile-ui/lib/WlPic";
import { en_default_logo } from "@RecordCard/utils/cdn";
import useGetGroupUrl from "@RecordCard/hooks/useGetGroupUrl";
import ChatProgress from "./components/ChatProgress/index.vue";
import FollowUpHeader from "./components/FollowUpHeader/index.vue";
import Position from "./components/position/index.vue";
import Pics from "./components/Pics/index.vue";
import CardFooter from "@RecordCard/components/Common/CardFooter/index.vue";
import CommentNumber from "@RecordCard/components/Common/CommentNumber/index.vue";
import useDownloadFile from "@RecordCard/hooks/useDownloadFile";
import File from "./components/File/index.vue";
import { byteToSize, getVideoSnapshotUrl } from "@RecordCard/utils/utils";
import {
  excel_file_logo,
  ppt_file_logo,
  word_file_logo,
  unknown_file_logo,
  pdf_file_logo,
} from "@RecordCard/utils/cdn";
export default {
  name: "FollowUp",
  components: {
    Pics,
    ChatProgress,
    FollowUpHeader,
    File,
    CardFooter,
    CommentNumber,
    WlPic,
    Position
  },
  props: {
    data: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  provide() {
    return {
      card_data: this.filter_data,
      data: this.data,
      materialsCompanyHidden: this.materialsCompanyHidden,
    };
  },
  inject: ["user_id", "scene", "is_trial"],
  data() {
    return {
      en_default_logo,
    };
  },
  computed: {
    filter_data() {
      const {
        materials = [],
        user_info = {},
        external_user_info = {},
        title = "",
      } = this.data;
      const {
        material_name = "",
        thumbnail_files = [],
        reply_count = 0,
        progress_type,
        chat_progress = {},
        room_dialogue_info = {},
        attachment_files = [],
      } = materials[0];
      const { total_count = 0, chats = [], chat_remark = "" } = chat_progress;
      const { external_chat_id, room_name } = room_dialogue_info;
      const need_chat = total_count > 0;
      const user_name = user_info?.nick_name;
      const external_name = external_user_info?.nick_name;
      const file_list = attachment_files.map((ele) => {
        const { name = "", type = "", size = 0, url = "" } = ele;
        const material_logo_dict = {
          pdf: pdf_file_logo,
          excel: excel_file_logo,
          ppt: ppt_file_logo,
          word: word_file_logo,
        };
        let material_logo = material_logo_dict[type] || unknown_file_logo;
        if(type === "video"){
          material_logo = getVideoSnapshotUrl(url);
        }
        return {
          ...ele,
          material_name: name,
          material_logo,
          subtitle: byteToSize(size),
          href: type === "pdf" ? url : "javascript: void(0)",
          target: type === "pdf" ? "_blank" : "",
        };
      });
      return {
        reply_count,
        /** progress_type
         * 0 线索跟进记录
         * 1 客户/商机跟进记录
         * 6 群聊
         */
        progress_type,
        thumbnail_files,
        remark: material_name,
        //是否附带了聊天记录
        need_chat,
        user_name,
        card_title: title,
        external_name,
        chat_count: total_count,
        chat_list: chats.slice(0, 2),
        chat_title: chat_remark,
        external_chatid: external_chat_id,
        group_name: room_name,
        group_url: useGetGroupUrl(external_chat_id),
        file_list,
        userid_third: external_user_info?.userid_third
      };
    },
    materialInfo() {
      if (this.data.materials) {
        //截取前2个对象控制只显示5行并且添加id属性
        const element_content_list = (
          this.data.materials[0]?.template_detail?.element_content_list.slice(
            0,
            2
          ) || []
        ).map((i, index) => ({
          ...i,
          id: index,
        }));
        return {
          template_name:
            this.data.materials[0]?.template_detail?.template_name || "",
          element_content_list: element_content_list,
        };
      } else return false;
    },
    materialsCompanyHidden() {
      return !!this.data.materials[0]?.company_info?.company_full_name;
    },
    //内容是否有公司图标
    hasCompanyId() {
      return (ele) => {
        return ele.company_id;
      };
    },
    //商机跟新记录在未授权的情况下隐藏跟进记录详情，隐藏后同样没有点击权限
    busInfoAllowShow() {
      if (this.data.materials[0]?.progress_type !== 7) return true;
      else
        return (
          this.data.materials[0]?.progress_type === 7 &&
          this.data.progress_show_flag
        );
    },
    //定位地址
    coordinate_json() {
      return this.data.materials[0]?.coordinate_json
    },
  },
  methods: {
    onClickFollowRecord() {
      if (this.busInfoAllowShow) {
        //判断是否有点击权限
        this.$emit("onClickFollowRecord", {
          target: "CARD",
          data: this.data,
        });
      }
    },
    onClickFollowRecordPhoto(item) {
      this.$emit("onClickFollowRecord", {
        target: "IMG",
        data: item,
      });
    },
    onClickFile(item) {
      this.$emit("onClickFollowRecord", {
        target: "FILE",
        data: item,
      });
      const { name = "", url = "", type = "" } = item;
      if (type !== "pdf") {
        useDownloadFile({
          file_url: url,
          file_name: name.slice(0, name.lastIndexOf(".")),
        });
      }
    },
    //如果是企业内容点击跳转企业详情
    onClickCompanyName(ele, e) {
      if (ele.company_id) {
        //如果存在公司ID则阻止继续冒泡
        e.stopPropagation();
        //跳转企业视图
        this.$emit("onClickCompanyName", {
          company_id: ele.company_id,
          scene: this.scene,
        });
      }
    },
    //判断材料内容是否为空
    checkContentEmpty(item) {
      const flag = Object.keys(item).includes("element_content");
      if (flag) {
        const emptyArry = ["<br><span></span>", null, undefined];
        return emptyArry.includes(item.element_content);
      } else {
        return true;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.follow-up {
  width: 100%;
  cursor: pointer;

  .content-wrap {
    padding: j(8) !important;

    div {
      margin-bottom: j(10px);
    }

    div:last-of-type {
      margin-bottom: 0;
    }

    @include cardContent();
  }

  .content-marginBo-wrap {
    margin-bottom: j(10);
  }

  .text-wrap {
    color: black;

    .content-html {
      @include textEllipsis(4);
    }

    .content-title {
      @extend %flex-middle;
      // text-align: center;
      margin: 0;

      .line {
        background: var(--wl-line-color-dark, #dce1e5);
        height: 1px;
        flex: 1;
        margin-bottom: j(8px);
      }

      .title {
        padding: 0 j(10);
        font-weight: 500;
        font-size: j(15);
      }
    }

    .ele-item {
      margin-bottom: j(8);

      .ele-title {
        font-size: j(14);
        font-weight: 500;
        margin-bottom: j(4);
      }

      .ele-content {
        font-size: j(14);
        font-weight: 400;
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      .text-color {
        color: var(--wl-primary-color-dark, #2950b8);
      }

      .element_content-empty-wrapper {
        margin-top: j(4);
        width: j(40);
        @extend%flex-middle;
        justify-content: space-between;

        .element_content-empty {
          // height: ;
        }
      }

      .content-flex {
        @extend%flex-middle;

        .pic-wrap {
          width: j(28);
          height: j(28);
          margin: 0 j(8) 0 0;
          ::v-deep img {
            object-fit: cover;
            box-shadow: 1px 1px 6px var(--wl-line-color, #e4e9ed);
          }
        }
      }
    }
  }

  .file-list {
    .file-item-wrap {
      &:not(:first-child) {
        margin-top: j(10px);
      }
    }

    .file-item {
      cursor: pointer;
    }
  }

}

a {
  color: black;
}
</style>
