<template>
  <t-card :bordered="false">
    <div class="form-step-container">
      <t-tabs v-model="state" @change="tabIndexChange">
        <t-tab-panel :value="2" label="已通过" :destroyOnHide="false"></t-tab-panel>
        <t-tab-panel :value="1" label="待审核" :destroyOnHide="false"></t-tab-panel>
        <t-tab-panel :value="3" label="已拒绝" :destroyOnHide="false"></t-tab-panel>
      </t-tabs>
      <t-table
        rowKey="index"
        :data="list"
        :columns="columns"
        :stripe="false"
        :bordered="false"
        :hover="true"
        size="large"
        table-layout="auto"
        cellEmptyContent="-"
        :pagination="pagination"
      >
        <template #member_info="{ row }">
          <div>{{row.member.nikename}}</div>
        </template>
        <template #files="{ row }">
          <a v-for="item in row.files" :href="$store.state.user.apiUrl+item" target="_blank">
            <img :src="$store.state.user.apiUrl+item" style="width: 100px;margin-right: 10px"/>
          </a>
        </template>
        <template #this_top="{ row }">
          <t-tag v-if="row.is_top==0" theme="success" @click="topNews(row)" style="cursor: pointer">点击置顶</t-tag>
          <t-tag v-if="row.is_top>0" theme="warning" @click="topNews(row)" style="cursor: pointer">取消置顶</t-tag>
        </template>
        <template #select="{ row }">
          <t-space :size="0">
            <t-popconfirm v-if="row.status==1" content="确定要审核通过吗？" @confirm="review(row,1)">
              <t-button theme="primary">通过</t-button>
            </t-popconfirm>
            <t-popconfirm v-if="row.status==1" theme="danger" @confirm="review(row,2)">
              <template slot="content">
                <p class="title">拒绝理由</p>
                <p class="describe" style="margin-top: 10px">
                  <t-input v-model="reason" placeholder="请输入拒绝理由"/>
                </p>
              </template>
              <t-button theme="warning" style="margin: 0px 10px">拒绝</t-button>
            </t-popconfirm>
            <t-popconfirm content="确认删除吗？" @confirm="del(row)">
              <t-button theme="danger">删除</t-button>
            </t-popconfirm>
          </t-space>
        </template>
      </t-table>
      <div style="margin-top: 30px">
        <t-pagination
          :total="pagination.total"
          :page-size="pagination.size"
          @current-change="onCurrentChange"
          :showPageSize="false"
        ></t-pagination>
      </div>
    </div>
  </t-card>

</template>
<script lang="ts">
import store from "@/store";

export default {
  data() {
    return {
      state: 2,
      list: [],
      reason:'',
      columns: [
        {colKey: 'title', title: '标题', align: 'center'},
        {colKey: 'content', title: '内容', align: 'center'},
        {colKey: 'member_info', title: '发布者', align: 'center'},
        {colKey: 'files', title: '图片', align: 'center'},
        {colKey: 'createtime', title: '创建时间', align: 'center'},
        {colKey: 'this_top', title: '置顶', align: 'center'},
        {colKey: 'select', title: '操作', width: 200},
      ],
      pagination: {
        page: 1,
        size: 10,
        total: 0,
      },
    }
  },
  mounted() {
    //this.member_id=this.$route.query.id;
    if(typeof (store.state.user.association)=='object'){
      this.association=store.state.user.association;
    }else{
      this.association=JSON.parse(store.state.user.association);
    }
    this.getList();
    //this.getGory();
  },
  methods: {
    tabIndexChange(index){
      this.state=index;
      this.pagination.page=1;
      this.getList();
    },
    topNews(row){
      console.log(row);
      this.$request
        .post('/tweets/pin', {id: row.id})
        .then((res) => {
          if (res.code == 1) {
            this.$message.success('置顶成功');
            this.getList();
          } else {
            this.$message.error(res.msg);
          }
          console.log(res);
        })
        .catch((e) => {
          console.log(e);
        });
    },
    review(d,type){
      console.log(d);
      this.$request
        .post('/tweets/review', {id: d.id,status:type,reason:this.reason})
        .then((res) => {
          if (res.code == 1) {
            this.$message.success(res.msg);
            this.getList();
          } else {
            this.$message.error(res.msg);
          }
          console.log(res);
        })
        .catch((e) => {
          console.log(e);
        });
    },
    del(d) {
      console.log(d);
      this.$request
        .post('/tweets/destroy', {id: d.id})
        .then((res) => {
          if (res.code == 1) {
            this.$message.success('删除成功！');
            this.pagination.page=1;
            this.getList();
          } else {
            this.$message.error(res.msg);
          }
          console.log(res);
        })
        .catch((e) => {
          console.log(e);
        });
    },
    onCurrentChange(d){
      this.page=d;
      this.getList();
    },
    getList() {
      this.$request
        .post("/tweets/index", {state:this.state,page: this.pagination.page, size: this.pagination.size})
        .then((res) => {
          console.log(res);
          if (res.code == 1) {
            this.list = res.data.data;
            this.pagination.total = res.data.total;
          }

        })
        .catch((e) => {
          console.log(e);
        });
    },
  }
}
</script>
