<script setup>
import { computed, ref, watch } from "vue";
import { interactionColums } from "./contactsColums";
import { customInterence, equityContacts } from "@/api/api.js";

const props = defineProps({
  interactionDlg: {
    type: Boolean,
    default: false,
  },
  interactionFrom: {
    type: Object,
  },
});
const emit = defineEmits(["close"]);

watch(
  () => props.interactionDlg,
  (nval) => {
    if (nval) getInteractionRelevant();
  }
);

const tableLoading = ref(false)
const tableData = ref([]);
const tabsActive = ref("报告阅读");
const industryName = ref("");
const isFllow = ref(false);
async function getInteractionRelevant() {
  tableLoading.value = true;
  const res = await equityContacts.getInteractionRelevant({
    UserId: props.interactionFrom.id,
    KeyWord: props.interactionFrom.key,
    Source:
      tabsActive.value === "报告阅读"
        ? 1
        : tabsActive.value === "报告收藏"
        ? 2
        : tabsActive.value === "活动互动"
        ? 3
        : 4,
  });
  tableLoading.value = false

  if (res.Ret === 200) {
    industryName.value = res.Data.IndustryName;
    isFllow.value = res.Data.IsFllow;
    tableData.value = res.Data.List || [];
  }
}

function tabsHandle(item) {
  tabsActive.value = item.title;
  tableData = [];
  getInteractionRelevant();
}

/* 表格行的样式 */
function handleRowStyle(key) {
  const style = {
    Title: "color: #409eff; cursor: pointer",
  };
  return style[key] ? style[key] : "";
}

/* 表格行的数据处理 */
function handleRowContent(row, key) {
  if (["ActivityType"].includes(key)) {
    return row[key] == 1 ? "线上" : "线下";
  } else {
    return row[key];
  }
}

/* 表格行的点击事件 */
function handleRowClick(row, key) {
  if (key === "Title") {
    if (row.ArticleType == 1) {
      let url =
        import.meta.env.MODE === "production"
          ? "https://details.hzinsights.com/cygx/report"
          : import.meta.env.MODE === "test"
          ? "http://xcxh5test.hzinsights.com/xcx_h5/cygx/report"
          : "http://xcxh5test.hzinsights.com/xcx_h5/cygx/report";
      let href = `${url}?id=${row.ArticleIdMd5}`;
      window.open(href, "_blank");
    } else {
      let href = `https://vmp.hzinsights.com/v2/articles/${row.ArticleId}`;
      window.open(href, "_blank");
    }
  }
}

//关闭弹框
function cancelHandle() {
  tabsActive.value = "报告阅读";
  emit("close");
}
</script>

<template>
  <div class="container-interaction-dlg">
    <el-dialog
      draggable
      :model-value="interactionDlg"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      @close="cancelHandle"
      center
      width="800px"
    >
      <template #header>
        <div>
          <i
            class="el-icon-close"
            style="
              fontsize: 24px;
              cursor: pointer;
              position: absolute;
              right: 20px;
              top: 50%;
              transform: translateY(-50%);
            "
            @click="cancelHandle"
          ></i>
          <span style="fontsize: 16px">{{ industryName }} - 相关互动</span>
        </div>
      </template>
      <div>
        <template v-if="isFllow">
          <img src="~@/assets/img/attention.png" alt="" />
          关注的产业
        </template>
        <div class="tabs-box">
          <span
            v-for="item in interactionColums"
            :key="item.title"
            :class="tabsActive === item.title ? 'active' : ''"
            @click="tabsHandle(item)"
          >
            {{ item.title }}</span
          >
        </div>
        <div class="content">
          <div v-for="item in interactionColums" :key="item.title">
            <template v-if="tabsActive === item.title">
              <el-table
                :data="tableData"
                v-loading="tableLoading"
                element-loading-text="数据加载中..."
                border
                height="350"
              >
                <el-table-column
                  v-for="val in item.table"
                  :key="val.label"
                  :label="val.label"
                  :width="val.widthsty"
                  :min-width="val.minwidthsty"
                  align="center"
                >
                  <template #default="{ row }">
                    <span
                      @click="handleRowClick(row, val.key)"
                      :style="handleRowStyle(val.key)"
                      >{{ handleRowContent(row, val.key) }}</span
                    >
                  </template>
                </el-table-column>

                <template #empty>
                  <div style="padding: 20px 0">
                    <img
                      src="~@/assets/img/data_m/table_no.png"
                      alt=""
                      style="
                        display: block;
                        width: 135px;
                        height: 90px;
                        margin: 0 auto;
                      "
                    />
                    <span>暂无数据</span>
                  </div>
                </template>
              </el-table>
            </template>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<style scoped lang="scss">
.container-interaction-dlg {
  img {
    width: 15px;
    height: 15px;
  }
  .tabs-box {
    span {
      display: inline-block;
      margin: 10px 60px 20px 0;
      cursor: pointer;
    }
    .active {
      color: #3385ff;
      padding-bottom: 3px;
      border-bottom: 1px solid #3385ff;
    }
  }
  .content {
    margin-bottom: 30px;
  }
}
</style>
