<template>
  <!-- 弹出框表单 -->
  <el-drawer
    :visible.sync="open"
    :direction="direction"
    :destroy-on-close="true"
    size="40%"
  >
    <div slot="title" class="title">
      <h4
        :class="activeTitle == 0 ? 'title_text active' : 'title_text'"
        @click="handleTitle(0)"
      >
        浏览（{{ drawerTableData.row ? drawerTableData.row.viewNums : 0 }}）
      </h4>
      <h4
        :class="activeTitle == 1 ? 'title_text active' : 'title_text'"
        @click="handleTitle(1)"
      >
        分享（{{ drawerTableData.row ? drawerTableData.row.shareNums : 0 }}）
      </h4>
    </div>
    <div class="form">
      <el-table :data="tableData.data" border style="width: 100%">
        <el-table-column type="index" width="50" label="序号">
        </el-table-column>
        <el-table-column prop="viewName" label="浏览人员"> </el-table-column>
        <el-table-column prop="sumViews" label="浏览次数"> </el-table-column>
        <el-table-column prop="viewTime" label="最近浏览时间">
          <template slot-scope="scope">
            <span>{{ timeFix(scope.row.viewTime) }}</span>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="tableData.current_page"
          :page-size="10"
          layout="total, prev, pager, next"
          :total="tableData.total"
        >
        </el-pagination>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import form from "@/assets/mixins/formdialog";
import { timestampToTime } from "@/assets/utils/dateFormat.js";
export default {
  name: "NewsDetail",
  props: {
    drawerTableData: {
      type: Object,
      default: {},
    },
  },
  mixins: [form],
  components: {},
  computed: {
    timeFix(val) {
      console.log(val);
      return (val) => {
        let time = timestampToTime(val, 6);
        return time;
      };
    },
  },
  data() {
    return {
      // 遮罩层
      loading: false,
      // 弹出层标题
      title: "新闻",
      // 是否显示弹出层
      open: false,
      tableData: [],
      activeTitle: 0,
    };
  },

  methods: {
    // 标题切换操作
    handleTitle(i) {
      this.activeTitle = i;
      this.activeTitle == 0 ? this.handleView() : this.handleShare();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.activeTitle == 0 ? this.handleView(val) : this.handleShare(val);
    },
    //查询详细
    handleView(val = 1) {
      this.$post("/news/record/list", {
        newsId: this.drawerTableData.row.id,
        page: val,
      })
        .then((res) => {
          if (res.code == 1) {
            this.tableData = res.data;
          }
        })
        .catch((error) => {
          this.$message.error(error.message);
        });
    },
    //分享详细
    handleShare(val = 1) {
      this.$post("/news/share/list", {
        newsId: this.drawerTableData.row.id,
        page: val,
      })
        .then((res) => {
          if (res.code == 1) {
            console.log("shares-data", res);
            this.tableData = res.data;
          }
        })
        .catch((error) => {
          this.$message.error(error.message);
        });
    },
    /** 编辑 */
    edit(row) {
      this.reset();
      this.query = { id: row.id };
      this.urls.currUrl = "news/edit";
      this.getData();
      this.pageInfo.type = "edit";
      this.title = "修改新闻";
    },
    /** 新增 */
    add(row) {
      this.reset();
      this.urls.currUrl = "news/add";
      this.getData();
      this.pageInfo.type = "add";
      this.title = "新增新闻";
    },
    /** 查看*/
    view(row) {
      this.reset();
      this.query = { id: row.id };
      this.urls.currUrl = "news/view";
      this.getData();
      this.pageInfo.type = "view";
      this.title = "新闻详细";
    },
    /**取消按钮 */
    cancel() {
      this.open = false;
    },
    /**获取数据后弹框 */
    afterRender(data) {
      this.open = true;
    },
  },
  watch: {
    open: {
      handler(val) {
        if (val) {
          this.tableData = this.drawerTableData;
          console.log(this.drawerTableData);
          this.drawerTableData.title == "浏览"
            ? (this.activeTitle = 0)
            : (this.activeTitle = 1);
        }
      },
    },
  },
};
</script>
<style lang="less" scoped>
.footerbtns {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid gainsboro;
  display: flex;
  justify-content: center;
  align-content: center;
}
.form {
  width: 100%;
  padding: 20px;
}
.title {
  width: 100%;
  display: flex;
  align-items: center;
  .title_text {
    width: 20%;
    color: #333;
    opacity: 0.5;
    cursor: pointer;
  }
  .active {
    opacity: 1;
    color: #333;
  }
}
.block {
  width: 100%;
  text-align: end;
}
</style>