<template>
  <el-dialog title="导出栏目结构" :visible.sync="isShowModal" @open="dialogOpen" class="dimension-export-structure-dlg">
    <div>
      <span class="hint">导出的文本经复制后使用批量导入栏目功能可以导入到其它站点或栏目下</span>
      <el-input type="textarea" :rows="15" v-model="catalogStructure"></el-input>
    </div>
  </el-dialog>
</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
    },
    show: {
      type: Boolean,
      default: false,
      required: true
    }
  },
  data() {
    return {
      catalogStructure: '' //  栏目结构
    }
  },
  computed: {
    isShowModal: {
      get() {
        return this.show
      },
      set(val) {
        this.$emit('update:show', val)
      }
    }
  },
  methods: {
  // 导出栏目结构
    async getExportStructure() {
      try {
        let res = await axios.get(`/ui/dimesion/${this.dimensionId}/catalog/structure`,
          { params: { ID: this.catalogId } }
        )
        if (res.data.status === 1) {
          this.catalogStructure = res.data.data
        } else {
          util.showMessage(res)
        }
      } catch (e) {
      // util.showErrorNotification(e)

      }
    },
    dialogOpen() {
      this.getExportStructure()
    }
  }
}
</script>
<style scope>
.dimension-export-structure-dlg .el-dialog .hint {
  padding: 5px 0px 5px 0px;
  margin-bottom: 5px;
  font-size: 12px;
  display: block;
  margin-top: -10px;
}
.dimension-export-structure-dlg .el-dialog h5{
  color: #445566;
  font-weight: bold;
  margin-bottom: 10px;
}
</style>
<style>
.dimension-export-structure-dlg .el-dialog {
  width:450px;
}
@media (max-width:480px){
  .dimension-export-structure-dlg .el-dialog{
    width: 96%;
  }
}
.dimension-export-structure-dlg .el-dialog .el-textarea__inner{
  vertical-align: top;
  color: #336699;
  border: 1px solid #667788;
  border-color: #9ab #cde #cde #bcd;
  line-height: 19px;
  padding: 1px 1px 1px 4px;
  background: #F7FAFC url(/assets/images/textarea_bg.gif);
  height: 280px;
  margin: 0;
  box-shadow: 1px 0px 8px 0px rgba(0, 0, 50, 0.1) inset;
  overflow: auto;
}
</style>
