<template>
  <div style="padding: 0px 10px;">
    <el-form label-position="left" label-width="100px">
      <el-form-item label="打开方式" prop="type">
        <el-select v-model="type">
          <el-option label="指令方式" value="order" />
          <el-option label="服务方式" value="service" />
        </el-select>
      </el-form-item>
      <el-form-item v-if="type == 'order'" label="全屏显示" prop="fullscreen">
        <el-switch v-model="fullscreen" />
      </el-form-item>
      <el-form-item label="锁定页面滚动" prop="lock">
        <el-switch v-model="lock" />
      </el-form-item>
      <el-form-item label="加载文案" prop="text">
        <el-input v-model="text" placeholder="加载文案" style="width: 178px;" />
      </el-form-item>
      <el-form-item label="图标" prop="spinner">
        <el-input v-model="spinner" placeholder="图标类名" style="width: 178px;" />
      </el-form-item>
      <el-form-item label="背景色" prop="background">
        <el-input v-model="background" placeholder="背景色值" style="width: 178px;" />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import ApDevItemBase from './ApDevItemBase'

export default {
  name: 'ApDevItemLoading',
  extends: ApDevItemBase,
  data() {
    return {
      type: 'order', // 类型
      fullscreen: true, // 全屏遮罩，fullscreen修饰符，遮罩会插入至body上
      lock: true, // lock修饰符，锁定屏幕的滚动
      text: '加载中', // 显示在加载图标下方的加载文案
      spinner: 'el-icon-loading', // 自定义加载图标类名
      background: 'rgba(0, 0, 0, 0.8)' // 遮罩背景色
    }
  },
  // 监听每个属性的变化，对生成的模板进行修改
  watch: {
    type() {
      this.initOpt()
    },
    fullscreen() {
      this.initOpt()
    },
    lock() {
      this.initOpt()
    },
    text() {
      this.initOpt()
    },
    spinner() {
      this.initOpt()
    },
    background() {
      this.initOpt()
    }
  },
  created() {
    this.initOpt()
  },
  methods: {
    // 初始化代码生成模板
    initOpt() {
      // ---------- 模板 ----------
      // 代码
      this.template = `@html@`

      // 数据
      this.data = `{
                    fullscreenLoading: false
                }`

      // 方法
      this.methods = `{
                @func@
            }`

      // ---------- 模板内容替换 ----------
      if (this.type == 'order') {
        let html = `<el-button type="primary" @click="openFullScreen1" v-loading@fullscreen@@lock@="fullscreenLoading" @text@ @spinner@ @background@>指令方式</el-button>`
        if (this.fullscreen) {
          html = html.replaceAll('@fullscreen@', '.fullscreen')
        } else {
          html = html.replaceAll('@fullscreen@', '')
        }

        if (this.lock) {
          html = html.replaceAll('@lock@', '.lock')
        } else {
          html = html.replaceAll('@lock@', '')
        }

        if (this.text == '') {
          html = html.replaceAll(' @text@', '')
        } else {
          html = html.replaceAll('@text@', `element-loading-text="${this.text}"`)
        }

        if (this.spinner == '') {
          html = html.replaceAll(' @spinner@', '')
        } else {
          html = html.replaceAll('@spinner@', `element-loading-spinner="${this.spinner}"`)
        }

        if (this.background == '') {
          html = html.replaceAll(' @background@', '')
        } else {
          html = html.replaceAll('@background@', `element-loading-background="${this.background}"`)
        }

        this.replaceTemplate('@html@', html)

        const func = `openFullScreen1() {
                    this.fullscreenLoading = true;
                    setTimeout(() => {
                        this.fullscreenLoading = false;
                    }, 2000);
                }`
        this.replaceMethods('@func@', func)
      } else if (this.type == 'service') {
        const html = `<el-button type="primary" @click="openFullScreen2">服务方式</el-button>`
        this.replaceTemplate('@html@', html)

        let func = `openFullScreen2() {
                    const loading = this.$loading({
                        @lock@@text@@spinner@@background@
                    });
                    setTimeout(() => {
                        loading.close();
                    }, 2000);
                }`
        if (this.lock) {
          func = func.replaceAll('@lock@', `lock: ${this.lock},`)
        } else {
          func = func.replaceAll('@lock@', '')
        }

        if (this.text == '') {
          func = func.replaceAll('@text@', '')
        } else {
          func = func.replaceAll('@text@', `\n\t\t    text: "${this.text}",`)
        }

        if (this.spinner == '') {
          func = func.replaceAll('@spinner@', '')
        } else {
          func = func.replaceAll('@spinner@', `\n\t\t    spinner: "${this.spinner}",`)
        }

        if (this.background == '') {
          func = func.replaceAll('@background@', '')
        } else {
          func = func.replaceAll('@background@', `\n\t\t    background: "${this.background}",`)
        }

        this.replaceMethods('@func@', func)
      }
    }
  }
}
</script>
