<template>
  <div class="advance-content">
    <el-row>
      <el-col :span="8">
        <el-toolbar>
          <el-button @click="addDimensionClickHandler">
            <i class="fa fa-plus-circle"></i>批量添加
          </el-button>
          <!-- <el-dropdown @command="handleCommand">
            <el-button>
              <i class="fa fa-ellipsis-h" aria-hidden="true"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="sortDimensionContentOrderClickHandler" :disabled="selectedRows.length===0">
                <i class="fa fa-sort" aria-hidden="true"></i>排序
              </el-dropdown-item>
              <el-dropdown-item command="stickClickHandler" :disabled="selectedRows.length===0">
                <i class="fa fa-chevron-up" aria-hidden="true"></i>置顶
              </el-dropdown-item>
              <el-dropdown-item command="unstickClickHandler" :disabled="selectedRows.length===0">
                <i class="fa fa-chevron-down" aria-hidden="true"></i>取消置顶
              </el-dropdown-item>
              <el-dropdown-item command="delClickHandler" :disabled="selectedRows.length===0">
                <i class="fa fa-remove" aria-hidden="true"></i>删除
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown> -->
        </el-toolbar>
      </el-col>
      <el-col :span="4" style="padding:10px 0px;">
        <el-dropdown @command="handleSortCommand">
          <el-button type="text">
            <i :class="dropdown.i"></i>{{dropdown.content}}
            <i class="fa fa-caret-down"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="Default">
              <i class="fa fa-building"></i>默认排序</el-dropdown-item>
            <el-dropdown-item command="AddTime">
              <i class="fa fa-calendar-plus-o"></i>按添加日期</el-dropdown-item>
            <el-dropdown-item command="PublishDate">
              <i class="fa fa-calendar-check-o"></i>按发布日期</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
      <el-col :span="13" align="right"  class="dropdown-search-box-r search-bar-algin-toolbar">
        <el-input placeholder="请输入搜索关键字" v-model="search.content" @keyup.enter.native="searchClickHandler" class="input-with-select">
          <el-select v-model="search.type" style="margin-right:5px;width:100px;" clearable slot="prepend" placeholder="请选择" @change="searchClickHandler">
            <el-option v-for="item in typeSelect" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
          </el-select>
          <el-select v-model="search.contentType" style="margin-left:-5px;width:100px;" clearable slot="prepend" placeholder="内容类型" @change="searchClickHandler">
            <el-option v-for="item in contentTypeSelect" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
          </el-select>
        </el-input>
        <span class="search-icon"><i class="fa fa-search" slot="append" @click="searchClickHandler" title="查询"></i></span>
      </el-col>
    </el-row>
      <el-list-view
        class="advance-content-list"
        :data="contentList"
        :data-read-url="getData"
        ref="multipleTable"
        @selection-change="onSelectionChange"
        :page-size="10">
        <template slot-scope="row">
           <div class="panel-card">
             <el-row>
               <el-col :span="5" v-if="row.logoFile">
                 <img :src="row.logoFile" class="logo-file" onerror="this.src='assets/images/picture404-'+((row.ID||row.$index) % 4)+'.png';"/>
               </el-col>
               <el-col :span="19" class="contents">
                 <p class="title f14">{{row.title.length>95?`${row.title.substring(0,95)}......`:row.title}}</p>
                 <span class="publish f12 gray">
                   {{row.publishDate||''}}
                 </span>
               </el-col>
             </el-row>
             <el-row class="operation">
               <el-col :span="10">
                 <el-row>
                   <el-col :span="8"><el-tag size="small">{{row.statusName}}</el-tag></el-col>
                   <el-col :span="4" v-if="row.flags"><span><i :class="row.flags" title="置顶"></i></span></el-col>
                   <el-col :span="12" v-if="row.author"><span class="f12 gray">{{row.author}}</span></el-col>
                 </el-row>
               </el-col>
               <el-col :span="14" class="tar">
                 <el-button @click.stop="sortDimensionContentOrderClickHandler(row)" type="text" title="排序">
                    <i class="fa fa-sort"></i>排序</el-button>
                  <el-button @click.stop="stickClickHandler(row)" type="text" :disabled="!!row.flags" title="置顶">
                    <i class="fa fa-chevron-up"></i>置顶</el-button>
                  <el-button @click.stop="unstickClickHandler(row)" :disabled="!!!row.flags" type="text" title="取消置顶">
                    <i class="fa fa-chevron-down"></i>取消置顶</el-button>
                  <el-button @click.stop="delClickHandler(row)" type="text" title="删除">
                    <i class="fa fa-remove"></i>删除</el-button>
               </el-col>
             </el-row>
           </div>
        </template>
      </el-list-view>
    <!-- 文章排序 -->
    <article-sort-dialog
      :show.sync="sort.isShowModal"
      :select-ids="sort.selectids"
      :catalog-id="dimensionCatalogId"
      :title="sort.title"
      @dialog="dialog"
      @callback="afterSortCallBack">
    </article-sort-dialog>
    <content-top-dialog
      :show.sync="stick.isShowModal"
      :select-ids="stick.selectids"
      :catalog-id="dimensionCatalogId"
      :title="stick.title"
      @callback="afterTopCallBack">
    </content-top-dialog>
    <dimension-content-selector
      :show.sync="dimensionContentSelectorDlg.isShowModal"
      :title="dimensionContentSelectorDlg.title"
      :content-types="contentTypeSelect"
      :sort-types="sortTypeSelect"
      :dimension-catalog-inner-code="dimensionCatalogInnerCode"
      :dimension-id="dimensionId"
      :dimension-catalog-id="dimensionCatalogId"
      @dialog="dialog"
      @callback="afterSelectContent">
    </dimension-content-selector>
  </div>
