<!-- @desc:打印模板  @auth:洪旭东  @time:2022-05-20 14:31 -->
<template>
  <div class="print-template" style="height: 100%;background: #f2f2f2;" onselectstart="return false">
    <div class="print-content" v-if="templateType">
      <!--   左侧部分   -->
      <div class="center">
        <!--   尺     -->
        <ruler style="margin-left: 24px;" :type="1"
               :width="paperDirection==='portrait'?Math.ceil(paperTypeList[paperType].width):Math.ceil(paperTypeList[paperType].height)"></ruler>
        <ruler style="height:20cm;margin-top: 20px;" :type="2"
               :width="paperDirection==='portrait'?Math.ceil(paperTypeList[paperType].height):Math.ceil(paperTypeList[paperType].width)"></ruler>
        <!--   纸张部分     -->
        <div id="paper" @dragover.prevent=""
             style="box-shadow: 3px 3px 9px #d1d1d1;position:relative;margin-left: 25px;margin-top: 21px;
             background: #fff;border: 1px solid #000;border-radius: 6px;box-sizing: inherit;"
             :style="{
               backgroundImage: `url(${backgroundConfig.path})`,
               backgroundPosition:backgroundConfig.position,
               backgroundRepeat:backgroundConfig.repeat,
               backgroundSize:backgroundConfig.size === 'custom'?(backgroundConfig.customSize.width + '% ' +backgroundConfig.customSize.height+'%'):(backgroundConfig.size),
               height:paperDirection==='portrait'?paperTypeList[paperType].height+'cm':paperTypeList[paperType].width+'cm',
               width:paperDirection==='portrait'?paperTypeList[paperType].width+'cm':paperTypeList[paperType].height+'cm'
             }">
          <!--    文本元素      -->
          <vue-drag-resize ref="drag" :parentLimitation="true"
                           :isActive="item.currentFlag"
                           style="display: flex;"
                           v-for="(item,index) in moveList"
                           :key="index+'drag'"
                           :y="item.top"
                           :x="item.left"
                           :w="item.width"
                           :minh="20"
                           :h="item.height"
                           :parentW="parentW"
                           :parentH="parentH"
                           @activated="selectDrag(index)"
                           @deactivated="clickOut($event,index)"
                           @resizing="resize($event,index)"
                           @dragging="resize($event,index)"
                           :style="{
                               fontSize: item.fontSize+'px',
                               display:item.checked?'':'none'
                             }">
            <div style="display: flex;width: 100%;height: 100%;word-break: break-all;" :style="{
                               border:item.border?'1px solid #000':'',
                               justifyContent:item.align1,
                               alignItems:item.align2,
                               textDecoration: item.line?'underline':'',
                               fontStyle: item.fontStyle?'italic':'',
                               fontWeight: item.bold?'bold':''
                             }">
              <span v-if="!item.dataSourceKey">{{ item.text }}</span>
              <div v-else style="display: flex;height: 100%;width: 100%;" :style="{
                               textDecoration: item.line?'underline':'',
                               fontStyle: item.fontStyle?'italic':'',
                               fontWeight: item.bold?'bold':''
                             }">
                <div style="display: flex;height: 100%;"
                     :style="{borderRight:item.border?'1px solid #000':'',alignItems:item.align2,justifyContent:item.align1,
                     width:item.keyWidth?item.keyWidth+'px':item.keyValueScale+'%'}">
                  {{ item.text }}
                </div>
                <div style="display: flex;height: 100%"
                     :style="{alignItems:item.align2,justifyContent:item.align1,
                     width:item.valueWidth?item.valueWidth+'px':(100- item.keyValueScale)+'%'}">
                  {{ getDataSourceValue(item.dataSourceKey) }}
                </div>
              </div>
            </div>
          </vue-drag-resize>
          <!--    表格元素      -->
          <vue-drag-resize ref="drag" @deactivated="clickOutTable($event)"
                           :parentW="parentW"
                           :parentH="parentH"
                           @resizing="resizeTable2($event)"
                           @dragging="resizeTable2($event)"
                           :isActive="tableInfo.active" :sticks="['ml','mr']"
                           v-if="tableInfo" :parentLimitation="true" :w="tableInfo.width" :h="tableInfo.height*3"
                           :y="tableInfo.top" :x="tableInfo.left">
            <table id='printTemplateTable' ref="printTemplateTable" border="1"
                   style="width: 100%;height: 100%;border-spacing:0;border-collapse:separate;">
              <tr>
                <td @click="chooseCol(index)" :data-key="item.key" :id="item.key" :style="{
                               //  初始化的列宽有问题
                               // width:item.widthReal+'px',
                               height:tableInfo.height+'px',
                               fontSize:item.fontSize+'px',
                               background:currentColIndex===index?'#2d8cf0':'#d3d3d3',
                               color:currentColIndex===index?'#fff':''
                  }" v-for="(item,index) in tableCol.filter(it=>it.checked)" :key="index"
                    style="background:#d3d3d3;position: relative;">
                  <div style="display:flex;width: 100%;height: 100%;" :style="{
                               justifyContent:'center',
                               alignItems:'center',
                               height:'100%',
                               fontStyle: item.fontStyle?'italic':'',
                               fontWeight: item.bold?'bold':'',}">
                    {{ item.title }}
                  </div>
                </td>
              </tr>
              <tr v-for="(item,index) in 2" :key="index">
                <td @click="chooseCol(index2)" v-for="(item2,index2) in tableCol.filter(it=>it.checked)"
                    style="background: #fff;" :key="index2" :style="{height:tableInfo.height+'px'}">
                  <div style="display:flex;height: 100%;" :style="{
                               justifyContent:item2.align1,
                               alignItems:item2.align2,
                               height:'100%',
                               fontStyle: item2.fontStyle?'italic':'',
                               fontWeight: item2.bold?'bold':'',}">
                    {{ getDataSourceValueDetail(item2.key) }}
                    &nbsp;
                  </div>
                </td>
              </tr>
            </table>
          </vue-drag-resize>

          <!--    图片元素      -->
          <vue-drag-resize ref="drag" v-for="(item,index) in imgList" :key="index"
                           :parentW="parentW"
                           :aspectRatio="false"
                           :minw="50"
                           :minh="50"
                           :parentH="parentH"
                           @activated="selectDragImg(index)"
                           @deactivated="clickOutImg($event,index)"
                           @resizing="resizeImg($event,index)"
                           @dragging="resizeImg($event,index)"
                           :isActive="item.active"
                           :parentLimitation="true"
                           :w="item.width"
                           :h="item.height"
                           :y="item.top"
                           :x="item.left">
            <img :src="item.path" style="width: 100%;height: 100%;" v-if="item.name != '$scanCode' && item.name != '$barCode'"/>
            <div v-if="item.name == '$scanCode'">
              <img :src="scanCode" style="width: 100%;height: 100%;"/>
              {{dataSource.main.filter(f=>f.key==item.dataSourceKey)[0]?.value}}
            </div>
            <div v-if="item.name == '$barCode'" style="width: 100%;height: 100%;">
              <img :src="barCode" style="width: 100%;height: 100%;"/>
<!--              :style="'width: '+item.width+';height: '+item.height+';'"-->
<!--              <svg class="icon" aria-hidden="true"-->
<!--                   width="100%" height="100%;"-->
<!--                   :viewBox="'0 0 '+item.width+' '+item.height+';'"-->
<!--                   preserveAspectRatio="none meet">-->
<!--                <use xlink:href="#icon-tiaoxingma"></use>-->
<!--              </svg>-->
              {{dataSource.main.filter(f=>f.key==item.dataSourceKey)[0]?.value}}
            </div>
          </vue-drag-resize>

        </div>
      </div>
      <!--  右侧部分    -->
      <div class="right" @mousedown.stop>
        <div class="header">
          <div>
            <DkForm :col-count="1">
              <DkFormItem :label="$t('paperDirection')">
                <SelectPop v-model="paperDirection" style="width:200px;margin-left: 10px;" :multiple="false"
                           @on-select="changePaperDirection" label-key="label" value-key="value"
                           :options="paperDirectionList"
                           :placeholder="$t('selectWords', { 'search-name': $t('paperDirection') })"
                />
              </DkFormItem>
              <DkFormItem :label="$t('paperType')">
                <SelectPop v-model="paperType" style="width:200px;margin-left: 10px;" :multiple="false"
                           @on-select="paperTypeChange" label-key="label" value-key="value"
                           :options="paperTypeList" :placeholder="$t('selectWords', { 'search-name': $t('paperType') })"
                />
              </DkFormItem>
              <DkFormItem label="宽度">
<!--                <div style="color: white;line-height: 33px;margin-left: 10px;" v-if="paperType==0">宽度</div>-->
                <InputNumberPop v-model="customWidth" style="width: 200px;margin-left: 10px;" :digits="1"
                                @on-blur="(val)=> paperTypeList[0].width = val / 10" v-if="paperType==0" unit="mm"/>
              </DkFormItem>
              <DkFormItem label="高度">
