<template>
  <el-card class="elcard">
      <div slot="header" class="clearfix">
        <el-button style="float: right; padding: 3px 0;margin-left:5px" type="text" @click="save">保存</el-button>
        <el-button style="float: right; padding: 3px 0;margin-left:5px" type="text" @click="yulan">预览</el-button>
        <el-button style="float: right; padding: 3px 0;margin-left:5px" type="text" @click="()=>this.$emit('downloadvue')">下载源码</el-button>
    </div>
    <div
      class="elcardzz"
      @dragover="dragover"
      @dragleave="dragleave"
      @drop="dropfun"
      @dragover.prevent
      :style="styleCard"
    ></div>
    <!-- <span>{{drag1}} {{drag2}} {{drag3}} {{startindex}} {{endindex}}</span> -->
    <div class="formscont">
      <div v-if="hxindex== -1 && drag3 !== '2'" class="hxdiv"></div>
      <el-form  :model="from" :label-position="formsetting.labelPosition" :label-width="formsetting.labelwidth+'px'" :size="formsetting.formsize">
        <el-row :gutter="10">
          <el-col v-for="(item,index) in fromData" :key="index" :span="item.col">
            <div
              class="formitem"
              :style="{'background': startindex == index ? 'rgba(255,0,0,0.2)' : endindex == index ? 'rgba(0,0,255,0.2)' :''}"
            >
              <div
                class="formitem2"
                :style="{...styleitem,border: actid === item.id ? '1px solid #17B3A3' : ''}"
                draggable
                @dragstart="dragstart(index,item)"
                @dragend="dragend(index)"
                @dragover="dragover2(index)"
                @dragleave="dragleave2(index)"
                @drop="dropfun2(index)"
                @dragover.prevent
                @click="clickitem(item)"
              >
                <!-- <div class="formitemzz"></div> -->
                <div class="hxdiv" v-if="hxindex==index && drag3 !== '2'"></div>


                <el-form-item 
                  v-if='["TableForm","Divider","p"].indexOf(item.type) == -1 '
                  :prop='item.key'
                  :rules='item.rules'
                  v-model="from[item.key]"
                >
                  <div class="label" style="margin-bottom: 10px;">
                    <div class="left">
                      <span class="index">{{index + 1}} </span>
                      <input type="text" v-model="item.name">
                    </div>
                    <div class="right" @click="delForm(index,fromData)">
                      <svg t="1608620105251" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3006" width="200" height="200"><path d="M873.525261 147.003104C896.999411 147.003104 916.365619 150.892595 931.628186 158.670153 946.885024 166.447711 959.013978 176.17215 968.013619 187.837775 977.014694 199.504823 983.271888 212.144601 986.792365 225.757107 990.312845 239.371037 992.075232 252.005118 992.075232 263.676439 992.075232 269.118309 991.880365 273.395182 991.48777 276.511332 991.096605 279.621786 990.900307 282.342008 990.900307 284.677697L990.900307 291.676217 913.432605 291.676217 913.432605 904.193424C913.432605 919.748541 910.303293 934.72543 904.040365 949.112701 897.783171 963.504243 888.78353 976.144022 877.045741 987.032032 865.309382 997.918621 851.02544 1006.67033 834.201082 1013.284317 817.376723 1019.894032 798.010515 1023.198176 776.098157 1023.198176L252.592963 1023.198176C232.248127 1023.198176 213.078217 1020.087722 195.0775 1013.86824 177.083948 1007.643059 161.629381 998.892774 148.718097 987.615955 135.805381 976.339139 125.629381 962.725206 118.197262 946.781286 110.763709 930.837363 107.048366 912.750019 107.048366 892.527798L107.048366 291.676217 34.270336 291.676217C33.492306 290.89718 33.099709 288.950298 33.099709 285.841268 32.315948 281.951778 31.924784 269.895922 31.924784 249.673702 31.924784 239.566153 34.270336 228.283638 38.965739 215.837552 43.661142 203.39289 50.702097 191.920957 60.094336 181.423177 69.486575 170.9197 81.61553 162.169413 96.481202 155.170893 111.352605 148.172373 128.954993 144.673113 149.30556 144.673113L253.767888 144.673113 253.767888 73.501552C253.767888 53.279332 260.808844 35.971027 274.896485 21.585179 288.984127 7.192211 306.195351 0 326.545917 0L693.933619 0C721.326576 0 740.300186 7.192211 750.86735 21.585179 761.428784 35.971027 766.711651 53.279332 766.711651 73.501552L766.711651 145.83526C783.144845 146.614298 800.747232 147.003104 819.531709 147.003104L873.525261 147.003104 873.525261 147.003104ZM326.545917 147.003104 693.933619 147.003104 693.933619 73.501552 326.545917 73.501552 326.545917 147.003104ZM290.154754 885.52928C315.194993 885.52928 327.716544 869.585357 327.716544 837.69609L327.716544 296.344746 254.942814 296.344746 254.942814 837.69609C254.942814 854.030243 257.484665 866.086096 262.572665 873.863654 267.659232 881.641213 276.855172 885.52928 290.154754 885.52928L290.154754 885.52928ZM512.00359 884.361437C525.301741 884.361437 534.301382 880.667059 538.998218 873.278307 543.693619 865.890982 546.039171 854.030243 546.039171 837.69609L546.039171 296.344746 473.266874 296.344746 473.266874 837.69609C473.266874 868.80632 486.178157 884.361437 512.00359 884.361437L512.00359 884.361437ZM732.670336 882.030019C746.759411 882.030019 756.144486 878.335645 760.841322 870.942621 765.536723 863.553869 767.882275 851.69313 767.882275 835.358976L767.882275 296.344746 693.933619 296.344746 693.933619 835.358976C693.933619 866.469206 706.846336 882.030019 732.670336 882.030019L732.670336 882.030019Z" p-id="3007" fill="#8a8a8a"></path></svg>
                    </div>
                  </div>
                  <FormItem :item='item' :form='from'/>
                  <div class="add-options" v-if="item.type === 'Radio' || item.type === 'Checkbox' || item.type === 'Select'">
                    <div class="option" @click="addOptions(item)">
                      <i class="el-icon-plus"></i>
                      <span>增加选项</span>
                    </div>
                    <div class="option" @click="addOtherOptions(item)">
                      <i class="el-icon-plus"></i>
                      <span>其他</span>
                    </div>
                  </div>
                </el-form-item>

                
                <el-divider v-if="item.type === 'Divider'" :content-position='item.contentposition'>{{item.text}}</el-divider>
                <p v-if="item.type === 'p'"  :style="{'text-align': item.contentposition,'font-size':item.fontsize+'px',color:item.textcolor}">{{item.text}}</p>
                <el-form-item v-if='item.type==="TableForm"' :label="item.name">
                  <div>
                    <tableForm
                      :com='com'
                      :data='item' 
                      :drag1='drag1'
                      :drag2='drag2'
                      :drag3='drag3' 
                      :startindex='startindex' 
                      @setdrag3='setdrag3'
                      @chonzhihxindex='chonzhihxindex'
                      @clickitem='clickitem'
                      />
                  </div>
                </el-form-item>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-form>
      <div v-if="hxindex== -2 && drag3 !== '2'" class="hxdiv"></div>
    </div>
    <!-- <el-button @click="sub">sub</el-button> -->
  </el-card>
