<template>
  <el-dialog
    title="添加物品信息"
    :visible.sync="Itemshow"
    width="1000px"
    top="5vh"
    append-to-body
    class="dialogclass"
    :close-on-click-modal="false"
    :before-close="handleClose"
  >
    <div class="main">
      <span style="color:red">
        手动添加机器将不获取采购单的机器以实物添加
      </span>
      <el-form ref="form" :model="form" :rules="rules" :inline="true" label-width="95px">
        <h3 style="font-weight: bold;">机器信息</h3>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="分类" prop="cate_id">
              <el-select v-model="form.cate_id" size="small" placeholder="请选择分类" filterable clearable @change="change(form.cate_id,'cate_id')">
                <el-option v-for="(e,i) in cate_options" :key="i" :label="e.label" :value="e.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="品牌" prop="brand_id">
              <el-select v-model="form.brand_id" size="small" placeholder="请选择品牌" filterable clearable @change="change(form.brand_id,'brand_id')">
                <el-option v-for="(e,i) in brand_options" :key="i+1" :label="e.label" :value="e.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="型号" prop="model_id">
              <el-select v-model="form.model_id" size="small" placeholder="请选择型号" filterable clearable @change="change(form.model_id,'model_id')">
                <el-option v-for="(e,i) in model_options" :key="i+2" :label="e.label" :value="e.value" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <div v-if="!!form.model_id">
          <div>
            <h3 style="font-weight: bold;">容量</h3>
            <div class="btnclass">
              <el-button v-for="(v,index) in rom_options" :key="index" class="buttonDiv" plain :type="form.rom_id==v.value ? 'primary' :''" @click="romclick($event,v)">{{ v.label }}</el-button>
            </div>
          </div>
          <h3 style="font-weight: bold;">颜色</h3>
          <div style="display:flex;">
            <div v-for="(v,index) in color_options" :key="index" style="display:flex;flex-direction:column;margin:0 5px;align-items: center;">
              <el-popover
                placement="right"
                width="350"
                trigger="click"
              >
                <el-image
                  v-if="v.img"
                  style="height: 350px"
                  :src="v.img"
                >
                  <div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline" />
                  </div>
                </el-image>
                <el-image
                  slot="reference"
                  style="height: 70px;width:70px"
                  :src="v.img"
                >
                  <div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline" />
                  </div>
                </el-image>
              </el-popover>
              <div class="btnclass">
                <el-button plain :type="form.color_id==v.value ? 'primary' :''" @click="colorclick($event,v)">{{ v.label }}</el-button>
              </div>
            </div>
          </div>
        </div>
        <!-- 基础信息 -->
        <div>
          <h3 style="font-weight: bold;">基础信息</h3>
          <el-form-item label="客户" prop="customer_id">
            <el-select v-model="form.customer_id" size="small" placeholder="请选择客户" filterable clearable>
              <el-option v-for="(e,i) in customer_options" :key="i" :label="e.label" :value="e.value" />
            </el-select>
          </el-form-item>
          <el-form-item v-if="(formLabelAlign && formLabelAlign['warehousing_type'] == 1) || $route.name=='Createpurchaseorder'" label="价格" prop="pay_amount">
            <el-input v-model="form.pay_amount" size="small" placeholder="请输入价格" clearable @input="form['pay_amount'] = AmountInput(form['pay_amount'],2,'exceed')" />
          </el-form-item>
          <el-form-item label="零售价" prop="retail_price">
            <el-input v-model="form.retail_price" size="small" placeholder="请输入零售价" clearable />
          </el-form-item>
          <el-form-item v-if="formLabelAlign && formLabelAlign['warehousing_type'] == 2" label="参考价">
            <el-input v-model="form.reference_price" size="small" placeholder="请输入参考价" clearable />
          </el-form-item>
        </div>
        <!-- IMEI/SN/第三方条码 -->
        <div>
          <h3 style="font-weight: bold;">IMEI/SN/第三方条码</h3>
          <el-form-item label="IMEI" prop="imei1">
            <el-input v-model="form.imei1" size="small" placeholder="请输入IMEI" clearable />
          </el-form-item>
          <el-form-item label="IMEI2" prop="imei2">
            <el-input v-model="form.imei2" size="small" placeholder="请输入IMEI2" clearable />
          </el-form-item>
          <el-form-item label="SN" prop="sn">
            <el-input v-model="form.sn" size="small" placeholder="请输入SN" clearable />
          </el-form-item>
          <el-form-item label="第三方条码" prop="pjt_product_no">
            <el-input v-model="form.pjt_product_no" size="small" placeholder="请输入第三方条码" clearable />
          </el-form-item>
        </div>
        <!-- 属性 -->
        <div>
          <h3 style="font-weight: bold;">属性</h3>
          <el-form-item label="质检员" prop="op_user_id">
            <el-select v-model="form.op_user_id" size="small" placeholder="请选择质检员" filterable clearable>
              <el-option v-for="(e,i) in op_user_id_options" :key="i" :label="e.label" :value="e.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="报价师" prop="quote_user_id">
            <el-select v-model="form.quote_user_id" size="small" placeholder="请选择报价师" filterable clearable>
              <el-option v-for="(e,i) in quote_user_options" :key="i" :label="e.label" :value="e.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="ID锁" prop="fmi_lock">
            <el-select v-model="form.fmi_lock" size="small" placeholder="请选择ID锁" filterable clearable>
              <el-option v-for="(e,i) in id_options" :key="i" :label="e.label" :value="e.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="国别" prop="countries">
            <el-select v-model="form.countries" size="small" placeholder="请选择国别" filterable clearable>
              <el-option v-for="(e,i) in countries_options" :key="i" :label="e.label" :value="e.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="机器等级(成色)" prop="level_name">
            <el-select v-model="form.level_name" size="small" placeholder="请选择机器等级(成色)" filterable clearable>
              <el-option v-for="(e,i) in grade_options" :key="i" :label="e.label" :value="e.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="系统版本" prop="sys_net_no">
            <el-input v-model="form.sys_net_no" size="small" placeholder="请输入系统版本" clearable />
          </el-form-item>
          <el-form-item label="电池健康" prop="battery_health">
            <el-input v-model="form.battery_health" oninput="value=value.replace(/^(0+)|[^\d]+/g,'')" size="small" placeholder="请输入电池健康" clearable>
              <span slot="suffix">%</span>
            </el-input>
          </el-form-item>
          <el-form-item label="充电次数" prop="recharge_num">
            <el-input v-model="form.recharge_num" size="small" oninput="value=value.replace(/^(0+)|[^\d]+/g,'')" placeholder="请输入充电次数" clearable />
          </el-form-item>
          <el-form-item label="网络制式" prop="network">
            <el-select v-model="form.network" size="small" placeholder="请选择网络制式" filterable clearable>
              <el-option v-for="(e,i) in network_options" :key="i" :label="e.label" :value="e.value" />
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="机器成色" prop="fineness">
            <el-input v-model="form.fineness" size="small" placeholder="请输入机器成色" clearable>
            </el-input>
          </el-form-item> -->
        </div>
      </el-form>
      <!-- 备注 -->
      <div>
        <h3 style="font-weight: bold;">备注</h3>
        <div class="flex-b">
          <div style="flex:1">
            <el-input v-model="form.remark" type="textarea" :rows="3" resize="none" placeholder="请输入备注" />
          </div>
          <span style="flex:1;display: flex;justify-content: flex-end;align-items: center;margin-top: 50px;">
            <span style="margin-right:5px">机器是否开启查询功能 </span>
            <el-switch v-model="warranty_query" active-color="#3498db" :active-value="1" :inactive-value="2" @change="warrantychange" />
          </span>
        </div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose()">取 消</el-button>
      <el-button type="primary" plain @click="next('form')">添加并下一台</el-button>
      <el-button type="primary" @click="add('form')">确认</el-button>
    </span>
  </el-dialog>
