<template>
  <ai-list class="news-list">
    <ai-title slot="title" title="新闻中心" isShowBottomBorder/>
    <template slot="content">
      <ai-search-bar>
        <template slot="left">
          <el-dropdown @visible-change="v=>isClick=v" @command="addNews"
                       v-if="permissions('app_appnews_edit')">
            <el-button type="primary" icon="iconfont iconAdd" size="small">发布新闻
              <i class="el-icon--right" :class="dropIcon"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="video">发布视频</el-dropdown-item>
              <el-dropdown-item command="article">发布文章</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
        <template slot="right">
          <el-input
              v-model="searchObj.title"
              size="small"
              placeholder="搜索标题"
              clearable
              @change="page.current = 1, getList()"
              suffix-icon="iconfont iconSearch"/>
        </template>
      </ai-search-bar>
      <ai-table
          :tableData="tableData"
          :col-configs="colConfigs"
          :total="total"
          stripe
          :current.sync="page.current"
          :size.sync="page.size"
          :dict="dict"
          @getList="getList">
        <el-table-column slot="title" label="标题" width="280" align="left" show-overflow-tooltip>
          <template slot-scope="{ row }">
            <span style="color: #2266FF;margin-right:40px;" v-if="row.isTop == 1">[置顶]</span>
            <span>{{ row.title }}</span>
          </template>
        </el-table-column>
        <el-table-column slot="options" label="操作" fixed="right" width="260" align="center">
          <template slot-scope="{ row }">
            <div class="table-options">
              <el-button type="text" title="取消发布" v-if="row.status=='1' && permissions('app_appnews_status')" @click="changeStatus(row)">取消发布</el-button>
              <el-button type="text" v-if="row.status=='0' && permissions('app_appnews_status')" title="发布" @click="changeStatus(row)">发布</el-button>
              <el-button type="text" @click="handleEdit(row)" v-if="permissions('app_appnews_edit')">编辑
              </el-button>
              <el-button type="text" @click="handleDelete(row)" v-if="permissions('app_appnews_del')">删除
              </el-button>
            </div>
          </template>
        </el-table-column>
      </ai-table>
    </template>
  </ai-list>
</template>

<script>
import moment from "dayjs"

export default {
  name: "newsList",
  props: {
    instance: Function,
    dict: Object,
    permissions: Function
  },
  data() {
    return {
      tableData: [],
      total: 0,
      isClick: false,
      page: {
        current: 1,
        size: 10
      },
      searchObj: {
        title: '',
        type: ''
      },
    }
  },
  computed: {
    colConfigs() {
      return [
        {slot: 'title', label: '标题', width: 280},
        {
          prop: 'viewCount', label: '浏览/播放量', align: "center", width: 100,
          render: (h, {row}) => {
            return h('span', null, row.viewCount >= 10000 ? ((row.viewCount / 10000).toFixed(2) + '万') : row.viewCount)
          }
        },
        {
          prop: 'type', label: '类型', align: 'center',
          render: (h, {row}) => {
            return h('span', {
              style: {
                color: row.type ? this.dict.getColor('appNewsType', row.type) : 'auto'
              }
            }, this.dict.getLabel('appNewsType', row.type))
          }
        },
        {
          prop: 'category', label: '分类', align: 'center',
          render: (h, {row}) => {
            return h('span', {
              style: {
                color: row.category ? this.dict.getColor('appNewsCategory', row.category) : 'auto'
              }
            }, this.dict.getLabel('appNewsCategory', row.category))
          }
        },
        {prop: 'publishUserName', label: '发布人'},
        {prop: 'publishTime', label: '发布时间'},
        {
          prop: 'status', label: '发布状态', align: 'center',
          render: (h, {row}) => {
            return h('span', {
              style: {
                color: row.status ? this.dict.getColor('appNewsStatus', row.status) : 'auto'
              }
            }, this.dict.getLabel('appNewsStatus', row.status))
          }
        },
        {slot: 'options', label: '操作'}
      ]
    },
    dropIcon() {
      return this.isClick ? 'el-icon-arrow-up' : 'el-icon-arrow-down'
    },
  },
  methods: {
    /**
     * 编辑
     * */
    handleEdit(row) {
      if (+row.type) {
        this.$emit("goPage", {key: "addVideo", row});
      } else {
        this.$emit("goPage", {key: "addArticle", row});
      }
    },

    /**
     * 修改新闻中心状态-发布、取消发布
     * */
    changeStatus(row) {
      const msg = +row.status ? "是否取消发布？" : "是否发布？";
      this.$confirm(msg).then(() => this.changeInfo(row));
    },
    /**
     * 删除新闻
     * */
    handleDelete({id}) {
      this.$confirm("是否要删除？").then(() => this.deleteInfo(id));
    },
    resetSearch() {
      this.searchObj.title = "";
      this.searchObj.type = "";
      this.getList();
    },
    /**
     * 添加新闻、视频
     * */
    addNews(command) {
      switch (command) {
        case "video":
          this.$emit('goPage', {key: "addVideo"});
          break;
        case "article":
          this.$emit('goPage', {key: "addArticle"});
          break;
      }
    },
    /**
     * 修改发布状态
     * */
    changeInfo({id, status}) {
      const msg = +status ? "取消发布成功" : "发布成功";
      status = +status ? 0 : 1;
      this.instance.post(`/app/appnews/setStatus?id=${id}&status=${status}`).then(() => {
        this.$message.success(msg);
        this.getList();
      })
    },
    /**
     * 删除新闻
     * @param id
     */
    deleteInfo(id) {
      this.instance.post(`/app/appnews/delete?ids=${id}`).then(() => {
        this.$message.success("删除成功");
        this.getList();
      })
    },
    getList() {
      this.instance.post(`/app/appnews/list`, null, {
        params: {
          ...this.page,
          ...this.searchObj
        }
      }).then(res => {
        if (res?.data) {
          this.tableData = res.data.records.map(e => {
            return {
              ...e,
              createTime: +e.status ? moment(e.createTime).format("YYYY-MM-DD HH:mm") : ''
            }
          });
          this.total = res.data.total;
        }
      })
    },
    handleCopyShare(row) {
      navigator.clipboard.writeText(`/pages/newsList/detail?id=${row.id}`)
      this.$message.success("小程序链接已复制!")
    }
  },
  created() {
    this.getList()
  },
}
</script>

<style lang="scss" scoped>
.news-list {
  height: 100%;
  overflow: auto;
  background: #f3f6f9;

  ::v-deep.has-gutter th:nth-child(1) div {
    margin-left: 40px;
  }
}

</style>
