<template>
  <el-tabs v-model="activeName" type="card">
    <el-tab-pane label=" 外观" name="A">
      <el-collapse v-model="activeNames">
        <div v-if="nodes.pens">
          对齐:
          <div class="row_single">
            <label v-for="item in nodesAlgin" :key="'algin'+item.value" class="node_align">
              <i
                :class="'iconfont icon-align-'+item.value"
                :title="item.desc"
                @click="onNodesAlign(item.value)"
              />
            </label>
            <label class="node_align">
              <i
                class="iconfont icon-horizontal-between"
                title="等距分布，两端对齐，节点之间的间隔都相等"
                @click="onSpaceBetween()"
              ></i>
            </label>
          </div>
        </div>

        <el-collapse-item title="排版" v-if="nodes.pens" name="1">
          <div class="disflex" style="justify-content: space-around;">
            <div class="posmain">
              最大宽度:
              <el-input
                size="mini"
                type="number"
                v-model="pagelayout.maxWidth"
                placeholder="最大宽度"
              >text</el-input>
            </div>
            <div class="posmain">
              节点宽度:
              <el-input
                size="mini"
                type="number"
                v-model="pagelayout.nodeWidth"
                placeholder="节点宽度"
              >text</el-input>
            </div>
            <div class="posmain">
              节点高度:
              <el-input
                size="mini"
                type="number"
                v-model="pagelayout.nodeHeight"
                placeholder="节点高度"
              >text</el-input>
            </div>
            <div class="posmain">
              水平个数:
              <el-input
                size="mini"
                type="number"
                v-model="pagelayout.maxWidth"
                placeholder="水平个数"
              >text</el-input>
            </div>
            <div class="posmain">
              水平间距:
              <el-input
                size="mini"
                type="number"
                v-model="pagelayout.spaceWidth"
                placeholder="水平间距"
              >text</el-input>
            </div>
            <div class="posmain">
              垂直间距:
              <el-input
                size="mini"
                type="number"
                v-model="pagelayout.spaceHeight"
                placeholder="垂直间距"
              >text</el-input>
            </div>
            <el-button type="primary" size="mini" style="margin-top:10px" @click="onLayout()">开始排版</el-button>
          </div>
        </el-collapse-item>

        <el-collapse-item title="位置和大小(px)" v-if="nodes.pens||nodes.pen" name="2">
          <div class="disflex">
            <div class="row_single">
              圆角:
              <el-input
                size="mini"
                placeholder="圆角"
                v-model="pointPen.borderRadius"
                @change="onChangeProp()"
                type="number"
              ></el-input>
              <i class="icon_tips el-icon-question" title="区间(0-1):表示百分比   |   数值>1: 表示像素"></i>
            </div>

            <div class="row_single">
              旋转:
              <el-input
                size="mini"
                placeholder="旋转(°)"
                v-model="pointPen.rotate"
                @change="onChangeProp()"
                type="number"
              ></el-input>°
            </div>
            <div class="row_single">
              位置及大小
              <i class="icon_tips el-icon-question" title="(px)"></i>
            </div>
            <div class="posrt">
              X:
              <el-input
                size="mini"
                placeholder="X (px)"
                v-model="pointPen.rect.x"
                @change="onChangeProp()"
                type="number"
              ></el-input>
            </div>
            <div class="posrt">
              Y:
              <el-input
                size="mini"
                placeholder="Y (px)"
                v-model="pointPen.rect.y"
                @change="onChangeProp()"
                type="number"
              ></el-input>
            </div>
            <div class="posrt">
              宽:
              <el-input
                size="mini"
                type="number"
                placeholder="宽(px)"
                v-model="pointPen.rect.width"
                @change="onChangeProp()"
              ></el-input>
            </div>
            <div class="posrt">
              高:
              <el-input
                size="mini"
                type="number"
                placeholder="高 (px)"
                v-model="pointPen.rect.height"
                @change="onChangeProp()"
              ></el-input>
            </div>

            <div class="row_single">
              内边距
              <i class="icon_tips el-icon-question" title="输入数字表示像素；输入%表示百分比"></i>
            </div>
            <div class="posrt">
              左:
              <el-input
                size="mini"
                type="number"
                placeholder="左"
                v-model="pointPen.paddingLeft"
                @change="onChangeProp()"
              >text</el-input>
            </div>
            <div class="posrt">
              右:
              <el-input
                size="mini"
                type="number"
                placeholder="右"
                v-model="pointPen.paddingRight"
                @change="onChangeProp()"
              ></el-input>
            </div>
            <div class="posrt">
              上:
              <el-input
                size="mini"
                type="number"
                placeholder="上"
                v-model="pointPen.paddingTop"
                @change="onChangeProp()"
              >text</el-input>
            </div>
            <div class="posrt">
              下:
              <el-input
                size="mini"
                type="number"
                placeholder="下"
                v-model="pointPen.paddingBottom"
                @change="onChangeProp()"
              ></el-input>
            </div>
            <div style="color:#bfbfbf;font-size: 12px;">内边距：输入数字表示像素；输入%表示百分比</div>
          </div>
        </el-collapse-item>

        <!---->

        <el-collapse-item title="文字" name="3" v-if="nodes.pen">
          <div class="disflex">
            <div class="row_single">
              内容
              <el-input
                type="textarea"
                size="mini"
                v-model="pointPen.text"
                @change="onChangeProp()"
                placeholder="Text"
              ></el-input>
            </div>

            <div class="row_pair">
              字体
              <el-input
                size="mini"
                v-model="pointPen.font.fontFamily"
                @change="onChangeProp()"
                placeholder="字体"
              >text</el-input>
            </div>
            <div class="row_pair">
              大小
              <el-input
                size="mini"
                type="number"
                v-model="pointPen.font.fontSize"
                @change="onChangeProp()"
                placeholder="大小"
              >text</el-input>
            </div>
            <div class="row_pair">
              颜色
              <el-color-picker size="small" v-model="pointPen.font.color" @change="onChangeProp()"></el-color-picker>
            </div>
            <div class="row_pair">
              背景
              <el-color-picker
                size="small"
                v-model="pointPen.font.background"
                @change="onChangeProp()"
              ></el-color-picker>
            </div>
            <div class="row_pair">
              倾斜
              <el-select
                v-model="pointPen.font.fontStyle"
                @change="onChangeProp()"
                size="mini"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in fontStyleOptions"
                  :key="'fontStyleOptions'+item.name"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </div>
            <div class="row_pair">
              加粗
              <el-select
                v-model="pointPen.font.fontWeight"
                @change="onChangeProp()"
                size="mini"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in fontWeightOptions"
                  :key="'fontWeightOptions'+item.name"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </div>
            <div class="row_pair">
              水平对齐
              <el-select
                v-model="pointPen.font.textAlign"
                @change="onChangeProp()"
                size="mini"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in textAlignOptions"
                  :key="'textAlignOptions'+item.name"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </div>
            <div class="row_pair">
              垂直对齐
              <el-select
                v-model="pointPen.font.textBaseline"
                @change="onChangeProp()"
                size="mini"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in textBaselineOptions"
                  :key="item.name"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </div>
            <div class="row_pair">
              行高
              <el-input
                size="mini"
                type="number"
                v-model="pointPen.font.lineHeight"
                @change="onChangeProp()"
                placeholder
              ></el-input>
            </div>
            <div class="row_pair">
              最大行数
              <el-input
                type="number"
                size="mini"
                v-model="pointPen.font.textMaxLine"
                @change="onChangeProp()"
                placeholder
              ></el-input>
            </div>
            <div class="row_pair">
              水平偏移(px)
              <el-input
                size="mini"
                type="number"
                v-model="pointPen.textOffsetX"
                @change="onChangeProp()"
                placeholder
              ></el-input>
            </div>
            <div class="row_pair">
              垂直偏移(px)
              <el-input
                type="number"
                size="mini"
                v-model="pointPen.textOffsetY"
                @change="onChangeProp()"
                placeholder
              ></el-input>
            </div>
          </div>
        </el-collapse-item>

        <el-collapse-item title="样式" name="4" v-if="nodes.pen">
          <div class="disflex">
            <div class="row_single">
              线条宽度
              <el-input
                type="number"
                size="mini"
                placeholder="线条宽度"
                v-model="pointPen.lineWidth"
                @change="onChangeProp()"
              ></el-input>
            </div>
            <div class="posmain flex_nowarp">
              线条颜色:
              <el-color-picker size="small" v-model="pointPen.strokeStyle" @change="onChangeProp()"></el-color-picker>
              <el-input
                size="mini"
                placeholder="线条颜色"
                v-model="pointPen.strokeStyle"
                :style="'background-color:'+pointPen.strokeStyle"
                @change="onChangeProp()"
              ></el-input>
            </div>
            <div class="posmain flex_nowarp">
              背景颜色:
              <el-color-picker size="small" v-model="pointPen.fillStyle" @change="onChangeProp()"></el-color-picker>
              <el-input
                size="mini"
                placeholder="线条颜色"
                v-model="pointPen.fillStyle"
                @change="onChangeProp()"
              ></el-input>
            </div>
            <div class="row_single">
              <el-dropdown>
                <span class="el-dropdown-link">
                  连线样式:
                  <i
                    v-if="!pointPen.name"
                    style="color: #03A9F4;font-size: 5px;padding:0 9px"
                  >空</i>
                  <i
                    v-if="pointPen.name"
                    :class="'iconfont icon-'+pointPen.name"
                    style="color: #03A9F4;font-size: 5px;padding:0 9px"
                  ></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item v-for="item in lineStyleNames" :key="'penLineStyle'+item.value">
                    <p @click="onClickName(item.value)">
                      <span>{{item.name}}：</span>
                      <i
                        :class="'iconfont icon-'+item.value"
                        style="color:#03A9F4;font-size: 15px;padding:0 9px"
                      ></i>
                    </p>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>

            <div class="row_single">
              透明度
              <el-input
                type="number"
                v-model="pointPen.globalAlpha"
                size="mini"
                @change="onChangeProp()"
                placeholder="请输入内容"
              ></el-input>
            </div>
          </div>
        </el-collapse-item>

        <el-collapse-item title="图片" name="5">
          <div class="disflex">
            <div class="posmain">
              <el-upload
                size="mini"
                action="#"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt />
              </el-dialog>
            </div>
            <div class="row_pair">
              宽(px):
              <el-input
                size="mini"
                type="number"
                v-model="pointPen.imageWidth"
                @change="onChangeImgWidth()"
                placeholder
              ></el-input>
            </div>
            <div class="row_pair">
              高(px):
              <el-input
                size="mini"
                type="number"
                v-model="pointPen.imageHeight"
                @change="onChangeImgHeight()"
                placeholder
              ></el-input>
            </div>
            <div class="row_pair">
              <el-checkbox
                size="mini"
                v-model="pointPen.imageRatio"
                @change="onChangeImgRatio()"
              >保存图片比例</el-checkbox>
            </div>
            <el-divider></el-divider>
            <div class="row_single">
              字体图标
              <i class="el-icon-edit" @click="showIcon=true"></i>
            </div>
            <div class="row_single">
              字体大小
              <el-input
                size="mini"
                type="number"
                v-model="pointPen.iconSize"
                @change="onChangeProp()"
                placeholder="<=0表示自适应"
              ></el-input>
            </div>
            <div class="row_single">
              字体颜色
              <el-color-picker v-model="pointPen.iconColor" @change="onChangeProp()" size="small"></el-color-picker>
            </div>
            <div class="row_single">
              对齐方式
              <el-select v-model="pointPen.imageAlign" size="mini" placeholder="对齐方式">
                <el-option
                  v-for="item in iconAligns"
                  :key="'iconAligns'+item.name"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </div>

            <el-divider></el-divider>
          </div>
        </el-collapse-item>
      </el-collapse>
    </el-tab-pane>

    <div v-show="showIcon" class="icons">
      <div class="posmain">
        <label>选择字体图标</label>
        <el-button size="mini" @click="showIcon=false">返回</el-button>
      </div>
      <div class="iconsbar">
        <div class="icon" @click="onClickIcon()">
          <span style="font-size:25px">空</span>
        </div>
        <div class="icon" v-for="ico of icons" :key="'topology'+ico.class">
          <i :class="'topology ' +ico.class" @click="onClickIcon(ico)"></i>
        </div>
      </div>
    </div>

    <el-tab-pane label=" 数据" name="B">
      <el-collapse v-model="activeNames">
        <div class="disflex">
          <div class="row_single">
            <el-select
              size="mini"
              v-model="pointPen.binding.type"
              @change="onChangeProp()"
              placeholder="I/O类型"
            >
              <!-- v-model="pointPen.binding.type" -->
              <el-option v-for="io in iooptions" :key="io" :label="io" :value="io"></el-option>
            </el-select>
          </div>
          <div class="row_single">
            标签点名
            <el-input
              type="textarea"
              size="mini"
              v-model="pointPen.binding.tagName"
              @change="onChangeProp()"
              placeholder="请输入标签点名"
            ></el-input>
          </div>
        </div>
      </el-collapse>
    </el-tab-pane>
  </el-tabs>