</template>
<script>
import util from '@src/common/util.js'
import ArticleSortDialog from './articleSortDialog.vue'
import ContentTopDialog from '../contentcore/contentTopDialog.vue'
import DimensionContentSelector from './dimensionContentSelector.vue'
export default {
  components: {
    'article-sort-dialog': ArticleSortDialog,
    'content-top-dialog': ContentTopDialog,
    'dimension-content-selector': DimensionContentSelector
  },
  props: {
    dimensionId: [Number, String],
    dimensionCatalogId: [Number, String],
    dimensionCatalogInnerCode: String,
    tabName: String
  },
  data() {
    return {
      submitLoading: false,
      contentList: [], //  栏目文章列表
      selectedRows: [], //  选择内容
      search: {
        type: '',
        contentType: '',
        content: '',
        sort: 'Default'
      }, //  查询条件
      sortTypeSelect: [
        { label: '默认排序', value: 'Default' },
        { label: '按添加日期', value: 'AddTime' },
        { label: '按发布日期', value: 'PublishDate' }
      ], //  排序类型
      dropdown: {
        i: 'fa fa-building',
        content: '默认排序'
      }, // 栏目内容弹框下拉列表
      contentTypeSelect: [], //  内容类型
      typeSelect: [
        { value: '', label: '所有' },
        { value: 'ADD', label: '我创建的' },
        { value: 'DRAFT', label: '初稿' },
        { value: 'EDITING', label: '重新编辑' },
        { value: 'WORKFLOW', label: '流转中' },
        { value: 'TOPUBLISH', label: '待发布' },
        { value: 'PUBLISHED', label: '已发布' },
        { value: 'OFFLINE', label: '已下线' },
        { value: 'ARCHIVE', label: '已归档' }
      ], //  文档类型
      sort: { isShowModal: false, title: '', selectids: '' }, //  排序弹框
      stick: { isShowModal: false, title: '', selectids: '' }, //  置顶文章弹框
      dimensionContentSelectorDlg: { isShowModal: false, title: '' }, //  批量添加内容
      title: '重庆组织部长：严肃换届纪律深化改革匡正风气重庆组织部长：严肃换届纪律深化改革匡正风气重庆组织部长：严肃换届纪律深化改革匡正风气重庆组织部长：严肃换届纪律深化改革匡正风气重庆组织部长：严肃换届纪律深化改革匡正风气重庆组织部长：严肃换届纪律深化改革匡正风气重庆组织部长：严肃换届纪律深化改革匡正风气'
    }
  },
  created() {
    this.loadContentType()
  },
  watch: {
    tabName(val) {
      this.selectedRows = []
      if (val === 'contentlist') {
        this.loadContentList()
      }
    },
    dimensionCatalogId(val) {
      this.selectedRows = []
      if (this.tabName === 'contentlist') {
        this.loadContentList()
      }
    }
  },
  methods: {
    // handleCommand(method) {
    //   if (method && typeof this[method] === 'function') {
    //     this[method]()
    //   } else {
    //     console.warn(`未找到改菜单对应的方法:${method}`)
    //   }
    //  }
    // 链接到内容弹框选中数据排序下拉列表
    handleSortCommand(val) {
      if (!this.dimensionId || !this.dimensionCatalogId) {
        return
      }
      this.search.sort = val
      if (val === 'Default') {
        this.dropdown.i = 'fa fa-building'
        this.dropdown.content = '默认排序'
      }
      if (val === 'AddTime') {
        this.dropdown.i = 'fa fa-calendar-plus-o'
        this.dropdown.content = '按添加日期'
      }
      if (val === 'PublishDate') {
        this.dropdown.i = 'fa fa-calendar-check-o'
        this.dropdown.content = '按发布日期'
      }
      this.loadContentList()
    },
    // 删除文章
    async delClickHandler(row) {
      if (!this.dimensionId) {
        return
      }
      let ids = row && row.ID ? [row.ID] : util.getSelectedIDs(this.selectedRows)
      if (!ids || !ids.length) {
        return
      }
      try {
        await this.$confirm('确定删除吗，删除后无法恢复。是否继续删除？', '删除确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
      } catch (e) {
        return
      }
      try {
        let res = await axios.delete(`/ui/dimesion/${this.dimensionCatalogId}/content/${ids.join()}`)
        util.showMessage(res)
        if (res.data.status === 1) {
          this.selectedRows = []
          this.loadContentList()
        }
      } catch (e) {
        // util.showErrorNotification(e)

      }
    },
    afterSelectContent() {
      this.loadContentList()
    },
    // 批量添加内容
    addDimensionClickHandler() {
      this.dimensionContentSelectorDlg.isShowModal = true
      this.dimensionContentSelectorDlg.title = '批量添加内容'
    },
    // 取消置顶
    async unstickClickHandler(row) {
      if (!this.dimensionId) {
        return
      }
      let ids = row && row.ID ? [row.ID] : util.getSelectedIDs(this.selectedRows)
      if (!ids || !ids.length) {
        return
      }
      this.submitLoading = true
      try {
        let res = await axios.put(`/ui/dimesion/${this.dimensionCatalogId}/content/setnottop`, { ids: ids.join() })
        this.submitLoading = false
        util.showMessage(res)
        if (res.data.status === 1) {
          this.loadContentList()
        }
      } catch (e) {
        this.submitLoading = false
        // util.showErrorNotification(e)
      }
    },
    afterTopCallBack() {
      this.loadContentList()
    },
    // 置顶文章
    stickClickHandler(row) {
      if (!this.dimensionId) {
        return
      }
      let ids = row && row.ID ? [row.ID] : util.getSelectedIDs(this.selectedRows)
      if (!ids || !ids.length) {
        return
      }
      this.stick.isShowModal = true
      this.stick.title = '置顶'
      this.stick.selectids = ids.join()
    },
    afterSortCallBack() {
      this.selectedRows = []
      this.loadContentList()
    },
    sortDimensionContentOrderClickHandler(row) {
      if (this.search.sort !== 'Default') {
        this.dialog('默认排序下才可能调整顺序，请先切换到默认排序')
        return
      }
      if (!row || !row.ID) {
        this.dialog('请至少选择一行进行排序')
        return
      }
      this.sort.isShowModal = true
      this.sort.title = '文章排序'
      let ids = row && row.ID ? [row.ID] : util.getSelectedIDs(this.selectedRows)
      if (!ids || !ids.length) {
        return
      }
      this.sort.selectids = ids.join()
    },
    // 加载内容类型
    async loadContentType() {
      let res = await axios.get('/ui/contentcore/contenttypes')
      this.contentTypeSelect = res.data.data
    },
    // 查询栏目文章
    searchClickHandler() {
      this.loadContentList()
    },
    getData() {
      return [
        `/ui/dimesion/${this.dimensionCatalogId}/content`,
        {
          params: {
            dimensionID: this.dimensionId,
            contentType: this.search.contentType,
            keyword: encodeURIComponent(this.search.content),
            type: this.search.type,
            sort: this.search.sort
          }
        }
      ]
    },
    loadContentList() {
      this.$refs.multipleTable.getData()
    },
    onSelectionChange(selection) {
      this.selectedRows = selection
    },
    // 消息Dialog封装
    dialog(msg) {
      this.$confirm(msg, '系统提示', {
        confirmButtonText: '确定',
        showCancelButton: false,
        type: 'warning'
      })
    }
  }
}
</script>
<style scoped>
.advance-content-list .logo-file {
  max-width: 157px;
  max-height: 125px;
  vertical-align: middle;
}
.advance-content-list .operation {
  margin-top:5px;
}
.advance-content-list .contents {
  height:106px;
  padding:10px 0px;
  display: -webkit-box;
  display: -moz-box;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp:3;
}
.advance-content-list .publish {
  position: absolute;
  right: 14px;
  bottom: 8px;
}
</style>
<style>
.advance-content .input-with-select .el-input-group__prepend {
  background-color: #fff;
}
</style>
