<template>
  <!-- 查询配置 -->
  <div style="padding: 0px 20px">
    <div ref="lxHeader">
      <lx-header icon="md-apps" text="安全生产通讯稿" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
        <slot>
          <div style="display: flex;justify-content: flex-start;flex-wrap: wrap;">
            <Input v-model="select.keyword" style="width: 150px;margin-right: 10px;" placeholder="关键字搜索" />
            <Button type="primary" @click="getList" style="margin-right: 10px;">查询</Button>
            <Button type="primary" style="margin-right: 10px;" @click="editArticle('add')">添加</Button>
          </div>
        </slot>
      </lx-header>
    </div>
    <xy-table :list="list" :total="total" stripe @pageSizeChange="e => {select.page_size = e,getList()}"
      @pageIndexChange="e => {select.page = e,getList()}" :table-item="table">
      <template v-slot:btns>
        <el-table-column align='center' label="操作" width="200" header-align="center">
          <template slot-scope="scope">
            <Button style="margin-right:5px;margin-bottom:5px;" type="primary" size="small"
              @click="editArticle('editor',scope.row.id)">编辑</Button>
            <Poptip transfer confirm title="确认要删除吗？" @on-ok="deleteList(scope.row.id)">
              <Button type="primary" ghost size="small" style='margin-left:5px;margin-bottom:5px;'>删除</Button>
            </Poptip>
          </template>
        </el-table-column>
      </template>
    </xy-table>
    <addArticle ref="addArticle" @refresh="getList"></addArticle>

  </div>
</template>

<script>
  import {
    index,
    destroy
  } from '@/api/task/newplan.js'
  import addArticle from "@/views/dashboard/components/addArticle.vue"
  export default {
    components: {
      addArticle
    },
    data() {
      return {
        select: {
          keyword: "",
          page: 1,
          page_size: 15,
          table_name: 'articles',
          with_relations:['image']
        },
        list: [],
        table: [{
          label: "标题",
          prop: 'title',
          align: 'left',
        }, {
          label: "发布时间",
          prop: 'created_at',
          align: 'center',
          width: 180
        }],
        total: 0
      }
    },
    created() {
      this.getList()
    },
    mounted() {},
    methods: {
      async getList() {
        const res = await index({
          ...this.select,
          filter: [{
            key: 'title',
            op: 'like',
            value: this.select.keyword
          }],
        })
        this.list = res.data
        this.total = res.total
      },
      editArticle(type, id) {
        if (id) {
          this.$refs.addArticle.id = id
        }
        this.$refs.addArticle.type = type
        this.$refs.addArticle.isShow = true
      },
      deleteList(id) {
        var that = this;
        destroy({
          id: id,
          table_name: 'articles',
        }).then(response => {
          this.$Message.success('删除成功');
          this.getList()
        }).catch(error => {
          console.log(error)
          reject(error)
        })
      }
    }
  };
</script>

<style>
  .dialogConcent {
    overflow-y: auto;
  }

  .el-tree-node__label {
    text-wrap: wrap;
  }

  .el-tree-node__content {
    height: auto;
  }
</style>
