<template>
  <div class="app-container">
    <div class="head-container">
      <label class="el-form-item-label">物料编码</label>
      <el-input
        v-model="materialCode"
        clearable
        placeholder="请输入物料编码"
        style="width: 185px;"
        class="filter-item"
      />
      <label class="el-form-item-label">条码类型</label>
      <el-select
        v-model="nowBarCode"
        clearable
        placeholder="请选择条码类型"
        style="width: 185px; top:-5px"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </div>
    <div class="body-container">
      <el-row :gutter="32">
        <el-col :span="12">
          <div class="cardOne" style="">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <el-button
                  type="primary"
                  @click="firstButton"
                >点击生成二维码</el-button>
                <el-button
                  type="text"
                  style="float: right; padding: 3px 0"
                  @click="dialogTableVisibleOne = true"
                >打印二维码</el-button>
              </div>
              <div class="item1">
                <div>
                  <qrcode-vue :value="qrCode" :size="size" level="H" />
                </div>
              </div>
            </el-card>
          </div>
        </el-col>
        <el-col :span="12" />
      </el-row>
      <el-row :gutter="32" style="margin-top:40px">
        <el-col :span="24">
          <div class="cardTwo" style="with:100% margin-top:60px">
            <el-card class="box-cardSec">
              <div slot="header" class="clearfix">
                <el-button
                  type="primary"
                  @click="SecButton"
                >点击生成条形码</el-button>
                <el-button
                  type="text"
                  style="float: right; padding: 3px 0"
                  @click="dialogTableVisibleTwo = true"
                >打印条形码</el-button>
              </div>
              <div class="item2">
                <div style="margin-top:50px ">
                  <barcode :value="maBarCode" :format="barcodeFormat" />
                </div>
              </div>
            </el-card>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-dialog title="" :visible.sync="dialogTableVisibleOne" width="50%">
      <div class="item3">
        <qrcode-vue :value="qrCode" :size="size" level="H" />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="danger">打印二维码</el-button>
      </span>
    </el-dialog>

    <el-dialog title="" :visible.sync="dialogTableVisibleTwo" width="60%">
      <div style="margin-left:100px">
        <barcode :value="maBarCode" :format="barcodeFormat" />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="danger">打印条形码</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import QrcodeVue from 'qrcode.vue'
import VueBarcode from 'vue-barcode'
export default {
  components: {
    QrcodeVue,
    barcode: VueBarcode
  },
  data() {
    return {
      dialogTableVisibleOne: false,
      dialogTableVisibleTwo: false,
      nowBarCode: '',
      size: 300,
      barcodeValue: 'test',
      barcodeFormat: '',
      qrCode: '',
      maBarCode: '',
      materialCode: '',
      options: [
        {
          value: 'CODE128',
          label: 'CODE128'
        },
        {
          value: 'EAN',
          label: 'EAN'
        },
        {
          value: 'EAN-13',
          label: 'EAN-13'
        },
        {
          value: 'EAN-8',
          label: 'EAN-8'
        },
        {
          value: 'EAN-5',
          label: 'EAN-5'
        },
        {
          value: 'EAN-2',
          label: 'EAN-2'
        },
        {
          value: 'UPC (A)',
          label: 'UPC (A)'
        },
        {
          value: 'CODE39',
          label: 'CODE39'
        },
        {
          value: 'ITF-14',
          label: 'ITF-14'
        },
        {
          value: 'MSI',
          label: 'MSI'
        },
        {
          value: 'Pharmacode',
          label: 'Pharmacode'
        },
        {
          value: 'Codabar',
          label: 'Codabar'
        }
      ]
    }
  },
  created() {},
  mounted() {},
  methods: {
    firstButton() {
      if (this.materialCode === '') {
        this.$message({
          message: '请先输入物料编码',
          type: 'warning'
        })
        return
      }
      this.qrCode = this.materialCode
      console.log(this.materialCode)
      this.$message({
        message: '二维码已更新',
        type: 'success'
      })
    },
    SecButton() {
      if (this.materialCode === '') {
        this.$message({
          message: '请先输入物料编码',
          type: 'warning'
        })
        return
      }
      if (this.nowBarCode === '') {
        this.$message({
          message: '请先选择条形码类型',
          type: 'warning'
        })
        return
      }
      this.maBarCode = this.materialCode
      console.log('nowBarCode', this.nowBarCode)
      this.barcodeFormat = this.nowBarCode.value
    }
  }
}
</script>

<style scoped>
.app-container .body-container {
  padding: 40px 20px 20px 20px;
}
.head-container {
  margin-top: 0px;
}
.text {
  font-size: 14px;
}

.item1 {
  margin-bottom: 24px;
  margin-left: 64px;
}
.item2 {
  margin-bottom: 24px;
  margin-left: 72px;
  height: 200px;
}
.item3 {
  margin-left: 32%;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 480px;
}
.box-cardFirst {
  margin-top: 100px;
  width: 100%;
}
</style>