</template>

<script>
import html2canvas from 'html2canvas' // 转图片打印需要先安装html2Canvas和print-js
import printJS from 'print-js'
import QRCode from 'qrcodejs2'
import { ai_model_update_v2, cate_brand_list_all, user_warranty_query, auto_query_for_imei, save_drafts_box, third_party_no, drafts_box_add_repeat } from '@/api/Warehousing' // 获取客户信息接口
import { res_advanced_search } from '@/api/machineList' // 获取机器列表信息接口
import { pre_print } from '@/api/machineList' // 获取列表信息接口
import { op_order_details_code } from '@/api/Warehousing' // 获取二维码信息接口
import { mapGetters } from 'vuex'
import { uuid } from 'vue-uuid'
export default {
  name: 'Warehousingprint',
  data() {
    return {
      warranty_query: 2,
      form: { cate_id: null, brand_id: null, model_id: null, rom_id: null, color_id: null,op_user_id:'',customer_id:''},
      rules: {
        cate_id: [
          { required: true, message: '请选择分类', trigger: ['blur', 'change'] }
        ],
        brand_id: [
          { required: true, message: '请选择品牌', trigger: ['blur', 'change'] }
        ],
        model_id: [
          { required: true, message: '请选择型号', trigger: ['blur', 'change'] }
        ],
        customer_id: [
          { required: true, message: '请选择客户', trigger: ['blur', 'change'] }
        ],
        pay_amount: [
          { required: true, message: '请输入价格', trigger: ['blur', 'change'] }
        ]
      },
      cate_options: [],
      brand_options: [],
      model_options: [],
      rom_options: [],
      color_options: [],
      customer_options: [],
      quote_user_options: [],
      op_user_id_options: [],
      grade_options: [],
      network_options: [],
      countries_options: [// 国别
        { label: '中国', value: '中国' },
        { label: '国行运营商', value: '国行运营商' },
        { label: '国行全网通', value: '国行全网通' },
        { label: '海外', value: '海外' },
        { label: '美版', value: '美版' },
        { label: '日本', value: '日本' },
        { label: '韩版', value: '韩版' },
        { label: '港澳台', value: '港澳台' },
        { label: '新加坡', value: '新加坡' },
        { label: '欧盟', value: '欧盟' },
        { label: '国际版', value: '国际版' }],
      id_options: [
        { label: '有', value: 1 },
        { label: '无', value: 2 },
        { label: '未知', value: 0 }]
    }
  },
  computed: {
    ...mapGetters([
      'is_warranty_query', // 1查询，2不查询
      'user_id'
    ]),
    date() {
      var date = new Date()
      return date.toLocaleDateString()
    },
    sumprice() {
      var price = 0
      this.tableData.map((res) => {
        price += Number(res.price)
      })
      return price
    },
    aaa() {
      const obj = JSON.parse(JSON.stringify(this.formLabelAlign))
      for (const key in obj) {
        this.input.map((res, index) => {
          if (res.enName == key) {
            if (Array.isArray(res.options)) {
              res.options.map(r => {
                if (obj[key] == r.value) {
                  obj[key] = r.label
                }
              })
            }
          }
        })
      }
      // window.localStorage.setItem("setform",JSON.stringify(this.formLabelAlign));//存储
      return obj
    }
  },
  watch: {
    formLabelAlign: {
      handler(now) {
        if (this.formLabelAlign.customer_id !== 0) {
          this.form.customer_id = this.formLabelAlign.customer_id
        }
        if (this.formLabelAlign.op_user_id !== 0) {
          this.form.op_user_id = this.formLabelAlign.op_user_id
        }
      },
      deep: true
    },
    'is_warranty_query': {
      handler(val) {
        this.warranty_query = val
      }, deep: true, immediate: true
    }
  },
  created() {
    this.getcate()
    // if(localStorage.getItem("setform")){
    //   let lastname = JSON.parse(localStorage.getItem("setform"));//读取
    //   this.formLabelAlign = lastname
    // }
    // console.log(this.formLabelAlign,'thisformLabelAlign')
  },
  props: {
    Itemshow: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    tableData: {
      type: Array,
      default: () => {
        return []
      }
    },
    msg: {
      type: Object,
      default: () => {
        return {}
      }
    },
    is_purchase: {
      type: Number,
      default: () => {
        return ''
      }
    },
    input: {
      type: Array,
      default: () => {
        return []
      }
    },
    formLabelAlign: {
      type: Object,
      default: () => {
        return {}
      }
    },
    jiqidata: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  methods: {
    // 是否查询状态改变
    warrantychange(e) {
      user_warranty_query({ user_id: this.user_id, is_warranty_query: e }).then(res => {
        this.$message({ type: 'success', message: e == 1 ? '查询已开启' : '查询已关闭' })
        this.$store.dispatch('user/getInfo')
      })
    },
    getcate() {
      cate_brand_list_all().then(res => {
        this.cate_options = res.datas
      })
      res_advanced_search({ p_user_id: this.$parent.formLabelAlign.subsidiary }).then(e => {
        this.op_user_id_options = e.datas['op_user_id']
        this.quote_user_options = e.datas['quote_user_id']
        this.customer_options = e.datas['supplier_info']
        this.grade_options = e.datas['rk_grade_list']
        this.network_options = e.datas['network']
      })
    },
    change(val, name) {
      if (name == 'cate_id') {
        this.form.brand_id = null
        this.form.model_id = null
        this.form.rom_id = null
        this.form.color_id = null
        if (val) {
          cate_brand_list_all({ cate_id: val }).then(res => {
            this.brand_options = res.datas
          })
        } else {
          this.brand_options = []
          this.rom_options = []
          this.color_options = []
        }
      } else if (name == 'brand_id') {
        this.form.model_id = null
        this.form.rom_id = null
        this.form.color_id = null
        if (val) {
          cate_brand_list_all({ cate_id: this.form.cate_id, brand_id: val }).then(res => {
            this.model_options = res.datas
          })
        } else {
          this.model_options = []
          this.rom_options = []
          this.color_options = []
        }
      } else {
        this.form.rom_id = null
        this.form.color_id = null
        if (val) {
          cate_brand_list_all({ cate_id: this.form.cate_id, brand_id: this.form.brand_id, model_id: val }).then(res => {
            this.rom_options = res.datas['rom_list']
            this.color_options = res.datas['color_list']
          })
        } else {
          this.rom_options = []
          this.color_options = []
        }
      }
    },
    add(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$parent.is_batch = true
          this.form.instorage_uuid = uuid.v4()
          console.log(this.is_warranty_query)
          if (this.is_warranty_query == 1) {
            if (!!this.form.imei1 || !!this.form.imei2 || !!this.form.sn) {
              const imei = []
              imei.push({
                imei_or_sn: { imei: this.form.imei1, imei2: this.form.imei2, sn: this.form.sn },
                cate: this.form.cate,
                brand: this.form.inquire_id,
                instorage_uuid: this.form.instorage_uuid
              })
              this.form.imei = this.form.imei1
              drafts_box_add_repeat({ res_info: [{ ...this.form, not_purchase: 1 }], client_type: 2, is_purchase: this.is_purchase, is_warranty_query: this.is_warranty_query }).then(res => {
                if (res.errcode == 0) {
                  for (const key in this.form) {
                    this.$set(this.form, key, '')
                  }
                  this.handleClose()
                  this.$parent.getlist()
                }
              })
              // save_drafts_box({client_type:2,is_purchase:this.is_purchase,phone_list:[{...this.form}]}).then(res=>{
              //   if (res.errcode == 0) {
              //     for (const key in this.form) {
              //       this.$set(this.form, key, '')
              //     }
              //     this.brand_options=[]
              //     this.model_options=[]
              //     this.rom_options=[]
              //     this.color_options=[]
              //     if (!!res.datas.total_repeat_num && res.datas.total_repeat_num.length>0) {
              //       this.$parent.repeatshow = true
              //       this.$parent.repeatdata=[]
              //       res.datas.total_repeat_num.map(e=>{
              //         e.repeat_num.map(k=>{
              //           this.$parent.repeatdata.push({...k,imei:e.imei,open:false,add:false,addshow:true})
              //         })
              //       })
              //     }else{
              //       if (this.is_warranty_query == 1) {
              //         auto_query_for_imei({imei_data: imei, }).then(res=>{
              //             this.$parent.getlist()
              //         })
              //       }else{
              //         this.$parent.getlist()
              //       }
              //     }
              //   }
              // })
            } else {
              this.$message({ type: 'warning', message: '开启查询后IMEI/IMEI2/SN必须填写才能查询' })
            }
          } else {
            const imei = []
            imei.push({
              imei_or_sn: { imei: this.form.imei1, imei2: this.form.imei2, sn: this.form.sn },
              cate: this.form.cate,
              brand: this.form.inquire_id,
              instorage_uuid: this.form.instorage_uuid
            })
            this.form.imei = this.form.imei1
            drafts_box_add_repeat({ res_info: [{ ...this.form, not_purchase: 1 }], client_type: 2, is_purchase: this.is_purchase, is_warranty_query: this.is_warranty_query }).then(res => {
              if (res.errcode == 0) {
                for (const key in this.form) {
                  this.$set(this.form, key, '')
                }
                this.handleClose()
                this.$parent.getlist()
              }
            })
            // save_drafts_box({client_type:2,is_purchase:this.is_purchase,phone_list:[{...this.form}]}).then(res=>{
            //   if (res.errcode == 0) {
            //     for (const key in this.form) {
            //       this.$set(this.form, key, '')
            //     }
            //     this.brand_options=[]
            //     this.model_options=[]
            //     this.rom_options=[]
            //     this.color_options=[]
            //     if (!!res.datas.total_repeat_num && res.datas.total_repeat_num.length>0) {
            //       this.$parent.repeatshow = true
            //       this.$parent.repeatdata=[]
            //       res.datas.total_repeat_num.map(e=>{
            //         e.repeat_num.map(k=>{
            //           this.$parent.repeatdata.push({...k,imei:e.imei,open:false,add:false,addshow:true})
            //         })
            //       })
            //     }else{
            //       if (this.is_warranty_query == 1) {
            //         auto_query_for_imei({imei_data: imei, }).then(res=>{
            //             this.$parent.getlist()
            //         })
            //       }else{
            //         this.$parent.getlist()
            //       }
            //     }
            //   }
            // })
          }
        } else {
          return false
        }
      })
    },
    next(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$parent.is_batch = true
          this.form.instorage_uuid = uuid.v4()
          if (this.is_warranty_query == 1) {
            if (!!this.form.imei1 || !!this.form.imei2 || !!this.form.sn) {
              const imei = []
              imei.push({
                imei_or_sn: { imei: this.form.imei1, imei2: this.form.imei2, sn: this.form.sn },
                cate: this.form.cate,
                brand: this.form.inquire_id,
                instorage_uuid: this.form.instorage_uuid
              })
              this.form.imei = this.form.imei1
              drafts_box_add_repeat({ res_info: [{ ...this.form, not_purchase: 1 }], client_type: 2, is_purchase: this.is_purchase }).then(res => {
                if (res.errcode == 0) {
                  for (const key in this.form) {
                    this.$set(this.form, key, '')
                  }
                  if (this.is_warranty_query == 1) {
                    auto_query_for_imei({ imei_data: imei }).then(res => {
                      this.$parent.getlist()
                    })
                  } else {
                    this.$parent.getlist()
                  }
                }
              })
              // save_drafts_box({client_type:2,is_purchase:this.is_purchase,phone_list:[{...this.form}]}).then(res=>{
              //   if (res.errcode == 0) {
              //     for (const key in this.form) {
              //       this.$set(this.form, key, '')
              //     }
              //     this.brand_options=[]
              //     this.model_options=[]
              //     this.rom_options=[]
              //     this.color_options=[]
              //     if (!!res.datas.total_repeat_num && res.datas.total_repeat_num.length>0) {
              //       this.$parent.repeatshow = true
              //       this.$parent.repeatdata=[]
              //       res.datas.total_repeat_num.map(e=>{
              //         e.repeat_num.map(k=>{
              //           this.$parent.repeatdata.push({...k,imei:e.imei,open:false,add:false,addshow:true})
              //         })
              //       })
              //     }else{
              //       if (this.is_warranty_query == 1) {
              //         auto_query_for_imei({imei_data: imei, }).then(res=>{
              //             this.$parent.getlist()
              //         })
              //       }else{
              //         this.$parent.getlist()
              //       }
              //     }
              //   }
              // })
            } else {
              this.$message({ type: 'warning', message: '开启查询后IMEI/IMEI2/SN必须填写才能查询' })
            }
          } else {
            const imei = []
            imei.push({
              imei_or_sn: { imei: this.form.imei1, imei2: this.form.imei2, sn: this.form.sn },
              cate: this.form.cate,
              brand: this.form.inquire_id,
              instorage_uuid: this.form.instorage_uuid
            })
            this.form.imei = this.form.imei1
            drafts_box_add_repeat({ res_info: [{ ...this.form, not_purchase: 1 }], client_type: 2, is_purchase: this.is_purchase }).then(res => {
              if (res.errcode == 0) {
                for (const key in this.form) {
                  this.$set(this.form, key, '')
                }
                if (this.is_warranty_query == 1) {
                  auto_query_for_imei({ imei_data: imei }).then(res => {
                    this.$parent.getlist()
                  })
                } else {
                  this.$parent.getlist()
                }
              }
            })
            // save_drafts_box({client_type:2,is_purchase:this.is_purchase,phone_list:[{...this.form}]}).then(res=>{
            //   if (res.errcode == 0) {
            //     for (const key in this.form) {
            //       this.$set(this.form, key, '')
            //     }
            //     this.brand_options=[]
            //     this.model_options=[]
            //     this.rom_options=[]
            //     this.color_options=[]
            //     if (!!res.datas.total_repeat_num && res.datas.total_repeat_num.length>0) {
            //       this.$parent.repeatshow = true
            //       this.$parent.repeatdata=[]
            //       res.datas.total_repeat_num.map(e=>{
            //         e.repeat_num.map(k=>{
            //           this.$parent.repeatdata.push({...k,imei:e.imei,open:false,add:false,addshow:true})
            //         })
            //       })
            //     }else{
            //       if (this.is_warranty_query == 1) {
            //         auto_query_for_imei({imei_data: imei, }).then(res=>{
            //             this.$parent.getlist()
            //         })
            //       }else{
            //         this.$parent.getlist()
            //       }
            //     }
            //   }
            // })
          }
        } else {
          return false
        }
      })
    },
    romclick(e, v) {
      let target = e.target
      if (target.nodeName === 'SPAN') {
        target = e.target.parentNode
      }
      target.blur()
      this.form.rom_id = v.value
    },
    colorclick(e, v) {
      let target = e.target
      if (target.nodeName === 'SPAN') {
        target = e.target.parentNode
      }
      target.blur()
      this.form.color_id = v.value
    },
    toImg() { // 转图片打印
      window.pageYoffset = 0
      document.documentElement.scrollTop = 0
      document.body.scrollTop = 0
      html2canvas(this.$refs.printTest, {
        backgroundColor: false,
        useCORS: true,
        allowTaint: true
      }).then((canvas) => {
        const url = canvas.toDataURL()
        this.img = url
        printJS({
          printable: url,
          type: 'image',
          documentTitle: '打印'
        })
      //  console.log(url)
      })
    },
    handleClose() {
      this.$emit('update:itemshow', false)
      // this.$emit("changeItemshow",false);
    },
    share() { // 转发
      op_order_details_code({ order_op_id: this.id }).then((res) => {
        this.$delete(this.formLabelAlign, 'phone_list')
        var list = JSON.stringify(this.formLabelAlign)
        var host = window.location.host
        var http = window.location.protocol
        // console.log(`${http}`+'//'+`${host}/#/share2?uuid=`+res.datas.uuid+'&formLabelAlign='+list)
        new QRCode(this.$refs.qrCodeUrl, {
          // text:'https://erpv2.aiguovip.com/#/share/share?uuid='+res.datas.uuid,
          text: `${http}` + '//' + `${host}/#/share2?uuid=` + this.id + '&formLabelAlign=' + list,
          width: 120,
          height: 110,
          colorDark: '#333333', // 二维码颜色
          colorLight: '#ffffff', // 二维码背景色
          correctLevel: QRCode.CorrectLevel.L // 容错率，L/M/H
        })
      })
    },
    // 隐藏二维码
    hide() {
      this.$nextTick(function() {
        this.$refs.qrCodeUrl.innerHTML = ''
      })
    }
  }
}
</script>

