<template>
  <div class="layout-no-cols">
    <el-toolbar>
      <el-button @click="editCatalogMappingClickHandler" :disabled="selectedRows.length !== 1 ">
        <i class="fa fa-edit"></i>修改
      </el-button>
      <el-button @click="nameMatchCatalogMappingClickHandler">
        <i class="fa fa-edit"></i>公共栏目按名称匹配
      </el-button>
      <el-button @click="setAllCatalogMappingClickHandler" :disabled="selectedRows.length !== 1">
        <i class="fa fa-edit"></i>维度统一设置
      </el-button>
      <el-button @click="mappingCatalogMappingClickHandler(false)">
        <i class="fa fa-arrow-up"></i>映射到公共站点
      </el-button>
      <el-button @click="mappingCatalogMappingClickHandler(true)">
        <i class="fa fa-upload"></i>全部映射
      </el-button>
      <el-button @click="extractCatalogMappingClickHandler(false)">
        <i class="fa fa-arrow-down"></i>从公共站点重建内容
      </el-button>
      <el-button @click="extractCatalogMappingClickHandler(true)">
        <i class="fa fa-share"></i>全部重建
      </el-button>
    </el-toolbar>
    <div cclass="padding-top-bottom">
      <tree-table :data="catalogMappingTable" :expanded-level="0" row-key="ID" class="catalog-tree-table" @selection-change="onSelectionChange">
        <el-table-column type="index" width="65" label="序号" align="center"></el-table-column>
        <el-table-column type="selection" width="65" align="center"></el-table-column>
        <tree-table-column prop="name" label="本站栏目"></tree-table-column>
        <el-table-column prop="commonsitecatalog" label="公共站点栏目"></el-table-column>
        <el-table-column prop="dimension1catalog" :label="'维度1('+ dimension1 +')'"></el-table-column>
        <el-table-column prop="dimension2catalog" :label="'维度2('+ dimension2 +')'"></el-table-column>
        <el-table-column prop="dimension3catalog" :label="'维度3('+ dimension3 +')'"></el-table-column>
        <el-table-column prop="dimension4catalog" :label="'维度4('+ dimension4 +')'"></el-table-column>
        <el-table-column prop="dimension5catalog" :label="'维度5('+ dimension5 +')'"></el-table-column>
      </tree-table>
    </div>
    <el-dialog :title="editMode === 1 ? '修改' : '维度统一设置' " :visible.sync="editCatalogMappingDialog" class="mapping-dialog">
      <el-form :model="tmpEditCatalogMapping" ref="editCatalogMappingForm">
        <el-form-item prop="name" label="栏目名称：" v-if="editMode === 1">
          {{tmpEditCatalogMapping.name}}
        </el-form-item>
        <el-form-item prop="commonsitecatalog" label="公共站点栏目：" v-if="editMode === 1">
          <el-input type="text" v-model="tmpEditCatalogMapping.commonsitecatalog" style="width:335px" :readonly="true" :disabled="disabled"></el-input>
          <el-button @click="selectCatalogClick">选择栏目</el-button>
        </el-form-item>
        <el-form-item prop="dimension1catalog" :label="'公共站点维度1(' + dimension1 + ')：'">
          <!-- dimension1-->
          <div class="select-wrap" @click.stop="wrapDimension1ClickHandler">
            <el-input :value="tmpEditCatalogMapping.dimension1catalog" :placeholder="placeholder" :readonly="true" :disabled="disabled"
              :icon="isOpenDimension1Tree ? 'caret-top' : 'caret-bottom'" @click.stop="inputDimension1ClickHandler" style="width:415px">
            </el-input>
            <div class="tree-wrap" v-show="isOpenDimension1Tree">
              <el-input type="text" placeholder="请输入栏目名称" class="inner-search" v-model="dimension1CatalogNameSearch">
                <!--@change="catalogNameSearchChange"-->
              </el-input>
              <el-tree :data="dimensionCatalogTrees" ref="dimension1CatalogTrees" :node-key="itemsOptions.key" :props="itemsOptions" :default-expand-all="true"
                :expand-on-click-node="false" :highlight-current="true" :render-content="renderContent" :filter-node-method="dimension1FilterNode"
                @node-click="treeNodeClickHandler" v-loading="treeLoading">
              </el-tree>
            </div>
          </div>
        </el-form-item>
        <el-form-item prop="dimension2catalog" :label="'公共站点维度2(' + dimension2 + ')：'">
          <div class="select-wrap" @click.stop="wrapDimension2ClickHandler">
            <el-input :value="tmpEditCatalogMapping.dimension2catalog" :placeholder="placeholder" :readonly="true" :disabled="disabled"
              :icon="isOpenDimension2Tree ? 'caret-top' : 'caret-bottom'" @click.stop="inputDimension2ClickHandler" style="width:415px">
            </el-input>
            <div class="tree-wrap" v-show="isOpenDimension2Tree">
              <el-input type="text" placeholder="请输入栏目名称" class="inner-search" v-model="dimension2CatalogNameSearch">
              </el-input>
              <el-tree :data="dimensionCatalogTrees" ref="dimension2CatalogTrees" :node-key="itemsOptions.key" :props="itemsOptions" :default-expand-all="true"
                :expand-on-click-node="false" :highlight-current="true" :render-content="renderContent" :filter-node-method="dimension2FilterNode"
                @node-click="treeNodeClickHandler" v-loading="treeLoading">
              </el-tree>
            </div>
          </div>
        </el-form-item>
        <el-form-item prop="dimension3catalog" :label="'公共站点维度3(' + dimension3 + ')：'">
          <div class="select-wrap" @click.stop="wrapDimension3ClickHandler">
            <el-input :value="tmpEditCatalogMapping.dimension3catalog" :placeholder="placeholder" :readonly="true" :disabled="disabled"
              :icon="isOpenDimension3Tree ? 'caret-top' : 'caret-bottom'" @click.stop="inputDimension3ClickHandler" style="width:415px">
            </el-input>
            <div class="tree-wrap" v-show="isOpenDimension3Tree">
              <el-input type="text" placeholder="请输入栏目名称" class="inner-search" v-model="dimension3CatalogNameSearch">
              </el-input>
              <el-tree :data="dimensionCatalogTrees" ref="dimension3CatalogTrees" :node-key="itemsOptions.key" :props="itemsOptions" :default-expand-all="true"
                :expand-on-click-node="false" :highlight-current="true" :render-content="renderContent" :filter-node-method="dimension3FilterNode"
                @node-click="treeNodeClickHandler" v-loading="treeLoading">
              </el-tree>
            </div>
          </div>
        </el-form-item>
        <el-form-item prop="dimension4catalog" :label="'公共站点维度4(' + dimension4 + ')：'">
          <div class="select-wrap" @click.stop="wrapDimension4ClickHandler">
            <el-input :value="tmpEditCatalogMapping.dimension4catalog" :placeholder="placeholder" :readonly="true" :disabled="disabled"
              :icon="isOpenDimension4Tree ? 'caret-top' : 'caret-bottom'" @click.stop="inputDimension4ClickHandler" style="width:415px">
            </el-input>
            <div class="tree-wrap" v-show="isOpenDimension4Tree">
              <el-input type="text" placeholder="请输入栏目名称" class="inner-search" v-model="dimension4CatalogNameSearch">
              </el-input>
              <el-tree :data="dimensionCatalogTrees" ref="dimension4CatalogTrees" :node-key="itemsOptions.key" :props="itemsOptions" :default-expand-all="true"
                :expand-on-click-node="false" :highlight-current="true" :render-content="renderContent" :filter-node-method="dimension4FilterNode"
                @node-click="treeNodeClickHandler" v-loading="treeLoading">
              </el-tree>
            </div>
          </div>
        </el-form-item>
        <el-form-item prop="dimension5catalog" :label="'公共站点维度5(' + dimension5 + ')：'">
          <div class="select-wrap" @click.stop="wrapDimension5ClickHandler">
            <el-input :value="tmpEditCatalogMapping.dimension5catalog" :placeholder="placeholder" :readonly="true" :disabled="disabled"
              :icon="isOpenDimension5Tree ? 'caret-top' : 'caret-bottom'" @click.stop="inputDimension5ClickHandler" style="width:415px">
            </el-input>
            <div class="tree-wrap" v-show="isOpenDimension5Tree">
              <el-input type="text" placeholder="请输入栏目名称" class="inner-search" v-model="dimension5CatalogNameSearch">
              </el-input>
              <el-tree :data="dimensionCatalogTrees" ref="dimension5CatalogTrees" :node-key="itemsOptions.key" :props="itemsOptions" :default-expand-all="true"
                :expand-on-click-node="false" :highlight-current="true" :render-content="renderContent" :filter-node-method="dimension5FilterNode"
                @node-click="treeNodeClickHandler" v-loading="treeLoading">
              </el-tree>
            </div>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editCatalogMappingDialog = false">取 消</el-button>
        <el-button type="primary" @click="confirmCatalogMappingClick" :loading="handlerLoading">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="选择栏目" :visible.sync="selectCatalogDialog" class="select-catalog-dialog">
      <div class="dialog-body">
        <el-radio-group v-model="targetCatalog" class="dialog-body">
          <el-tree :show-checkbox="false" :data="selectCatalogTrees" node-key="id" default-expand-all ref="tree" highlight-current :props="defaultProps" :expand-on-click-node="false"
          :render-content="renderContents" @node-click="selectCatalogTreeClickHandler" class="catalog-tree">
          </el-tree>
        </el-radio-group>
      </div>
      <div slot="footer">
          <el-button @click="selectCatalogDialog = false">关 闭</el-button>
      </div>
    </el-dialog>
    <el-dialog title="开始映射内容到公共站点，此操作耗时较长..." :visible.sync="progressDialog" :before-close="closeProgressDialog">
      {{mapping.record}}条记录已映射
      <el-progress v-if="mapping.percent === 100" :text-inside="true" :stroke-width="18" :percentage="mapping.percent" status="success"></el-progress>
      <el-progress v-else :text-inside="true" :stroke-width="18" :percentage="mapping.percent"></el-progress>
      <div slot="footer">
        <el-button @click="closeProgressDialog">关 闭</el-button>
      </div>
    </el-dialog>
    <el-dialog title="开始从公共站点获取内容，此操作耗时较长..." :visible.sync="extractProgressDialog" :before-close="closeExtractProgressDialog">
      {{extracts.record}}条记录已重建
      <el-progress v-if="extracts.percent === 100" :text-inside="true" :stroke-width="18" :percentage="extracts.percent" status="success"></el-progress>
      <el-progress v-else :text-inside="true" :stroke-width="18" :percentage="extracts.percent"></el-progress>
      <div slot="footer">
        <el-button @click="closeExtractProgressDialog">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import util from '@src/common/util.js'
