<template>
  <el-form label-width="70px" label-position="right" class="lab-design-attribute">
    <el-form-item v-if="labDesign.activity.render === 'buttonGroup'" label-width="0px">
      <el-divider>按钮组布局</el-divider>
      <ul>
        <li style="display: flex;align-items: center;margin-bottom: 4px">
          <div style="width: 50px">
            <i style="font-size: 16px;margin: 0 5px;width: 50px"><i class="el-icon-info"></i></i>
          </div>
          <el-tag style="width: 70px;text-align: center;">按钮</el-tag>
          <div style="width: 50px">
            <el-button type="primary" icon="el-icon-circle-plus-outline" circle style="margin-left: 2px" @click="createElement('button','新按钮')"></el-button>
          </div>
        </li>
        <draggable key="row" v-model="labDesign.activity.elements" :setData="()=>{}" ghostClass="ghost" animation="300" style="list-style: none;" handle=".drag-item">
          <transition-group>
            <template v-for="(item, index) in labDesign.activity.elements" >
              <li v-if="item && item.key" :key="item.key">
                <div style="width: 50px;display: inline-flex;text-align: center">
                  <i class="drag-item" style="font-size: 16px;cursor: move;width: 50px"><i class="el-icon-rank">{{ index + 1 }}</i></i>
                </div>
                <el-button v-bind="item.props" :style="item.style" disabled>{{ item.label }}</el-button>
                <el-button @click="labDesign.activeChange(item, labDesign.activity.elements, index)" circle type="success" size="mini" icon="el-icon-setting" style="margin-left: 2px;"></el-button>
                <el-button @click="() => { labDesign.activity.elements.splice(index, 1)}" circle type="danger" size="mini" icon="el-icon-minus" style="margin-left: 2px;"></el-button>
              </li>
            </template>
          </transition-group>
        </draggable>
      </ul>
    </el-form-item>
    <el-form-item v-else-if="labDesign.activity.render === 'table' || labDesign.activity.props.showType === 'table'" label-width="0px">
      <el-divider>表格列配置</el-divider>
      <ul>
        <li style="display: flex;align-items: center;margin-bottom: 4px">
          <div style="width: 44px">
            <i style="font-size: 16px;margin: 0 5px;width: 50px"><i class="el-icon-info"></i></i>
          </div>
          <el-tag style="width: calc(100% - 104px);text-align: center;">列名</el-tag>
          <div style="width: 50px">
            <el-button type="primary" icon="el-icon-circle-plus-outline" circle style="margin-left: 2px" @click="createElement('text','新列')"></el-button>
          </div>
        </li>
        <draggable key="table" v-model="labDesign.activity.elements" :setData="()=>{}" ghostClass="ghost" animation="300" style="list-style: none" handle=".drag-item">
          <transition-group>
            <template v-for="(item, index) in labDesign.activity.elements" >
              <li  v-if="item && item.props" :key="item.key" class="drag-item" style="display: flex">
                <div style="width: 50px">
                  <i style="font-size: 16px;margin: 0 5px;cursor: move;"><i class="el-icon-rank"></i></i>
                  <span>{{ index + 1}}</span>
                </div>
                <el-input size="mini" style="width: 70%;" type="text" v-model="item.label" disabled />
                <el-button @click="labDesign.activeChange(item, labDesign.activity.elements, index)" circle type="success" size="mini" icon="el-icon-setting" style="margin-left: 2px;"></el-button>
                <el-button @click="() => { labDesign.activity.elements.splice(index, 1)}" circle type="danger" size="mini" icon="el-icon-minus" style="margin-left: 2px;"></el-button>
              </li>
            </template>
          </transition-group>
        </draggable>
      </ul>
    </el-form-item>
    <el-form-item v-else-if="labDesign.activity.render === 'tab'" label-width="0px">
      <el-divider>标签配置</el-divider>
      <ul>
        <li style="display: flex;align-items: center;margin-bottom: 4px">
          <div style="width: 44px">
            <i style="font-size: 16px;margin: 0 5px;width: 50px"><i class="el-icon-info"></i></i>
          </div>
          <el-tag style="width: calc(100% - 104px);text-align: center;">列名</el-tag>
          <div style="width: 50px">
            <el-button type="primary" icon="el-icon-circle-plus-outline" circle style="margin-left: 2px" @click="createElement('pane','新标签')"></el-button>
          </div>
        </li>
        <draggable key="table" v-model="labDesign.activity.elements" :setData="()=>{}" ghostClass="ghost" animation="300" style="list-style: none" handle=".drag-item">
          <transition-group>
            <template v-for="(item, index) in labDesign.activity.elements" >
              <li  v-if="item && item.props" :key="item.key" class="drag-item" style="display: flex">
                <div style="width: 50px">
                  <i style="font-size: 16px;margin: 0 5px;cursor: move;"><i class="el-icon-rank"></i></i>
                  <span>{{ index + 1}}</span>
                </div>
                <el-input size="mini" style="width: 70%;" type="text" v-model="item.label" disabled />
                <el-button @click="labDesign.activeChange(item, labDesign.activity.elements, index)" circle type="success" size="mini" icon="el-icon-setting" style="margin-left: 2px;"></el-button>
                <el-button @click="() => { labDesign.activity.elements.splice(index, 1)}" circle type="danger" size="mini" icon="el-icon-minus" style="margin-left: 2px;"></el-button>
              </li>
            </template>
          </transition-group>
        </draggable>
      </ul>
    </el-form-item>
    <el-form-item v-else-if="['select','radio','checkbox'].includes(labDesign.activity.render)" label-width="0px">
      <el-divider>静态选项</el-divider>
      <ul>
        <li style="display: flex;align-items: center;margin-bottom: 4px">
          <div style="width: 80px">
            <i style="font-size: 16px;margin: 0 5px;width: 50px"><i class="el-icon-info"></i></i>
          </div>
          <el-tag style="width: 250px;text-align: center;">选项值</el-tag>
          <el-tag style="width: 250px;text-align: center;">选项名称</el-tag>
          <el-tag style="width: 250px;text-align: center;">选项编码</el-tag>
          <div style="width: 50px">
            <el-button type="primary" icon="el-icon-circle-plus-outline" circle style="margin-left: 2px" @click="labDesign.activity.options.splice(0,0,{value: $Util.uuid(6)})"></el-button>
          </div>
        </li>
        <draggable key="table" v-model="labDesign.activity.options" :setData="()=>{}" ghostClass="ghost" animation="300" style="list-style: none" handle=".drag-item">
          <transition-group>
            <template v-for="(item, index) in labDesign.activity.options" >
              <li :key="item.value" class="drag-item" style="display: flex">
                <div style="width: 70px">
                  <i style="font-size: 16px;margin: 0 5px;cursor: move;"><i class="el-icon-rank"></i></i>
                  <span>{{ index + 1}}</span>
                </div>
                <el-input size="mini" style="width: 200px;" type="text" v-model="item.value" />
                <el-input size="mini" style="width: 200px;" type="text" v-model="item.label" />
                <el-input size="mini" style="width: 200px;" type="text" v-model="item.code" />
                <el-button @click="() => { labDesign.activity.options.splice(index, 1)}" circle type="danger" size="mini" icon="el-icon-minus" style="margin-left: 2px;"></el-button>
              </li>
            </template>
          </transition-group>
        </draggable>
      </ul>
    </el-form-item>
    <el-form-item v-else-if="['form'].includes(labDesign.activity.render) || labDesign.activity.props.showType === 'form'" label-width="0px">
      <ul>
        <li style="display: flex;align-items: center;margin-bottom: 4px">
          <div style="width: 80px">
            <i style="font-size: 16px;margin: 0 5px;width: 50px"><i class="el-icon-info"></i></i>
          </div>
          <el-tag style="width: 200px;text-align: center;">组件名称</el-tag>
          <div style="width: 50px">
          </div>
        </li>
        <draggable key="table" v-model="labDesign.activity.elements" :setData="()=>{}" ghostClass="ghost" animation="300" style="list-style: none" handle=".drag-item">
          <transition-group>
            <template v-for="(item, index) in labDesign.activity.elements" >
              <li v-if="item.key" :key="item.key" class="drag-item" style="display: flex">
                <div style="width: 70px">
                  <i style="font-size: 16px;margin: 0 5px;cursor: move;"><i class="el-icon-rank"></i></i>
                  <span>{{ index + 1}}</span>
                </div>
                <span style="width: 200px">{{ item.label || item.mapper }}</span>
                <el-button @click="labDesign.activeChange(item, labDesign.activity.elements, index)" circle type="success" size="mini" icon="el-icon-setting" style="margin-left: 2px;"></el-button>
                <el-button @click="() => { labDesign.activity.elements.splice(index, 1)}" circle type="danger" size="mini" icon="el-icon-minus" style="margin-left: 2px;"></el-button>
              </li>
            </template>
          </transition-group>
        </draggable>
      </ul>
    </el-form-item>
  </el-form>
</template>

<script>
import LabDrag from "../../../mixins/LabDrag";
import LabDesign from "../../../mixins/LabDesign";
export default {
  name: "DragAttribute",
  mixins: [LabDrag,LabDesign],
  methods: {
    createElement(render, label) {
      this.labDesign.activity.elements.push(this.$LabRender.create(render, label))
    }
  }
}
</script>
