<template>
  <el-dialog
    title="模板编辑"
    :visible.sync="visible"
    class="dialog-wrap"
    fullscreen
    center>
    <div class="editor-wrap">
      <div
        class="col-wrap"
        style="width:20%">
        <div class="col-title">
          可选字段 <span style="font-weight:normal;color:red">( 拖拽添加，不可重复)</span>
        </div>
        <draggable
          class="dragArea list-group"
          :list="list1"
          :sort="false"
          :move="checkMove"
          :group="{name:'people',pull:'clone',put:false}"
        >
          <div
            class="org-group-item"
            :class="{active:currentItem&&currentItem.name===element.name,disable:allEl.find(i=>i.name===element.name)}"
            v-for="element in list1"
            :key="element.name">
            {{ element.name }}
          </div>
        </draggable>
      </div>

      <div
        class="col-wrap"
        style="flex:1">
        <div class="col-title">
          效果预览
          <el-popover
            placement="top"
            width="300"
            v-model="popVisible">
            <div>
              列数：
              <el-input-number
                :min="1"
                :max="2"
                v-model="num"></el-input-number>
              <el-button
                style="margin-left:20px"
                size="mini"
                type="text"
                @click="popVisible = false">
                取消
              </el-button>
              <el-button
                type="primary"
                size="mini"
                @click="addLayout(),popVisible = false">
                确定
              </el-button>
            </div>

            <el-button
              slot="reference"
              type="primary">
              添加布局
            </el-button>
          </el-popover>
        </div>

        <div class="canvas-wrap">
          <draggable
            class="canvas"
            handle=".handle-layout">
            <div
              class="layout"
              v-for="(layout,index) in result"
              :key="index">
              <span
                class="close-layout"
                @click="result.splice(index,1)">
                <i class="el-icon-close"></i>
              </span>

              <draggable
                :style="layout"
                v-for="(child,idx) in layout.children"
                :key="idx"
                class="area"
                :list="child"

                :group="{name:'people'}"
              >
                <div
                  class="list-group-item"
                  @click="currentItem=element,currentLayout=layout"
                  v-for="(element,i) in child"
                  :key="element.name">
                  <div v-if="element.type==='ticketInfo'">
                    <table
                      class="table"
                      :style="element.style">
                      <tr>
                        <th>项目</th>
                        <th>单位</th>
                        <th>数量</th>
                        <th>单价</th>
                        <th>金额</th>
                      </tr>
                      <tr>
                        <td>成人票</td>
                        <td>张</td>
                        <td>4</td>
                        <td>90</td>
                        <td>360</td>
                      </tr>
                    </table>
                  </div>

                  <div
                    :style="element.style"
                    v-else>
                    <label>{{ element.nickname }}</label>{{ element.content }}
                  </div>

                  <span
                    class="el-icon-close"
                    @click.prevent.stop="remove(child,i)"></span>
                </div>
              </draggable>

              <span
                class="handle-layout">
                <i class="el-icon-rank"></i>
              </span>
            </div>
          </draggable>
        </div>
      </div>

      <div
        class="col-wrap"
        style="width:400px">
        <div class="attr-wrap">
          <div class="col-title">
            属性编辑 <span v-if="currentItem">[ {{ currentItem.name }} ]</span>
          </div>
          <div class="content">
            <el-form
              ref="form"
              :model="form"
              label-width="100px"
              :inline="false"
              size="small">
              <el-form-item label="模板名称">
                <el-input v-model="form.name"></el-input>
              </el-form-item>

              <template v-if="currentLayout">
                <el-divider direction="horizontal">
                  模块属性
                </el-divider>
                <el-form-item label="边框大小">
                  <el-input v-model="currentLayout.padding"></el-input>
                </el-form-item>

                <el-form-item label="行高">
                  <el-input-number
                    :min="1"
                    v-model="currentLayout.lineHeight"></el-input-number>
                </el-form-item>
              </template>

              <template v-if="currentItem">
                <el-divider direction="horizontal">
                  字段属性
                </el-divider>
                <el-form-item label="别名">
                  <el-input v-model="currentItem.nickname">
                  </el-input>
                </el-form-item>

                <el-form-item label="字体大小">
                  <el-input v-model="currentItem.style.fontSize"></el-input>
                </el-form-item>

                <el-form-item label="字体粗细">
                  <el-select v-model="currentItem.style.fontWeight">
                    <el-option
                      value="normal"
                      label="正常">
                    </el-option>
                    <el-option
                      value="bold"
                      label="加粗">
                    </el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="文本对齐方式">
                  <el-select v-model="currentItem.style.textAlign">
                    <el-option
                      value="left"
                      label="居左">
                    </el-option>
                    <el-option
                      value="center"
                      label="居中">
                    </el-option>
                    <el-option
                      value="right"
                      label="居右">
                    </el-option>
                  </el-select>
                </el-form-item>

                <el-form-item
                  label="内容"
                  v-if="currentItem.isStatic">
                  <el-input v-model="currentItem.content"></el-input>
                </el-form-item>
              </template>
            </el-form>
          </div>

          <div class="btn-wrap">
            <el-button
              type="primary"
              @click="handlePrint">
              测试打印
            </el-button>
            <el-button
              type="primary"
              @click="handleSubmit">
              保存
            </el-button>
          </div>
        </div>
      </div>
    </div>

    <PrintTemplate
      class="demo"
      ref="printer"
      :current-order="ticket"
      :preview="true"></PrintTemplate>
  </el-dialog>