</template>

<script>
import tableForm from './tableForm'
import FormItem from './formitem'
export default {
  name: "forms",
  components: {
    tableForm, FormItem
  },
  // 是否正在拖动组件
  props: {
    drag1: {
      type: String,
      default: () => {
        return "1";
      }
    },
    drag2: {
      type: String,
      default: () => {
        return "1";
      }
    },
    fromData: {
      type: Array,
      default: () => {
        return [{ name: "111" }];
      }
    },
    formsetting: {
      type: Object,
      default: () => {
        return {
          labelPosition: 'left',
          labelwidth: 80,
          formsize: 'small'
        }
      }
    },
    // 左侧正在被拖动的组件
    com: {
      type: Object
    },
    height: {
      type: Number,
      default: () => {
        return 600
      }
    }
  },
  data() {
    return {
      startindex: -1,
      endindex: -1,
      // 表单的值
      from: {},
      // 拖动到表格  1 没有  2 有
      drag3: '1',
      // -3 为没有 -2 为大的div的下面 -1 为大的div的上面  其他为 小组件
      hxindex: -3,
      // 被点击选中的id值
      actid: '0'
    };
  },
  created () {
    this.initfrom()
    console.log(111)
  },
  methods: {
    delForm (index, form) {
      console.log(index, form,'baioa')
      this.fromData.splice(index,1)
    },
    // Checkbox 需要提前初始化
    initfrom() {
      let obj = {}
      this.fromData.map(item => {
        if (item.type === 'Checkbox') {
          obj[item.key] = []
        }
      })
      this.from = obj
    },  
    addOptions (item) {
      console.log(item, '内容',item.type == 'CheckBox')
      if(item.type == 'Radio' || item.type == 'Checkbox' || item.type == 'Select'){
        item.option.push({
          label: '新选项',
          value: parseInt(Math.random() * 1000000)
        })
      }
    },
    addOtherOptions (item) {
      // 增加其他的选项 填空题
      if(item.type == 'Radio' || item.type == 'Checkbox'){
        item.option.push({
          label: '其他',
          value: parseInt(Math.random() * 1000000)
        })
      }
    },
    // 拖动到表格
    setdrag3(data){
      this.drag3 = data
    },
    // 重置数据
    centerreset () {
      this.startindex = -1 
      this.endindex = -1
      this.drag3 = '1'
      this.hxindex = -3
      this.actid = 0
    },
    chonzhihxindex () {
      this.hxindex = -3
    },
    // 大div 中滑动时
    dragover() {
      // 中间没有拖动时
      if (this.drag2 === "1") {
        this.$emit("setdrag", {type:'drag1',value: '3'});
        // 一个都没有时 在上面 否则在下面
        if (this.fromData.length === 0) {
          this.hxindex = -1;
        } else {
          this.hxindex = -2;
        }
      }
    },
    // 离开大div时 
    dragleave() {
      // 当进入到小div中时  或者在操作小div 时 不处理
      if (this.drag1 == "4" || this.drag2 != "1") {
        return;
      }
      this.$emit("setdrag", {type:'drag1',value: '2'});
      this.hxindex = -3;
    },
    // 在div 中放下时
    dropfun() {
      // 不是中间的拖动时 者添加到中间的表单中
      if (this.drag2 === "1") {
        this.$emit("addcom");
        this.hxindex = -3;
      }
      this.drag3 = '1'
    },
    // 在组件中的
    dragstart(index, data) {
      this.$emit("setdrag", { type:'drag2',value: '2' });
      this.$emit('setdelcom', data)
      this.startindex = index;
      console.log("开始拖动 小div", index);
    },
    dragend() {
      // 重置数据
      console.log('中间的end ------------')
      this.startindex = -1;
      this.endindex = -1;
      this.drag3 = '1'
      this.$emit("reset");
    },
    // 在组件中滑动
    dragover2(index) {
      // 处理 从左侧拖动到中间组件的逻辑
      if (this.drag2 === "1" && this.drag1 !== "1") {
        this.$emit("setdrag", { type:'drag1',value: '4' });
        this.hxindex = index;
        // todo 增加横线
      }
      // 中间拖动进入到 中间的其他组件
      if (this.drag1 === "1" && this.drag2 !== "1") {
        if (index !== this.startindex) {
          this.endindex = index;
          this.$emit("setdrag", { type:'drag2',value: '3' });
        } else {
          this.endindex = -1;
        }
      }
    },
    dragleave2(index) {
      this.endindex = -1;
    },
    dropfun2(index) {
      // 中间的进行拖动交换
      if (this.drag1 === "1") {
        this.$emit("setdrag", { type:'drag2',value: '1' });
        if (
          this.startindex !== this.endindex &&
          this.startindex != -1 &&
          this.endindex != -1
        ) {
          this.$emit("jiaohuan", this.startindex, this.endindex);
        }
      }
      // 从左侧进入到小div中放下  并且没有进入到表格中时 进行对应位置的添加
      if (this.drag1 === "4" && this.drag3 != '2') {
        this.$emit("addcom", index);
        this.hxindex = -3;
      }
      this.drag3 = '1'
    },
    // 选中中间的组件
    clickitem (data) {
      console.log('data..')
      console.log(data)
      this.actid = data.id
      this.$emit('setformcom', data)
    },
    sub() {
      alert(JSON.stringify(this.from));
    },
    // 预览
    yulan(){
      this.$emit('setdialogVisible', true)
    },
    // 保存
    save () {
      this.$emit('save')
    }
  },
  computed: {
    // 中间的大的div
    styleCard: function() {
      // drag1 是否正在拖动左侧的组件 1 没有动 2 已经拖动没有进入中间的界面  3拖动进入中间的页面 4 进入设计页面中的组件
      // drag2 是否正在拖动中间的组件 1 没有动  2 已经拖动没有进度其他组件  3 进入其他组件
      let sty = { background: "rgb(0,0,0,0)" };
      if (this.drag1 == "2") {
        // sty.background = 'rgb(0,0,0,0.1)'
      } else if (this.drag1 == "3") {
        // sty.background = 'rgb(0,0,0,0.5)'
        // sty["z-index"] = 10;
      }
      return sty;
    },
    styleitem: function() {
      let sty = { "z-index": 100 };
      // if (this.drag2 == '2') {
      // }
      return sty;
    }
  },
  watch: {
    // fromData 变化时初始化表单
    fromData () {
      this.initfrom()
    },  
    // fromData: {
    //   handler() {
    //   },
    //   deep: true
    // }
  }
};
</script>

