<template>
  <el-dialog
    :visible="publishDialogVisible"
    :close-on-click-modal="false"
    width="30%"
    title="发布应用"
    :before-close="beforeClose"
    :destroy-on-close="true"
  >
    <el-form data-vv-scope="publishForm">
      <ht-form-item label="应用菜单">
        <tree-select
          class="tree-select-radio"
          v-model="menu.id"
          :normalizer="normalizer"
          :multiple="false"
          :options="menus"
          noOptionsText=" "
          noChildrenText=" "
          placeholder="请选择菜单"
        />
      </ht-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="publishDialogVisible = false">取 消</el-button>
      <el-button
        type="primary"
        @click="unPublish(selectedApp)"
        v-if="selectedApp.isPublish"
        >取消发布</el-button
      >
      <el-button
        type="primary"
        @click="changePublish"
        v-if="selectedApp.isPublish"
        >切换菜单</el-button
      >
      <el-button
        type="primary"
        @click="savePublish"
        v-if="!selectedApp.isPublish"
        >保 存</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import portal from '../../api/portal'
import _ from 'lodash'
const TreeSelect = () => import('@riophae/vue-treeselect')
export default {
  name: 'app-publish-dialog',
  components: {
    TreeSelect,
  },
  data() {
    return {
      publishDialogVisible: false,
      menu: {
        id: '',
        name: '',
      },
      menus: [],
      selectedApp: {},
    }
  },
  methods: {
    open(app) {
      if (!app.menuName) {
        this.$set(this.menu, 'id', null)
        this.$set(this.menu, 'name', '')
      } else {
        this.menu = {id: app.menuId || null, name: app.menuName || ''}
      }
      this.publishDialogVisible = true
      this.loadMenus()
      this.selectedApp = {...app}
    },
    view(app) {
      this.selectedApp = {...app}
      if (!app.menuName) {
        this.$set(this.menu, 'id', null)
        this.$set(this.menu, 'name', '')
      } else {
        this.$set(this.menu, 'id', this.selectedApp.menuId)
      }

      this.publishDialogVisible = true
      this.loadMenus()
    },
    loadMenus() {
      portal.getAppCenterMenu('bpm_platform').then((data) => {
        if (data.state && data.value.length > 0) {
          this.menus = data.value
          this.removeEmptyChildren(this.menus)
        } else {
          this.menus = []
          this.menu = {id: null, name: ''}
        }
      })
    },
    removeEmptyChildren(menus) {
      menus.forEach((m) => {
        if (m.children) {
          if (m.children.length < 1) {
            delete m.children
          } else {
            this.removeEmptyChildren(m.children)
          }
        }
      })
    },
    beforeClose() {
      this.publishDialogVisible = false
    },
    normalizer(node) {
      return {
        id: node.id,
        label: node.name,
        children: node.children,
        isDefaultExpanded: true,
      }
    },
    savePublish() {
      if (!this.menu.id) {
        this.$message.warning('请选择应用菜单')
        return
      }
      let param = _.cloneDeep(this.selectedApp)
      param.isPublish = 1
      param.menuId = this.menu.id
      portal.publishApp(param).then((data) => {
        if (data.state) {
          this.$message({type: 'success', message: data.message})
          this.$emit('refresh')
          this.publishDialogVisible = false
        }
      })
    },
    changePublish() {
      this.$confirm(`切换菜单会清空该应用的标签信息，请确认`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.savePublish()
        })
        .catch(() => {})
    },
    unPublish(app) {
      this.$confirm(`取消发布将清空该应用的菜单和标签信息，请确认`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          let param = _.cloneDeep(app)
          param.isPublish = 0
          param.menuId = null
          portal.publishApp(param).then((data) => {
            if (data.state) {
              this.$message({type: 'success', message: data.message})
              this.$emit('refresh')
              this.publishDialogVisible = false
            }
          })
        })
        .catch(() => {})
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep .tree-select-radio .vue-treeselect__control {
  border-radius: 2px;
  height: 32px;
}
</style>