<!--                <div style="color: white;line-height: 33px;margin-left: 10px;" v-if="paperType==0">高度</div>-->
                <InputNumberPop v-model="customHeight" style="width: 200px;margin-left: 10px;" :digits="1"
                                @on-blur="(val)=> paperTypeList[0].height = val / 10 " v-if="paperType==0" unit="mm"/>
              </DkFormItem>
            </DkForm>
            <!--        <SelectPop v-model="templateType" style="width:200px;" :multiple="false"-->
            <!--                   :placeholder="$t('selectWords', { 'search-name': $t('templateType') })"-->
            <!--                   @on-select="changeTemplateType" :disabled="!(!(editRow))" label-key="label" value-key="value"-->
            <!--                   :options="templateTypeList" :clearable="false"-->
            <!--        />-->
            <!--        <InputPop name="templateName" v-model="templateName" style="width: 200px;margin-left: 10px;"/>-->




          </div>
          <div>
<!--                    <Button type="primary" @click="close" style="margin-right: 10px;">取消</Button>-->
<!--            <Button @click="save">保存</Button>-->
          </div>
        </div>

        <Tabs value="name1">
          <TabPane label="控件" name="name1" style="height: 100%;">
            <div class="left-item" draggable="true" @dragend="dragend($event,'text')"
                 @click="drop({offsetY:0,offsetX:0},'text')">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-wenben"></use>
              </svg>
              <div>文本</div>
            </div>
            <!--     表格       -->
            <div class="left-item" draggable="true" @dragend="dragend($event,'table')"
                 @click="drop({offsetY:0,offsetX:0},'table')">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-table"></use>
              </svg>
              <div>表格</div>
            </div>
            <!--      图片      -->
            <div class="left-item" draggable="true" @dragend="dragend($event,'img')"
                 @click="drop({offsetY:0,offsetX:0},'img')">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-pic"></use>
              </svg>
              <div>图片</div>
            </div>
            <!--      二维码       -->
            <div class="left-item" draggable="true" @dragend="dragend($event,'scanCode')"
                 @click="drop({offsetY:0,offsetX:0},'scanCode')">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-qrcode"></use>
              </svg>
              <div>二维码</div>
            </div>
            <!--      条形码       -->
            <div class="left-item" draggable="true" @dragend="dragend($event,'barCode')"
                 @click="drop({offsetY:0,offsetX:0},'barCode')">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-tiaoxingma"></use>
              </svg>
              <div>条形码</div>
            </div>
            <!--     页码       -->
            <!--            <div class="left-item" draggable="true" @dragend="dragend($event,'page')"-->
            <!--                 @click="drop({offsetY:0,offsetX:0},'page')">-->
            <!--              <svg class="icon" aria-hidden="true">-->
            <!--                <use xlink:href="#icon-yema"></use>-->
            <!--              </svg>-->
            <!--              <div>页码</div>-->
            <!--            </div>-->
          </TabPane>
          <TabPane label="当前元素" name="name2" style="height: 100%;">
            <Tree @on-select-change="onSelectChange" :data="getTreeData()"></Tree>
          </TabPane>
          <TabPane label="业务" name="name3" style="height: 100%;">
            <div v-if="currentIndex>=0">
              <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;">
                <div style="width: 20%;display: flex;justify-content: space-between;align-items: center;">
                  <span>文</span><span>本</span></div>
                <Input style="width: 75%;" v-model="moveList[currentIndex].text" placeholder="Enter something..."/>
              </div>
              <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;">
                <div style="width: 20%;display: flex;justify-content: space-between;align-items: center;">
                  <span>数</span><span>据</span><span>源</span></div>
                <SelectPop v-model="moveList[currentIndex].dataSourceKey" style="width:75%;" :multiple="false" clearable
                           label-key="title" value-key="key"
                           :options="dataSource.main"/>
              </div>
            </div>
            <!--      当前选中为表格      -->
            <div v-if="getCurrentColIndexReal(currentColIndex)>=0">
              <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;">
                <div style="width: 20%;display: flex;justify-content: space-between;align-items: center;"><span>文</span><span>本</span>
                </div>
                <Input style="width: 75%;" v-model="tableCol[getCurrentColIndexReal(currentColIndex)].title"
                       placeholder="Enter something..."/>
              </div>
              <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;">
                <div style="width: 20%;display: flex;justify-content: space-between;align-items: center;"><span>数</span><span>据</span><span>源</span>
                </div>
                <SelectPop v-model="tableCol[getCurrentColIndexReal(currentColIndex)].key" style="width:75%;" :multiple="false" clearable
                           label-key="title" value-key="key"
                           :options="dataSource.detail"/>
              </div>
            </div>
            <!--     当前选择为图片       -->
            <div v-if="currentImgIndex>=0">
              <div v-if="imgList[currentImgIndex].name != '$scanCode' && imgList[currentImgIndex].name != '$barCode'">
                <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;">
                  <div style="width: 20%;display: flex;justify-content: space-between;align-items: center;"><span>图</span><span>片</span><span>名</span><span>称</span>
                  </div>
                  <Input style="width: 75%;" clearable v-model="imgList[currentImgIndex].name"></Input>
                </div>
                <!--              <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;">-->
                <!--                <div style="width: 20%;display: flex;justify-content: space-between;align-items: center;"><span>图</span><span>片</span><span>地</span><span>址</span>-->
                <!--                </div>-->
                <!--                <Input style="width: 75%;" clearable v-model="imgList[currentImgIndex].path"></Input>-->
                <!--              </div>-->
                <Upload
                  :show-upload-list="false"
                  :max-size="this.maxSize"
                  :accept="acceptFile"
                  :multiple="false"
                  type="drag"
                  :action="$config.uploadUrl"
                  :data="{'folder':'t_mst_print/printTemplate'}"
                  :on-success="importSuccess"
                  :before-upload="beforeUpload">
                  <div style="padding: 20px 0">
                    <Icon type="md-add" size="52"></Icon>
                    <p>{{ $t('clickFilesUpload') }}</p>
                  </div>
                </Upload>
              </div>
              <div v-else>
                <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;">
                  <div style="width: 20%;display: flex;justify-content: space-between;align-items: center;">
                    <span>数</span><span>据</span><span>源</span></div>
                  <SelectPop v-model="imgList[currentImgIndex].dataSourceKey" style="width:75%;" :multiple="false" clearable
                             label-key="title" value-key="key"
                             :options="dataSource.main.copy()"/>
                </div>
              </div>
            </div>
          </TabPane>
          <TabPane label="样式" name="name4" style="height: 100%;">
            <!--     普通文本       -->
            <div v-if="currentIndex>=0">
              <Divider plain>基础样式</Divider>
              <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;">
                <div style="width: 20%;display: flex;justify-content: space-between;align-items: center;">
                  <span>边</span><span>框</span></div>
                <Checkbox v-model="moveList[currentIndex].border"></Checkbox>
              </div>
              <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;">
                <div style="width: 20%;display: flex;justify-content: space-between;align-items: center;">
                  <span>字</span><span>体</span><span>大</span><span>小</span></div>
                <InputNumber :activeChange="false" :max="48" :min="10"
                             v-model="moveList[currentIndex].fontSize"></InputNumber>
              </div>
              <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;">
                <div style="width: 20%;display: flex;justify-content: space-between;align-items: center;"><span>水</span><span>平</span><span>居</span><span>中</span>
                </div>
                <RadioGroup size="small" v-model="moveList[currentIndex].align1" type="button">
                  <Radio label="start">左</Radio>
                  <Radio label="center">中</Radio>
                  <Radio label="end">右</Radio>
                </RadioGroup>
              </div>
              <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;">
                <div style="width: 20%;display: flex;justify-content: space-between;align-items: center;"><span>垂</span><span>直</span><span>居</span><span>中</span>
                </div>
                <RadioGroup size="small" v-model="moveList[currentIndex].align2" type="button">
                  <Radio label="start">上</Radio>
                  <Radio label="center">中</Radio>
                  <Radio label="end">下</Radio>
                </RadioGroup>
              </div>

              <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;">
                <div style="width: 20%;display: flex;justify-content: space-between;align-items: center;"><span>加</span><span>粗</span>
                </div>
                <Checkbox v-model="moveList[currentIndex].bold"></Checkbox>
              </div>

              <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;">
                <div style="width: 20%;display: flex;justify-content: space-between;align-items: center;"><span>斜</span><span>体</span>
                </div>
                <Checkbox v-model="moveList[currentIndex].fontStyle"></Checkbox>
              </div>

              <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;">
                <div style="width: 20%;display: flex;justify-content: space-between;align-items: center;"><span>下</span><span>划</span><span>线</span>
                </div>
                <Checkbox v-model="moveList[currentIndex].line"></Checkbox>
              </div>

              <div v-if="moveList[currentIndex].dataSourceKey"
                   style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;">
                <div style="width: 20%;display: flex;justify-content: space-between;align-items: center;"><span>键</span><span>值</span><span>比</span><span>例</span>
                </div>
                <Slider style="width: 75%;" v-model="moveList[currentIndex].keyValueScale"></Slider>
              </div>
              <!--              <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;">-->
              <!--                <div style="width: 20%;display: flex;justify-content: space-between;align-items: center;"><span>键</span><span>宽</span>-->
              <!--                </div>-->
              <!--                <InputNumber :activeChange="false" :min="0" v-model="moveList[currentIndex].keyWidth"></InputNumber>-->
              <!--              </div>-->
              <!--              <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;">-->
              <!--                <div style="width: 20%;display: flex;justify-content: space-between;align-items: center;"><span>值</span><span>宽</span>-->
              <!--                </div>-->
              <!--                <InputNumber :activeChange="false" :min="0" v-model="moveList[currentIndex].valueWidth"></InputNumber>-->
              <!--              </div>-->

              <Divider plain>尺寸</Divider>
              <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;">
                <div style="width: 20%;display: flex;justify-content: space-between;align-items: center;"><span>宽</span>
                </div>
                <InputNumber :activeChange="false" :min="0" v-model="moveList[currentIndex].width"></InputNumber>
              </div>
              <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;">
                <div style="width: 20%;display: flex;justify-content: space-between;align-items: center;"><span>高</span>
                </div>
                <InputNumber :activeChange="false" :min="0" v-model="moveList[currentIndex].height"></InputNumber>
              </div>

              <Divider plain>位置</Divider>
              <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;">
                <div style="width: 20%;display: flex;justify-content: space-between;align-items: center;"><span>左</span>
                </div>
                <InputNumber :activeChange="false" :min="0" v-model="moveList[currentIndex].left"></InputNumber>
              </div>
              <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;">
                <div style="width: 20%;display: flex;justify-content: space-between;align-items: center;"><span>上</span>
                </div>
                <InputNumber :activeChange="false" :min="0" v-model="moveList[currentIndex].top"></InputNumber>
              </div>

            </div>

            <!--     当前选中为表格       -->
            <div v-if="currentColIndex>=0">

              <Divider plain>基础样式</Divider>

              <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;">
                <div style="width: 20%;display: flex;justify-content: space-between;align-items: center;"><span>字</span><span>体</span><span>大</span><span>小</span>
                </div>
                <InputNumber :activeChange="false" :max="48" :min="10"
                             v-model="tableCol[getCurrentColIndexReal(currentColIndex)].fontSize"></InputNumber>
              </div>

              <!--              <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;">-->
              <!--                <div style="width: 20%;display: flex;justify-content: space-between;align-items: center;"><span>宽</span><span>度%</span>-->
              <!--                </div>-->
              <!--                <InputNumber :activeChange="false" :max="100" :min="1"-->
              <!--                             v-model="tableCol[currentColIndex].width"></InputNumber>-->
              <!--              </div>-->

              <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;">
                <div style="width: 20%;display: flex;justify-content: space-between;align-items: center;"><span>水</span><span>平</span><span>居</span><span>中</span>
                </div>
                <RadioGroup size="small" v-model="tableCol[getCurrentColIndexReal(currentColIndex)].align1"
                            type="button">
                  <Radio label="start">左</Radio>
                  <Radio label="center">中</Radio>
                  <Radio label="end">右</Radio>
                </RadioGroup>
              </div>
              <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;">
                <div style="width: 20%;display: flex;justify-content: space-between;align-items: center;"><span>垂</span><span>直</span><span>居</span><span>中</span>
                </div>
                <RadioGroup size="small" v-model="tableCol[getCurrentColIndexReal(currentColIndex)].align2"
                            type="button">
                  <Radio label="start">上</Radio>
                  <Radio label="center">中</Radio>
                  <Radio label="end">下</Radio>
                </RadioGroup>
              </div>

              <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;">
                <div style="width: 20%;display: flex;justify-content: space-between;align-items: center;"><span>加</span><span>粗</span>
                </div>
                <Checkbox v-model="tableCol[getCurrentColIndexReal(currentColIndex)].bold"></Checkbox>
              </div>

              <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;">
                <div style="width: 20%;display: flex;justify-content: space-between;align-items: center;"><span>斜</span><span>体</span>
                </div>
                <Checkbox v-model="tableCol[getCurrentColIndexReal(currentColIndex)].fontStyle"></Checkbox>
              </div>

              <Divider plain>表格参数</Divider>

              <!--              <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;" >-->
              <!--                <div style="width: 20%;display: flex;justify-content: space-between;align-items: center;"><span>行</span><span>高</span></div>-->
              <!--                <InputNumber :activeChange="false" :max="100" :min="30" v-model="tableInfo.height"></InputNumber>-->
              <!--              </div>-->

              <Divider plain>尺寸</Divider>
              <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;">
                <div style="width: 20%;display: flex;justify-content: space-between;align-items: center;"><span>宽</span>
                </div>
                <InputNumber :activeChange="false" :min="1" v-model="tableInfo.width"></InputNumber>
              </div>
              <!--              <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;" >-->
              <!--                <div style="width: 20%;display: flex;justify-content: space-between;align-items: center;"><span>高</span></div>-->
              <!--                <InputNumber :activeChange="false" :max="48" :min="10" v-model="tableInfo.height"></InputNumber>-->
              <!--              </div>-->

              <Divider plain>位置</Divider>
              <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;">
                <div style="width: 20%;display: flex;justify-content: space-between;align-items: center;"><span>左</span>
                </div>
                <InputNumber :activeChange="false" :min="0" v-model="tableInfo.left"></InputNumber>
              </div>
              <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;">
                <div style="width: 20%;display: flex;justify-content: space-between;align-items: center;"><span>上</span>
                </div>
                <InputNumber :activeChange="false" :min="0" v-model="tableInfo.top"></InputNumber>
              </div>
            </div>


            <!--     当前选择为图片       -->
            <div v-if="currentImgIndex>=0">
              <Divider plain>尺寸</Divider>
              <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;">
                <div style="width: 20%;display: flex;justify-content: space-between;align-items: center;"><span>宽</span>
                </div>
                <InputNumber :activeChange="false" v-model="imgList[currentImgIndex].width"></InputNumber>
              </div>
              <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;">
                <div style="width: 20%;display: flex;justify-content: space-between;align-items: center;"><span>高</span>
                </div>
                <InputNumber :activeChange="false" v-model="imgList[currentImgIndex].height"></InputNumber>
              </div>

              <Divider plain>位置</Divider>
              <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;">
                <div style="width: 20%;display: flex;justify-content: space-between;align-items: center;"><span>左</span>
                </div>
                <InputNumber :activeChange="false" v-model="imgList[currentImgIndex].left"></InputNumber>
              </div>
              <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;">
                <div style="width: 20%;display: flex;justify-content: space-between;align-items: center;"><span>上</span>
                </div>
                <InputNumber :activeChange="false" v-model="imgList[currentImgIndex].top"></InputNumber>
              </div>
            </div>

          </TabPane>
          <TabPane label="背景" name="name5" style="height: 100%;">
            <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;">
              <div style="width: 20%;display: flex;justify-content: space-between;align-items: center;">
                <span>背</span><span>景</span><span>图</span><span>片</span>
              </div>
              <!--              <Input style="width: 75%;" clearable v-model="backgroundConfig.path"></Input>-->
              <Upload
                ref="backgroundImg"
                style="height:113px;"
                :style="{width:backgroundConfig.path?'64%':'75%'}"
                :show-upload-list="true"
                :max-size="this.maxSize"
                :accept="acceptFile"
                :multiple="false"
                type="drag"
                :action="$config.uploadUrl"
                :data="{'folder':'t_mst_print/printTemplate'}"
                :on-success="importSuccessBackground"
                :on-remove="removeBackground"
                :before-upload="beforeUpload">
                <div v-if="backgroundConfig.path" style="width:100%;height:113px;">
                  <img :src="backgroundConfig.path" style="width: 100%;height:100%;object-fit: contain;"/>
                </div>
                <div v-else style="padding: 20px 0">
                  <Icon type="md-add" size="52"></Icon>
                  <p>{{ $t('clickFilesUpload') }}</p>
                </div>


              </Upload>
              <Button v-if="backgroundConfig.path" @click="delBackground" type="error"
                      style="width: 6%;border-radius: 10px;height:113px;display: flex;justify-content: center;align-items: center;">
                删除
              </Button>
            </div>

            <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;">
              <div style="width: 20%;display: flex;justify-content: space-between;align-items: center;">
                <span>背</span><span>景</span><span>位</span><span>置</span>
              </div>
              <Select style="width: 75%;" :disabled="!backgroundConfig.path" clearable
                      v-model="backgroundConfig.position">
                <Option value="center">居中</Option>
                <Option value="top">上</Option>
                <Option value="left">左</Option>
                <Option value="bottom">下</Option>
                <Option value="right">右</Option>
              </Select>
            </div>

            <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;">
              <div style="width: 20%;display: flex;justify-content: space-between;align-items: center;">
                <span>铺</span><span>贴</span><span>方</span><span>式</span></div>
              <Select style="width: 75%;" :disabled="!backgroundConfig.path" clearable
                      v-model="backgroundConfig.repeat">
                <Option value="repeat">平铺</Option>
                <Option value="no-repeat">不平铺</Option>
                <Option value="repeat-x">横向平铺</Option>
                <Option value="repeat-y">纵向平铺</Option>
              </Select>
            </div>

            <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;">
              <div style="width: 20%;display: flex;justify-content: space-between;align-items: center;">
                <span>图</span><span>片</span><span>尺</span><span>寸</span></div>
              <Select style="width: 75%;" :disabled="!backgroundConfig.path" clearable v-model="backgroundConfig.size">
                <Option value="auto">自动</Option>
                <Option value="contain">长边完全显示</Option>
                <Option value="cover">短边完全显示</Option>
                <Option value="custom">自定义</Option>
              </Select>
            </div>
            <div v-show="backgroundConfig.size==='custom'"
                 style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;">
              <div style="width: 20%;display: flex;justify-content: space-between;align-items: center;">
                <span>自</span><span>定</span><span>宽</span><span>高</span></div>
              <div style="width: 75%;display: flex;align-items: center;justify-content: space-between;">
                <InputNumber :activeChange="false" :precision="2" clearable
                             v-model="backgroundConfig.customSize.width"></InputNumber>
                <InputNumber :activeChange="false" :precision="2" clearable
                             v-model="backgroundConfig.customSize.height"></InputNumber>
              </div>

            </div>


          </TabPane>
        </Tabs>
      </div>
    </div>
    <div v-else style="height:calc(100% - 70px);width: 100%;">请先选择模板类型</div>
  </div>
