<template>
  <div class="container yanxuan-special_container">
    <div class="author-content">
      <div class="top">
        <div>专栏作者</div>
        <el-button type="primary" @click="addAuthorDlgVisible = true">新建作者</el-button>
      </div>
      <div class="author-ul">
        <div class="author-li" v-for="item in authorInfoData" :key="item.Id">
          <div class="avatar">
            <img :src="item.HeadImg" alt="" />
          </div>
          <div class="info-content">
            <p class="info-name">{{ item.SpecialName }}</p>
            <p>昵称：{{ item.NickName }}</p>
            <p>{{ item.RealName }}-{{ item.Mobile }}</p>
            <p>{{ item.CompanyName }}</p>
          </div>
          <div class="switch-box">
            <el-switch style="display: block" @change="switchAuthorChange(item)" v-model="item.Status" :active-value="1" :inactive-value="2" active-color="#13ce66" inactive-color="#ff4949">
            </el-switch>
          </div>
        </div>
      </div>
    </div>
    <div class="examine-content">
      <p>待审核内容</p>
      <template v-if="specialListData.length > 0">
        <div class="content-box-examine" v-for="item in specialListData" :key="item.Id">
          <div class="info-box" style="margin-bottom: 20px">
            <div class="avatar">
              <img :src="item.HeadImg" alt="" />
            </div>
            <div class="info-content">
              <p class="info-name">{{ item.NickName || item.RealName }}</p>
              <p>{{ item.PublishTime }}</p>
            </div>
          </div>
          <div class="content-detial" v-html="item.Content"></div>
          <div class="look-all-txt" v-if="item.ContentHasImg || item.isShowBtn" @click="lookAllDetails(item)">查看全文</div>
          <div class="file-box" v-for="(key, indexs) in item.Docs" :key="indexs" @click="handleOperation(key)">
            <img :src="key.DocIcon" alt="" />
            {{ key.DocName }}.{{ key.DocSuffix }}
          </div>
          <div class="img-box">
            <template v-if="item.ImgUrl">
              <!-- <el-image style="width: 112px; height: 112px" fit="fill" v-for="(key, index) in item.ImgUrl.split(',')" :key="index" :src="key" :preview-src-list="item.ImgUrl.split(',')"> </el-image> -->
              <img style="width: 112px; height: 112px" v-for="(key, index) in item.ImgUrl.split(',')" :key="index" :src="key" @click="showPreviewHandles(key)" />
            </template>
          </div>
          <div>
            <template v-if="item.Tags">
              <div class="lable-li" v-for="(key, index) in item.Tags.split(',')" :key="index">{{ key }}</div>
            </template>
          </div>
          <div class="bottom-button">
            <div @click="submitRejectDlgHandler(item)">驳回</div>
            <div @click="openMessage(item)">通过</div>
          </div>
        </div>
      </template>
      <div class="no-data" v-else>
        <div style="text-align: center">
          <img src="~@/assets/img/data_m/table_no.png" alt="" style="display: block; width: 135px; height: 112px; margin: 0 auto" />
          <span>暂无数据</span>
        </div>
      </div>
    </div>
    <special-dlg :addAuthorDlgVisible.sync="addAuthorDlgVisible" :submitRejectDlgVisible.sync="submitRejectDlgVisible" :submitRejectId="submitRejectId" />
    <el-image-viewer v-if="showPreview" :urlList="previewImages" :on-close="closeViewer" :zIndex="99999"></el-image-viewer>
  </div>
</template>