</template>

<script>
import draggable from 'vuedraggable'
import elements from './elements'
import { addReceiptPrintModel, updateReceiptPrintModel } from '@/api/printModal'
import PrintTemplate from '@/components/SmallTicketPrintTemplate'
import ticket from './ticket'

export default {
  components: {
    draggable,
    PrintTemplate
  },
  computed: {
    allEl () {
      const all = []

      this.result.forEach(item => {
        item.children.forEach(i => {
          i.forEach(el => {
            all.push(el)
          })
        })
      })

      return all
    }
  },
  data () {
    return {
      num: 1,
      ticket,
      popVisible: false,
      visible: false,
      list1: elements,
      result: [{ width: '100%', lineHeight: 1.6, padding: '0px', children: [[]] }],
      canvas: {
        padding: 10
      },
      form: {
        name: '新建模板',
        content: []
      },
      currentLayout: null,
      currentItem: null
    }
  },
  methods: {
    show (type, data) {
      this.type = type
      this.visible = true
      this.currentItem = null
      this.currentLayout = null

      if (data) {
        this.form = data
        this.result = JSON.parse(data.content)
      } else {
        this.form = {
          name: '新建模板',
          content: []
        }
        this.result = [{ width: '100%', fontWeight: 'normal', lineHeight: 1.6, padding: '0px', children: [[]] }]
      }
    },
    close () {
      this.visible = false
    },
    handleSubmit () {
      this.form.content = JSON.stringify(this.result)

      switch (this.type) {
        case 'add':
          addReceiptPrintModel(this.form).then(res => {
            this.$message.success('操作成功')
          })
          this.close()
          setTimeout(() => {
            this.$emit('update')
          }, 500)
          break
        case 'edit':
          updateReceiptPrintModel(this.form).then(res => {
            this.$message.success('操作成功')
          })
          this.close()
          setTimeout(() => {
            this.$emit('update')
          }, 500)
          break
      }
    },
    remove (arr, idx) {
      arr.splice(idx, 1)
    },
    removeLayout (idx) {

    },
    addLayout () {
      if (!this.num) return

      const temp = {
        width: 100 / this.num + '%',
        lineHeight: 1.2,
        fontWeight: 'normal',
        padding: '0px',
        children: []
      }

      for (let i = 0; i < this.num; i++) { temp.children.push([]) }

      this.result.push(temp)
    },
    // 打印测试
    handlePrint () {
      this.$refs.printer.sendPrinter(this.result)
    },
    checkMove (e) { // 禁止拖入重复的属性组件
      if (this.allEl.find(i => i.name === e.draggedContext.element.name)) {
        return false
      } else {
        return true
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.demo{
  position: absolute; left: 0;bottom: 0; width: 500px; display: none;
}
.editor-wrap {
  display: flex; width: 100%; height: 100%; overflow: hidden; user-select: none;
}

.col-wrap {
  display: flex;  flex-direction: column; border: 1px solid #ddd;
  .dragArea {
    overflow: auto;  flex: 1;
  }
  .col-title {
    display: flex; height: 30px; padding: 5px 20px; font-weight: bold;  background: #eee; align-items: center; justify-content: space-between;
  }
}

.org-group-item {
  padding: 5px 10px;  cursor: move; border-bottom: 1px solid #ddd;

  &.disable{
    background: rgba(255, 2, 2, 0.07);cursor: not-allowed;
  }

   &.active{
    background: rgba(2, 149, 255,0.2);
  }
}

.list-group-item {
  position: relative; min-height: 20px;
  &:hover {
    background: rgb(241, 241, 241);
  }
  .el-icon-close {
    position: absolute; top: 50%; right: 5px;  color: red; transform: translateY(-50%);
  }
}
.layout {
  display: flex;  margin-bottom: 10px; background: rgb(223, 243, 225);
  .area:nth-child(2) {
    background: rgb(210, 231, 251);
  }
  .area:nth-child(3) {
    background: rgb(253, 216, 236);
  }
  .area:nth-child(4) {
    background: rgb(248, 248, 217);
  }
}
.area {
  min-height: 50px;
}

.sortable-ghost {
  background: rgba(0, 0, 0, .2);  opacity: .5;
}
.area + .area {
  border-left: 1px solid #ddd ;
}

.close-layout {
  display: flex; padding: 5px; color: red; justify-content: center; align-items: center;
}
.handle-layout {
  display: flex; padding: 5px; color: #000; justify-content: center; align-items: center;
}

.table {
  width: 100%;  text-align: center; border-top: 1px dashed #000;border-bottom: 1px dashed #000;
  th {
    border-bottom: 1px dashed #000;
  }
}

.attr-wrap {
  overflow: auto;
}

.content {
  padding: 20px;
  ::v-deep .el-form-item {
    display: block;
  }
}

.canvas-wrap{
  flex:1; overflow: auto;
  .canvas{
    width: 80%; margin: 0 auto; padding: 20px;
  }
}
</style>
