<template>
  <div class="p_all_20">
       <div class="pay_show">
      <!-- <image-alert :image="data.payImg" :height="'50'"></image-alert> -->
      <img id="alipay-img" src="@/assets/img/alipay.png">
      <div class="img_text">
          <p>当前绑定的支付宝账号：<span style="color:green;"></span>{{data.aliPayCode}}</p>
          <p>(如需更换支付宝账号，请联系EDS客服)</p>
      </div>
    </div>

    <div class="main">
      <!-- <el-tabs type="border-card" @tab-click="handleChangeBrand">
        <el-tab-pane :label="item.brandName"
        v-for="(item, index) in data.brand"
        :key="index"> -->
          <div class="title">收款码</div>
          <div class="brand_main">
            <div class="code_box">
              <div class="code">
                  <img :src="tableData.edsQRcodeSmall" alt="">
              </div>
              <!-- <el-button type="primary" @click="handleShowCode" size="big">EDS扫码付（手机端入口）</el-button> -->
            </div>
            <div class="table">
              <div class="tit">下载尺寸</div>

              <table>
                <tbody>
                  <tr class="head">
                    <th>海报尺寸</th>
                    <th>二维码边长</th>
                    <th>建议扫描距离</th>
                    <th>下载</th>
                  </tr>
                  <tr class="body">
                    <td>6cm*9cm</td>
                    <td>3.5cm</td>
                    <td>0.2m</td>
                    <td><a :href="tableData.edsQRcodeSmall"><img src="@/assets/img/down.png" alt=""></a></td>
                  </tr>
                  <tr class="body">
                    <td>10cm*15cm</td>
                    <td>6cm</td>
                    <td>0.5m</td>
                    <td><a :href="tableData.edsQRcodeMedium"><img src="@/assets/img/down.png" alt=""></a></td>
                  </tr>
                  <tr class="body">
                    <td>14cm*21cm</td>
                    <td>8.3cm</td>
                    <td>0.8m</td>
                    <td><a :href="tableData.edsQRcodeBig"><img src="@/assets/img/down.png" alt=""></a></td>
                  </tr>

                </tbody>
              </table>

            </div>
          </div>

        <!-- </el-tab-pane>

        </el-tabs> -->
        <div class="saomafu">
          <div class="title">EDS扫码付</div>
          <div class="content">
            <div class="left">
             <div id="qrcodeImg" title="http://shoppay.edsmall.com/index.html#/">
              <canvas width="100" height="100" style="display: none;"></canvas>
              <img style="display: block;" :src="code"></div>
              <p>扫一扫进入EDS扫码付手机端</p>
            </div>
              <div class="web">
                <div class="tips">EDS动态收款码生成网址：</div>
                <div class="btn">
                  <el-input type="text" name="code-webside" id="code-webside" :value="data.payAddress"></el-input>
                  <el-button type="primary" @click="handleCopy">复制链接</el-button>
                </div>
              </div>
          </div>
        </div>


    </div>
     <!-- <code-alert :data="data" @handleShowCode="handleShowCode" show v-if="show"></code-alert> -->
  </div>
</template>

<script>
import QRCode from 'qrcode'
import imageAlert from "@/components/common/imageAlert";
import codeAlert from "@/components/common/CodeAlert"
import {  _getStorage } from "@/utils/utils";
export default {
  name: 'setpwd',
  data () {
    return {
       code: '',
        data:{},
        show:false,
        // act:0,
        tableData:{}
    }
  },
  mounted() {
    // 时间钩子
      this.init()
  },
  methods:{
    // 执行方法
     handleShowCode(res){
      this.show = !this.show
    },
    init(){
      let { brandName,brandId } = _getStorage('info');
      this.$axios.get('/sys/payinfo',{
        params:{
          brandId
        }
      }).then((res) => {
        if(res.data.code == 200){
          this.data = res.data.data
          // for(var i=0;i<this.data.brand.length;i++){
          //   if(this.data.brand[i].brandName == brandName){
          //     this.tableData = this.data.brand[i]
          //   }
          // }
           this.tableData=this.data.brand
          
            if(!!this.data.payAddress){
              this.getQRcode()
            }
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    handleChangeBrand(t, event){
      // 选出表单
      for(let i = 0;i < this.data.brand.length;i++ ){
        if(i == t.index){
          this.tableData = this.data.brand[i]
        }
      }

      // console.dir(this.tableData)
    },
    //扫码支付
     handleCopy(){
        var ele = document.getElementById("code-webside");
        ele.select();
        document.execCommand("Copy");
        if (document.execCommand("Copy")) {
            this.$message.success('复制成功')
        } else {
           this.$message.error('复制失败');
        }
      },
      getQRcode(){
        let e = this
        QRCode.toDataURL(e.data.payAddress)
          .then(url => {
            this.code = url
          })
          .catch(err => {
            console.error(err)
          })
      }
  },
  components:{
    // 传入组件
  // codeAlert
  imageAlert,codeAlert
  }
}
</script>

<style lang="scss" scoped>
/* 支付头部 */
.alert{
  display: inline-block;
  vertical-align: middle;
}
.pay_show{
  padding:10px;
  color:#666;
}
.paizhao{
  vertical-align: middle;
  max-height:80px;
}
.img_text,#alipay-img{
  vertical-align: middle
}
#alipay-img{
  width:40px;
}
.img_text{
  display: inline-block;
  p{
    line-height: 20px;
  }
}
/* 支付tab */
.main{
  font-size: 14px;
  .title{
    background-color: #E4E4E4;
    padding: 10px;
  }
}
/* 支付main */
.brand_main{
  overflow: hidden;
}
.code_box{
  max-width: 300px;
  text-align: center;
  float: left;
}
.code{
  max-width: 233px;
  margin: 0 auto 20px;
  min-height: 350px;
}
.code_box img{
  max-width: 100%;
}
/* 表格 */
.table{
  float: left;
  margin:15px;
  max-width: 600px;
  width: 600px;
}
.table .tit {
  text-align: left;
  margin-bottom: 10px;
}
table{
  border-collapse: collapse;
  text-align: center;
}
.table .head {
  background: #f4f5f9;
}
table th, .table td {
  width: 10%;
  padding: 8px 0;
  border: 1px solid #dcdcdc;
}
.table a img {
  width: 20px;
  height: 20px;
}
.saomafu{
  .title{
    background-color: #E4E4E4;
    padding: 10px;
  }
  .content{
    overflow: hidden;
    display: flex;
  align-items: center;
  padding: 20px 0 40px;
    .left{
      width: 300px;
      float: left;
      text-align: center;
          img{
          width: 200px;
          height: 200px;
          /* padding: 20px; */
          border: 1px solid #dcdcdc;
          border-radius: 8px;
          margin: 20px auto;
          }
          
    }
    .web{
      width: 42%;
      .tips{
        margin-bottom: 10px;
      }
      .btn{
        display: flex;
        .el-button{
          margin-left: -4px;
          z-index: 99999;
        }
      }
    }

    }
   
}
</style>
