<template>
  <div>
    <el-dialog :title="title" :visible.sync="isShow" @open="dialogOpen" class="cataloglist-platform-dialog">
      <!-- 顶部筛选栏 -->
      <div class="search-bar">
        栏目内容类型
        <el-select v-model="contentType" @change="filter" clearable>
          <el-option v-for="item in contentTypes" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <span v-if="action=='add'">
          <el-checkbox v-model="publishFlag">生成详细页</el-checkbox>
        </span>
      </div>
      <el-tree :render-content="renderContent" ref="tree" show-checkbox :data="copyContentTree" check-strictly v-loading="catalogtreeLoading" :default-expand-all="true" :highlight-current="true" :node-key="treeOptions.key" :expand-on-click-node="false" :props="treeOptions" class="catalog-tree">
      </el-tree>
      <!-- 底部确认按钮 -->
      <div slot="footer">
        <el-button @click="isShow = false">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import util from '@src/common/util.js'

export default {
  data() {
    return {
      publishFlag: false, // 是否生成详细页
      catalogtreeLoading: true, // 树加载动画
      copyContentTree: [],
      treeOptions: { key: 'ID', label: 'name', children: 'children' },
      contentTypes: [],
      contentType: '',
      contentTitleCheckType: '',
      catalogID: '',
      inputType: '',
      treeObject: { contentType: '' } // 用于传参过滤树节点
    }
  },
  computed: {
    isShow: {
      get() {
        return this.show
      },
      set(val) {
        this.$emit('update:show', val)
      }
    }
  },
  methods: {
    // 弹框打开回调
    async dialogOpen() {
      this.catalogtreeLoading = true
      // 加载内容类型数据
      let getcontentTypes = await axios.get('/ui/contentcore/contenttypes')
      this.contentTypes = getcontentTypes.data.data

      let bindCopyContentTree = await axios.get(
        '/ui/catalog/bindcopycontenttree',
        { params: this.treeObject }
      )
      this.copyContentTree = bindCopyContentTree.data.data
      this.catalogtreeLoading = false

      let initSelector = await axios.get('/ui/catalog/initselector', {
        params: {
          catalogID: this.catalogID,
          contentType: this.contentType,
          inputType: this.inputType
        }
      })
      this.contentTitleCheckType = initSelector.data.contentType
      this.inputType = initSelector.data.inputType
      this.contentType = initSelector.data.contentType
    },
    // 确定按钮点击事件
    async confirm() {
      let ids = this.$refs.tree.getCheckedKeys()
      if (ids.length === 0) {
        this.$alert('请先选择栏目', '提示', {
          type: 'info',
          confirmButtonText: '确定'
        })
        return
      }
      if (this.action === 'add') {
        let flag = ''
        if (this.publishFlag) {
          flag = 'Y'
        } else {
          flag = 'N'
        }
        let obj = {
          contentType: this.contentType,
          catalogIDs: ids.join(','),
          platformID: this.platformID,
          publishFlag: flag
        }
        let addContentPlatformAttribute = await axios.put(
          `/ui/publishplatform/${this.platformID}/addcontentplatformattribute`,
          obj
        )
        // console.log(addContentPlatformAttribute.data)
        util.showResponseMessage(addContentPlatformAttribute.data)
      } else if (this.action === 'delete') {
        let obj = {
          contentType: this.contentType,
          catalogIDs: ids.join(','),
          platformID: this.platformID
        }

        let deleteContentPlatfromAttribute = await axios.put(
          `/ui/publishplatform/${this
            .platformID}/deletecontentplatfromattribute`,
          obj
        )
        // console.log(deleteContentPlatfromAttribute.data)
        util.showResponseMessage(deleteContentPlatfromAttribute.data)
      }
      this.isShow = false
    },
    // 渲染树样式
    renderContent: function(createElement, { node, data, store }) {
      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 if (data.hasChild) {
        return createElement('span', [
          createElement('i', { attrs: { class: 'fa fa-folder' } }),
          ' ',
          createElement('span', node.label),
          createElement('span', { attrs: { style: 'margin-left:10px' } }, [
            createElement(
              'el-button',
              {
                attrs: { size: 'mini' },
                on: { click: this.unselectChildren(node, data) }
              },
              '取消子节点'
            )
          ])
        ])
      } else {
        return createElement('span', [
          createElement('i', { attrs: { class: 'fa fa-folder' } }),
          ' ',
          createElement('span', node.label)
        ])
      }
    },
    // 根据内容类型过滤树节点
    async filter(val) {
      this.catalogtreeLoading = true
      this.treeObject.contentType = val
      let bindCopyContentTree = await axios.get(
        '/ui/catalog/bindcopycontenttree',
        { params: this.treeObject }
      )
      this.copyContentTree = bindCopyContentTree.data.data
      this.catalogtreeLoading = false
    },
    // 取消子节点
    unselectChildren(node, data) {
      return () => {
        data.children.forEach(o => {
          this.$refs.tree.setChecked(o.ID, false)
        })
      }
    }
  },
  props: ['title', 'show', 'action', 'platformID']
}
</script>

<style>
/* 在一般情况下dialog宽为400像素，在逻辑分辨率480像素以下dialog宽为96% */

.cataloglist-platform-dialog .el-dialog{
  width: 450px;
}

@media (max-width: 480px) {
  .cataloglist-platform-dialog .el-dialog{
    width: 96%;
  }
}
</style>
<style scoped>
.catalog-tree {
  height: 400px;
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;

  border: 1px solid #f5f5f5;
}
</style>
