<script>
import '@/scss/iconfont/iconfont.css'

import { getProgram } from '@/api/program'
import {
  State,
  Access
} from '@/constant'
import Designer from './Designer'
import Viewer from './Viewer'

export default {
  name: 'ProgramAst',
  components: {
    Designer,
    Viewer
  },
  beforeRouteLeave (to, from, next) {
    next(false)
  },
  props: {
    id: {
      type: String,
      default: null
    }
  },
  data () {
    return {
      loading: true,
      error: null,
      program: null,
      activeComponent: null
    }
  },
  watch: {
    id: {
      handler () {
        this.getProgram()
      },
      immediate: true
    }
  },
  methods: {
    getProgram () {
      this.loading = true
      this.error = null
      getProgram(this.id, { custom: true }).then(
        ({ data }) => {
          try {
            const { id, status, name, resolutionRatio, itemJsonStr } = data
            const [width, height] = resolutionRatio.split('x')
            if (!width || !height) {
              this.showMessage('error', '布局分辨率异常，请联系管理员')
              return
            }

            if (status === State.READY) {
              if (this.accessSet.has(Access.MANAGE_CALENDAR)) {
                this.activeComponent = 'Designer'
              } else {
                this.showMessage('warning', '暂无编辑权限，请联系管理员')
                return
              }
            } else {
              this.activeComponent = 'Viewer'
            }

            this.program = {
              id, status, name, resolutionRatio,
              detail: {
                width: Number(width),
                height: Number(height),
                ...JSON.parse(itemJsonStr)
              }
            }
          } catch (e) {
            this.showMessage('error', '布局解析失败')
          }
        },
        err => {
          this.showMessage('warning', err.errMessage || '获取布局失败')
        }
      ).finally(() => {
        this.loading = false
      })
    },
    showMessage (type, message) {
      this.error = { type, message }
    }
  },
  render (h) {
    if (this.loading) {
      return h('div', {
        key: 'loading',
        class: 'c-ast',
        directives: [
          {
            name: 'loading',
            value: true,
            modifiers: { lock: true }
          }
        ],
        attrs: {
          'element-loading-background': 'rgba(0, 0, 0, 0.8)'
        }
      })
    }

    if (this.error) {
      const { type, message } = this.error
      return h('div', {
        key: 'error',
        class: `c-ast ${type}`
      }, [
        h('div', { staticClass: 'el-loading-spinner' }, [
          h('i', { staticClass: `el-icon-${type}` }),
          h('p', { staticClass: 'el-loading-text' }, message),
          type === 'warning'
            ? h('el-link', {
              props: { type },
              on: { click: this.getProgram }
            }, '点击重试')
            : null
        ])
      ])
    }

    return h(this.activeComponent, {
      props: {
        program: this.program
      }
    })
  }
}
</script>

<style lang="scss" scoped>
.c-ast {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);

  .el-loading-spinner > i {
    font-size: 48px;
  }

  .el-loading-text {
    margin: 10px;
    color: #fff;
    font-size: 18px;
  }

  &.warning {
    .el-loading-spinner > i {
      color: $warning;
    }
  }

  &.error {
    .el-loading-spinner > i {
      color: $error;
    }
  }
}
</style>