</template>


<script>
import { alignNodes, spaceBetween } from '../assets/ts/align'
import { layout } from '../assets/ts/layout'
import { getRect } from '@topology/core/src/utils/rect';


export default {
  props: ["canvas", "nodes"],
  data()
  {
    return {
      //-------------------界面默认绑定数据相关-------------------
      nodesAlgin: this.$store.state.designsetting.nodesAlgin,
      lineStyleNames: this.$store.state.designsetting.lineStyleNames,
      icons: this.$store.state.designsetting.icons,
      pagelayout: {
        maxWidth: 1000,
        nodeWidth: 0,
        nodeHeight: 0,
        maxCount: 0,
        spaceWidth: 30,
        spaceHeight: 30
      },
      showIcon: false,
      selectedIcon: null,
      //-------------------界面展示相关的数据---------------------------
      activeName: 'A',
      activeNames: ['1', '2', '3', '4', '5'],
      fontStyleOptions: this.$store.state.designsetting.fontStyleOptions,
      fontWeightOptions: this.$store.state.designsetting.fontWeightOptions,
      textAlignOptions: this.$store.state.designsetting.textAlignOptions,
      textBaselineOptions: this.$store.state.designsetting.textBaselineOptions,
      iconAligns: this.$store.state.designsetting.iconAligns,



      //--------------------------------------------------------
      data: {},
      show: {},
      pointPen: {
        "rect": {
          "x": '', "y": '', "width": '', "height": '',
          "center": { "x": 441, "y": 266 }, "ex": 501, "ey": 286
        },
        "lineWidth": 1, "rotate": 0, "offsetRotate": 0,
        "globalAlpha": 1, "dash": 0, "strokeStyle": "#1bb5f5",
        "fillStyle": "", "font": {
          "color": "#1bb5f5",
          "fontFamily": "\"Hiragino Sans GB\", \"Microsoft YaHei\", \"Helvetica Neue\", Helvetica, Arial",
          "fontSize": 12, "lineHeight": 1.5, "fontStyle": "normal", "fontWeight": "normal", "textAlign": "center",
          "textBaseline": "middle"
        }, "animateCycleIndex": 0,
        "id": "", "name": "rectangle", "binding": { "tagName": '001', "type": 'AI' },
        "tags": [], "lineDashOffset": 0, "text": "",
        "textOffsetX": 0, "textOffsetY": 0, "animateType": "", "visible": true,
        "data": "", "zRotate": 0,
        "anchors": [{ "x": 381, "y": 266, "direction": 4 }, { "x": 441, "y": 246, "direction": 1 }, { "x": 501, "y": 266, "direction": 2 },
        { "x": 441, "y": 286, "direction": 3 }],
        "rotatedAnchors": [{ "x": 381, "y": 266, "direction": 4 }, { "x": 441, "y": 246, "direction": 1 },
        { "x": 501, "y": 266, "direction": 2 }, { "x": 441, "y": 286, "direction": 3 }],
        "animateDuration": 0, "animateFrames": [], "borderRadius": 0.5, "iconSize": null,
        "imageAlign": "center", "bkType": 0, "gradientAngle": 0, "gradientRadius": 0.01, "paddingTop": 0,
        "paddingBottom": 0, "paddingLeft": 0, "paddingRight": 0, "paddingLeftNum": 0, "paddingRightNum": 0,
        "paddingTopNum": 0, "paddingBottomNum": 0, "textRect": {
          "x": 421, "y": 246, "width": 80, "height": 40,
          "center": { "x": 461, "y": 266 }, "ex": 501, "ey": 286
        },
        "fullTextRect": {
          "x": 381, "y": 246, "width": 120, "height": 40, "center": { "x": 441, "y": 266 },
          "ex": 501, "ey": 286
        }, "iconRect": {
          "x": 381, "y": 246, "width": 40, "height": 40, "center": { "x": 401, "y": 266 },
          "ex": 421, "ey": 286
        }, "fullIconRect": {
          "x": 381, "y": 246, "width": 120, "height": 40, "center": { "x": 441, "y": 266 },
          "ex": 501, "ey": 286
        }, "elementRendered": false, "TID": ""
      },
      iooptions: this.$store.state.bindingsetting.IO,




      dialogImageUrl: '',
      dialogVisible: false,






      activeNames1: ['1'],
      textarea: '',


    };
  },
  mounted()
  {
    this.initNodes();
  },
  updated()
  {
    //this.initNodes();
  },
  methods: {
    initNodes()
    {
      this.show = {}     
      
      if (this.nodes.pen) {
        this.pointPen = this.nodes.pen;
      } else {
        this.pointPen = {};
      }
      if (!this.pointPen.font) {
        this.pointPen.font = {
          color: '#222',
          fontFamily: '"Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial',
          fontSize: 12,
          lineHeight: 1.5,
          fontStyle: 'normal',
          fontWeight: 'normal',
          textAlign: 'center',
          textBaseline: 'middle'
        };
      }
      if (!this.pointPen.font.fontStyle) {
        this.pointPen.font.fontStyle = 'normal';
      }
      if (!this.pointPen.font.fontWeight) {
        this.pointPen.font.fontWeight = 'normal';
      }

      if (this.pointPen.icon) {
        if (this.selectedIcon) {
          this.selectedIcon.checked = false;
        }
        for (const item of this.selectedIcon) {
          if (String.fromCharCode(+item.unicode) === this.pointPen.icon) {
            item.checked = true;
            this.selectedIcon = item;
            break;
          }
        }
      } else {
        this.selectedIcon = null;
      }

      if (!this.pointPen.bkType) {
        this.pointPen.bkType = 0;
      }

      if (!this.pointPen.imageAlign) {
        this.pointPen.imageAlign = 'center';
      }
      const rect = getRect(this.canvas.activeLayer.pens);
      this.pagelayout.maxWidth = rect.width;

      window.ns = this.nodes;
      window.pp = this.pointPen;
    },
    setPaintColor(paintColor)
    {
      this.$store.dispatch('setPaintColor', paintColor);
      this.$emit("onMessage", 'refresh', '');
      this.page.paintColor = paintColor;
    },
    onNodesAlign(align)
    {
      alignNodes(this.canvas.activeLayer.pens, this.canvas.activeLayer.rect, align);
      this.canvas.updateProps();
    },
    onSpaceBetween()
    {
      spaceBetween(this.canvas.activeLayer.pens, this.canvas.activeLayer.rect.width);
      this.canvas.updateProps();
    },
    onLayout()
    {
      layout(this.canvas.activeLayer.pens, this.pagelayout);
      this.canvas.updateProps();
    },
    onChangeImgWidth()
    {
      if (this.pointPen.imageRatio && this.pointPen.imageWidth > 0) {
        this.pointPen.imageHeight =
          (this.pointPen.imgNaturalHeight / this.pointPen.imgNaturalWidth) * this.pointPen.imageWidth;
      }
      this.onChangeProp();
    },

    onChangeImgHeight()
    {
      if (this.pointPen.imageRatio && this.pointPen.imageHeight > 0) {
        this.pointPen.imageWidth =
          (this.pointPen.imgNaturalWidth / this.pointPen.imgNaturalHeight) * this.pointPen.imageHeight;
      }
      this.onChangeProp();
    },

    onClickName(name)
    {
      this.pointPen.name = name;
      this.onChangeProp();
    },
    onClickIcon(item)
    {
      console.log(item)
      if (this.selectedIcon) {
        this.selectedIcon.checked = false;
      }

      if (item) {
        item.checked = true;
        this.pointPen.iconFamily = 'topology';
        this.pointPen.icon = String.fromCharCode(+item.unicode);
      } else {
        this.pointPen.icon = '';
      }

      this.selectedIcon = item;
      this.onChangeProp();
    },


    onChangeProp()
    {
      if (this.nodes.pens) {
        for (const item of this.nodes.pens) {
          item.dash = this.pointPen.dash;
          item.strokeStyle = this.pointPen.strokeStyle;
          item.lineWidth = this.pointPen.lineWidth;
          item.globalAlpha = parseFloat(this.pointPen.globalAlpha);
          item.font = Object.assign({}, this.pointPen.font);
          item.textMaxLine = this.pointPen.textMaxLine;
          item.textOffsetX = parseInt(this.pointPen.textOffsetX);
          item.textOffsetY = parseInt(this.pointPen.textOffsetY);
        }
      }


      if (this.nodes.pen && this.pointPen) {

        let obj = {};
        try {
          obj = JSON.parse(this.pointPen.data);
        } catch (e) { }
        if (obj) {
          this.nodes.pen.data = obj;
          this.nodes.pen.data.rotate = parseFloat(this.nodes.pen.data.rotate);

          this.nodes.pen.rect.x = parseInt(this.nodes.pen.rect.x);
          this.nodes.pen.rect.y = parseInt(this.nodes.pen.rect.y);
          this.nodes.pen.rect.width = parseInt(this.nodes.pen.rect.width);
          this.nodes.pen.rect.height = parseInt(this.nodes.pen.rect.height);
          this.nodes.pen.paddingLeft = parseInt(this.nodes.pen.paddingLeft);
          this.nodes.pen.paddingRight = parseInt(this.nodes.pen.paddingRight);
          this.nodes.pen.paddingTop = parseInt(this.nodes.pen.paddingTop);
          this.nodes.pen.paddingBottom = parseInt(this.nodes.pen.paddingBottom);
          this.nodes.pen.lineWidth = parseInt(this.nodes.pen.lineWidth);
          this.nodes.pen.globalAlpha = parseFloat(this.nodes.pen.globalAlpha);
          this.nodes.pen.imageWidth = parseInt(this.nodes.pen.imageWidth);
          this.nodes.pen.imageHeight = parseInt(this.nodes.pen.imageHeight);
          this.nodes.pen.iconSize = parseInt(this.nodes.pen.iconSize);

          this.nodes.pen.font.fontSize = parseFloat(this.nodes.pen.font.fontSize);

          this.nodes.pen.textOffsetX = parseInt(this.nodes.pen.textOffsetX);
          this.nodes.pen.textOffsetY = parseInt(this.nodes.pen.textOffsetY);


        }
      }
      this.canvas.updateProps();
    },

    onAnimate()
    {
      this.pointPen.animateStart = this.pointPen.animateStart ? Date.now() : 0;
      this.canvas.animate();
    },

    handleRemove(file, fileList)
    {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file)
    {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleClick(tab, event)
    {
      console.log(tab, event);
    },
    // handleChange(val)
    // {
    //   console.log(val);
    // }
  },
  watch: {
    // nodes:
    // {
    //   console.log(this.nodes)
    // }

  }

};
</script>


<style lang="css">
.flex_nowarp .el-color-picker__trigger {
  height: 24px !important;
  width: 24px !important;
  align-items: center;
}
.flex_nowarp .el-color-picker--small {
  display: flex;
  align-items: center;
}
</style>
<style lang="css" scoped>
.posmain >>> .el-upload--picture-card {
  height: 24px !important;
  width: 24px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
.posmain >>> .el-upload--picture-card i {
  font-size: 14px;
}
.node_align {
  margin-right: 15px;
}
.node_align i:hover {
  color: #03a9f4;
}
.flex_nowarp {
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap !important;
  align-items: center;
}

.icon {
  padding: 10px;
}
.iconsbar i {
  font-size: 34px;
}
.iconsbar {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  overflow-y: auto;
}
.icons {
  height: 100%;
  width: 245px;
  position: fixed;
  z-index: 99;
  bottom: 0;
  top: 66px;
  padding: 0 6px;
  box-sizing: border-box;
  background-color: #fff;
}
.el-dropdown-link {
  cursor: pointer;
  color: #000;
}
.disflex {
  padding: 0 6px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  font-size: 13px;
  align-items: center;
}
.poslf {
  width: 20%;
  margin: 3px 5px;
}

.icon_tips {
  font-size: 15px;
  margin: 3px 5px;
  color: gray;
}

.row_pair {
  width: 45%;
  margin: 3px 5px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.row_single .el-input,
.el-select {
  width: 70% !important;
}
.row_pair .el-input,
.el-select {
  width: 70% !important;
}
.posrt .el-input,
.el-select {
  width: 70% !important;
}
.row_single {
  width: 100%;
  margin: 3px 5px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.posrt {
  width: 45%;
  margin: 3px 5px;
  display: flex;
  justify-content: space-between;
}
.posmain {
  width: 100%;
  box-sizing: border-box;
  margin: 3px 5px;
  display: flex;
  justify-content: space-between;
}
.posmain .el-input {
  width: 55% !important;
}
</style>

