<template>
  <el-dialog :title="`【${item.title}】部署`"
             v-model="visible"
             append-to-body
             :close-on-click-modal="false"
             class="avue-dialog"
             width="980px">
    <el-tabs class="menu__tabs"
             stretch
             v-model="tabs">
      <el-tab-pane :name="0"
                   label="大屏部署">
        <div class="export"
             v-loading="loading"
             v-bind="$loadingParams">
          <div class="item">
            <div class="header">
              第一步：下载部署容器(必须)
            </div>
            <div class="content">
              <div class="box">
                <svg-icon class="icon"
                          icon-class="rq" />
                <div class="title">启动容器（必须）</div>
                <div class="subtitle">需要配置 Nginx 容器开箱即用</div>
                <el-button type="primary"
                           icon="el-icon-suitcase"
                           @click="handleContent">下载容器</el-button>
              </div>
              <div class="text">
                <div>
                  <br />
                  <p>下载部署容器。配置 Nginx，参考如下：</p>
                  <p v-highlight>
                  <pre><code>
            location / {
              root /;
              index index.html;
              try_files $uri $uri/ /index.html;
            }
            </code> </pre>
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="header">
              第二步：下载大屏配置文件
            </div>
            <div class="content">
              <div class="box">
                <svg-icon class="icon"
                          icon-class="pz" />
                <div class="title">配置文件</div>
                <div class="subtitle">生成前端静态包，读取本地配置文件生成</div>
                <el-button type="primary"
                           icon="el-icon-download"
                           @click="handleExport">下载大屏配置文件</el-button>
              </div>
              <div class="text">
                <p>-【本地加载】下载大屏配置文件。将大屏配置文件view.js 放入启动容器根目录。</p>
                <p>-【云端加载】无需下载大屏配置文件，访问第一步下载的容器中index.html文件,url中带大屏参数/index.html?id={{item.id}}</p>
                <p>-【iframe加载】<a :href="url"
                     target="_blank">{{url}}</a></p>
              </div>

            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane :name="1">
        <template #label>
          <feature-tooltip
                           label="独立部署"
                           buy-tooltip="点击购买插件以使用独立部署支持"
                           buy-link="8" />
        </template>
        <div class="export"
             v-loading="loading"
             v-bind="$loadingParams">
          <div class="item">
            <div class="content">
              <div class="box"
                   style="width:100%;">
                <svg-icon class="icon"
                          icon-class="rq" />
                <div class="title">独立部署</div>
                <div class="subtitle">
                  <h3> 静态资源、数据库配置、数据集配置、等其他配置全部下载到本地独立运行</h3>
                  下载时长1分钟，请耐心等待...{{$website.isDemo?'(演示环境，只下载固定大屏模板)':'' }}
                </div>
                <el-button type="primary"
                           icon="el-icon-suitcase"
                           @click="goDownload">导出部署</el-button>
              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane :name="2">
        <template #label>
          <feature-tooltip
                           label="导出源码"
                           buy-tooltip="点击购买插件以使用导出源码"
                           buy-link="7" />
        </template>
        <div class="export"
             v-loading="loading"
             v-bind="$loadingParams">
          <div class="item">
            <div class="content">
              <div class="box"
                   style="width:100%;">
                <svg-icon class="icon"
                          icon-class="rq" />
                <div class="title">导出源码</div>
                <div class="subtitle">
                  <h3>导出大屏源码工程，可二次开发扩展</h3>
                  下载时长1-3分钟，请耐心等待...{{$website.isDemo?'(演示环境，只下载固定大屏模板)':'' }}
                </div>
                <el-button type="primary"
                           icon="el-icon-suitcase"
                           @click="goDownload">下载源代码</el-button>
              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<script>
import { exportUrl } from '@/config';
import { getObj } from '@/api/visual'
import FeatureTooltip from '@/page/components/FeatureTooltip.vue'
export default {
  components:{
    FeatureTooltip
  },
  data () {
    return {
      tabs: 0,
      url: '',
      loading: false,
      visible: false,
      item: {}
    }
  },
  methods: {
    handleOpen (item = {}) {
      this.item = item;
      this.visible = true
      this.url = location.origin + '/view.html?id=' + this.item.id
    },
    handleContent () {
      location.href = '/index.zip'
    },
    goDownload () {
      this.loading = true
      let id = this.item.id
      this.$axios.get(exportUrl + '/build/' + id).then(res => {
        this.loading = false;
        this.$message.success('打包完成，开始下载')
        setTimeout(() => {
          window.open(exportUrl + '/get/' + id)
        }, 1000)
      })
    },
    handleExport () {
      this.loading = true
      getObj(this.item.id).then(res => {
        const data = res.data.data;
        let mode = {
          detail: JSON.parse(data.config.detail),
          component: JSON.parse(data.config.component)
        }
        const blob = new Blob([`//将大屏配置文件view.js 放入部署容器根目录 \n let option =${JSON.stringify(mode, null, 4)}`], { type: 'text/plain;charset=utf-8' });
        saveAs(blob, "view.js");
        this.loading = false
        this.$message.success('大屏导出成功')
      }).catch(err => {
        console.log(err)
        this.$message.error('大屏导出失败')
        this.loading = false
      })
    },
  }
}
</script>

<style lang="scss">

.export {
  padding: 0 20px;
  
  .item {
    margin: 20px 0;
  }
  
  .header {
    margin-bottom: 20px;
    color: var(--text-color-lighter);
    font-size: 16px;
    font-weight: bold;
  }

  .content {
    width: 100%;
    display: flex;
    align-items: center;
  }
  
  .box {
    margin-right: 40px;
    padding: 20px 0;
    width: 380px;
    background-color: var(--bg-color-card);
    border-radius: 15px;
    border: 1px solid var(--border-color-extra-light);
    text-align: center;
    box-sizing: border-box;
  }
  
  .icon {
    margin-bottom: 10px;
    width: 50px;
    height: 40px;
  }
  
  .title {
    margin-bottom: 10px;
    font-size: 16px;
    color: var(--text-color-light);
    font-weight: bold;
  }
  
  .subtitle {
    margin-bottom: 40px;
    color: var(--text-color-lighter);
  }
  
  .text {
    flex: 1;
    color: var(--text-color-regular);
    line-height: 25px;
    
    .hljs {
      background-color: var(--color-transparent);
    }
  }
}
</style>

