<template>
  <el-toolbar>
    <component v-for="button in buttons" :is="button" :key="button" :selected-rows="selectedRows" :detail-content.sync="addDetailContent" :catalog-id="catalogId" @updateList="updateList"></component>
    <content-import-button :catalog-id="catalogId" :content-type="contentType" @refresh-content="updateList" ></content-import-button>
    <!--稍后进行优化-->
     <el-button @click="selectedAllHandler" :loading="selectAllLoading"><i class="fa fa-check-square"></i>全选</el-button>
      <div class="el-multi-operate">
        <el-select v-show="showBtn" value="" @change="selectOperate" placeholder="请选择操作项">
          <el-option v-for="item in multiOperates" :disabled="!hasPriv(item.priv)" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </div>
    <el-dropdown v-show="false">
        <el-button>
          <i class="fa fa-ellipsis-h" aria-hidden="true"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown" class="button-dropdown">
          <el-dropdown-item>
           <content-delete-button ref="deleteButton" :selected-rows="selectedRows" :catalog-id="catalogId"  @refresh-content="updateList" :button-type="buttonType"></content-delete-button>
          </el-dropdown-item>
          <el-dropdown-item>
            <el-button type='text' @click="publish(contentIds,'pub')" :priv="'com.zving.cms.Catalog.Content.Publish.'+ catalogId">
              <i class="fa fa-share-square-o"></i>发布
            </el-button>
          </el-dropdown-item>
          <el-dropdown-item>
            <el-button type='text' @click="publish(contentIds,'topub')" :priv="'com.zving.cms.Catalog.Content.Publish.'+ catalogId">
              <i class="fa fa-circle-o-notch"></i>待发布
            </el-button>
          </el-dropdown-item>
          <el-dropdown-item >
            <el-button type='text' @click="publish(contentIds,'offline')" :priv="'com.zving.cms.Catalog.Content.Publish.'+ catalogId">
              <i class="fa fa-refresh"></i>下线
            </el-button>
          </el-dropdown-item>
          <el-dropdown-item>
           <content-copy-button ref="copyButton" :content-ids="contentIds" :content-type="contentTypes" :catalog-ids="catalogId" @refresh-content="updateList" :button-type='buttonType'></content-copy-button>
          </el-dropdown-item>
          <el-dropdown-item>
            <content-move-button ref="moveButton" :content-ids="contentIds" :content-type="contentType" :catalog-ids="catalogId" @refresh-content="updateList" :button-type='buttonType'></content-move-button>
          </el-dropdown-item>
          <el-dropdown-item>
            <content-sort-button :order-type="orderType" ref="sortButton" :content-ids="contentIds" :catalog-ids="catalogId" @refresh-content="updateList" :button-type='buttonType'></content-sort-button>
          </el-dropdown-item>
          <el-dropdown-item>
            <content-deploy-button ref="deployButton" :content-ids="contentIds" :catalog-id="catalogId" @refresh-content="updateList" :button-type='buttonType'></content-deploy-button>
          </el-dropdown-item>
          <el-dropdown-item>
            <el-button :disabled="!contentIds"  @click="changeAttriutes('recommend')" :type="buttonType"
              :priv="'com.zving.cms.Catalog.Content.SetRecommend.'+ catalogId">
              <i class="fa fa-paper-plane"></i>推荐
            </el-button>
          </el-dropdown-item>
          <el-dropdown-item>
            <el-button :disabled="!contentIds" @click="changeAttriutes('cancelrecommend')" :type="buttonType"
              :priv="'com.zving.cms.Catalog.Content.SetRecommend.'+ catalogId">
              <i class="fa fa-exclamation-triangle"></i>取消推荐
            </el-button>
          </el-dropdown-item>
          <el-dropdown-item>
            <el-button :disabled="!contentIds" @click="changeAttriutes('sethot')" :type="buttonType"
             :priv="'com.zving.cms.Catalog.Content.SetHot.'+ catalogId">
              <i class="fa fa-bolt fa-fw"></i>设置热点
            </el-button>
          </el-dropdown-item>
          <el-dropdown-item>
            <el-button :disabled="!contentIds" @click="changeAttriutes('cancelhot')" :type="buttonType"
              :priv="'com.zving.cms.Catalog.Content.SetHot.'+ catalogId">
              <i class="fa fa-exclamation-triangle"></i>取消热点
            </el-button>
          </el-dropdown-item>
          <!-- <el-dropdown-item>
            <socialmedia-push-button :content-ids="contentIds" :catalog-id="catalogId" @refresh-content="updateList" :button-type='buttonType'></socialmedia-push-button>
          </el-dropdown-item> -->
        </el-dropdown-menu>
    </el-dropdown>

  </el-toolbar>
