<template>
  <div class="article">
    <el-button type="primary" icon="el-icon-plus" @click="addOrUpdateHandle(null,null,'新建文章')">新建文章</el-button>
    <div class="article-list">
      <div v-if="dataList.length>0" class="list-ul">
        <div v-for="(item,index) in dataList" :key="index" class="list-li" @click="articleHandle(item)">
          <span class="list-li-left">
            <span>{{ item.name }}</span>
            <span>发布时间：{{ item.createDate }}</span>
          </span>
          <span class="list-li-right">
            <span @click.stop="addOrUpdateHandle(item.id)">修改</span>
            <span @click.stop="deleteHandle(item.id)">删除</span>
          </span>
        </div>
      </div>
      <div v-else>暂无数据</div>
    </div>
    <el-pagination background layout="total,prev, pager, next" :total="total" :current-page.sync="page" @current-change="pageCurrentChangeHandle" />
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList" @closeDialog="addOrUpdateVisible=false" />
  </div>
</template>
<script>
import mixinViewModule from '@/mixins/view-module'
import AddOrUpdate from './add-or-update.vue'
export default {
  components: {
    AddOrUpdate
  },
  mixins: [mixinViewModule],
  data() {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/quguang/article/page',
        deleteURL: '/quguang/article',
        getDataListIsPage: true
      }
    }
  },
  created() {
  },
  methods: {
    // 新建文章
    addArticleHandle() {
    },
    // 点击文章跳转
    articleHandle(item) {
      console.log(item)
      this.$router.push({
        name: 'articleContent',
        query: {
          id: item.id
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.article {
  background: #fff;
  width: 100%;
  padding: 16px;
  .article-list {
    margin-top: 25px;
  }
  .list-li {
    display: flex;
    cursor: pointer;
    justify-content: space-between;
    align-items: center;
    padding: 10px 10px;
    border-bottom: 1px solid rgb(237, 236, 236);
  }
  .list-li:hover {
    background: #eef0f2;
  }
  .list-li-left {
    span {
      display: block;
    }
    span:nth-child(1) {
      font-size: 18px;
      font-weight: 700;
      padding-bottom: 6px;
    }
  }
  .list-li-right {
    span:nth-child(1) {
      padding-right: 8px;
      color: rgb(24, 144, 255);
    }
    span:nth-child(2) {
      color: rgb(253, 77, 79);
    }
  }
}
</style>