<style lang="less" scoped>
// .btnclass ::v-deep .el-button--primary:focus{
//     margin-right: 12px;
//     border-radius: 2px;
//     box-shadow: 0 2px 4px 0 #f4f4f4;
//     color: #2794f8;
//     background: white;
// }
.btnclass ::v-deep .el-button--primary:hover{
    border-radius: 2px;
    color: #2794f8;
    background: #d2e6fc;
    border-color:#b3d8ff ;
}
.body {
  display: flex;
  flex-direction: column;
}
.body-text {
  // display: flex;
  // flex-direction: column;
  margin-bottom: 15px;
}
.header {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 25px;
}
.text {
  font-size: 20px;
  font-weight: bold;
}
.text1 {
  font-size: 18px;
  // height: 20px;
}
.calculation {
  border: 1px solid #ebeef5;
  padding: 10px;
  font-size: 14px;
  span {
    padding: 0 10px;
    display: inline-block;
  }
}
table,td,th {
  border: 1px solid #d4d4d4;
}

table {
  border-collapse: collapse;
  height: 100px;
  width: 100%;
}

th {
  height: 65px;
}
.top{
    display: flex;
    background-color:#4ca48c;
    height:60px
}
.top-text{
    font-family: STHeiti;
    color: #fff;
    font-size: 26px;
    text-align: center;
}
.top-text1{
    font-family: STHeiti;
    color: #fff;
    font-size: 12px;
}
.fotter-top{
    display: flex;
    background-color:#4ca48c;
    height:60px;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
}
.footer-Toptext{
    font-family: STHeiti;
    color: #fff;
    font-size: 24px;
}
.fotter-main{
    display: flex;
    // background-color:#fff;
    height:30px;
    justify-content: center;
}
.footer-maintext{
    font-family: STHeiti;
    color:#FFFFFF;
    font-size: 20px;
}
.el-col-6{
  width: 20%!important;
}
</style>
