<template>
  <el-button @click="clickHandler" :disabled="disabled">
    <i class="fa fa-cloud-upload"></i>发布
    <el-dialog title="发布栏目" :visible.sync="isShowModal" :append-to-body="true" class="publish-dim-dlg">
      <span :style="{'margin-top':'20px'}">
        提示：<br>
          本次生成的静态页面将覆盖原有页面，确认生成所有静态页面吗？
      </span>
      <div :style="{'margin':'0 auto','margin-top':'20px','width':'50%'}">
        <el-checkbox v-model="publishChild">包含子栏目</el-checkbox>
      </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-button>
</template>
<script>
import util from '@src/common/util.js'
export default {
  props: {
    catalogId: {
      type: Number,
      default: 0,
      required: true
    },
    dimensionId: {
      type: Number,
      default: 0,
      required: true
    },
    disabled: {
      type: Boolean,
      default: false,
      required: false
    }
  },
  data() {
    return {
      submitLoading: false,
      publishChild: false,
      isShowModal: false
    }
  },
  methods: {
    clickHandler() {
      this.isShowModal = true
      this.publishChild = true
      this.submitLoading = false
    },
    // 提交发布
    async confirm() {
      let publish = {
        publishChild: this.publishChild,
        catalogID: this.catalogId,
        platformID: 'pc'
      }
      try {
        this.submitLoading = true
        let res = await axios.put(`/ui/dimesion/${this.dimensionId}/catalog/publish`, 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 scope>
</style>
<style>
.publish-dim-dlg .el-dialog{
  width:300px;
}
@media (max-width:480px){
  .publish-dim-dlg .el-dialog{
    width:96%;
  }
}
</style>