</template>

<script>
import Ruler from '_c/sub/ruler'
import './template.less'
import img from '@/assets/images/img.png'
import scanCode from '@/assets/images/code.png'
import barCode from '@/assets/images/barcode.jpg'
import data from '@/assets/images/data.png'
import table from '@/assets/images/table.png'
import t from '@/assets/images/ttf.png'
import { mapMutations } from 'vuex'
import config from '@/config'

export default {
  name: 'printTemplate',
  components: {
    Ruler
  },
  props: {
    editRow: {
      type: Object,
      default: null
    },
    value: {
      type: Boolean,
      default: false
    },
    labelKind: {
      type: String
    }
  },
  data() {
    let self = this
    return {
      maxSize: 2048,// 图片大小的最大值 kb
      acceptFile: 'image/png,image/jpeg,image/jpg,image/jpeg',// 接受上传的文件类型
      showDrawer: false,
      parentW: 0,
      parentH: 0,
      backgroundConfig: {
        path: '',
        position: 'center',
        repeat: 'repeat',
        size: 'auto',
        customSize: {
          width: 100,
          height: 100
        }
      },
      paperDirectionList: [
        {
          label: '纵向',
          value: 'portrait',
        },
        {
          label: '横向',
          value: 'landscape',
        }
      ],
      paperDirection: 'landscape',
      lastPaperDirection: 'landscape',
      templateTypeList: [],
      templateType: '',
      lastTemplateType: '',
      templateName: '',
      dataSource: {
        main: {},
        detail: {}
      },
      img,
      data,
      table,
      scanCode,
      barCode,
      t,
      itemTemplate: {
        text: '文本',
        width: 60,
        height: 20,
        fontSize: 10,
        border: false,
        align1: 'center',
        align2: 'center',
        fontStyle: false,
        bold: false,
        line: false,
        keyValueScale: 50,
        dataSourceKey: null
      },
      moveFlag: true,
      moveList: [],
      imgList: [],
      currentIndex: -1,
      currentColIndex: -1,
      currentImgIndex: -1,
      tableInfo: null,//表格数据
      tableCol: [],
      tableColTemp: [],
      e: {},
      organizationList: [],
      organization: null,
      paperTypeList: self.$config.paperTypeList,
      paperType: 1,
      lastPaperType: 0,
      // 显示顺序
      displayNo: null,
      //自定义纸大小
      customWidth: 0,
      customHeight: 0
    }
  },
  watch: {
    editRow() {
      // this.visibleChange(this.editRow)
    }
  },
  methods: {
    /**
     * @desc   : 上传普通图片成功事件
     * @author : 张潇木
     * @date   : 2022-5-25 20:01
     */
    importSuccess(event) {
      // if (event.code == 200 && event.data && event.data.uuidName) {
      //   this.imgList[this.currentImgIndex].path = this.$config.imgUrl + '/' + event.data.uuidName
      //阿里OSS
      if (event.code == 200 && event.data && event.data.absolutelyPath) {
        this.imgList[this.currentImgIndex].path = event.data.absolutelyPath
      } else {
        this.$Message.warning(event.message)
      }
    },
    /**
     * @desc   : 上传背景图片成功事件
     * @author : 张潇木
     * @date   : 2022-5-26 9:54
     */
    importSuccessBackground(response, file, fileList) {
      //如果多次上传，要把上一次图片的替换掉
      if (fileList.length > 1) {
        this.$refs.backgroundImg.fileList.splice(0, 1)
      }
      if (response.code == 200 && response.data && response.data.relativePath) {
        this.backgroundConfig.path = this.$config.imgUrl + response.data.relativePath
        this.backgroundConfig.relativePath = response.data.relativePath
      } else {
        this.$Message.warning(response.message)
      }
    },
    /**
     * @desc   : 清空背景图事件
     * @author : 张潇木
     * @date   : 2022-5-26 10:33
     */
    removeBackground() {
      this.backgroundConfig.path = ''
    },
    /**
     * @desc   : 上传文件之前的钩子
     * @author : 张潇木
     * @date   : 2022-5-25 19:20
     */
    beforeUpload(file) {
      if (!this.acceptFile.split(',').includes(file.type)) {
        this.$Message.warning('图片格式不在允许的范围内')
        return false
      }
      if (file.size / 1024 > this.maxSize) {
        this.$Message.warning(`文件大小超过了${this.maxSize}KB`)
        return false
      }
    },
    changePaperDirection(val) {
      this.checkItemInPaper(this.paperTypeList[this.paperType]).then(flag => {
        if (flag) {
          setTimeout(() => {
            let paperEl = document.getElementById('paper')
            this.parentH = paperEl.clientHeight
            this.parentW = paperEl.clientWidth
          }, 100)
          this.lastPaperDirection = val
        } else {
          this.$Message.warning('调整后有元素超出纸张范围，请先调整元素位置及大小')
          this.paperDirection = this.lastPaperDirection
        }
      })
    },
    checkItemInPaper(paper) {
      let div = document.createElement('div')
      div.id = 'cm'
      div.style.width = paper.width + 'cm'
      div.style.height = paper.height + 'cm'
      document.querySelector('body').appendChild(div)
      // 原生方法获取浏览器对元素的计算值
      let cm = document.getElementById('cm').getBoundingClientRect()

      let widthPx = this.paperDirection === 'portrait' ? cm.width : cm.height
      let heightPx = this.paperDirection === 'portrait' ? cm.height : cm.width
      div.remove()


      return new Promise(resolve => {
        let flag = true
        this.moveList.forEach(it => {
          if ((it.top + it.height) > heightPx || (it.left + it.width) > widthPx) {
            flag = !it.checked
          }
        })

        this.imgList.forEach(it => {
          if ((it.top + it.height) > heightPx || (it.left + it.width) > widthPx) {
            flag = false
          }
        })
        if (this.tableInfo && ((this.tableInfo.width + this.tableInfo.left) > widthPx || (this.tableInfo.top + 90) > heightPx)) {
          flag = false
        }
        resolve(flag)
      })
    },
    paperTypeChange(index) {
      //todo 可能还有点小问题 目前看还好
      this.checkItemInPaper(this.paperTypeList[index]).then(flag => {
        if (flag) {
          let paperEl = document.getElementById('paper')
          this.parentH = paperEl.clientHeight
          this.parentW = paperEl.clientWidth
          /*  重新打乱 */
          this.$nextTick(() => {
            // debugger
            let maxWidth = 0
            let currentRowIndex = 0
            /* 计算一下最多能摆多少个 */
            let rowCount = Math.floor(document.getElementById('paper').offsetHeight / 20)
            let moveListIndex = 0
            setTimeout(() => {
              this.moveList.forEach(it => {
                if (!it.checked) {
                  let width = this.getByteLength(it.title, 10) + this.getByteLength(it.value, 10)
                  this.$set(it, 'top', (moveListIndex % rowCount) * 20)
                  this.$set(it, 'left', Math.floor(moveListIndex / rowCount) * maxWidth)
                  maxWidth = (maxWidth > (width + 60)) ? maxWidth : (width + 60)
                  if (currentRowIndex < (moveListIndex % rowCount)) {
                    currentRowIndex += (moveListIndex % rowCount)
                    maxWidth = 0
                  }
                  moveListIndex++
                }
              })
            }, 0)
          })
          this.lastPaperType = index
        } else {
          this.$Message.warning('调整后有元素超出纸张范围，请先调整元素位置及大小')
          this.paperType = this.lastPaperType
        }
      })


    },
    visibleChange(val) {
      this.$emit('input', val)
      if (val) {
        if (this.editRow) {
          this.lastTemplateType = this.editRow.docCode
          this.templateType = this.editRow.docCode
          this.templateName = this.editRow.tmName
          this.tableColTemp = this.templateTypeList[0].tableColTemp
          this.dataSource = this.templateTypeList[0].dataSource
          this.displayNo = this.editRow.displayNo
          this.moveList = this.editRow.templateData.mainList
          this.imgList = this.editRow.templateData.imgList
          this.tableInfo = this.editRow.templateData.tableInfo
          this.tableCol = this.editRow.templateData.tableCol
          this.paperDirection = this.editRow.templateData.paperDirection
          this.organization = this.editRow.orgId
          this.backgroundConfig = this.editRow.templateData.backgroundConfig
          this.paperType = this.paperTypeList.map(it => it.label).indexOf(this.editRow.templateData.paperInfo.label).toString()
          this.paperTypeList[0].width = this.editRow.templateData.paperInfo.width
          this.customWidth = this.editRow.templateData.paperInfo.width
          this.paperTypeList[0].height = this.editRow.templateData.paperInfo.height
          this.customHeight = this.editRow.templateData.paperInfo.height
          this.lastPaperType = this.paperType
          this.lastPaperDirection = this.paperDirection
          //通过这种方式去渲染，避免双向绑定冲突问题
          this.$nextTick(() => {
            let table = this.$refs.printTemplateTable
            /* 过滤一下 2022年8月30日14:51:25 */
            this.tableCol.filter(it => it.checked).forEach((it, index) => {
              if (it.width) {
                table.rows[0].cells[index].width = it.width
              }
            })
          })
        } else {
          this.displayNo = 0
          this.lastTemplateType = ''
          this.templateType = ''
          this.templateName = ''
          this.tableColTemp = []
          this.dataSource = {}
          this.moveList = []
          this.imgList = []
          this.tableInfo = null
          this.tableCol = []
          this.organization = null
          this.paperDirection = 'landscape'
        }
      } else {
        this.templateType = ''
        this.lastTemplateType = ''
        this.templateName = ''
        this.dataSource = { main: {}, detail: {} }
        this.moveFlag = true
        this.moveList = []
        this.imgList = []
        this.currentIndex = -1
        this.currentColIndex = -1
        this.currentImgIndex = -1
        this.tableInfo = null
        this.tableCol = []
        this.tableColTemp = []
        this.e = {}
        this.$emit('reloadData')
      }
    },
    getDataSourceValue(dataSourceKey) {
      return this.dataSource.main.filter(it => {
        return it.key === dataSourceKey
      })[0].value
    },
    getDataSourceValueDetail(dataSourceKey) {
      if (!dataSourceKey) {
        return ''
      }
      return this.dataSource.detail.filter(it => {
        return it.key === dataSourceKey
      })[0].value
    },
    renderTreeAdd(h, { root, node, data }) {
      return h('div',
        {
          style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' }
        }, [
          h('div', data.title), h('div', [
            // h('Checkbox', {
            //   props: {
            //     icon: 'md-add',
            //     type: 'primary',
            //     size: 'small'
            //   },
            //   style:{marginRight:'5px'},
            //   on: {
            //     click: () => {
            //       event.stopPropagation();
            //       let firstWidth = 0;
            //       this.tableCol.forEach((it,index)=>{
            //         /* 差的部分直接加给第一个列 */
            //         if(index !== 0){
            //           it.width = parseInt((it.width*0.9).toString())
            //           firstWidth+=it.width
            //         }
            //       })
            //       this.tableCol[0].width = 90 - firstWidth
            //       this.tableCol.push(
            //         {
            //           title: 'XXXX',
            //           key: null,
            //           width: 10,
            //           fontSize:14,
            //           align1:'center',
            //           align2:'center',
            //           fontStyle:false,
            //           bold:false,
            //         },)
            //     }
            //   }
            // }),
            h('Button', {
              props: {
                icon: 'md-add',
                type: 'primary',
                size: 'small'
              },
              on: {
                click: () => {
                  event.stopPropagation()
                  let firstWidth = 0
                  this.tableCol.forEach((it, index) => {
                    /* 差的部分直接加给第一个列 */
                    if (index !== 0) {
                      it.width = parseInt((it.width * 0.9).toString())
                      firstWidth += it.width
                    }
                  })
                  this.tableCol[0].width = 90 - firstWidth
                  this.tableCol.push(
                    {
                      title: 'XXXX',
                      checked: true,
                      key: null,
                      deleteFlag: true,
                      width: 10,
                      fontSize: 14,
                      align1: 'center',
                      align2: 'center',
                      fontStyle: false,
                      bold: false,
                    },)
                }
              }
            }),
            h('Button', {
              props: {
                icon: 'md-remove',
                type: 'error',
                size: 'small'
              },
              style: {
                marginLeft: '3px'
              },
              on: {
                click: () => {
                  event.stopPropagation()
                  this.tableInfo = null
                }
              }
            })
          ])
        ])
    },
    renderTreeImg(h, { root, node, data }) {
      return h('div',
        {
          style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' }
        }, [
          h('div', {
            style: {
              width: '90%',
              overflow: 'hidden',
              textOverflow: 'ellipsis',
              whiteSpace: 'nowrap'
            }
          }, data.title),
          h('Button', {
            props: {
              icon: 'md-remove',
              type: 'error',
              size: 'small'
            },
            on: {
              click: (flag) => {
                event.stopPropagation()
                switch (data.type) {
                  case 'img':
                    this.imgList = this.imgList.filter((it, index) => {
                      return index !== data.index
                    })
                    break
                }
              }
            }
          }),
        ])
    },
    renderTree(h, { root, node, data }) {
      return h('div',
        {
          style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' }
        }, [
          h('div', {
            style: {
              width: '90%',
              overflow: 'hidden',
              textOverflow: 'ellipsis',
              whiteSpace: 'nowrap'
            }
          }, data.title),
          data.type == 'col' ? h('Button', {
            style: {
              background: 'transparent'
            },
            props: {
              icon: 'ios-arrow-up',
              size: 'small',
              type: 'text',
              disabled: data.index == 0
            },
            on: {
              click: () => {
                event.stopPropagation()
                switch (data.type) {
                  case 'col':
                    let row = this.tableCol[data.index]
                    let dataIndex = data.index - 1
                    this.tableCol.splice(data.index, 1,)
                    this.tableCol.splice(dataIndex, 0, row)
                    break
                }
              }
            }
          }) : null,
          data.type == 'col' ? h('Button', {
            style: {
              background: 'transparent'
            },
            props: {
              icon: 'ios-arrow-down',
              size: 'small',
              type: 'text',
              disabled: data.index == this.tableCol.length - 1
            },
            on: {
              click: () => {
                event.stopPropagation()
                switch (data.type) {
                  case 'col':
                    let row = this.tableCol[data.index]
                    let dataIndex = data.index + 1
                    this.tableCol.splice(data.index, 1,)
                    this.tableCol.splice(dataIndex, 0, row)
                    break
                }
              }
            }
          }) : null,
          data.deleteFlag ?
            h('div', {
              props: {},
              style: {
                'width': '14px',
                'height': '14px',
                marginRight: '4px',
                borderRadius: '2px',
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'center',
                color: '#fff',
                background: '#ed4014',
                fontWeight: 'bold'
              },
              on: {
                click: () => {
                  event.stopPropagation()
                  switch (data.type) {
                    case 'text':
                      //将当前选中下标还原，否则渲染报错
                      this.currentIndex = -1
                      this.moveList = this.moveList.filter((it, index) => data.index !== index)
                      break
                  }
                }
              }
            }, '-')
            :
            h('Checkbox', {
              props: {
                size: 'small',
                value: this.moveList[data.index].checked
              },
              on: {
                'on-change': (flag) => {
                  event.stopPropagation()
                  switch (data.type) {
                    case 'text':
                      this.moveList[data.index].checked = flag
                      break
                    case 'col':
                      let willDelWidth = this.tableCol[data.index].width
                      this.tableCol = this.tableCol.filter((it, index) => {
                        return index !== data.index
                      })
                      let qy = willDelWidth % this.tableCol.length
                      if (qy === 0) {
                        this.tableCol.forEach(it => {
                          it.width += willDelWidth / this.tableCol.length
                        })
                      } else {
                        this.tableCol.forEach(it => {
                          if (qy !== 0) {
                            it.width += parseInt((willDelWidth / this.tableCol.length).toString()) + 1
                            qy--
                          } else {
                            it.width += parseInt((willDelWidth / this.tableCol.length).toString())
                          }
                        })
                      }
                      break
                  }
                }
              }
            }),
        ])
    },
    renderTreeTableDetail(h, { root, node, data }) {
      return h('div',
        {
          style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' }
        }, [
          h('div', {
            style: {
              width: '80%',
              overflow: 'hidden',
              textOverflow: 'ellipsis',
              whiteSpace: 'nowrap'
            }
          }, data.title),
          data.type == 'col' ? h('Button', {
            style: {
              background: 'transparent'
            },
            props: {
              icon: 'ios-arrow-up',
              size: 'small',
              type: 'text',
              disabled: data.index == 0
            },
            on: {
              click: () => {
                event.stopPropagation()
                switch (data.type) {
                  case 'col':
                    let row = this.tableCol[data.index]
                    let dataIndex = data.index - 1
                    this.tableCol.splice(data.index, 1,)
                    this.tableCol.splice(dataIndex, 0, row)
                    break
                }
              }
            }
          }) : null,
          data.type == 'col' ? h('Button', {
            style: {
              background: 'transparent'
            },
            props: {
              icon: 'ios-arrow-down',
              size: 'small',
              type: 'text',
              disabled: data.index == (this.tableCol.length - 1)
            },
            on: {
              click: () => {
                event.stopPropagation()
                switch (data.type) {
                  case 'col':
                    let row = this.tableCol[data.index]
                    let dataIndex = data.index + 1
                    this.tableCol.splice(data.index, 1,)
                    this.tableCol.splice(dataIndex, 0, row)
                    break
                }
              }
            }
          }) : null,
          data.deleteFlag ?
            h('div', {
              props: {},
              style: {
                'width': '16px',
                'height': '14px',
                marginRight: '4px',
                marginLeft: '4px',
                borderRadius: '2px',
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'center',
                color: '#fff',
                background: '#ed4014',
                fontWeight: 'bold'
              },
              on: {
                click: () => {
                  event.stopPropagation()
                  this.tableCol = this.tableCol.filter((it, index) => data.index !== index)
                }
              }
            }, '-')
            :
            h('Checkbox', {
              props: {
                size: 'small',
                value: this.tableCol[data.index].checked
              },
              on: {
                'on-change': (flag) => {
                  event.stopPropagation()
                  switch (data.type) {
                    case 'col':
                      /* 添加明细 */
                      if (flag) {
                        let width = 10 /* 默认新加的列宽度就是10 */
                        let currentColQuantity = this.tableCol.filter(it => it.checked).length
                        let needDelWidth = parseInt((width / currentColQuantity).toString())
                        this.tableCol.forEach((it, index) => {
                          if (index === currentColQuantity - 1) {
                            it.width -= (width - ((currentColQuantity - 1) * needDelWidth))
                          } else {
                            it.width -= needDelWidth
                          }
                        })
                        this.tableCol[data.index].checked = flag
                        this.tableCol[data.index].width = width
                      } else {  /* 删除明细 */
                        this.tableCol[data.index].checked = flag
                        let willDelWidth = this.tableCol[data.index].width

                        let currentColQuantity = this.tableCol.filter(it => it.checked).length
                        let needDelWidth = parseInt((willDelWidth / currentColQuantity).toString())
                        this.tableCol.forEach((it, index) => {
                          if (index === currentColQuantity - 1) {
                            it.width += (willDelWidth - ((currentColQuantity - 1) * needDelWidth))
                          } else {
                            it.width += needDelWidth
                          }
                        })
                      }
                      break
                  }
                }
              }
            }),
        ])
    },
    /**
     * @desc   : '当前元素'tab树形checkbox选中事件
     * @author : 张潇木
     * @date   : 2022-5-12 11:39
     */
    onSelectChange(current) {
      if (current.length <= 0 || !current[0].type) {
        return
      }
      this.clearAllSelect()
      if (current[0].type === 'text') {
        this.moveList[current[0].index].currentFlag = true
        this.currentIndex = current[0].index
      }

      if (current[0].type === 'col') {
        this.tableInfo.active = true
        this.currentColIndex = current[0].index
      }

      if (current[0].type === 'img') {
        this.imgList[current[0].index].active = true
        this.currentImgIndex = current[0].index
      }
      if (current[0].type === 'scanCode') {
        this.imgList[current[0].index].active = true
        this.currentImgIndex = current[0].index
      }
      if (current[0].type === 'barCode') {
        this.imgList[current[0].index].active = true
        this.currentImgIndex = current[0].index
      }
    },
    /**
     * @desc   : 获取右侧树形数据
     * @author : 张潇木
     * @date   : 2022-5-12 15:45
     */
    getTreeData() {
      let arr = []
      if (this.moveList.length > 0) {
        let obj = { title: '文本', children: [], expand: true }
        this.moveList.forEach((it, index) => {
          obj.children.push({
            title: it.text,
            deleteFlag: it.deleteFlag,
            index: index,
            expand: true,
            type: 'text',
            render: this.renderTree
          })
        })
        arr.push(obj)
      }
      if (this.tableInfo) {
        let objTable = { title: '表格', children: [], expand: true, render: this.renderTreeAdd }
        this.tableCol.forEach((it, index) => {
          objTable.children.push({
            deleteFlag: it.deleteFlag,
            type: 'col',
            title: it.title,
            index: index,
            expand: true,
            render: this.renderTreeTableDetail
          })
        })
        arr.push(objTable)
      }

      if (this.imgList.length > 0) {
        let objImg = { title: '图片', children: [], expand: true }
        this.imgList.forEach((it, index) => {
          let name = it.name
          if (name === '$scanCode') {
            name = '二维码'
          } else if (name === '$barCode') {
            name = '条形码'
          }
          objImg.children.push({ title: name, index: index, expand: true, type: 'img', render: this.renderTreeImg })
        })
        arr.push(objImg)
      }

      return arr
    },
    changeTableTrWidth(val) {
      /* 默认操作应该是 如果最后一个特殊处理一下 如果不是变化统一影响后面的元素变化 */
      if (this.tableCol.length === this.currentColIndex + 1) {
        let withoutBeforeWidth = 0
        this.tableCol.forEach((it, index) => {
          if (index !== this.currentColIndex - 1) {
            withoutBeforeWidth += it.width
          }
        })
        this.tableCol[this.currentColIndex - 1].width = 100 - withoutBeforeWidth
      } else {
        let withoutAfterWidth = 0
        this.tableCol.forEach((it, index) => {
          if (index !== this.currentColIndex + 1) {
            withoutAfterWidth += it.width
          }
        })
        this.tableCol[this.currentColIndex + 1].width = 100 - withoutAfterWidth
      }
    },
    getItemTemplate(e) {
      let temp = { ...this.itemTemplate }
      temp.top = e.offsetY - 10 <= 0 ? 0 : e.offsetY - 10
      temp.left = e.offsetX - 30 <= 0 ? 0 : e.offsetX - 30
      temp.checked = true
      temp.deleteFlag = true
      return temp
    },
    dragend(e, type) {
      let tempE = { offsetX: e.clientX - 365, offsetY: e.clientY - 113 }
      this.drop(tempE, type)
    },
    /**
     * @desc   : 增加节点事件
     * @author : 张潇木
     * @date   : 2022-5-12 11:47
     */
    drop(e, type) {
      switch (type) {
        case 'page':
          let data = this.getItemTemplate(e)
          data.text = '第1页,共1页'
          data.width = 70
          this.moveList.push(
            data
          )
          break
        case 'text':
          this.moveList.push(
            this.getItemTemplate(e)
          )
          break
        case 'table':
          if (this.tableInfo) {
            return
          }

          let templateObj = this.templateTypeList.filter(it => {
            return it.value === this.templateType
          })[0]

          this.tableCol = []
          templateObj.dataSource.detail.forEach((it, index) => {
            let width = this.getByteLength(it.title, 10) + this.getByteLength(it.value, 10)
            let defaultList = templateObj.tableColTemp.filter(filterIt => filterIt.key === it.key)
            this.tableCol.push(
              {
                title: it.title,
                key: it.key,
                width: defaultList.length > 0 ? defaultList[0].width : 0,
                fontSize: 14,
                align1: 'center',
                align2: 'center',
                fontStyle: false,
                bold: false,
                checked: templateObj.tableColTemp.map(mapIt => mapIt.key).includes(it.key)
              }
            )
          })
          this.tableColTemp = [...templateObj.tableColTemp]
          let paperHeight = document.getElementById('paper').offsetHeight
          setTimeout(() => {
            this.tableInfo = {
              active: false,
              width: document.getElementById('paper').clientWidth * 0.9,
              height: 30,
              top: paperHeight - 120,
              left: document.getElementById('paper').clientWidth * 0.05
            }
          }, 100)
          break
        case 'img':
          let imgInfo = {
            active: false,
            width: 80,
            height: 64,
            path: this.img,
            name: '图片名称',
            top: e.offsetY - 32 <= 0 ? 0 : e.offsetY - 32,
            left: e.offsetX - 40 <= 0 ? 0 : e.offsetX - 40
          }
          this.imgList.push(imgInfo)
          break

        case 'scanCode':
          let scanCodeInfo = {
            active: false,
            width: 80,
            height: 80,
            path: '',
            name: '$scanCode',
            top: e.offsetY - 32 <= 0 ? 0 : e.offsetY - 32,
            left: e.offsetX - 40 <= 0 ? 0 : e.offsetX - 40
          }
          this.imgList.push(scanCodeInfo)
          break
        case 'barCode':
          let barCodeInfo = {
            active: false,
            width: 80,
            height: 40,
            path: '',
            name: '$barCode',
            top: e.offsetY - 32 <= 0 ? 0 : e.offsetY - 32,
            left: e.offsetX - 40 <= 0 ? 0 : e.offsetX - 40
          }
          this.imgList.push(barCodeInfo)
          break
      }
    },
    clearAllSelect() {
      this.currentIndex = -1
      this.currentColIndex = -1
      this.currentImgIndex = -1
      if (this.tableInfo) {
        this.tableInfo.active = false
      }
      this.moveList.forEach(it => {
        it.currentFlag = false
      })
      this.imgList.forEach(it => {
        it.active = false
      })
    },
    /**
     * @desc   : 节点选中事件
     * @author : 张潇木
     * @date   : 2022-5-12 15:46
     */
    selectDrag(index) {
      this.clearAllSelect()
      this.moveList.forEach((it, i) => {
        if (index === i) {
          this.$set(it, 'currentFlag', true)
        } else {
          this.$set(it, 'currentFlag', false)
        }
      })
      setTimeout(() => {
        this.currentIndex = index
      }, 100)
    },
    clickOut(e, index) {
      this.currentIndex = -1
      this.moveList.forEach((it, i) => {
        if (index === i) {
          this.$set(it, 'currentFlag', false)
        }
      })
    },
    /**
     * @desc   : 拖拽事件
     * @author : 张潇木
     * @date   : 2022-5-12 15:44
     */
    resize(newRect, index) {
      this.moveList[index].width = newRect.width
      this.moveList[index].height = newRect.height
      this.moveList[index].top = newRect.top
      this.moveList[index].left = newRect.left
    },
    chooseCol(index) {
      this.columnWidth()
      this.clearAllSelect()
      this.selectDragTable()
      this.currentColIndex = index
    },
    getCurrentColIndexReal(index) {
      let currentTrs = this.tableCol.filter(it => it.checked)
      let realIndex = -1
      currentTrs.forEach((cIt, cIndex) => {
        this.tableCol.forEach((it, index2) => {
          if (cIt.key === it.key && index === cIndex) {
            realIndex = index2
          }
        })
      })
      return realIndex
    },
    selectDragTable() {
      this.tableInfo.active = true
    },
    clickOutTable() {
      this.currentColIndex = -1
      this.tableInfo.active = false
    },
    resizeTable2(newRect) {
      this.tableInfo.width = newRect.width
      this.tableInfo.height = newRect.height / 3
      this.tableInfo.top = newRect.top
      this.tableInfo.left = newRect.left
    },
    selectDragImg(index) {
      this.clearAllSelect()
      this.imgList.forEach((it, i) => {
        if (index === i) {
          this.$set(it, 'active', true)
        } else {
          this.$set(it, 'active', false)
        }
      })
      setTimeout(() => {
        this.currentImgIndex = index
      }, 100)
    },
    clickOutImg(e, index) {
      this.currentImgIndex = -1
      this.imgList.forEach((it, i) => {
        if (index === i) {
          this.$set(it, 'active', false)
        }
      })
    },
    resizeImg(newRect, index) {
      this.imgList[index].width = newRect.width
      this.imgList[index].height = newRect.height
      this.imgList[index].top = newRect.top
      this.imgList[index].left = newRect.left
    },
    /**
     * @desc   : 保存
     * @author : 洪旭东
     * @date   : 2022-05-20 14:29
     */
    save() {
      if (this.moveList.length <= 0 && this.tableInfo === null && this.imgList.length <= 0) {
        this.$Message.warning(this.$t('W_030'))
        return
      }

      // if (!this.templateName) {
      //   // this.$Message.warning('请输入模板名称')
      //   this.$Message.warning(this.$t('W_001', { 'param': this.$t('templateName') }))
      //   return
      // }


      // if (this.displayNo == null) {
      //   this.$Message.warning(this.$t('W_001', { 'param': this.$t('displayNo') }))
      //   return
      // }

      // 提交时 重新处理一下width
      let table = document.getElementById('printTemplateTable')
      if (table) {
        for (let j = 0; j < table.rows[0].cells.length; j++) {
          let width = table.rows[0].cells[j].offsetWidth
          this.tableCol.forEach(tcIt => {
            if (tcIt.key === table.rows[0].cells[j].getAttribute('data-key')) {
              tcIt.width = parseInt(width)
            }
          })
        }
      }

      // return;
      let result = {
        backgroundConfig: this.backgroundConfig,
        paperInfo: this.paperTypeList[this.paperType],
        mainList: this.moveList,
        tableInfo: this.tableInfo,
        tableCol: this.tableCol,
        imgList: this.imgList,
        paperDirection: this.paperDirection,
        typeCode: this.templateType
      }

      //自定义纸张大小
      if (this.paperType == 0) {
        result.paperInfo.width = this.customWidth
        result.paperInfo.height = this.customHeight
      }

      let currentType = this.templateTypeList.filter(it => {
        return it.value === this.templateType
      })[0]
      let obj = {
        tmId: this.editRow ? this.editRow.tmId : null,
        typeName: currentType.label,
        typeCode: currentType.value,
        orgId: this.organization,
        name: this.templateName,
        createTime: new Date().format('yyyy-MM-dd hh:mm:ss'),
        templateInfo: result,
        displayNo: this.displayNo
      }
      this.$emit('savaTemplate', obj)
      this.$emit('input', false)
    },
    uuid() {
      let s = []
      let hexDigits = '0123456789abcdef'
      for (let i = 0; i < 36; i++) {
        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1)
      }
      s[14] = '4' // bits 12-15 of the time_hi_and_version field to 0010
      s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1) // bits 6-7 of the clock_seq_hi_and_reserved to 01
      s[8] = s[13] = s[18] = s[23] = '-'
      let uuid = s.join('')
      return uuid
    },
    changeTemplateType(val) {
      if (this.moveList.length > 0 || this.tableInfo || this.imgList.length > 0) {
        this.$Modal.confirm({
          title: '提示',
          content: '<p>您已经设置了模板元素，' +
            '如果现在切换页面所有控件将会被清空</p><p>确定要这样做吗？</p>',
          onOk: () => {
            this.moveList = []
            this.imgList = []
            this.tableInfo = null
            this.tableColTemp = []
            this.tableCol = []//清空表格
            this.changeFunc(val)
          },
          onCancel: () => {
            // this.changeFunc(this.lastTemplateType)
            this.templateType = this.lastTemplateType
          }
        })
      } else {
        this.changeFunc(val)
      }
    },
    getByteLength(str, fontSize) {
      let c = document.createElement('canvas')
      let ctx = c.getContext('2d')
      ctx.font = fontSize + 'px Helvetica Neue'
      return ctx.measureText(str).width
    },
    changeFunc(val) {
      if (!val) {
        return
      }
      let templateObj = this.templateTypeList.filter(it => {
        return it.value === val
      })[0]
      /* 这块得改一下  因为元素太多会超出纸张范围 沈博 2022年6月30日13:43:01*/
      this.$nextTick(() => {

        let paperHeight = document.getElementById('paper').offsetHeight
        let paperWidth = document.getElementById('paper').offsetWidth


        let maxWidth = 0
        let currentRowIndex = 0
        /* 计算一下最多能摆多少个 */
        let rowCount = Math.floor(paperHeight / 20)
        templateObj.dataSource.main.forEach((it, index) => {
          let item = { ...this.itemTemplate }
          let width = this.getByteLength(it.title, 10) + this.getByteLength(it.value, 10)
          this.moveList.push(
            Object.assign(item, {
              checked: false,
              top: (index % rowCount) * 20,
              left: Math.floor(index / rowCount) * maxWidth,
              dataSourceKey: it.key,
              text: it.title,
              width: width + 60,
              keyValueScale: ((this.getByteLength(it.title, 10)) / width) * 100
            })
          )
          maxWidth = (maxWidth > (width + 60)) ? maxWidth : (width + 60)
          if (currentRowIndex < (index % rowCount)) {
            currentRowIndex += (index % rowCount)
            maxWidth = 0
          }
        })

        templateObj.dataSource.detail.forEach((it, index) => {
          let width = this.getByteLength(it.title, 10) + this.getByteLength(it.value, 10)
          let defaultList = templateObj.tableColTemp.filter(filterIt => filterIt.key === it.key)
          this.tableCol.push(
            {
              title: it.title,
              key: it.key,
              width: defaultList.length > 0 ? defaultList[0].width : 0,
              fontSize: 14,
              align1: 'center',
              align2: 'center',
              fontStyle: false,
              bold: false,
              checked: templateObj.tableColTemp.map(mapIt => mapIt.key).includes(it.key)
            }
          )
        })

        // this.tableCol = templateObj.dataSource.detail
        this.dataSource = { ...templateObj.dataSource }
        // todo 默认表格、？
        // setTimeout(() => {
        //   this.tableInfo = {
        //     active: false,
        //     width: document.getElementById('paper').clientWidth * 0.9,
        //     height: 30,
        //     top: paperHeight - 120,
        //     left: document.getElementById('paper').clientWidth * 0.05
        //   }
        //
        //
        //   /* 设置表格 列宽 */
        //   const tableWidth = this.tableInfo.width
        //   let currentSurplusWidth = this.tableInfo.width
        //   templateObj.tableColTemp.forEach((it, index) => {
        //     if (index === templateObj.tableColTemp.length - 1) {
        //       it.width = currentSurplusWidth
        //     } else {
        //       const currentWidth = (it.width / 100) * tableWidth
        //       it.width = currentWidth
        //       currentSurplusWidth -= currentWidth
        //     }
        //   })
        //   this.tableColTemp = [...templateObj.tableColTemp]
        //   this.$nextTick(() => {
        //     this.tableColTemp.forEach(it => {
        //       document.getElementById(it.key).setAttribute('width', it.width)
        //     })
        //   })
        // }, 100)
      })
      this.lastTemplateType = val
    },
    /**
     * @desc   : 删除节点方法
     * @author : 张潇木
     * @date   : 2022-5-12 11:36
     */
    delDom() {
      if (this.currentIndex >= 0) {//如果当前选中的是文本类型
        //删除当前选中节点
        this.moveList = this.moveList.filter(it => !it.currentFlag)
      } else if (this.currentColIndex >= 0) {//选中的是表格
        if (this.tableCol[this.currentColIndex].deleteFlag) {
          this.tableCol = this.tableCol.filter((it, index) => this.currentColIndex !== index)
        } else {
          this.tableCol[this.currentColIndex].checked = false
        }
      } else if (this.currentImgIndex >= 0) {
        this.imgList = this.imgList.filter((it, index) => index !== this.currentImgIndex)
      }
      //将当前值改为-1，避免template渲染报错
      this.clearAllSelect()
    },
    /**
     * @desc   : 移动节点方法
     * @author : 张潇木
     * @date   : 2022-5-13 14:40
     */
    moveDom(way) {
      if (this.currentIndex >= 0) {
        switch (way) {
          case 'left':
            this.moveList[this.currentIndex].left = this.moveList[this.currentIndex].left - 1
            break
          case 'right':
            this.moveList[this.currentIndex].left = this.moveList[this.currentIndex].left + 1
            break
          case 'up':
            this.moveList[this.currentIndex].top = this.moveList[this.currentIndex].top - 1
            break
          case 'down':
            this.moveList[this.currentIndex].top = this.moveList[this.currentIndex].top + 1
            break
        }
      }
      if (this.currentImgIndex >= 0) {
        switch (way) {
          case 'left':
            this.imgList[this.currentImgIndex].left = this.imgList[this.currentImgIndex].left - 1
            break
          case 'right':
            this.imgList[this.currentImgIndex].left = this.imgList[this.currentImgIndex].left + 1
            break
          case 'up':
            this.imgList[this.currentImgIndex].top = this.imgList[this.currentImgIndex].top - 1
            break
          case 'down':
            this.imgList[this.currentImgIndex].top = this.imgList[this.currentImgIndex].top + 1
            break
        }
      }
      if (this.currentColIndex >= 0) {
        switch (way) {
          case 'left':
            this.tableInfo.left = this.tableInfo.left - 1
            break
          case 'right':
            this.tableInfo.left = this.tableInfo.left + 1
            break
          case 'up':
            this.tableInfo.top = this.tableInfo.top - 1
            break
          case 'down':
            this.tableInfo.top = this.tableInfo.top + 1
            break
        }
      }

    },

    /**
     * @desc   : 调整列宽事件
     * @author : 张潇木
     * @date   : 2022-5-26 13:34
     */
    columnWidth() {
      let self = this
      let tTD //用来存储当前更改宽度的Table Cell,避免快速移动鼠标的问题
      let table = self.$refs.printTemplateTable

      let keys = self.tableColTemp.map(it => it.key)
      let nextIndex = 0
      let nextKey = ''
      let nextOldWidth = 0
      let nextElement = null
      let nextWidth = 0

      for (let j = 0; j < table.rows[0].cells.length; j++) {
        table.rows[0].cells[j].onmousedown = function (e) {
          //记录单元格
          tTD = this
          if (event.offsetX > tTD.offsetWidth - 10) {
            tTD.mouseDown = true
            tTD.oldX = event.x
            tTD.oldWidth = tTD.offsetWidth
            nextIndex = keys.indexOf(tTD.id) + 1
            nextKey = keys[nextIndex]
            nextElement = document.getElementById(nextKey)
            nextOldWidth = nextElement.offsetWidth
          }
          //记录Table宽度
          //table = tTD; while (table.tagName != ‘TABLE') table = table.parentElement;
          //tTD.tableWidth = table.offsetWidth;
        }
        table.rows[0].cells[j].onmouseup = function (e) {
          //结束宽度调整
          if (tTD == undefined) tTD = this
          tTD.mouseDown = false
          tTD.style.cursor = 'default'
        }
        table.rows[0].cells[j].onmousemove = function (e) {
          e.stopPropagation()
          //更改鼠标样式
          if (event.offsetX > this.offsetWidth - 10) {
            this.style.cursor = 'col-resize'
          } else {
            this.style.cursor = 'default'
          }
          //取出暂存的Table Cell
          if (tTD == undefined) tTD = this
          //调整宽度
          if (tTD.mouseDown != null && tTD.mouseDown == true) {
            tTD.style.cursor = 'default'
            if (tTD.oldWidth + (event.x - tTD.oldX) > 0) {
              tTD.width = tTD.oldWidth + (event.x - tTD.oldX)
              nextWidth = nextOldWidth - (event.x - tTD.oldX)
              // self.tableCol[j].width = tTD.oldWidth + (event.x - tTD.oldX)
            }
            //调整列宽
            tTD.style.width = tTD.width
            tTD.style.cursor = 'col-resize'


            document.getElementById(tTD.id).setAttribute('width', tTD.width)
            nextElement.setAttribute('width', nextWidth)

            self.tableColTemp[nextIndex].width = nextWidth

            //调整该列中的每个Cell
            table = tTD
            while (table.tagName != 'TABLE') table = table.parentElement
            for (j = 0; j < table.rows.length; j++) {
              // table.rows[j].cells[tTD.cellIndex].width = tTD.width
              // self.tableCol[j].width = tTD.width
            }

            /* 缺少相邻的td宽度修改 */


            //   // 调整整个表
            //   // table.width = tTD.tableWidth + (tTD.offsetWidth – tTD.oldWidth);
            //   // table.style.width = table.width;
          }
        }
      }
    },


    ...
      mapMutations([
        'closeTag'
      ]),
    /**
     * @desc   : 关闭
     * @author : 洪旭东
     * @date   : 2022-05-20 16:51
     */
    close() {
      this.$emit('close')
    },
    /*
     * @desc   : 查询数据源
     * @author : 沈博
     * @date   : 2022/6/28 9:54
     */
    selectDataSource() {
      this.excute(this.$service.commonService, this.$service.commonService.getLabelPrintItem, {
        labelKind: this.labelKind
      }).then(res=>{
      if (res.code === 200) {
        if (res.data && res.data.length > 0) {

          let titleItem
          if (this.labelKind === this.$config.modelKind.modelMould) {    // 模具型号
            titleItem = 'modelMouldLayout'
          } else if (this.labelKind === this.$config.modelKind.modelMaterial) {    // 物料型号
            titleItem = 'modelMaterialLayout'
          } else if (this.labelKind === this.$config.modelKind.modelCarrier) {    // 载具型号
            titleItem = 'modelCarrierLayout'
          } else if (this.labelKind === this.$config.modelKind.modelEquipment) {    // 设备型号
            titleItem = 'modelEquipmentLayout'
          } else if (this.labelKind === this.$config.modelKind.modelProduct) {    // 产品型号
            titleItem = 'modelProductLayout'
          }

          this.templateTypeList = [
            {
              'tableColTemp': [],
              'label': this.$t(titleItem),
              'value': this.$t(titleItem),
              'dataSource': { 'main': res.data.map(m => {
                return {
                  'title':m.itemName,
                  'value':m.itemSample,
                  'key':m.dataKey
                }
                }), 'detail': [] }
            }
          ]

          setTimeout(() => {
            this.visibleChange(this.editRow)
            this.templateType = this.$t(titleItem)
            if(!this.editRow) {
              this.changeFunc(this.$t(titleItem))
            }
          }, 500)
        }
      } else {
        this.$Message.warning(res.message)
      }
      })
    },
    delBackground() {

      this.backgroundConfig = {
        'path': '',
        'position': 'center',
        'repeat': 'repeat',
        'size': 'auto',
        'customSize': {
          'width': 100,
          'height': 100
        }
      }
    }
  },
  created() {
  },
  activated() {
  },
  mounted() {
    this.$nextTick(() => {
      this.selectDataSource()
    })
  }
}
</script>

<style scoped>
/deep/ .ivu-upload-list {
  display: none;
}

/*td{*/
/*  padding: 3px;*/
/*}*/
/*.portrait{*/
/*  width: 21cm;*/
/*  height: 29.7cm;*/
/*}*/
/*.landscape{*/
/*  width: 29.7cm;*/
/*  height: 21cm;*/
/*}*/

/deep/ .ivu-tree {
  height: calc(100% - 50px);
  overflow-y: scroll;
}

/deep/ .ivu-tabs-content {
  height: 100%;
}

.icon {
  width: 5em;
  height: 5em;
}


</style>
