<template>
  <div>
    <el-radio-group v-model="tab" size="small" @change="getList">
      <el-radio-button label="ad">活动直播管理</el-radio-button>
      <el-radio-button label="topic">文章管理</el-radio-button>
      <el-radio-button label="video">视频管理</el-radio-button>
    </el-radio-group>
    <br/>
    <template v-if="tab==='ad'">
      <div>
        <el-button type="success" style="margin-top: 20px;" @click="showAdEdit(null)">添加活动</el-button>
      </div>
      <div class="content" v-if="ads">
        <el-table :data="ads" height="100%" border style="width: 100%">
          <el-table-column prop="title" label="活动标题"></el-table-column>
          <el-table-column prop="position_name" label="位置"></el-table-column>
          <el-table-column label="基本数据">
            <template slot-scope="ad" v-if="tab==='ad'">
              <el-tag type="success">浏览{{ad.row.view_count}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="status_name" label="状态"></el-table-column>
          <el-table-column prop="created_at" label="创建时间"></el-table-column>
          <el-table-column label="操作" width="300px;">
            <template slot-scope="ad" v-if="tab==='ad'">
              <el-button type="primary" @click="showAdEdit(ad.row)">编辑<i class="el-icon-edit el-icon--right"></i>
              </el-button>
              <el-button type="danger" @click="deleteAd(ad.row.id)">删除<i class="el-icon-delete el-icon--right"></i>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination class="order-footer" background layout="prev, pager, next" :page-size="20"
                     :total="total" @current-change="handleCurrentChange"/>

    </template>
    <template v-if="tab==='topic'">
      <div class="content" v-if="topics">
        <el-table :data="topics" height="100%" border style="width: 100%">
          <el-table-column prop="title" label="文章标题"></el-table-column>
          <el-table-column prop="nickname" label="作者"></el-table-column>
          <el-table-column prop="created_at" label="发布时间"></el-table-column>
          <el-table-column label="基本数据" width="290px">
            <template slot-scope="topic" v-if="tab==='topic'">
              <el-tag type="success">浏览{{topic.row.view_count}}</el-tag>
              <el-tag type="info">点赞{{topic.row.like_count}}</el-tag>
              <el-tag type="warning">收藏{{topic.row.favorite_count}}</el-tag>
              <el-tag type="danger">评论{{topic.row.reply_count}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="380px" v-if="tab==='topic'">
            <template slot-scope="topic" v-if="tab==='topic'">
              <template v-if="Number(topic.row.order) > 0">
                <el-button type="primary" @click="topTopic(topic.row.id,topic.row.order)">取消置顶<i
                  class="el-icon-top el-icon--right"></i>
                </el-button>
              </template>
              <template v-if="Number(topic.row.order) === 0">
                <el-button type="primary" @click="topTopic(topic.row.id,topic.row.order)">置顶<i
                  class="el-icon-top el-icon--right"></i>
                </el-button>
              </template>
              <template v-if="topic.row.is_excellent==='yes'">
                <el-button type="success" @click="recTopic(topic.row.id,topic.row.is_excellent)">取消推荐<i
                  class="el-icon-collection-tag el-icon--right"></i></el-button>
              </template>
              <template v-if="topic.row.is_excellent==='no'">
                <el-button type="success" @click="recTopic(topic.row.id,topic.row.is_excellent)">推荐<i
                  class="el-icon-collection-tag el-icon--right"></i></el-button>
              </template>
              <el-button type="danger" @click="delTopic(topic.row.id)">删除<i
                class="el-icon-delete el-icon--right"></i></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination class="order-footer" background layout="prev, pager, next" :page-size="20"
                     :total="total" @current-change="handleCurrentChange"/>

    </template>
    <template v-if="tab==='video'">
      <div class="content" v-if="videos">
        <el-table :data="videos" height="100%" border style="width: 100%">
          <el-table-column prop="title" label="视频简介"></el-table-column>
          <el-table-column prop="nickname" label="作者"></el-table-column>
          <el-table-column prop="created_at" label="发布时间"></el-table-column>
          <el-table-column label="基本数据" width="340px">
            <template slot-scope="video" v-if="tab==='video'">
              <el-tag type="success">浏览：{{video.row.view_count}}</el-tag>
              <el-tag type="info">点赞：{{video.row.like_count}}</el-tag>
              <el-tag type="warning">收藏：{{video.row.favorite_count}}</el-tag>
              <el-tag type="danger">评论：{{video.row.reply_count}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="status_name" label="状态"></el-table-column>
          <el-table-column label="操作" width="340px">
            <template slot-scope="video" v-if="tab==='video'">
              <el-button type="primary" v-if="video.row.status==1" @click="approveVideo(video.row.id)">下架<i
                class="el-icon-bottom el-icon--right"></i></el-button>
              <el-button type="primary" v-if="video.row.status==0" @click="approveVideo(video.row.id)">上架<i
                class="el-icon-top el-icon--right"></i></el-button>
              <el-button type="danger" @click="deleteVideo(video.row.id)">删除<i
                class="el-icon-delete el-icon--right"></i></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination class="order-footer" background layout="prev, pager, next" :page-size="20"
                     :total="total" @current-change="handleCurrentChange"/>

    </template>

    <el-dialog title="活动管理" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="活动标题" :label-width="formLabelWidth">
          <el-input v-model="form.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="链接" :label-width="formLabelWidth">
          <el-input v-model="form.url" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户UID" :label-width="formLabelWidth">
          <el-input v-model="form.uid" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="话题标签" :label-width="formLabelWidth">
          <el-input v-model="form.tags" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-select v-model="form.status" placeholder="请选择上架/下架">
            <el-option label="上架" value="1"></el-option>
            <el-option label="下架" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="类型" :label-width="formLabelWidth">
          <el-select v-model="form.type" placeholder="请选择类型">
            <el-option label="文章" value="1"></el-option>
            <el-option label="视频" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="广告位置" :label-width="formLabelWidth">
          <el-select v-model="form.position" placeholder="请选择位置">
            <el-option label="广告位1" value="1"></el-option>
            <el-option label="广告位2" value="2"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="editAd">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        page: 1,
        size: 20,
        tab: 'ad',
        total: 1,
        ads: [],
        topics: [],
        videos: [],
        form: {
          title: '',
          url: '',
          type: '1',
          tags: '',
          status: '1',
          position: '1'
        },
        dialogFormVisible: false,
        formLabelWidth: '120px',
      };
    },
    mounted() {
      this.getList();
    },
    methods: {
      topTopic(id, order) {
        let hint = '是否置顶文章?';
        if (order > 0) {
          hint = '是否取消推荐文章?';
        }
        this.$confirm(hint, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let res = this.$post('/api/admin/jishuquan/top_topic', {id: id}).then(res => {
            if (res.status === 1) {
              this.$message({
                type: 'success',
                message: '操作成功!'
              });
              this.getList();
            }
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
      },
      recTopic(id, status) {
        let hint = '是否推荐文章?';
        if (status === 'yes') {
          hint = '是否取消推荐文章?';
        }
        this.$confirm(hint, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let res = this.$post('/api/admin/jishuquan/rec_topic', {id: id}).then(res => {
            if (res.status === 1) {
              this.$message({
                type: 'success',
                message: '操作成功!'
              });
              this.getList();
            }
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
      },
      delTopic(id) {
        this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let res = this.$post('/api/admin/jishuquan/delete_topic', {id: id}).then(res => {
            if (res.status == 1) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.getList();
            }
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      approveVideo(id) {
        this.$confirm('更改视频状态', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let res = this.$post('/api/admin/jishuquan/audit_video', {id: id}).then(res => {
            if (res.status == 1) {
              this.$message({
                type: 'success',
                message: '操作成功!'
              });
              this.getList();
            }
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
      },
      deleteVideo(id) {
        this.$confirm('此操作将永久删除该视频, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let res = this.$post('/api/admin/jishuquan/delete_video', {id: id}).then(res => {
            if (res.status == 1) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.getList();
            }
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      showAdEdit(item) {
        console.log(item);
        if (item != null) {
          this.form.id = item.id;
          this.form.title = item.title;
          this.form.url = item.url;
          this.form.type = item.type;
          this.form.tags = item.tags;
          this.form.status = item.status;
          this.form.position = item.position;
          this.form.uid = item.uid;
        }
        this.dialogFormVisible = true;
      },

      deleteAd(id) {
        this.$confirm('此操作将永久删除该活动, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let res = this.$post('/api/admin/jishuquan/delete_ad', {id: id}).then(res => {
            if (res.status == 1) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.getList();
            }
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      async editAd() {
        let form = this.form;
        if (form.id) {
          let res = await this.$post("/api/admin/jishuquan/update_ad", form);
          console.log(res);
          if (res.status == 1) {
            this.$message({
              type: "success",
              message: "修改成功"
            });
          }
        } else {
          let res = this.$post("/api/admin/jishuquan/create_ad", form);
          if (res.status == 1) {
            this.$message.success("创建成功");
            this.form = {
              title: '',
              url: '',
              type: '1',
              tags: '',
              status: '1',
              position: '1'
            };
          }
        }

        this.getList();
        this.dialogFormVisible = false;

      },
      handleCurrentChange(val) {
        this.page = val;
        this.getList();
      },
      async getList() {
        const page = this.page;
        const size = this.size;
        const data = {
          page,
          size
        };
        let res;
        switch (this.tab) {
          case "ad":
            res = await this.$post("/api/admin/jishuquan/get_ads", data);
            this.ads = res.data.ads;
            this.total = res.data.total;
            break;
          case 'video':
            res = await this.$post("/api/admin/jishuquan/get_videos", data);
            this.videos = res.data.videos;
            this.total = res.data.total;
            break;
          case 'topic':
            res = await this.$post("/api/admin/jishuquan/get_topics", data);
            this.topics = res.data.topics;
            this.total = res.data.total;
            break;

        }


      },
      async contact(id) {

        const data = {
          id
        };
        let res = await this.$post("/api/admin/jishuquan/get_ads", data);
        this.$message({
          message: res.info,
          type: 'success'
        });
      },
    }
  };
</script>

<style lang="scss" scoped>
  .count-list {
    padding-bottom: 10px;
    display: flex;
    align-items: center;
  }

  .count-item {
    margin-right: 20px;
    font-size: 16px;
  }

  .content {
    margin-top: 30px;
    white-space: nowrap;
    overflow-x: scroll;
    height: calc(100vh - 150px);
  }

  .btn {
    width: 80px;
  }

  .order-footer {
    margin-top: 10px;
  }
</style>