</template>
<script>
import util from '@src/common/util.js'
import Privilege from '@src/common/privilege.js'
import './contentOperatScript.js'
import ContentAddButton from './ContentAddButton.vue'
import ContentDeleteButton from './ContentDeleteButton.vue'
import ContentDeployButton from './ContentDeployButton.vue'
import ContentCopyButton from './ContentCopyButton.vue'
import ContentMoveButton from './ContentMoveButton.vue'
import ContentSortButton from './ContentSortButton.vue'
import ContentImportButton from './ContentImportButton.vue'
// import ContentPublishButton from './ContentPublishButton.vue'
import ContentAttributesButton from './ContentAttributesButton.vue'
// import socialmediaPushButton from './SocialMediaPushButton.vue'

export default {
  components: {
    'content-add-button': ContentAddButton,
    'content-delete-button': ContentDeleteButton,
    'content-deploy-button': ContentDeployButton,
    'content-copy-button': ContentCopyButton,
    'content-move-button': ContentMoveButton,
    'content-sort-button': ContentSortButton,
    'content-import-button': ContentImportButton,
    //  'content-publish-button':ContentPublishButton
    'content-attributes-button': ContentAttributesButton
    // socialmediaPushButton
  },
  props: {
    selectedRows: {
      type: Array,
      default: function() {
        return []
      }
    },
    catalogId: {
      type: [Number, String]
    },
    detailContent: {
      type: Object
    },
    contentType: {
      type: String
    },
    orderType: {
      type: String
    },
    multiOperates: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  computed: {
    addDetailContent: {
      set(val) {
        this.$emit('update:detailContent', val)
      },
      get() {
        return this.detailContent
      }
    },
    contentIds() {
      return this.selectedRows && this.selectedRows.length > 1 ? this.selectedRows.map(val => val.ID).join(',') : ''
    },
    showBtn() {
      return !!(this.selectedRows && this.selectedRows.length > 1)
    },
    contentTypes() {
      let selectTypes = this.selectedRows && this.selectedRows.length > 1 ? this.selectedRows.map(val => val.contentTypeID) : new Set()
      let arrays = Array.from(selectTypes)
      return arrays.join(',')
    }
  },
  data() {
    return {
      buttons: ['content-add-button'],
      buttonType: 'text',
      selectAllLoading: false,
      operateFuncs: []
    }
  },
  methods: {
    // 刷新列表
    updateList() {
      if (window.refreshContentList) {
        window.refreshContentList()
      }
    },
    hasPriv: function (val) {
      if (!val) {
        return true
      }
      return !!(val && Privilege.hasPriv(val))
    },
    selectOperate(e) {
      let fn = this.operateFuncs[e]
      if (typeof fn === 'function') {
        fn(this.selectedRows)
      }
    },
    selectedAllHandler() {
      this.selectAllLoading = true
      this.$emit('select-all')
      setTimeout(() => { this.selectAllLoading = false }, 1000)
    },
    async publish(ids, type) {
      let resp = await axios.put(`/ui/contentcore/contentpublish/${ids}/${type}`, {
        catalogID: this.catalogId
      })
      util.showResponseMessage(resp.data)
      resp.data.status === 1 && this.updateList()
    },

    async changeAttriutes(val) {
      let resp = await axios.put(`/ui/contentcore/contents/${this.contentIds}/${val}`, {
        catalogID: this.catalogId
      })
      util.showResponseMessage(resp.data)
      resp.data.status === 1 && this.updateList()
    }
  },
  created() {
    let obj = {}
    for (let i = 0; i < this.multiOperates.length; i++) {
      let opt = this.multiOperates[i]
      obj[opt.value] = opt.fn
    }
    this.operateFuncs = obj
  }
}
</script>
<style>
.el-multi-operate .el-input__inner {
  height: 28px;
}
</style>