import TreeTable from '@src/components/treeTable/TreeTable.vue'
import TreeTableColumn from '@src/components/treeTable/TreeTableColumn.vue'
export default {
  components: {
    'tree-table': TreeTable,
    'tree-table-column': TreeTableColumn
  },
  data() {
    return {
      targetCatalog: '',
      placeholder: '',
      disabled: false,
      // 栏目树数据
      selectCatalogTrees: [],

      // 维度栏目树数据
      dimensionCatalogTrees: [],

      // 选择栏目树属性设置
      defaultProps: {
        children: 'children',
        label: 'name'
      },

      // 公共维度树属性设置
      itemsOptions: {
        children: 'children',
        label: 'name',
        key: 'id'
      },

      // 1 修改  2 维度统一设置
      editMode: 1,
      // 选择栏目按钮状态
      selectCatalogDialog: false,
      // 重建进度条状态
      extractProgressDialog: false,
      // 内容一体化数据
      catalogMappingTable: [],
      // 数据加载状态
      dataLoading: false,
      // 确定按钮状态
      handlerLoading: false,
      // 选中
      selectedRows: [],
      tmpEditCatalogMapping: {
        id: '',
        name: '',
        commonsitecatalog: '',
        dimension1catalog: '',
        dimension2catalog: '',
        dimension3catalog: '',
        dimension4catalog: '',
        dimension5catalog: ''
      },
      // 内容一体化表头维度1-5定义
      dimension1: '',
      dimension2: '',
      dimension3: '',
      dimension4: '',
      dimension5: '',
      // 内容一体化表头维度id 1-5定义
      dimensionid1: '',
      dimensionid2: '',
      dimensionid3: '',
      dimensionid4: '',
      dimensionid5: '',
      // 公共站点维度1-5搜索定义
      dimension1CatalogNameSearch: '',
      dimension2CatalogNameSearch: '',
      dimension3CatalogNameSearch: '',
      dimension4CatalogNameSearch: '',
      dimension5CatalogNameSearch: '',
      // 公共站点维度 1-5的哪个栏目对应定义
      dimension1catalogid: '',
      dimension2catalogid: '',
      dimension3catalogid: '',
      dimension4catalogid: '',
      dimension5catalogid: '',
      // 编辑对话框状态
      editCatalogMappingDialog: false,
      // 映射进度条状态
      progressDialog: false,
      // 映射进度条参数
      mapping: { record: 0, percent: 0 },
      // 重建进度条参数
      extracts: { record: 0, percent: 0 },
      // 公共维度下拉展开状态
      isOpenDimension1Tree: false,
      isOpenDimension2Tree: false,
      isOpenDimension3Tree: false,
      isOpenDimension4Tree: false,
      isOpenDimension5Tree: false,
      // 栏目树数据加载状态
      treeLoading: false,
      currentCatalogId: '',
      curCatalogID: 0
    }
  },
  watch: {
    dimension1CatalogNameSearch(val) {
      this.$refs.dimension1CatalogTrees.filter(val)
    },
    dimension2CatalogNameSearch(val) {
      this.$refs.dimension2CatalogTrees.filter(val)
    },
    dimension3CatalogNameSearch(val) {
      this.$refs.dimension3CatalogTrees.filter(val)
    },
    dimension4CatalogNameSearch(val) {
      this.$refs.dimension4CatalogTrees.filter(val)
    },
    dimension5CatalogNameSearch(val) {
      this.$refs.dimension5CatalogTrees.filter(val)
    }
  },
  created() {
    // 内容一体化列表数据加载
    this.dimensionData()

    // 公共站点维度下拉菜单栏目树数据加载
    //  this.getDimensionCatalogTrees();
  },

  // 点击空白处下拉菜单关闭
  mounted() {
    let that = this
    document.addEventListener(
      'click',
      () => {
        that.isOpenDimension1Tree = false
        that.isOpenDimension2Tree = false
        that.isOpenDimension3Tree = false
        that.isOpenDimension4Tree = false
        that.isOpenDimension5Tree = false
      },
      false
    )
  },
  methods: {
    // 公共站点维度树数据设置
    treeNodeClickHandler(data) {
      let val = {}
      val[this.itemsOptions.label] = data[this.itemsOptions.label]
      /* console.log(data[this.itemsOptions.label]) */
      // val[this.itemsOptions.key] = data[this.itemsOptions.key];
      if (this.isOpenDimension1Tree) {
        this.tmpEditCatalogMapping.dimension1catalog =
          data[this.itemsOptions.label]
        this.isOpenDimension1Tree = false
      } else if (this.isOpenDimension2Tree) {
        this.tmpEditCatalogMapping.dimension2catalog =
          data[this.itemsOptions.label]
        this.isOpenDimension2Tree = false
      } else if (this.isOpenDimension3Tree) {
        this.tmpEditCatalogMapping.dimension3catalog =
          data[this.itemsOptions.label]
        this.isOpenDimension3Tree = false
      } else if (this.isOpenDimension4Tree) {
        this.tmpEditCatalogMapping.dimension4catalog =
          data[this.itemsOptions.label]
        this.isOpenDimension4Tree = false
      } else if (this.isOpenDimension5Tree) {
        this.tmpEditCatalogMapping.dimension5catalog =
          data[this.itemsOptions.label]
        this.isOpenDimension5Tree = false
      }
    },

    // 公共站点维度1展开
    wrapDimension1ClickHandler() {
      if (this.disabled) {
        return
      }
      this.isOpenDimension1Tree = true
      this.isOpenDimension2Tree = false
      this.isOpenDimension3Tree = false
      this.isOpenDimension4Tree = false
      this.isOpenDimension5Tree = false
      if (this.dimensionid1) {
        // 公共站点维度下拉菜单栏目树数据加载
        this.getDimensionCatalogTrees(this.dimensionid1)
      }
    },

    // 公共站点维度1关闭
    inputDimension1ClickHandler() {
      if (this.disabled) {
        return
      }
      this.isOpenDimension1Tree = false
    },

    // 公共站点维度2展开
    wrapDimension2ClickHandler() {
      if (this.disabled) {
        return
      }
      this.isOpenDimension2Tree = true
      this.isOpenDimension1Tree = false
      this.isOpenDimension3Tree = false
      this.isOpenDimension4Tree = false
      this.isOpenDimension5Tree = false
      if (this.dimensionid2) {
        // 公共站点维度下拉菜单栏目树数据加载
        this.getDimensionCatalogTrees(this.dimensionid2)
      }
    },

    // 公共站点维度2关闭
    inputDimension2ClickHandler() {
      if (this.disabled) {
        return
      }
      this.isOpenDimension2Tree = false
    },

    // 公共站点维度3展开
    wrapDimension3ClickHandler() {
      if (this.disabled) {
        return
      }
      this.isOpenDimension3Tree = true
      this.isOpenDimension1Tree = false
      this.isOpenDimension2Tree = false
      this.isOpenDimension4Tree = false
      this.isOpenDimension5Tree = false
      if (this.dimensionid3) {
        // 公共站点维度下拉菜单栏目树数据加载
        this.getDimensionCatalogTrees(this.dimensionid3)
      }
    },

    // 公共站点维度3关闭
    inputDimension3ClickHandler() {
      if (this.disabled) {
        return
      }
      this.isOpenDimension3Tree = false
    },

    // 公共站点维度4展开
    wrapDimension4ClickHandler() {
      if (this.disabled) {
        return
      }
      this.isOpenDimension4Tree = true
      this.isOpenDimension1Tree = false
      this.isOpenDimension2Tree = false
      this.isOpenDimension3Tree = false
      this.isOpenDimension5Tree = false
      if (this.dimensionid4) {
        // 公共站点维度下拉菜单栏目树数据加载
        this.getDimensionCatalogTrees(this.dimensionid4)
      }
    },

    // 公共站点维度4关闭
    inputDimension4ClickHandler() {
      if (this.disabled) {
        return
      }
      this.isOpenDimension4Tree = false
    },

    // 公共站点维度5展开
    wrapDimension5ClickHandler() {
      if (this.disabled) {
        return
      }
      this.isOpenDimension5Tree = true
      this.isOpenDimension1Tree = false
      this.isOpenDimension2Tree = false
      this.isOpenDimension3Tree = false
      this.isOpenDimension4Tree = false
      if (this.dimensionid5) {
        // 公共站点维度下拉菜单栏目树数据加载
        this.getDimensionCatalogTrees(this.dimensionid5)
      }
    },

    // 公共站点维度5关闭
    inputDimension5ClickHandler() {
      if (this.disabled) {
        return
      }
      this.isOpenDimension5Tree = false
    },
    // 维度1栏目搜索
    dimension1FilterNode(val, data) {
      if (!val) {
        return true
      }
      return data.name.indexOf(val) !== -1
    },

    // 维度2栏目搜索
    dimension2FilterNode(val, data) {
      if (!val) {
        return true
      }
      return data.name.indexOf(val) !== -1
    },
    // 维度3栏目搜索
    dimension3FilterNode(val, data) {
      if (!val) {
        return true
      }
      return data.name.indexOf(val) !== -1
    },
    // 维度4栏目搜索
    dimension4FilterNode(val, data) {
      if (!val) {
        return true
      }
      return data.name.indexOf(val) !== -1
    },
    // 维度5栏目搜索
    dimension5FilterNode(val, data) {
      if (!val) {
        return true
      }
      return data.name.indexOf(val) !== -1
    },

    // 关闭映射进度条对话框
    closeProgressDialog() {
      this.progressDialog = false
    },

    // 关闭重建进度条对话框
    closeExtractProgressDialog() {
      this.extractProgressDialog = false
    },

    // 内容一体化对话框点击确定触发事件
    async confirmCatalogMappingClick() {
      try {
        await util.validateForm(this.$refs['editCatalogMappingForm'])
      } catch (e) {
        util.showErrorMessageBox(e)
      }
      this.handlerLoading = true
      if (this.editMode === 2) {
        let res = await axios.put(
          `/ui/catalogmapping/setall`,
          this.dimension1catalogid,
          this.dimension2catalogid,
          this.dimension3catalogid,
          this.dimension4catalogid,
          this.dimension5catalogid
        )
        util.showResponseMessage(res.data)
        if (res.data.status === 1) {
          this.updateConfirm()
          this.editCatalogMappingDialog = false
        }
      } else if (this.editMode === 1) {
        let res = await axios.put(
          `/ui/catalogmapping/${this.tmpEditCatalogMapping.id}`,
          this.tmpEditCatalogMapping
        )
        if (res.data.status === 1) {
          this.updateConfirm()
        }
      }
      this.handlerLoading = false
    },

    // 修改事件
    editCatalogMappingClickHandler() {
      this.editMode = 1
      this.tmpEditCatalogMapping = Object.assign({}, this.selectedRows[0])
      this.editCatalogMappingDialog = true
    },

    // 验证事件
    updateConfirm() {
      let index = this.catalogMappingTable.findIndex(
        val => val.id === this.tmpEditCatalogMapping.id
      )
      this.catalogMappingTable = [
        ...this.catalogMappingTable.slice(0, index),
        this.tmpEditCatalogMapping,
        ...this.catalogMappingTable.slice(index + 1)
      ]
    },

    // 选择栏目按钮点击事件
    async selectCatalogClick() {
      this.selectCatalogDialog = true
      // 选择栏目按钮栏目树数据加载
      this.getCatalogTrees()
    },

    // 选择栏目树结构事件
    selectCatalogTreeClickHandler(data) {
      this.targetCatalog = data ? data.ID : ''
      this.tmpEditCatalogMapping.commonsitecatalog =
        data[this.defaultProps.label]
      this.selectCatalogDialog = false
    },

    // 公告栏目按名称匹配事件
    async nameMatchCatalogMappingClickHandler() {
      this.dataLoading = true
      let res = await axios.put('/ui/catalogmapping/namematch')
      this.dataLoading = false
      util.showResponseMessage(res.data)
    },

    // 统一维度设置
    setAllCatalogMappingClickHandler() {
      this.editMode = 2
      this.tmpEditCatalogMapping = Object.assign({}, this.selectedRows[0])
      this.editCatalogMappingDialog = true
    },

    // 映射
    async mappingCatalogMappingClickHandler(isAll) {
      let dr = []
      if (!isAll) {
        if (!this.selectedRows.length) {
          this.dialog('请先选择一条记录')
          return ''
        }
        let length = this.selectedRows.length
        for (let i = 0; i < length; i++) {
          this.tmpEditCatalogMapping = Object.assign({}, this.selectedRows[i])
          dr.push(this.tmpEditCatalogMapping.id)
        }
      }

      let res = await axios.put('/ui/catalogmapping/mapping', {
        catalogID: dr
      })
      util.showResponseMessage(res.data)
    },

    // 重建
    async extractCatalogMappingClickHandler(isAll) {
      if (!isAll) {
        if (!this.selectedRows.length) {
          this.dialog('请先选择一条记录')
          return ''
        }
      }
      let dr = []
      let length = this.selectedRows.length
      for (let i = 0; i < length; i++) {
        this.tmpEditCatalogMapping = Object.assign({}, this.selectedRows[i])
        dr.push(this.tmpEditCatalogMapping.ID)
      }
      // this.extractProgressDialog = true
      let res = await axios.put('/ui/catalogmapping/extract', {
        catalogID: dr
      })
      if (res.data.status === 1) {
        //  this.extractProgress(1000 res.data, dr)
        this.msgPop(res.data.message, 'success')
      } else {
        this.msgPop(res.data.message, 'error')
      }
      // this.extractProgressDialog = false
    },

    // 映射进度条动态控制
    progress(time, data, catalogIds) {
      let timer = setInterval(async () => {
        let res = await axios.put('/ui/catalogmapping/mapping', {
          catalogID: catalogIds
        })
        this.mapping.record += res.data.mapping.record
        this.mapping.percent += res.data.mapping.percent
        if (this.mapping.percent === 100) {
          this.progressDialog = false
          this.msgPop(data.message, 'success')
          clearInterval(timer)
        }
      }, time)
      this.mapping.record = 0
      this.mapping.percent = 0
    },

    // 重建进度条动态控制
    extractProgress(time, data, catalogIds) {
      let timer = setInterval(async () => {
        let res = await axios.put('/ui/catalogmapping/extract', {
          catalogIds: catalogIds
        })
        this.extracts.record += res.data.extracts.record
        this.extracts.percent += res.data.extracts.percent
        if (this.extracts.percent === 100) {
          this.extractProgressDialog = false
          this.msgPop(data.message, 'success')
          clearInterval(timer)
        }
      }, time)
      this.extracts.record = 0
      this.extracts.percent = 0
    },

    // 数据选中事件
    onSelectionChange(selection) {
      this.selectedRows = selection
      if (this.selectedRows.length > 0) {
        this.curCatalogID = this.selectedRows[0].ID
      } else {
        this.curCatalogID = 0
      }
    },

    // 渲染树节点的展示内容
    renderContents: function (createElement, { node, data }) {
      if (parseInt(data.ID) === 0 || parseInt(data.branchInnerCode) === 0 || data.ID === 'site') {
        return createElement('span', [
          createElement('i', { attrs: { class: 'fa fa-desktop' } }),
          createElement('span', node.label)
        ])
      } else {
        return createElement('span', [
          this.currentCatalogId !== data.ID && createElement('el-radio', {props: { label: data.ID }}, ''),
          createElement('i', { attrs: { class: 'fa fa-folder' } }),
          createElement('span', node.label)
        ])
      }
    },
    renderContent: function(createElement, { node, data, store }) {
      let params = {
        h: createElement,
        treeObj: { node, data, store }
      }
      return util.renderTreeContent(params)
    },

    // 选择栏目树数据加载
    async getCatalogTrees() {
      let data = await axios.get('/ui/catalogmapping/initdialog', {
        params: {
          id: this.curCatalogID
        }
      })
      let res = await axios.get('/ui/catalogmapping/bindtree', {
        params: {
          siteID: data.data.commonSite.ID,
          type: 'Default',
          contentType: data.data.contentType
        }
      })
      this.selectCatalogTrees = res.data.data
    },

    // 公共维度树数据加载
    async getDimensionCatalogTrees(dimensionID) {
      let res = await axios.get(`/ui/dimesion/${dimensionID}/catalog`)
      this.dimensionCatalogTrees = res.data.data
    },

    // 内容一体化数据加载
    async dimensionData() {
      this.dataLoading = true
      let res = await axios.get('/ui/catalogmapping')
      let data = await axios.get('/ui/catalogmapping/init')
      this.catalogMappingTable = res.data.data
      this.dimension1 = data.data.dimension1 ? data.data.dimension1 : ''
      this.dimension2 = data.data.dimension2 ? data.data.dimension2 : ''
      this.dimension3 = data.data.dimension3 ? data.data.dimension3 : ''
      this.dimension4 = data.data.dimension4 ? data.data.dimension4 : ''
      this.dimension5 = data.data.dimension5 ? data.data.dimension5 : ''
      this.dimensionid1 = data.data.dimensionID1 ? data.data.dimensionID1 : ''
      this.dimensionid2 = data.data.dimensionID2 ? data.data.dimensionID2 : ''
      this.dimensionid3 = data.data.dimensionID3 ? data.data.dimensionID3 : ''
      this.dimensionid4 = data.data.dimensionID4 ? data.data.dimensionID4 : ''
      this.dimensionid5 = data.data.dimensionID5 ? data.data.dimensionID5 : ''
      this.dataLoading = false
    },
    // 消息Dialog封装
    dialog(msg) {
      this.$confirm(msg, '系统提示', {
        confirmButtonText: '确定',
        showCancelButton: false,
        type: 'warning'
      })
    },

    // 消息显示封装
    msgPop(msg, type) {
      if (!type) {
        this.$message(msg)
        return
      }
      this.$message({
        message: msg,
        type: type
      })
    }
  }
}
</script>

