<style lang="scss" scoped>
.tbl {
  // border:1px solid #ccc;
}
.tbl tr {
  height: 31px;
}
.tbl td {
  padding: 5px;
  border: 1px solid #ccc;
}
// 活动回顾
.journalItem {
  height: 35px;
  background: #0f1f8c;
  margin-top: 65px;
  display: flex;
  // flex-direction: column;
  justify-content: space-between;
  position: relative;
}
.journalItem .title {
  color: #ffffff;
  width: 100px;
  line-height: 35px;
  text-align: center;
}
.add{
  position:absolute;
  right: 0px;
  top:-35px;
  background: #0f1f8c;
  border:1px solid #0f1f8c;
}
.overActivity {
}
</style>
<template>
  <section>
    <p><span>刊群导览></span>期刊详情</p>
    <div class="content">
      <div class="jDetail">
        <img
          :src="form.img"
          alt=""
          width="159"
          height="210"
          style="float: left"
        />
        <table
          class="tbl"
          cellpadding="0"
          cellspacing="0"
          width="80%"
          style="float: left; margin-left: 45px"
        >
          <tr>
            <td width="119" align="right">名称：</td>
            <td>{{ form.name }}</td>
          </tr>
          <tr>
            <td align="right">微信号：</td>
            <td>{{ form.wxcode }}</td>
          </tr>
          <tr>
            <td align="right">主办单位：</td>
            <td>{{ form.organizer_name }}</td>
          </tr>
          <tr>
            <td align="right">所属学科：</td>
            <td>{{ form.subject_name }}</td>
          </tr>
          <tr>
            <td align="right">简介：</td>
            <td>{{ form.desc }}</td>
          </tr>
        </table>
        <div style="clear: both; height: 0; content: ''"></div>
      </div>
      <!-- 活动回顾 -->
      <div class="journalItem overActivity">
        <div class="title">活动回顾</div>
        <div class="title more">查看更多>></div>
        <el-button type="primary" class="add" size="mini">发布活动回顾</el-button>
      </div>
      <div>
        <el-table
          :data="oldActivityList"
        >
          <el-table-column label="活动海报">
            <template slot-scope="scope">
              <img :src="scope.row.img" alt="" width="120" height="80" style="margin:10px;">
            </template>
          </el-table-column>
          <el-table-column label="活动名称" prop="name"></el-table-column>
          <el-table-column label="活动时间">
            <template slot-scope="scope">
              <p>{{scope.row.begin_time}}</p>
              <p>{{scope.row.end_time}}</p>
            </template>
          </el-table-column>
          <el-table-column label="活动地址" prop="address"></el-table-column>
          <el-table-column label="活动简介" prop="desc" width="500"></el-table-column>
          <el-table-column label="活动人数" prop="assembly_number"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button class="edit" type="text" @click="edit(scope.row)"
                >编辑</el-button
              >
              <el-button class="del" @click="del" type="text">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 活动预告 -->
      <div class="journalItem preActivity">
        <div class="title">活动预告</div>
        <div class="title more">查看更多>></div>
        <el-button type="primary" class="add" size="mini">发布活动预告</el-button>
      </div>
      <div>
        <el-table
          :data="newActivityList"
        >
          <el-table-column label="活动海报">
            <template slot-scope="scope">
              <img :src="scope.row.img" alt="" width="120" height="80" style="margin:10px;">
            </template>
          </el-table-column>
          <el-table-column label="活动名称" prop="name"></el-table-column>
          <el-table-column label="活动时间">
            <template slot-scope="scope">
              <p>{{scope.row.begin_time}}</p>
              <p>{{scope.row.end_time}}</p>
            </template>
          </el-table-column>
          <el-table-column label="活动地址" prop="address"></el-table-column>
          <el-table-column label="活动简介" prop="desc" width="500"></el-table-column>
          <el-table-column label="活动人数" prop="assembly_number"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button class="edit" type="text" @click="edit(scope.row)"
                >编辑</el-button
              >
              <el-button class="del" @click="del" type="text">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 精品文章 -->
      <div class="journalItem preActivity">
        <div class="title">精品文章</div>
        <div class="title more">查看更多>></div>
        <el-button type="primary" class="add" size="mini">发布精品文章</el-button>
      </div>
      <div>
        <el-table
          :data="goodArticleList"
        >
          <el-table-column label="文章名称" prop="name"></el-table-column>
          <el-table-column label="作者" prop="author"></el-table-column>
          <el-table-column label="发布时间" prop="ctime" width="500"></el-table-column>
          <el-table-column label="出版时间" prop="publish_time"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button class="edit" type="text" @click="edit(scope.row)"
                >编辑</el-button
              >
              <el-button class="del" @click="del" type="text">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </section>
</template>
<script>
import fuEditor from "../../components/fuEditor";
export default {
  components: {
    fuEditor,
  },
  data() {
    return {
      form: {},
      oldActivityList: [],
      newActivityList: [],
      organizerList: [],
      goodArticleList:[],
      imageUrl: "",
      rules: {
        name: [{ required: true, message: "请输入标题", trigger: "blur" }],
        wxcode: [{ required: true, message: "请输入微信号", trigger: "blur" }],
        organizer_id: [
          { required: true, message: "请选择主办单位", trigger: "blur" },
        ],
        subject_id: [
          { required: true, message: "请选择学科", trigger: "change" },
        ],
        img: [{ required: true, message: "封面图", trigger: "blur" }],
      },
    };
  },
  methods: {
    gopage(size) {
      if (size) {
        this.form.page_size = size;
      }
      this.form.page = this.$refs.pageButton.page;
      this.getData();
    },
    getData() {
      this.loading = true;
      // 期刊详情
      let id = this.$route.query.id;
      if (id) {
        this.$api.showJournal({ id: id }).then((res) => {
          console.log(res)
          this.form = res.data.data;
          this.oldActivityList = res.data.data.old_activity;
          this.newActivityList = res.data.data.new_activity;
          this.goodArticleList = res.data.data.good_article;
        });
      }
    },
    del(id) {
      this.$confirm("确定删除吗", "提示", {
        type: "warning",
      }).then(() => {
        this.$api.delJournal({ id: id }).then((res) => {
          this.$message({
            message: "删除成功",
            type: "success",
          });
          this.getData();
        });
      });
    },
  },
  created() {
    this.getData();
  },
};
</script>