<style scoped>
.elcard {
  position: relative;
  height: 100%;
  background-color: #F3F5F6;
}

.elcardzz {
  position: absolute;
  top: 58px;
  left: 0;
  right: 0;
  bottom: 0;
}

.formscont {
  min-height: 600px;
  height: 100%;
}
.formitem {
  position: relative;
  padding: 3px;
  overflow: hidden;
  border-radius: 3px;
  box-sizing: border-box;
}
.formitem2 {
  margin: 20px 0;
  background-color: #fff;
   border: 1px solid #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  position: relative;
  padding: 3px;
  overflow: hidden;
  border-radius: 3px;
  box-sizing: border-box;
  cursor: move;
}
.formitem2:hover {
  border: 1px solid #3FB1F5 !important;
  transition: 0.5s;
}
.formitemzz {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.formitem2 /deep/ .el-form-item__content {
  margin-left: 40px !important;
  margin-right: 20px !important;
}
.hxdiv {
  width: 100%;
  height: 2px;
  background: #17B3A3;
  border-radius: 2px;
}

.icons1 {
  position: absolute;
  top: 0;
  right: 0;
}
.label {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.label .left {
  min-width: 600px;
  display: flex;
  flex-direction: row;
  align-items: center;
  border: 1px dashed #fff;
}
.label .left .index{
 position: relative;
 left: -15px;
 font-size: 17px;
}
.label .right {
  margin-left: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
}
.label .left:hover {
  border: 1px dashed #444;
  background-color: #F3F5F6;
}
.label .left:hover input {
  background-color: #F3F5F6;
}
.label .left input {
    width: 100%;
    height: 30px;
    outline: none;
    border: none;
  }
  .label .left:hover  input {
    outline: none;
    border: none;
  }
  .add-options {
    width: 100%;
    display: flex;
    flex-direction: row;
  }
  .add-options .option {
    cursor: pointer;
    margin-right: 20px;
  }
</style>
