<template>
  <el-button :disabled="disabled" :type="buttonType"  @click.stop="exportCatalog" title="导出栏目结构"  class="table-operate-icon" :priv="catalogId=== 0 ? `com.zving.cms.Site.AddTopLevelCatalog.${siteId}`:`com.zving.cms.Catalog.${catalogId}`">
    <i class="fa fa-cloud-upload f16"></i>导出栏目结构
    <el-dialog title="导出栏目结构" :append-to-body="true" @open="openLoadData"  :visible.sync="isShowModal"  class="export-structure-dlg">
      <div v-loading="dataLoading">
        <div v-show="!catalogId">
          所属维度：
          <el-select v-model="dimensionId" style="width:160px;">
            <el-option
              v-for="item in dimensions"
              :key="item.ID"
              :label="item.name"
              :value="item.ID"
            >
            </el-option>
          </el-select>
        </div><br/>
        <span class="hint">复制文本内容后，粘贴到批量导入栏目功能的文本框内即可以导入到其它站点或栏目下</span>
        <el-input type="textarea" readonly :rows="15" v-model="catalogStructure"></el-input>
      </div>
      <div slot="footer">
        <el-button @click="isShowModal = false">关 闭</el-button>
      </div>
    </el-dialog>
  </el-button>
</template>
<script>
import util from '@src/common/util.js'
export default {
  props: {
    catalogId: {
      type: [String, Number],
      default: 0
    },
    disabled: {
      type: Boolean,
      default: false,
      required: false
    },
    buttonType: {
      type: String,
      default: ''
    },
    siteId: {
      type: [String, Number]
    },
    dimensionId: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      dimensions: [],
      isShowModal: false,
      dataLoading: false,
      catalogStructure: '' // 栏目结构
    }
  },
  watch: {
    dimensionId(val) {
      this.openLoadData()
    }
  },
  async mounted() {
    let res = await axios.get('/ui/dimensions')
    this.dimensions = res.data.data
  },
  methods: {
    openLoadData() {
      this.getExportStructure(0)
    },
    // 导出栏目结构
    async getExportStructure(type) {
      this.dataLoading = true
      try {
        let url
        if (type === 0) {
          url = `/ui/catalogs/0/exportstructure`
        } else {
          url = `/ui/catalogs/${this.catalogId}/exportstructure`
        }
        let res = await axios.get(url, {
          params: {
            siteID: this.siteId,
            dimensionID: this.dimensionId
          }
        })
        this.dataLoading = false
        if (res.data.status === 1) {
          this.catalogStructure = res.data.data
        } else {
          util.showMessage(res)
        }
      } catch (e) {
        this.dataLoading = false
      }
    },
    exportCatalog() {
      this.isShowModal = true
    }
  }
}
</script>
<style scope>
.export-structure-dlg .el-dialog .hint {
  padding: 5px 0px 5px 0px;
  margin-bottom: 5px;
  font-size: 12px;
  display: block;
  margin-top: -10px;
}
.export-structure-dlg .el-dialog h5 {
  color: #445566;
  font-weight: bold;
  margin-bottom: 10px;
}
</style>
<style>
.export-structure-dlg .el-dialog {
  width: 450px;
}
@media (max-width: 480px) {
  .export-structure-dlg .el-dialog {
    width: 96%;
  }
}
.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>
