<template>
  <el-dropdown @command="handlePublishCommand">
    <el-button @click="clickHandler('30')" :disabled="!catalogId" :priv="'com.zving.cms.Catalog.Publish.'+catalogId">
      <i class="fa fa-cloud-upload"></i>发布<i class="fa fa-caret-down" aria-hidden="true"></i>
    </el-button>
    <el-dropdown-menu slot="dropdown" :style="{'font-size':'14px'}">
      <el-dropdown-item command="30"><i class="fa fa-cloud-upload"></i>发布已发布的文档</el-dropdown-item>
      <el-dropdown-item command="20"><i class="fa fa-cloud-upload"></i>发布待发布的文档</el-dropdown-item>
      <el-dropdown-item command="0"><i class="fa fa-cloud-upload"></i>发布初稿</el-dropdown-item>
      <el-dropdown-item command="60"><i class="fa fa-cloud-upload"></i>发布重新编辑的文档</el-dropdown-item>
      <el-dropdown-item command="40"><i class="fa fa-cloud-upload"></i>发布已下线的文档</el-dropdown-item>
      <el-dropdown-item v-if="catalogType!=='Default'" command="-1"><i class="fa fa-cloud-upload"></i>发布所有文档</el-dropdown-item>
    </el-dropdown-menu>
    <el-dialog title="发布栏目" :append-to-body="true" :visible.sync="isShowModal" class="publish-catalog-dlg">
      <span :style="{'margin-top':'20px'}">
        提示：<br>
          本次生成的静态页面将覆盖原有页面，确认生成所有静态页面吗？
      </span>
      <div :style="{'margin':'0 auto','margin-top':'10px'}">
        <el-checkbox v-model="publishChild">包含子栏目</el-checkbox>
        <el-checkbox v-if="mappingFlag==2||catalogType !== 'Virtual'" v-model="publishDetail">包含详细页</el-checkbox>
        <el-checkbox v-model="isAppointTime">指定时间范围</el-checkbox>
      </div>
       <div v-if="isAppointTime" style="margin:0 auto;margin-top:10px">
          <el-date-picker id="publish-date-picker" class="layout-date-picker" v-model="dateInterval" type="datetimerange" start-placeholder="发布时间" end-placeholder="发布时间" style="width:100%"></el-date-picker>
      </div>
      <div slot="footer">
        <el-button @click="isShowModal= false">取 消</el-button>
        <el-button type="primary" v-loading="submitLoading" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
  </el-dropdown>
</template>
<script>
import util from '@src/common/util.js'
export default {
  props: {
    catalogId: {
      type: [Number, String],
      default: 0,
      required: true
    },
    mappingFlag: {
      type: String,
      default: '',
      required: false
    },
    catalogType: {
      tyle: String,
      default: 'Default',
      required: true
    }
  },
  data() {
    return {
      submitLoading: false,
      publishChild: false,
      publishDetail: false,
      publishStatus: '',
      isShowModal: false,
      dateInterval: [],
      isAppointTime: false
    }
  },
  methods: {
    //  发布栏目
    clickHandler(status) {
      this.submitLoading = false
      this.publishStatus = status
      if (this.catalogType === 'Virtual') {
        this.publishChild = false
      } else {
        this.publishChild = true
      }
      if (String(this.mappingFlag) === '2' || this.catalogType !== 'Virtual') {
        this.publishDetail = true
      } else {
        this.publishDetail = false
      }
      this.isShowModal = true
    },
    //  发布栏目下拉列表
    handlePublishCommand(command) {
      this.clickHandler(command)
    },
    // 提交发布
    async confirm() {
      let publish = {
        publishChild: this.publishChild,
        publishDetail: this.publishDetail,
        publishStatus: this.publishStatus,
        startTime: this.dateInterval && this.isAppointTime ? Date.parse(this.dateInterval[0]) : null,
        endTime: this.dateInterval && this.isAppointTime ? Date.parse(this.dateInterval[1]) : null
      }
      try {
        this.submitLoading = true
        let res = await axios.put(
          `/ui/contentcore/catalogpublisher/${this.catalogId}`,
          publish
        )
        this.submitLoading = false
        if (res.data.status === 1) {
          this.isShowModal = false
          this.$emit('callback', res.data.taskID)
        } else {
          util.showMessage(res)
        }
      } catch (e) {
        this.submitLoading = false
        // util.showErrorNotification(e)
      }
    }
  }
}
</script>
<style>
.publish-catalog-dlg .el-dialog{
  width:400px;
}
@media (max-width:480px){
  .publish-catalog-dlg .el-dialog{
    width:96%;
  }
}
</style>
<style scoped>
.el-toolbar .el-button {
  /* font-size: 17px; */
}
</style>
