<template>
  <div class="page">
    <el-form label-width="150px">
      <div class="page-title">
        <div class="page-title-div">
          <el-page-header @back="$router.go(-1)" content="条码管理">
          </el-page-header>
        </div>
      </div>
      <!-- tab切换 -->
      <div class="switch">
        <div class="switch_left">
          <ul>
            <li :class="{ active: num == 1 }" @click="tab(1)">详情</li>
          </ul>
        </div>
        <div class="switch_right">
          <el-button @click="openPrint" size="small">打印</el-button>
          <el-button @click="edit" size="small">编辑</el-button>
          <el-button @click="$router.go(-1)" size="small">关闭</el-button>
        </div>
      </div>
      <div class="content-detail" v-show="num == 1">
        <div class="basic-details">
          <div class="basic-details-title">
            <span class="border-span">基本信息</span>
          </div>
          <el-row>
            <el-col :span="8">
              <el-form-item label="条码类型">
                <span>{{ data.dictBarName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="状态">
                <span v-if="data.status">生效</span>
                <span v-else>失效</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="条码摆放类型">
                <span>
                  {{ data.putType == 1 ? '横向摆放' : '纵向摆放' }}
                </span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="条码尺寸">
                <span> {{ data.sizeWide }} cm</span> *
                <span> {{ data.sizeLong }} cm</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="创建人">
                <span v-if="data.createUserName">
                  {{ data.createUserName }}
                </span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="创建时间">
                <span> {{ data.createTime }} </span>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="basic-details-title">
            <span class="border-span">条码信息</span>
          </div>
          <el-table
            ref="singleTable"
            :data="barCodeList"
            border
            tooltip-effect="dark"
            style="width: 100%"
            class="el-table__body-wrapper"
            :header-cell-style="{ background: '#F0F3F3' }"
            :header-row-style="{ lineHeight: '0' }"
          >
            <el-table-column type="index" width="80px" label="序号">
            </el-table-column>
            <el-table-column label="字段code值" prop="modeCode">
            </el-table-column>
            <el-table-column label="字段名称" prop="modeName">
            </el-table-column>
            <el-table-column label="样例数据" prop="sampleData">
            </el-table-column>
            <el-table-column label="排序" prop="sort"> </el-table-column>
            <el-table-column label="分隔符" prop="separ"> </el-table-column>
            <el-table-column label="字体类型" prop="fontType">
              <template slot-scope="scope">
                <span>{{ codeTypeObj[scope.row.fontType] }}</span>
              </template>
            </el-table-column>
            <el-table-column label="字体大小" prop="fontSize">
              <template slot-scope="scope">
                <span>{{ codeIndexList[scope.row.fontSize] }}</span>
              </template>
            </el-table-column>
          </el-table>
          <div class="basic-details-title">
            <span class="border-span">条码样例</span>
          </div>
          <div class="barIcon">
            <!-- 条码编排设置  -->
            <div class="mapShow">
              <div class="type">
                <div
                  ><span>条码摆放类型：</span
                  >{{ form.putType == 1 ? '横向摆放' : '纵向摆放' }}<span></span
                ></div>
                <div>
                  <span>条码尺寸：</span>
                  <span>{{ form.sizeWide }}</span>
                  <span> cm</span>
                  <span class="mult">*</span>
                  <span>{{ form.sizeLong }}</span>
                  <span> cm</span>
                </div>
              </div>
              <!-- 动态图示模板 -->
              <div class="activeMode" v-if="horizontalBool">
                <div
                  ref="print-content"
                  :class="horizontalBool == true ? 'crosswise' : 'lengthways'"
                  :style="
                    'width:' +
                    horWidth +
                    'cm;' +
                    'height:' +
                    horHeight +
                    'cm;' +
                    'border: 2px black solid;'
                  "
                >
                  <div class="active-top" v-show="horizontalBool == true">
                    <div class="span-con">
                      <div class="con-top">
                        <span
                          :style="
                            'font-size:' +
                            form.fontSizeCode1 +
                            'cm;font-family:' +
                            form.typefaceCode1
                          "
                          >{{ form.code1 }}</span
                        >
                        <span
                          :style="
                            'font-size:' +
                            form.fontSizeCode2 +
                            'cm;font-family:' +
                            form.typefaceCode2
                          "
                          >{{ form.code2 }}</span
                        >
                        <span
                          :style="
                            'font-size:' +
                            form.fontSizeCode3 +
                            'cm;font-family:' +
                            form.typefaceCode3
                          "
                          >{{ form.code3 }}</span
                        >
                      </div>
                      <div class="con-bottom">
                        <span
                          :style="
                            'font-size:' +
                            form.fontSizeCode4 +
                            'cm;font-family:' +
                            form.typefaceCode4
                          "
                          >{{ form.code4 }}</span
                        >
                        <span
                          :style="
                            'font-size:' +
                            form.fontSizeCode5 +
                            'cm;font-family:' +
                            form.typefaceCode5
                          "
                          >{{ form.code5 }}</span
                        >
                        <span
                          :style="
                            'font-size:' +
                            form.fontSizeCode6 +
                            'cm;font-family:' +
                            form.typefaceCode6
                          "
                          >{{ form.code6 }}</span
                        >
                      </div>
                    </div>
                    <div class="logoImg">
                      <!-- <img src="@/assets/img/codeLogo.png" alt="" /> -->
                    </div>
                  </div>
                  <div class="active-bottom" v-show="horizontalBool == true">
                    <div class="left-con">
                      <div class="span-box">
                        <span
                          :style="
                            'font-size:' +
                            form.fontSizeCode7 +
                            'cm;font-family:' +
                            form.typefaceCode7
                          "
                          >{{ form.code7 }}</span
                        >
                        <span
                          :style="
                            'font-size:' +
                            form.fontSizeCode8 +
                            'cm;font-family:' +
                            form.typefaceCode8
                          "
                          >{{ form.code8 }}</span
                        >
                      </div>
                      <div class="span-box">
                        <span
                          :style="
                            'font-size:' +
                            form.fontSizeCode9 +
                            'cm;font-family:' +
                            form.typefaceCode9
                          "
                          >{{ form.code9 }}</span
                        >
                        <span
                          :style="
                            'font-size:' +
                            form.fontSizeCode10 +
                            'cm;font-family:' +
                            form.typefaceCode10
                          "
                          >{{ form.code10 }}</span
                        >
                      </div>
                      <div class="span-box">
                        <span
                          :style="
                            'font-size:' +
                            form.fontSizeCode11 +
                            'cm;font-family:' +
                            form.typefaceCode11
                          "
                          >{{ form.code11 }}</span
                        >
                        <span
                          :style="
                            'font-size:' +
                            form.fontSizeCode12 +
                            'cm;font-family:' +
                            form.typefaceCode12
                          "
                          >{{ form.code12 }}</span
                        >
                      </div>
                      <div class="span-box">
                        <span
                          :style="
                            'font-size:' +
                            form.fontSizeCode13 +
                            'cm;font-family:' +
                            form.typefaceCode13
                          "
                          >{{ form.code13 }}</span
                        >
                        <span
                          :style="
                            'font-size:' +
                            form.fontSizeCode14 +
                            'cm;font-family:' +
                            form.typefaceCode14
                          "
                          >{{ form.code14 }}</span
                        >
                      </div>
                    </div>
                    <div class="vue-qr">
                      <vue-qr
                        :text="(form && form.value) || ''"
                        class="vueQrSize"
                      ></vue-qr>
                    </div>
                  </div>
                  <div v-show="horizontalBool == false" class="vertical-top1">
                    <div class="top-img">
                      <div class="top-span">
                        <p
                          :style="
                            'font-size:' +
                            form.fontSizeCode1 +
                            'cm;font-family:' +
                            form.typefaceCode1
                          "
                        >
                          {{ form.code1 }}
                        </p>
                        <p
                          :style="
                            'font-size:' +
                            form.fontSizeCode2 +
                            'cm;font-family:' +
                            form.typefaceCode2
                          "
                        >
                          {{ form.code2 }}
                        </p>
                      </div>
                      <div class="logoImg">
                        <!-- <img src="@/assets/img/codeLogo.png" alt="" /> -->
                      </div>
                    </div>
                    <div class="bottom-span">
                      <div class="top">
                        <span
                          :style="
                            'font-size:' +
                            form.fontSizeCode3 +
                            'cm;font-family:' +
                            form.typefaceCode3
                          "
                          >{{ form.code3 }}</span
                        >
                        <span
                          :style="
                            'font-size:' +
                            form.fontSizeCode4 +
                            'cm;font-family:' +
                            form.typefaceCode4
                          "
                          >{{ form.code4 }}</span
                        >
                      </div>
                      <div class="bottom">
                        <span
                          :style="
                            'font-size:' +
                            form.fontSizeCode5 +
                            'cm;font-family:' +
                            form.typefaceCode5
                          "
                          >{{ form.code5 }}</span
                        >
                        <span
                          :style="
                            'font-size:' +
                            form.fontSizeCode6 +
                            'cm;font-family:' +
                            form.typefaceCode6
                          "
                          >{{ form.code6 }}</span
                        >
                      </div>
                    </div>
                  </div>
                  <div
                    v-show="horizontalBool == false"
                    class="vertical-bottom1"
                  >
                    <div class="bot-top">
                      <div class="bot-con">
                        <span
                          :style="
                            'font-size:' +
                            form.fontSizeCode7 +
                            'cm;font-family:' +
                            form.typefaceCode7
                          "
                          >{{ form.code7 }}</span
                        >
                        <span
                          :style="
                            'font-size:' +
                            form.fontSizeCode8 +
                            'cm;font-family:' +
                            form.typefaceCode8
                          "
                          >{{ form.code8 }}</span
                        >
                      </div>
                      <div class="bot-con">
                        <span
                          :style="
                            'font-size:' +
                            form.fontSizeCode9 +
                            'cm;font-family:' +
                            form.typefaceCode9
                          "
                          >{{ form.code9 }}</span
                        >
                        <span
                          :style="
                            'font-size:' +
                            form.fontSizeCode10 +
                            'cm;font-family:' +
                            form.typefaceCode10
                          "
                          >{{ form.code10 }}</span
                        >
                      </div>
                      <div class="bot-con">
                        <span
                          :style="
                            'font-size:' +
                            form.fontSizeCode11 +
                            'cm;font-family:' +
                            form.typefaceCode11
                          "
                          >{{ form.code11 }}</span
                        >
                        <span
                          :style="
                            'font-size:' +
                            form.fontSizeCode12 +
                            'cm;font-family:' +
                            form.typefaceCode12
                          "
                          >{{ form.code12 }}</span
                        >
                      </div>
                    </div>
                    <div class="bot-bottom">
                      <div class="qr-span">
                        <span
                          :style="
                            'font-size:' +
                            form.fontSizeCode13 +
                            'cm;font-family:' +
                            form.typefaceCode13
                          "
                          >{{ form.code13 }}</span
                        >
                        <span
                          :style="
                            'font-size:' +
                            form.fontSizeCode14 +
                            'cm;font-family:' +
                            form.typefaceCode14
                          "
                          >{{ form.code14 }}</span
                        >
                      </div>
                      <div class="vue-qr">
                        <vue-qr
                          :text="(form && form.qrCode) || ''"
                          class="vueQrSize"
                        ></vue-qr>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="activeMode" v-else>
                <div
                  ref="print-content"
                  class="lengthways"
                  :style="
                    'width:' +
                    verWidth +
                    'cm;' +
                    'height:' +
                    verHeight +
                    'cm;' +
                    'border: 2px black solid;'
                  "
                >
                  <div class="vertical-top1">
                    <div class="top-img">
                      <div class="top-span">
                        <p
                          :style="
                            'font-size:' +
                            form.fontSizeCode1 +
                            'cm;font-family:' +
                            form.typefaceCode1
                          "
                        >
                          {{ form.code1 }}
                        </p>
                        <p
                          :style="
                            'font-size:' +
                            form.fontSizeCode2 +
                            'cm;font-family:' +
                            form.typefaceCode2
                          "
                        >
                          {{ form.code2 }}
                        </p>
                      </div>
                      <div class="logoImg">
                        <!-- <img src="@/assets/img/codeLogo.png" alt="" /> -->
                      </div>
                    </div>
                    <div class="bottom-span">
                      <div class="top">
                        <span
                          :style="
                            'font-size:' +
                            form.fontSizeCode3 +
                            'cm;font-family:' +
                            form.typefaceCode3
                          "
                          >{{ form.code3 }}</span
                        >
                        <span
                          :style="
                            'font-size:' +
                            form.fontSizeCode4 +
                            'cm;font-family:' +
                            form.typefaceCode4
                          "
                          >{{ form.code4 }}</span
                        >
                      </div>
                      <div class="bottom">
                        <span
                          :style="
                            'font-size:' +
                            form.fontSizeCode5 +
                            'cm;font-family:' +
                            form.typefaceCode5
                          "
                          >{{ form.code5 }}</span
                        >
                        <span
                          :style="
                            'font-size:' +
                            form.fontSizeCode6 +
                            'cm;font-family:' +
                            form.typefaceCode6
                          "
                          >{{ form.code6 }}</span
                        >
                      </div>
                    </div>
                  </div>
                  <div class="vertical-bottom1">
                    <div class="bot-top">
                      <div class="vue-qr">
                        <vue-qr
                          :text="(form && form.value) || ''"
                          class="vueQrSize"
                        ></vue-qr>
                      </div>
                    </div>
                    <div class="bot-bottom">
                      <div class="bot-con">
                        <span
                          :style="
                            'font-size:' +
                            form.fontSizeCode7 +
                            'cm;font-family:' +
                            form.typefaceCode7
                          "
                          >{{ form.code7 }}</span
                        >
                        <span
                          :style="
                            'font-size:' +
                            form.fontSizeCode8 +
                            'cm;font-family:' +
                            form.typefaceCode8
                          "
                          >{{ form.code8 }}</span
                        >
                      </div>
                      <div class="bot-con">
                        <span
                          :style="
                            'font-size:' +
                            form.fontSizeCode9 +
                            'cm;font-family:' +
                            form.typefaceCode9
                          "
                          >{{ form.code9 }}</span
                        >
                        <span
                          :style="
                            'font-size:' +
                            form.fontSizeCode10 +
                            'cm;font-family:' +
                            form.typefaceCode10
                          "
                          >{{ form.code10 }}</span
                        >
                      </div>
                      <div class="bot-con">
                        <span
                          :style="
                            'font-size:' +
                            form.fontSizeCode11 +
                            'cm;font-family:' +
                            form.typefaceCode11
                          "
                          >{{ form.code11 }}</span
                        >
                        <span
                          :style="
                            'font-size:' +
                            form.fontSizeCode12 +
                            'cm;font-family:' +
                            form.typefaceCode12
                          "
                          >{{ form.code12 }}</span
                        >
                      </div>
                      <div class="bot-con">
                        <span
                          :style="
                            'font-size:' +
                            form.fontSizeCode13 +
                            'cm;font-family:' +
                            form.typefaceCode13
                          "
                          >{{ form.code13 }}</span
                        >
                        <span
                          :style="
                            'font-size:' +
                            form.fontSizeCode14 +
                            'cm;font-family:' +
                            form.typefaceCode14
                          "
                          >{{ form.code14 }}</span
                        >
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-form>
    <!-- 打印 -->
    <print :openBarCode.sync="openWindows" :config="config"></print>
    <!-- 编辑 -->
    <el-dialog
      class="edit-dialog"
      title="修改"
      :visible.sync="dialogVisible"
      width="80%"
    >
      <addComponent :viewForm="viewData" @edit="submit" />
    </el-dialog>
  </div>
</template>
<script>
  import barCode from '@/api/barCodeManagement';
  import { deepClone } from '@/utils/index';
  import selectUpload from '@/components/selectUpload';
  import print from '@/components/print';
  import addComponent from './add.vue';
  import VueQr from 'vue-qr';
  export default {
    components: { selectUpload, print, addComponent, VueQr },
    data() {
      return {
        horizontalBool: false,
        horWidth: 0,
        horHeight: 0,
        verWidth: 0,
        verHeight: 0,
        num: 1,
        dialogVisible: false, //编辑弹窗
        data: {},
        typeValue: null,
        form: {},
        type: [],
        barCodeList: [], //条码信息列表
        openWindows: false, //打印弹窗
        config: {},
        viewData: {},
        codeIndexList: { 0.3: '小', 0.5: '中', 0.8: '大' },
        codeTypeList: [
          { id: 1, text: '宋体' },
          { id: 2, text: '微软雅黑' },
          { id: 3, text: 'Arial' }
        ],
        codeTypeObj: {
          1: '宋体',
          2: '微软雅黑',
          3: 'Arial'
        }
      };
    },
    async created() {
      this.getInfo();
    },
    methods: {
      mapSetArray(arr, prop) {
        let map = new Map();
        for (let item of arr) {
          if (!map.has(item[prop])) {
            map.set(item[prop], item);
          }
        }
        return [...map.values()];
      },
      tab(index) {
        this.num = index;
      },
      // 表格数据
      async getInfo() {
        let res = await barCode.infoApi(this.$route.query.id);
        // if (res) {
        // console.log(res.data)
        // if (res.success) {
        this.data = res.data;
        // 排序code1 - code14
        let arr = res.data.useModeList.sort((a, b) => {
          return a.barAvg.substr(4) - b.barAvg.substr(4);
        });
        console.log(arr);
        let newArr = [];
        arr.forEach((item) => {
          if (item.modeCode) {
            newArr.push(item);
          }
        });
        this.barCodeList = this.mapSetArray(newArr, 'modeCode');
        // 将表格数据按 modeCode 去重

        const fontTypeObj = { 1: '宋体', 2: '微软雅黑', 3: 'Arial' };
        const useModeList = res.data.useModeList;
        // 回显条码模板14个下拉数据
        this.horizontalBool = res.data.putType == 1 ? true : false;
        this.horWidth = res.data.sizeWide;
        this.horHeight = res.data.sizeLong;
        this.verWidth = res.data.sizeWide;
        this.verHeight = res.data.sizeLong;
        this.config = {
          putType: res.data.putType,
          sizeWide: res.data.sizeWide,
          sizeLong: res.data.sizeLong,
          value: res.data.qrCode,
          code1: useModeList[0].sampleData,
          code2: useModeList[1].sampleData,
          code3: useModeList[2].sampleData,
          code4: useModeList[3].sampleData,
          code5: useModeList[4].sampleData,
          code6: useModeList[5].sampleData,
          code7: useModeList[6].sampleData,
          code8: useModeList[7].sampleData,
          code9: useModeList[8].sampleData,
          code10: useModeList[9].sampleData,
          code11: useModeList[10].sampleData,
          code12: useModeList[11].sampleData,
          code13: useModeList[12].sampleData,
          code14: useModeList[13].sampleData,
          fontSizeCode1: useModeList[0].fontSize,
          fontSizeCode2: useModeList[1].fontSize,
          fontSizeCode3: useModeList[2].fontSize,
          fontSizeCode4: useModeList[3].fontSize,
          fontSizeCode5: useModeList[4].fontSize,
          fontSizeCode6: useModeList[5].fontSize,
          fontSizeCode7: useModeList[6].fontSize,
          fontSizeCode8: useModeList[7].fontSize,
          fontSizeCode9: useModeList[8].fontSize,
          fontSizeCode10: useModeList[9].fontSize,
          fontSizeCode11: useModeList[10].fontSize,
          fontSizeCode12: useModeList[11].fontSize,
          fontSizeCode13: useModeList[12].fontSize,
          fontSizeCode14: useModeList[13].fontSize,
          typefaceCode1: fontTypeObj[useModeList[0].fontType],
          typefaceCode2: fontTypeObj[useModeList[1].fontType],
          typefaceCode3: fontTypeObj[useModeList[2].fontType],
          typefaceCode4: fontTypeObj[useModeList[3].fontType],
          typefaceCode5: fontTypeObj[useModeList[4].fontType],
          typefaceCode6: fontTypeObj[useModeList[5].fontType],
          typefaceCode7: fontTypeObj[useModeList[6].fontType],
          typefaceCode8: fontTypeObj[useModeList[7].fontType],
          typefaceCode9: fontTypeObj[useModeList[8].fontType],
          typefaceCode10: fontTypeObj[useModeList[9].fontType],
          typefaceCode11: fontTypeObj[useModeList[10].fontType],
          typefaceCode12: fontTypeObj[useModeList[11].fontType],
          typefaceCode13: fontTypeObj[useModeList[12].fontType],
          typefaceCode14: fontTypeObj[useModeList[13].fontType]
        };
        this.form = deepClone(this.config);
        // console.log(this.barCodeList)
        // this.config = {
        //   imagePath: '',
        //   put_type: res.data.put_type,
        //   width:
        //     res.data.put_type == 0
        //       ? res.data.size_wide * 25
        //       : res.data.size_wide * 8,
        //   height:
        //     res.data.put_type == 0
        //       ? res.data.size_long * 25
        //       : res.data.size_long * 8,
        //   value: res.data.qrCode,
        //   code1: res.data.code1,
        //   code2: res.data.code2,
        //   code3: res.data.code3,
        //   code4: res.data.code4,
        //   code5: res.data.code5,
        //   code6: res.data.code6,
        //   code7: res.data.code7,
        //   code8: res.data.code8,
        //   code9: res.data.code9,
        //   code10: res.data.code10,
        //   code11: res.data.code11,
        //   code12: res.data.code12,
        //   code13: res.data.code13,
        //   code14: res.data.code14,
        //   fontSizeCode1: res.data.fontSizeCode1,
        //   fontSizeCode2: res.data.fontSizeCode2,
        //   fontSizeCode3: res.data.fontSizeCode3,
        //   fontSizeCode4: res.data.fontSizeCode4,
        //   fontSizeCode5: res.data.fontSizeCode5,
        //   fontSizeCode6: res.data.fontSizeCode6,
        //   fontSizeCode7: res.data.fontSizeCode7,
        //   fontSizeCode8: res.data.fontSizeCode8,
        //   fontSizeCode9: res.data.fontSizeCode9,
        //   fontSizeCode10: res.data.fontSizeCode10,
        //   fontSizeCode11: res.data.fontSizeCode11,
        //   fontSizeCode12: res.data.fontSizeCode12,
        //   fontSizeCode13: res.data.fontSizeCode13,
        //   fontSizeCode14: res.data.fontSizeCode14,
        //   typefaceCode1: res.data.typefaceCode1,
        //   typefaceCode2: res.data.typefaceCode2,
        //   typefaceCode3: res.data.typefaceCode3,
        //   typefaceCode4: res.data.typefaceCode4,
        //   typefaceCode5: res.data.typefaceCode5,
        //   typefaceCode6: res.data.typefaceCode6,
        //   typefaceCode7: res.data.typefaceCode7,
        //   typefaceCode8: res.data.typefaceCode8,
        //   typefaceCode9: res.data.typefaceCode9,
        //   typefaceCode10: res.data.typefaceCode10,
        //   typefaceCode11: res.data.typefaceCode11,
        //   typefaceCode12: res.data.typefaceCode12,
        //   typefaceCode13: res.data.typefaceCode13,
        //   typefaceCode14: res.data.typefaceCode14
        // };
        // }
        // }
      },
      //打印弹窗
      openPrint() {
        this.openWindows = true;
        console.log(this.config);
      },
      //编辑弹窗
      edit() {
        this.viewData = deepClone(this.data);
        this.dialogVisible = true;
      },
      // 修改提交
      async submit(info) {
        info.id = this.$route.query.id;
        let res = await barCode.saveBarcode(info);
        if (res.code == 0) {
          this.$message.success('修改成功！');
          this.getInfo();
          this.dialogVisible = false;
        }
      }
    }
  };
</script>
<style lang="scss" scoped>
  .page {
    padding: 10px;
  }
  .vue-qr {
    width: 200px;
    height: 200px;
    .vueQrSize {
      width: 100%;
      height: 100%;
    }
  }
  .page-title {
    background: #fff;
    font-size: 18px;
    padding: 6px 20px;
    font-weight: 500;
    .page-title-div {
      margin: 5px 0;
      height: 30px;
      line-height: 30px;
      border-bottom: 1px solid #eaeefb;
      .title-div-no {
        margin-left: 10px;
        font-weight: 400;
        color: #909090;
        font-size: 14px;
      }
    }
  }
  .page-data {
    padding-top: 10px;
  }
  .content-detail {
    background: #fff;
    padding: 20px;
  }
  .flows {
    .flow-left {
      width: 156px;
      height: 70px;
      border: 1px dashed #ccc;
      padding: 10px;
    }
    .row {
      margin-top: 13px;
    }
  }
  .basic-details-title {
    margin-bottom: 12px;
    margin-top: 20px;
    border-bottom: 1px solid #157a2c;
    padding-bottom: 8px;
    display: flex;
    justify-content: space-between;
  }
  .basic-details-title .border-span {
    height: 18px;
    font-size: 16px;
    border-left: 4px solid #157a2c;
    padding-left: 8px;

    font-weight: 500;
  }
  .heade-right {
    // float: right;
    .heade-right-content {
      margin-right: 12px;
      font-size: 14px;
      display: inline-block;
      .content-key {
        color: #3e3e3e;
        margin-right: 12px;
        font-weight: 500;
      }
      .content-value {
        color: #000;
      }
    }
  }
  .list-title {
    font-size: 14px;
    color: #3e3e3e;
    margin: 10px 0px;
  }
  .goods {
    background: #a30014;
    border: 1px solid #a30014;
  }
  .details-title {
    display: inline-block;
    color: #6e6e6e;
    font-size: 14px;
    font-weight: bold;
    margin-right: 13px;
    width: 70px;
    text-align: right;
  }
  .details-con {
    color: #3e3e3e;
    font-size: 14px;
  }
  .detailed-tab {
    margin-left: 10px;
    margin-top: 10px;
  }
  ::v-deep .el-form-item--medium .el-form-item__label {
    color: #6e6e6e;
    font-size: 14px;
    font-weight: bold;
  }
  .warehouse {
    display: block;
    border-bottom: 1px solid #eaeefb;
    padding: 10px 0;
  }
  .box-card {
    .store-box {
      width: 80%;
      .store-box-span {
        display: inline-block;
        font-size: 14px;
        height: 50px;
        width: 50px;
        text-align: center;
        line-height: 50px;
        color: #fff;
        margin: 2px;
      }
    }
  }
  .vacant {
    background: #3196fb;
  }
  .inUse {
    background: #157a2c;
  }
  .invalid {
    background: #cccccc;
  }
  .full {
    background: #cc3300;
  }
  .barIcon {
    .barCodeSize {
      display: flex;
      span {
        display: inline-block;
        width: 30px;
        margin: 0 5px;
      }
      .mult {
        display: inline-block;
        width: 10px;
        margin-left: -5px;
      }
    }
    .mapShow {
      width: 100%;
      display: flex;
      flex-direction: column;
      margin: 20px 0;
      .type {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        > div:first-child {
          margin-right: 20px;
        }
      }
      .staticMode {
        width: 42%;
        height: 300px;
        display: flex;
        align-items: center;
        .modelicon {
          border: 2px black solid;
          height: 300px;
          margin: 0;
          padding: 0;
          .modelicon-top {
            width: 100%;
            height: 40%;
            display: flex;
            border-bottom: 2px black solid;
            .sel {
              width: 80%;
              padding: 5px;
              .sel-top,
              .sel-bottom {
                display: flex;
                .el-select {
                  margin: 10px 5px;
                  width: 30%;
                }
              }
            }
            .logoImg {
              width: 20%;
              height: 70%;
              margin: 10px;
              text-align: right;
              img {
                width: 80%;
                height: 80%;
              }
            }
          }
          .modelicon-bottom {
            height: 60%;
            display: flex;
            justify-content: space-between;
            .left-con {
              width: 70%;
              height: 100%;
              display: flex;
              flex-wrap: wrap;
              .sel-box {
                margin: 5px;
                display: flex;
                justify-content: space-between;
                .el-select {
                  margin: 0 5px;
                  width: 50%;
                }
              }
            }
            .vue-qr {
              width: 30%;
              height: 100%;
              border-left: 2px black solid;
              .vueQrSize {
                width: 100%;
                height: 100%;
              }
            }
          }
        }
      }

      .activeMode {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20px;
        overflow: auto;
        .active-top {
          width: 100%;
          height: 40%;
          display: flex;
          border-bottom: 2px black solid;
          .span-con {
            width: 80%;
            height: 100%;
            padding: 5px 10px;
            .con-top,
            .con-bottom {
              width: 100%;
              height: 50%;
              display: flex;
              justify-content: space-between;
              span {
                display: inline-block;
                font-weight: bold;
                margin-top: 10px;
              }
            }
          }
          .logoImg {
            width: 20%;
            height: 70%;
            margin: 10px;
            text-align: right;
            img {
              width: 100%;
              height: 80%;
            }
          }
        }
        .active-bottom {
          height: 60%;
          display: flex;
          justify-content: space-between;
          .left-con {
            padding: 5px;
            width: 70%;
            height: 100%;
            display: flex;
            flex-wrap: wrap;
            .span-box {
              margin-top: 10px;
              width: 100%;
              display: flex;
              justify-content: space-between;
              span {
                font-weight: bold;
                display: inline-block;
                margin: 0 5px;
              }
            }
          }
          .vue-qr {
            width: 40%;
            height: 100%;
            border-left: 2px black solid;
            .vueQrSize {
              width: 100%;
              height: 100%;
            }
          }
        }
        .vertical-top1 {
          width: 100%;
          height: 40%;
          border-bottom: 2px black solid;
          .top-img {
            width: 100%;
            height: 50%;
            padding: 10px;
            display: flex;
            .top-span {
              width: 70%;
              height: 100%;
              margin-top: 10px;
              p {
                font-weight: bold;
                height: 50%;
                line-height: 50%;
              }
            }
            .logoImg {
              width: 30%;
              height: 80%;
              text-align: right;
              img {
                width: 100%;
                height: 100%;
              }
            }
          }
          .bottom-span {
            padding: 10px;
            width: 100%;
            height: 50%;
            .top,
            .bottom {
              width: 100%;
              height: 50%;
              margin-top: 2%;
              display: flex;
              justify-content: space-between;
              span {
                font-weight: bold;
                display: inline-block;
                height: 50%;
                line-height: 50%;
              }
            }
          }
        }
        .vertical-bottom1 {
          width: 100%;
          height: 60%;
          .bot-top {
            width: 100%;
            height: 55%;
            padding: 10px;
            display: flex;
            flex-wrap: wrap;
            .bot-con {
              width: 100%;
              display: flex;
              justify-content: space-between;
              margin-top: 5%;
              span {
                font-weight: bold;
              }
            }
          }
          .bot-bottom {
            width: 100%;
            height: 45%;
            display: flex;
            .qr-span {
              width: 60%;
              height: 100%;
              padding: 10px;
              span {
                font-weight: bold;
                display: inline-block;
                width: 100%;
                height: 50%;
                line-height: 50%;
              }
            }
            .vue-qr {
              width: 50%;
              height: 100%;
              border-left: 2px black solid;
              border-top: 2px black solid;
              .vueQrSize {
                width: 100%;
                height: 100%;
              }
            }
          }
        }
        // .vertical-top2 {
        //   width: 100%;
        //   height: 30%;
        //   border-bottom: 2px black solid;
        // }
        // .vertical-bottom2 {
        //   .vue-qr {
        //     width: 100%;
        //     text-align: center;
        //     .vueQrSize {
        //       width: 60%;
        //       height: 100%;
        //     }
        //   }
        // }
      }
    }
    .lengthways {
      .vue-qr {
        width: 65% !important;
        display: block;
        margin: 0 auto;
        img {
          width: 100%;
        }
      }
      .bottom-span,
      .top-img {
        padding: 0 10px !important;

        span {
          line-height: 1 !important;
        }
      }

      .vertical-top1 {
        height: 30% !important;
      }

      .vertical-bottom1 {
        display: flex;
        flex-direction: column;
        height: 70% !important;
        .bot-top {
          height: auto !important;
        }

        .bot-bottom {
          width: auto !important;
          height: auto !important;
          flex: 1;
          flex-wrap: wrap;

          .bot-con {
            width: 100%;
            display: flex;
            justify-content: space-between;
            font-weight: bold;
            padding: 0 10px;
          }
        }
      }
    }

    .crosswise,
    .lengthways {
      transition: all 0.5s;
    }
  }
</style>
