<template>
  <ai-list class="news-list" isTabs>
    <template slot="content">
      <ai-search-bar>
        <template slot="left">
          <ai-select
              v-model="searchObj.type"
              @change="page.current = 1, getList()"
              placeholder="选择新闻类别"
              :selectList="$dict.getDict('newsCenterType')">
          </ai-select>
        </template>
        <template slot="right">
          <el-input
              v-model="searchObj.title"
              size="small"
              placeholder="搜索标题/发布地区"
              clearable
              v-throttle="() => {page.current = 1, getList()}"
              @clear="page.current = 1, searchObj.title = '', getList()"
              suffix-icon="iconfont iconSearch"/>
        </template>
      </ai-search-bar>
      <ai-search-bar>
        <template slot="left">
          <el-dropdown @visible-change="v=>isClick=v" @command="addNews"
                       v-if="permissions('app_appnewscenterinfo_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>
      </ai-search-bar>
      <ai-table
          :tableData="tableData"
          :col-configs="colConfigs"
          :total="total"
          stripe
          :current.sync="page.current"
          :size.sync="page.size"
          @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.isTop==1" @click="setTop(row)">取消置顶</el-button>
              <el-button type="text" title="置顶" v-else @click="setTop(row)">置顶</el-button>
              <el-button type="text" title="取消发布" v-if="+row.status" @click="changeStatus(row)">取消发布</el-button>
              <el-button type="text" v-else title="发布" @click="changeStatus(row)">发布</el-button>
              <el-button type="text" title="查看" @click="hangeleDetail(row)"
                         :disabled="!permissions('app_appnewscenterinfo_detail')">查看
              </el-button>
              <el-button type="text" title="编辑" @click="handleEdit(row)"
                         :disabled="!permissions('app_appnewscenterinfo_edit')">编辑
              </el-button>
              <el-button type="text" title="删除" @click="handleDelete(row)"
                         :disabled="!permissions('app_appnewscenterinfo_del')">删除
              </el-button>
              <el-button type="text" title="分享" @click="handleCopyShare(row)">小程序链接</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,
    areaId: String
  },
  data() {
    return {
      tableData: [],
      total: 0,
      isClick: false,
      page: {
        current: 1,
        size: 10
      },
      searchObj: {
        title: '',
        type: ''
      },
    }
  },
  computed: {
    colConfigs() {
      return [
        {slot: 'title', label: '标题', width: 280},
        {
          prop: 'type', label: '类别', align: 'center',
          render: (h, {row}) => {
            return h('span', null, this.dict.getLabel('newsCenterType', +row.type))
          }
        },
        {
          prop: 'policyType', label: '类型', align: 'center',
          render: (h, {row}) => {
            return h('span', null, this.dict.getLabel('newsCenterPolicyType', +row.policyType))
          }
        },
        {
          prop: 'viewCount', label: '浏览/播放量', align: "center",
          render: (h, {row}) => {
            return h('span', null, row.viewCount >= 10000 ? ((row.viewCount / 10000).toFixed(2) + '万') : row.viewCount)
          }
        },
        {prop: 'msgCount', label: '评论数', align: "center"},
        {prop: 'areaName', label: '发布地区', align: 'center'},
        {prop: 'createTime', label: '发布时间'},
        {
          prop: 'status', label: '发布状态', align: 'center',
          render: (h, {row}) => {
            return h('span', {
              style: {
                color: row.status ? this.$dict.getColor('newsCenterStatus', row.status) : 'auto'
              }
            }, this.$dict.getLabel('newsCenterStatus', row.status))
          }
        },
        {slot: 'options', label: '操作'}
      ]
    },
    dropIcon() {
      return this.isClick ? 'el-icon-arrow-up' : 'el-icon-arrow-down'
    },
  },
  methods: {
    /**
     * 查看详情
     * */
    hangeleDetail(row) {
      if (+row.type) {
        this.$emit("goPage", {key: "videoDetail", row});
      } else {
        this.$emit("goPage", {key: "newsDetail", row});
      }
    },

    /**
     * 编辑
     * */
    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));
    },
    /**
     * 置顶新闻
     * */
    setTop(row) {
      const msg = !row.topping ? "是否要置顶？" : "是否要取消置顶？"
      this.$confirm(msg).then(() => this.setTopInfo(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/appnewscenterinfo/release?id=${id}&status=${status}`).then(() => {
        this.$message.success(msg);
        this.getList();
      })
    },
    /**
     * 置顶新闻
     * */
    setTopInfo(row) {
      const msg = !row.topping ? "置顶成功！" : "取消置顶成功！";
      this.instance.post(`/app/appnewscenterinfo/topping?id=${row.id}&areaId=${this.areaId}`).then(() => {
        this.$message.success(msg);
        this.getList();
      })
    },
    /**
     * 删除新闻
     * @param id
     */
    deleteInfo(id) {
      this.instance.post(`/app/appnewscenterinfo/delete?ids=${id}`).then(() => {
        this.$message.success("删除成功");
        this.getList();
      })
    },
    getList() {
      this.instance.post(`/app/appnewscenterinfo/list`, null, {
        params: {
          ...this.page,
          ...this.searchObj,
          areaId: this.areaId
        }
      }).then(res => {
        if (res && 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(`/subPages/live/newsDetail?id=${row.id}`)
      this.$message.success("小程序链接已复制!")
    }
  },
  created() {
    this.dict.load('newsCenterType', 'newsCenterStatus', 'newsCenterPolicyType').then(() => this.getList());
  },
}
</script>

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

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

</style>