<script>
import ElImageViewer from "element-ui/packages/image/src/image-viewer";
import SpecialDlg from "./components/specialDlg.vue";
import { raiInterface } from "@/api/api.js";
import { async } from "@antv/x6/lib/registry/marker/async";
export default {
  name: "",
  components: { SpecialDlg, ElImageViewer },
  props: {},
  data() {
    return {
      addAuthorDlgVisible: false,
      submitRejectDlgVisible: false, // 驳回的显示
      submitRejectId: 0, // 驳回的ID
      authorInfoData: [], // 作者信息列表
      specialListData: [], // 审核列表
      showPreview: false, //
      previewImages: [],
    };
  },
  watch: {},
  created() {},
  mounted() {
    this.getAuthorList();
    this.getSpecialList();
    this.$nextTick(() => {});
    // let rowNum = Math.round($(".content-detial").height() / parseFloat($(".content-detial").css("line-height")));
  },
  methods: {
    showPreviewHandles(item) {
      console.log(123);
      this.showPreview = true;
      this.previewImages = [item];
    },
    closeViewer() {
      this.showPreview = false;
      document.querySelector("body").classList.remove("el-popup-imageView--hidden");
    },
    // 审核通过的确认按钮
    openMessage(item) {
      this.$confirm("确定通过此内容在小程序展示吗？", "审核通过", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const res = await raiInterface.yanxuan_specialEnable({
            Id: item.Id,
            Status: 1,
          });
          if (res.Ret === 200) {
            this.$message.success("审核成功!");
            this.getSpecialList();
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    // 获取作者列表
    async getAuthorList() {
      const res = await raiInterface.yanxuan_specialAuthorList();
      if (res.Ret === 200) {
        this.authorInfoData = res.Data || [];
      }
    },
    // 作者的关闭或者打开
    async switchAuthorChange(item) {
      const res = await raiInterface.yanxuan_specialAuthorEnable({
        UserId: item.UserId,
        Status: item.Status,
      });
      if (res.Ret === 200) {
        this.$message.success("操作成功!");
      }
    },
    // 审核列表
    async getSpecialList() {
      const res = await raiInterface.yanxuan_specialList();
      if (res.Ret === 200) {
        this.specialListData = res.Data || [];

        this.$nextTick(() => {
          this.specialListData.forEach((item, index) => {
            let h = document.getElementsByClassName("content-detial")[index].clientHeight;
            this.$set(item, "isShowBtn", h >= 134 ? true : false);
          });
        });
      }
    },
    // 驳回的弹框显示
    submitRejectDlgHandler(item) {
      this.submitRejectId = item.Id;
      this.submitRejectDlgVisible = true;
    },
    handleOperation: _.debounce(function (item) {
      const url = item.DocUrl;
      if (!url) {
        this.$message.warning("文件错误");
        return;
      }
      const reg = /\.(pdf)$/;
      // pdf
      if (reg.test(url)) {
        window.open(url, "_blank");
      } else {
        window.open("https://view.officeapps.live.com/op/view.aspx?src=" + url, "_blank");
      }
    }, 200),
    lookAllDetails(item) {
      let url =
        process.env.NODE_ENV === "production"
          ? `https://web.hzinsights.com/column/detail/${item.Id}`
          : process.env.NODE_ENV === `test`
          ? `https://clpttest.hzinsights.com/column/detail/${item.Id}`
          : `https://clpttest.hzinsights.com/column/detail/${item.Id}`;
      window.open(url, "_blank");
    },
  },
};
</script>
<style lang="scss">
div {
  box-sizing: border-box;
}
.yanxuan-special_container {
  display: flex;
  justify-content: space-between;
  .author-content {
    width: 400px;
    height: calc(100vh - 118px);
    border-radius: 4px;
    background-color: #fff;
    padding: 20px;
    box-sizing: border-box;
    flex-shrink: 0;
    .top {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .author-ul {
      padding-bottom: 10px;
      height: 100%;
      overflow: hidden;
      overflow-y: auto;
      .author-li {
        flex: 1;
        padding: 20px;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #dcdfe6;
        margin: 10px 0;
        .switch-box {
          width: 30px;
          flex-shrink: 0;
        }
      }
    }
  }
  .info-content {
    flex: 1;
    padding-left: 16px;
    color: #999999;
    p {
      margin: 5px 0;
    }
  }
  .avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    background: #d9d9d9;
    flex-shrink: 0;
    img {
      width: 48px;
      height: 48px;
    }
  }
  .info-name {
    font-size: 16px;
    color: #333;
    font-weight: 500;
  }
  .examine-content {
    margin-left: 20px;
    padding: 20px;
    flex: 1;
    background: #fff;
    flex-direction: 0;
    overflow: hidden;
    .no-data {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .content-box-examine {
      padding: 30px 0;
      border-bottom: 1px solid #dcdfe6;
    }
    .info-box {
      display: flex;
    }
    .content-detial {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 8;
      img {
        width: 100%;
        max-height: 300px;
      }
    }
    .look-all-txt {
      color: #409eff;
      font-size: 16px;
      margin-top: 20px;
      cursor: pointer;
    }
    .file-box {
      display: flex;
      align-items: center;
      margin-top: 20px;
      height: 64px;
      cursor: pointer;
      img {
        width: 27px;
        height: 27px;
        margin-right: 15px;
      }
    }
    .img-box {
      margin: 20px 0;
      height: 112px;
      img {
        object-fit: fill !important;
        cursor: pointer;
        margin-right: 20px;
      }
    }
    .lable-li {
      display: inline-block;
      padding: 4px 20px;
      height: 28px;
      border-radius: 48px;
      margin: 0 15px 15px 0;
      border: 1px solid #409eff;
      background-color: #eaf3fe;
      color: #409eff;
    }
    .bottom-button {
      margin: 50px;
      display: flex;
      justify-content: center;
      color: #fff;
      div {
        cursor: pointer;
        width: 120px;
        height: 40px;
        padding: 10px 46px 10px 46px;
        border-radius: 4px;
        background: #c54322;
      }
      div:nth-child(2) {
        margin-left: 20px;
        background: #67c23a;
      }
    }
  }
}
/deep/.el-image {
  img {
    object-fit: fill !important;
  }
}
</style>