<style scoped>
.catalog-tree {
  height: 99%;
  width: 100%;
  overflow: auto;
}
.dialog-body {
  height: 400px;
  width: 100%;
  border: 1px solid #eee;
}
.select-wrap {
  position: relative;
  cursor: pointer;
  float: left;
}
.select-wrap .tree-wrap {
  position: absolute;
  z-index: 10000;
  top: 42px;
  left: 1px;
  right: 1px;
  background-color: #fff;
  border: 1px solid #d1dbe5;
  border-radius: 3px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}

.el-radio-group{
  font-size:14px;
}
</style>
<style>
.el-form-item .el-form-item__label {
  width: 160px;
}

.inner-search .el-input__inner {
  margin-top: 10px;
  margin-left: 10px;
  width: -webkit-fill-available;
  margin-right: 10px;
}
/* 在一般情况下dialog宽为450像素，在逻辑分辨率480像素以下dialog宽为96% */
.mapping-dialog .el-dialog {
  width: 650px;
}
@media (max-width: 480px) {
  .mapping-dialog .el-dialog {
    width: 96%;
  }
}
.select-catalog-dialog .el-dialog {
  width: 420px;
}
@media (max-width: 480px) {
  .select-catalog-dialog .el-dialog {
    width: 96%;
  }
}
</style>
