<template>
  <div class="container-interaction-dlg">
    <el-dialog
      v-dialogDrag
      :visible.sync="interactionDlg"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      @close="cancelHandle"
      center
      width="800px"
    >
      <div slot="title">
        <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>
      <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 slot-scope="{ row }">
                    <span @click="handleRowClick(row, val.key)" :style="handleRowStyle(val.key)">{{ handleRowContent(row, val.key) }}</span>
                  </template>
                </el-table-column>
                <div slot="empty" 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>
              </el-table>
            </template>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { interactionColums } from "./contactsColums";
import { customInterence, equityContacts } from "@/api/api.js";
export default {
  name: "",
  components: {},
  props: {
    interactionDlg: {
      type: Boolean,
      default: false,
    },
    interactionFrom: {
      type: Object,
    },
  },
  data() {
    return {
      tableLoading: false,
      tableData: [],
      tabsActive: "报告阅读",
      industryName: "",
      isFllow: false,
    };
  },
  computed: {
    interactionColums() {
      return interactionColums;
    },
  },
  watch: {
    interactionDlg: {
      handler(newValue) {
        if (newValue) {
          this.getInteractionRelevant();
        }
      },
    },
  },
  created() {},
  mounted() {},
  methods: {
    async getInteractionRelevant() {
      const res = await equityContacts.getInteractionRelevant({
        UserId: this.interactionFrom.id,
        KeyWord: this.interactionFrom.key,
        Source: this.tabsActive === "报告阅读" ? 1 : this.tabsActive === "报告收藏" ? 2 : this.tabsActive === "活动互动" ? 3 : 4,
      });
      if (res.Ret === 200) {
        this.industryName = res.Data.IndustryName;
        this.isFllow = res.Data.IsFllow;
        this.tableData = res.Data.List || [];
      }
    },
    tabsHandle(item) {
      this.tabsActive = item.title;
      this.tableData = [];
      this.getInteractionRelevant();
    },
    //关闭弹框
    cancelHandle() {
      this.tabsActive = "报告阅读";
      this.$emit("update:interactionDlg", false);
    },
    /* 表格行的样式 */
    handleRowStyle(key) {
      const style = {
        Title: "color: #409eff; cursor: pointer",
      };
      return style[key] ? style[key] : "";
    },
    /* 表格行的数据处理 */
    handleRowContent(row, key) {
      if (["ActivityType"].includes(key)) {
        return row[key] == 1 ? "线上" : "线下";
      } else {
        return row[key];
      }
    },
    /* 表格行的点击事件 */
    handleRowClick(row, key) {
      if (key === "Title") {
        if (row.ArticleType == 1) {
          let url =
            process.env.NODE_ENV === "production"
              ? "https://details.hzinsights.com/cygx/report"
              : process.env.NODE_ENV === "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");
        }
      }
    },
  },
};
</script>
<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>
