<template>
    <div>
        <el-row>
            <el-col :span="20"><div class="grid-content flex"><el-input v-model="qr" placeholder="请输入编码"></el-input></div>
                </el-col>
            <el-col :span="4"><div class="grid-content bg-purple-light"><el-button type="success" class="div_width div_height" @click="goScan">扫码</el-button></div>
            </el-col>
        </el-row>
        <el-button type="primary" class="div_width" @click="btnSave">确定</el-button>
    </div>
</template>>
<script>
import * as dd from 'dingtalk-jsapi'
export default {
    data () {
        return{
            qr:''
        }

    },
    created () {
    // this.handleGetImgCaptcha()
    },
    mounted () {
        this.qr  = this.$cookie.get('devQr')
        
        
    },
    methods: {
        
        goScan () {
            this.scan()
        },
        scan () {
            dd.biz.util.scan({
                type: String , // type 为 all、qrCode、barCode，默认是all。
                onSuccess: function(data) {
                    console.log(2)
                    console.log(data)
                    this.qr = data.text
                }.bind(this),
                onFail : function(err) {
                }.bind(this)
            })
        },
        btnSave(){
            this.$cookie.set('devQr', this.qr)
            this.$router.replace({name: 'devicedetail', query:{type: 1}})
        }
        
    }
}

</script>

<style>
  .el-row {
    margin-bottom: 20px;
    
  }
  .el-col {
    border-radius: 10px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5f2f1;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .div_height{
      height: 38px;
  }
  .div_width{
      width: 100%;
  }
  .width_100{
      width: 100px;
  }
  .center{
      position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    padding: 1em;
  }
  .flex{
	display:flex;
    align-items: center;
	justify-content:center;
	width:100%;
	height:100%;
    border:1px solid;
	}
.flex_son{
	width:100%;
	height:100%;
	border:0x solid;
}
.zero_size{
      width: 1px;
      height: 1px;
  }
  
</style>