<template>
  <el-button @click="clickHandler" :disabled="!catalogId" :type="buttonType" :priv="'com.zving.cms.Catalog.Clean.'+catalogId">
    <i class="fa fa-minus-square-o"></i>清空
    <el-dialog title="清空栏目" :append-to-body="true" :visible.sync="isShowModal" class="clean-catalog-dlg">
      <span class="mt-20">
        提示：清空操作将删除栏目下的所有内容，确认清空吗？
      </span>
      <div class="mt-20 ml-128">
        <el-checkbox v-model="cleanChildren">包含子栏目</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
    },
    buttonType: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      isShowModal: false,
      submitLoading: false,
      cleanChildren: false //  是否包含子栏目
    }
  },
  methods: {
    clickHandler() {
      this.isShowModal = true
      this.cleanChildren = false
      this.submitLoading = false
    },
    //  提交清空栏目
    async confirm() {
      let opts = {
        catalogID: this.catalogId,
        cleanChildren: this.cleanChildren
      }
      this.submitLoading = true
      try {
        let res = await axios.put('/ui/catalogs/clean', opts)
        this.submitLoading = false
        if (res.data.status === 1) {
          this.isShowModal = false
          this.$emit('callback', res)
        } else {
          util.showMessage(res)
        }
      } catch (e) {
        this.submitLoading = false
        // util.showErrorNotification(e)
      }
    }
  }
}
</script>

<style scoped>
.clean-catalog-dlg .el-dialog .mt-20{
  margin-top:20px;
}
.clean-catalog-dlg .el-dialog .ml-128{
  margin-left:128px;
}
</style>
<style>
.clean-catalog-dlg .el-dialog{
  width:400px;
}
@media (max-width:480px){
  .clean-catalog-dlg .el-dialog{
    width:96%;
  }
}
</style>
