<template>
  <basic-container>
    <!--搜索栏-->
    <el-form size="small" label-position="right" style="padding-left: 10px; padding-right: 10px" :inline="true">
      <el-row :span="24">
        <el-form-item label="文章名称：">
          <el-input v-model="query.articleTitle"></el-input>
        </el-form-item>
        <el-form-item label="作者：">
          <el-input v-model="query.author"></el-input>
        </el-form-item>
        <el-form-item label="日期：">
          <el-date-picker v-model="query.searchDate" type="daterange" range-separator="至" start-placeholder="开始日期"
            end-placeholder="结束日期" value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <div class="searchBtn">
          <el-button type="primary" size="small" icon="el-icon-search" @click="searchChange">搜 索</el-button>
          <el-button size="small" icon="el-icon-delete" @click="searchReset">清 空</el-button>
        </div>
      </el-row>
    </el-form>
    <!--搜索栏-->
    <avue-crud :option="option" :data="data" :page="page" v-model="form" @on-load="onLoad" @row-update="rowUpdate"
      @row-save="rowSave" @row-del="rowDel" @current-change="currentChange" @size-change="sizeChange"
      @selection-change="selectionChange" @refresh-change="refreshChange">
      <template slot="headPic" slot-scope="{ row }">
        <img class="img" :src="row.headPic" alt="" srcset="" />
      </template>
      <template slot="menu" slot-scope="{row}">
        <el-button type="text" @click="editNewsInfo(row.id)" icon="el-icon-edit">修改</el-button>
        <!--<el-button type="text" @click="setCover(row.id)">设置为封面</el-button>-->
        <el-button type="text" v-if="row.status==0" @click="release(row.id,'release')">发布</el-button>
        <el-button type="text" v-if="row.status==1" @click="release(row.id,'offShelf')">下架</el-button>
      </template>
      <template slot="menuLeft">
        <el-button @click="addNewsInfo" icon="el-icon-plus" type="primary">添加文章</el-button>
      </template>
      <template slot="sort" slot-scope="{row}">
        <el-button type="text" @click="orderItem(row,'ascs')">上移</el-button>
        <el-button type="text" @click="orderItem(row,'desc')">下移</el-button>
      </template>
      <template slot="articleTitle" slot-scope="{row}">
        <span class="articleTitle" @click="showNewsDetail(row.id)">{{row.articleTitle}}</span>
      </template>
      <template slot="articleSrcUrl" slot-scope="{row}">
        <a :href="row.articleSrcUrl" style="color: #6699FF;" target="blank">{{row.articleSrcUrl}}</a>
      </template>
    </avue-crud>
    <news-detail ref="detail"></news-detail>
  </basic-container>
</template>
<script>
  import { getList, delNews, order, release } from "@/api/manage/news";
  import newsDetail from './Dialog/newsDetail'
  export default {
    components:{
      newsDetail
    },
    name: "manage_policies_news",
    data() {
      return {
        data: [],
        selectionList: [],
        query: {},
        form: {},
        drawer: false,
        option: {
          border: true,
          index: true,
          indexLabel: "序号",
          labelWidth: 100,
          selection: false,
          align: "center",
          editBtn: false,
          delBtn: true,
          addBtn: false,

          addText: '文章信息',
          column: [
            {
              label: "文章名称",
              prop: "articleTitle",
              slot:true,
            },
            {
              label: "首页图",
              prop: "headPic",
              slot: true,
              type: "upload",
              span: 12,
              showFileList: false,
              listType: "picture-img",
              multiple: false,

            },
            {
              label: "发稿日期",
              prop: "createTime",
              type: "date",
              formslot: true,
              format: "yyyy-MM-dd",
              editDisplay: false,
              addDisplay: false,
            },
            {
              label: "文章来源",
              prop: "articleSrc",
            },
            {
              label: "文章原地址",
              prop: "articleSrcUrl",
              slot:true
            },
            {
              label: "作者",
              prop: "author",
            },
            {
              label: "上传人",
              prop: "createUserName",
              addDisplay: false,
              editDisplay: false,
            },
            {
              label: '状态',
              prop: 'status',
              addDisplay: false,
              editDisplay: false,
              dicData: [
                {
                  label: '已发布',
                  value: '1'
                }, {
                  label: '未发布',
                  value: '0'
                }
              ]
            },
            {
              label: "排序",
              prop: "sort",
              addDisplay: false,
              editDisplay: false,
              slot: true,
            },
          ],
          group: [
            {
              label: "文章内容",
              column: [
                {
                  label: '文章内容',
                  prop: 'newsInfo',
                  formslot: true

                }
              ]
            },
          ],
        },


        page: {
          currentPage: 1,
          pageSize: 10,
          total: 0,
        },
      };
    },

    methods: {
      currentChange(current) {
        this.page.currentPage = current;
        this.onLoad(this.page);
      },
      sizeChange(size) {
        this.page.pageSize = size;
        this.onLoad(this.page);
      },
      selectionChange(select) {
        this.selectionList = select;
      },
      searchChange() {
        if (this.query.searchDate) {
          this.query['beginTime'] = this.query.searchDate[0];
          this.query['endTime'] = this.query.searchDate[1];
        }
        this.onLoad(this.page, this.query);
      },
      searchReset() {
        this.query = {};
        this.onLoad(this.page);
      },
      refreshChange() {
        this.page.currentPage = 1;
        this.onLoad(this.page)
      },
      onLoad(page, params = {}) {
        getList(
          page.currentPage,
          page.pageSize,
          Object.assign(this.query, params)
        ).then((res) => {
          const data = res.data.data;
          this.data = data.records;
          this.data.forEach(ele => {
            if (ele.articleTitle.length > 15) {
              ele.articleTitle = ele.articleTitle.slice(0, 15) + '...';
            }
          });
          this.page.total = data.total;
        });
      },
      /**添加文章 */
      addNewsInfo() {
        this.$router.push({ name: '添加/修改文章', params: { type: 'add', id: null } })
      },
      /*修改文章内容*/
      editNewsInfo(id) {
        this.$router.push({ name: '添加/修改文章', params: { type: 'edit', id: id } })
      },
      /*删除文章*/
      rowDel(row) {
        this.$confirm('是否确认删除该文章？', {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          return delNews(row.id)
        }).then(() => {
          this.$message.success('删除成功！')
          this.onLoad(this.page)
        })
      },

      /*设置为封面*/

      /*排序*/ //当order==total时，不能下移
      orderItem(row, type) {
        if (type == 'ascs') {
          order(row.id, Number(row.sort), 1).then(() => {
            this.onLoad(this.page)
          })
        }
        else if (type == 'desc') {
          order(row.id, Number(row.sort), 0).then(() => {
            this.onLoad(this.page)
          })
        }
      },
      release(id, type) {
        if (type == 'release') {
          this.$confirm("是否确定发布此篇文章?", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            release(id,1).then(() => {
              this.$message.success('发布成功');
              this.onLoad(this.page)
            })
          });
        }
        else if(type=='offShelf'){
          this.$confirm("是否确定下架此篇文章?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        release(id,0).then(() => {
          this.$message.success('下架成功');
          this.onLoad(this.page)
        })
      });
        }

      },
      showNewsDetail(id){//点击文章名称预览文章内容
        this.$refs.detail.open(id)
      }
    },
  };
</script>
<style>
  .img {
    width: 100%;
    height: auto;
  }

  .searchBtn {
    display: inline-block;
    margin-bottom: 18px;
  }
  .articleTitle{
    color: #6699FF;
    cursor: pointer;
  }
</style>
