<template>
  <BasicLayout>
    <template #wrapper>
      <el-card class="box-card" style="flex:1;">
        <div class="amountIframe">
            <div class="header" v-if='iframeFlag'>
              <div class="header-right">
                <el-button type="primary" size="mini" style="margin-right:12px;vertical-align: middle;" round @click="handleIframe">使用快捷站点</el-button>
              </div>
            </div>
            <div v-if='iframeFlag'>
              <NoData/>
            </div>
            <div v-else>
              <iframe :src='amountUrl' style="width:100%;height:calc( 100vh - 114px );min-height:500px;margin-top: -10px;over-flow:hidden"
                  id="amountIframe"
                  scrolling='auto'
                  frameBorder='no'
                  border='0'
                  marginWidth='0'
                  marginHeight='0' height="calc( 100vh - 114px )"></iframe>
            </div>
        </div>

         <!-- 添加或修改参数配置对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="600px" :close-on-click-modal="false" style='margin-top:0;'>
          <el-form ref="form" :model="form" :rules="rules" label-width="120px">
              <el-row>
                <el-col :span="24">
                  <el-form-item label="站点地址:" prop="url">
                    <el-input v-model="form.url" placeholder="请填入需要绑定的站点URL" />
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="鉴权信息:" prop="desc">
                    <el-input v-model="form.desc" placeholder="请填入鉴权信息 (如有)" />
                  </el-form-item>
                </el-col>
              </el-row>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
          </div>
        </el-dialog>
      </el-card>
    </template>
  </BasicLayout>
</template>

<script>
import { listIframeUrl,addIframeUrl,updateIframeUrl} from '@/api/iframe-url'
import storage from '@/utils/storage'
import NoData from "@/views/NoData/nodata"
export default {
  components:{
    NoData
  },
  data(){
    return{
      open:false,
      title:'',
      iframeFlag:true,
      appItem:{},
      amountUrl:'',
      iframeQuery:{
        appId:0,
        pageTag:'javascript'
      },
      form:{
        pageTag: 'javascript',
        appId: 0,
        url: undefined,
        desc: undefined,
        overall:1,
      },
      // 是否携带请求头（例如：token）
      isRequestHeader: true,
      appId:0,
      rules:{
        // pageTag: [{ required: true, message: '页面标识不能为空', trigger: 'blur' }],
        url: [{ required: true, message: 'url不能为空', trigger: 'blur' }]
      },
    }
  },
  created(){
     this.appItem=storage.get('appsItem');
      if(JSON.stringify(this.appItem) !="{}"){
        this.appId = this.appItem.id;
        // this.form.appId=this.appItem.id;
        // this.iframeQuery.appId = this.appItem.id;
        this.getListIframeUrl();
      }
  },
  methods:{
    handleIframe(){
      this.open = true;
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    /** 提交按钮 */
    submitForm: function() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          if (this.form.id !== undefined) {
            updateIframeUrl(this.form,this.form.id).then(response => {
              if (response.code === 200) {
                this.msgSuccess(response.msg)
                this.open = false
                this.getListIframeUrl()
              } else {
                this.msgError(response.msg)
              }
            })
          } else {
            addIframeUrl(this.form).then(response => {
              if (response.code === 200) {
                this.msgSuccess(response.msg)
                this.open = false
                this.getListIframeUrl();
                this.iframeFlag = false;
              } else {
                this.msgError(response.msg)
              }
            })
          }
        }
      })
    },
    // 表单重置
    reset() {
      this.form = {
        pageTag: 'javascript',
        appId: 0,
        url: undefined,
        desc: undefined,
        overall:1,
      }
      this.resetForm('form')
    },
    getListIframeUrl(){
      listIframeUrl(this.iframeQuery).then(res=>{
        if(res.code == 200){
          this.iframeList = res.data.list;
          if(res.data.list.length>0){
            for(let i=0;i<this.iframeList.length;i++){
              if(this.iframeList[i].pageTag == this.form.pageTag){
                this.amountUrl = this.iframeList[i].url
                this.iframeFlag = false;
              }
            }
            if (this.isRequestHeader) {
              setTimeout(() => {
                const myIframe = document.querySelector('#amountIframe')
                this.populateIframe(myIframe, [['Authorization:',+this.form.desc]])
              }, 0)
            }
          }    
        }
      })
    },
     /**
     * iframe 添加请求头
     */
    populateIframe (iframe, headers) {
      let xhr = new XMLHttpRequest()
      xhr.open('GET', this.amountUrl)
      xhr.responseType = 'blob'
      headers.forEach((header) => {
        xhr.setRequestHeader(header[0], header[1]);
      })
      xhr.onreadystatechange = () => {
        if (xhr.readyState === xhr.DONE) {
          if (xhr.status === 200) {
            // iframe.src = URL.createObjectURL(xhr.response)
            iframe.src= this.amountUrl;
            
          }
        }
      }
      xhr.send()
    },
  }

}
</script>
<style lang="scss" scoped>
.amountIframe{
  position: relative;
}
 .header{
    position: absolute;
    z-index: 99;
    min-width: 1000px;
    width: 100%;
    border-bottom: 0;
    height: 60px;
    line-height: 60px;
    // background: #fff;
    left: 0px;
    .header-right{
        position: absolute;
        right: 0;
        top: 0;
        z-index: 100;
        height: 60px;
        padding-right: 24px;
        padding-left: 200px;
        -webkit-tap-highlight-color: transparent;
    }
  }
</style>