<style>
  .registrationAdd {}

  .reEdit_header {
    padding: 18px;
    background: #fff;
    color: #606266;
    margin-bottom: 10px;
  }

  .Myall-components {
    max-height: 725px;
    overflow-y: auto;
    background: #fff;
    padding: 20px;
  }

  .reEdit_Content {
    margin-bottom: 10px;
    min-width: 1280px;
    height: 725px;
  }

  .Myall-components .component-group {
    border: 1px solid #eeeeee;
    width: 300px;
    margin-bottom: 20px;
  }

  .Myall-components .component-group-name {
    height: 35px;
    line-height: 35px;
    background: #f7f7f7;
    padding: 0 20px;
    border-bottom: 1px solid #eeeeee;
  }

  .Myall-components .Mycomponent-list {
    margin-right: -2px;
    margin-top: -2px;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }

  .Myall-components .Mycomponent-list .Mycomponent-item {
    width: 100px;
    height: 100px;
    border: 0 solid #eeeeee;
    border-width: 0 1px 1px 0;
    text-align: center;
    padding: 15px 0 0;
    cursor: pointer;
  }

  .template_right {
    padding-left: 2px;
    position: relative;
    overflow-y: auto;
  }

  .template_Mobile {
    overflow-y: auto;
    padding: 0px 25px;
    width: 435px;
    height: 705px;
    margin-left: 6px;
  }

  .mobile-framework-header {
    height: 60px;
    line-height: 60px;
    background: #333;
    color: #fff;
    text-align: center;
    background: url("../../assets/img/sallCenter/head.png") no-repeat;
  }

  .mobile-framework-body {
    background-color: rgb(245, 247, 249);
    min-height: 645px;
    border: 1px solid #e2e2e2;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: left center;
  }

  .mobile-framework {
    width: 375px;
  }

  .tpEdit_header {
    padding: 18px;
    background: #fff;
    color: #606266;
    margin-bottom: 10px;
  }

  .tpEdit_Content {
    margin-bottom: 10px;
    min-width: 1280px;
    height: 725px;
  }

  .Myall-components {
    max-height: 725px;
    overflow-y: auto;
    background: #fff;
    padding: 20px;
  }

  .Myall-components .component-group {
    border: 1px solid #eeeeee;
    width: 300px;
    margin-bottom: 20px;
  }

  .Myall-components .component-group-name {
    height: 35px;
    line-height: 35px;
    background: #f7f7f7;
    padding: 0 20px;
    border-bottom: 1px solid #eeeeee;
  }

  .Myall-components .Mycomponent-list {
    margin-right: -2px;
    margin-top: -2px;
    flex-wrap: wrap;
  }

  .Myall-components .Mycomponent-list .Mycomponent-item {
    width: 100px;
    height: 100px;
    border: 0 solid #eeeeee;
    border-width: 0 1px 1px 0;
    text-align: center;
    padding: 15px 0 0;
    cursor: pointer;
  }

  .Mycomponent-item:nth-child(3n) {
    border-right: 0 !important;
  }

  .template_right {
    padding-left: 2px;
    position: relative;
    overflow-y: auto;
  }

  .template_Mobile {
    overflow-y: auto;
    padding: 0px 25px;
    width: 435px;
    height: 705px;
    margin-left: 6px;
  }

  .mobile-framework {
    width: 375px;
  }

  .mobile-framework-header {
    height: 60px;
    line-height: 60px;
    background: #333;
    color: #fff;
    text-align: center;
    background: url("../../assets/img/sallCenter/head.png") no-repeat;
  }

  .mobile-framework-body {
    background-color: rgb(245, 247, 249);
    min-height: 645px;
    border: 1px solid #e2e2e2;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: left center;
  }

  .registrationAdd .diy-component-preview {
    cursor: pointer;
    position: relative;
    zoom: 0.8;
    -moz-transform: scale(0.8);
    -moz-transform-origin: top left;
    font-size: 28px;
  }

  .diy-component-edit {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 465px;
    right: 0;
    background: #fff;
    padding: 20px;
    overflow: auto;
    min-width: 650px;
    padding-right: 20%;
  }

  .diy-component-options {
    position: relative;
  }

  .active .diy-component-preview {
    border: 2px dashed #409eff;
    left: -2px;
    right: -2px;
    width: calc(100% + 4px);
  }

  .diy-search {
    padding: 24px;
    cursor: pointer;
    background: rgb(242, 242, 242);
  }

  .diy-component-options .el-button {
    height: 25px;
    line-height: 25px;
    width: 25px;
    padding: 0;
    text-align: center;
    border: none;
    border-radius: 0;
    position: absolute;
    margin-left: 0 !important;
  }

  .diy-search>div {
    height: 60px;
    line-height: 60px;
    padding: 24px;
    font-size: 28px;
  }

  .diy-component-edit .el-color-picker {
    vertical-align: middle;
  }

  .tpEdit_btmMenu {
    height: 54px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
  }

  .bgMsg_Div div {
    height: 50px;
    width: 50px;
    margin-bottom: 10px;
    cursor: pointer;
    background-color: #f5f7f9;
  }

  .bgMsg_Div .active {
    background-color: #e6f4ff;
    border: 2px dashed #5cb3fd;
  }

  .commonDisName {
    min-width: 80px;
  }

  .tradeRemark {
    color: #c0c4cc;
    line-height: 1.5;
    margin-top: 5px;
  }

</style>
<template>
  <div class="registrationAdd">
    <div class="reEdit_header">
      <span style="color: rgb(64, 158, 255); cursor: pointer"
        @click="CommonJump('CustomerForms', {})">自定义表单</span><span
        style="margin: 0 9px; color: #c0c4cc">/</span><span>新增</span>
    </div>
    <div flex="box:first" class="reEdit_Content">
      <div class="Myall-components">
        <el-form label-width="80px">
          <el-form-item label="表单名称">
            <el-input type="text" size="small" v-model="addMsg.FormName" maxlength="50"></el-input>
          </el-form-item>
 
        </el-form>
        <div class="component-group" v-for="(item, index) in allComponents" :key="index">
          <div class="component-group-name">{{ item.GroupName }}</div>
          <div flex class="Mycomponent-list">
            <div class="Mycomponent-item" v-for="(subItem, subIndex) in item.SubList" @click="addPlugin(subItem.Id)"
              :key="subIndex">
              <img :src="subItem.Icon" alt="" />
              <div>{{ subItem.Name }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="template_right">
        <div class="template_Mobile">
          <div class="mobile-framework" style="height: 705px">
            <div class="mobile-framework-header"></div>
            <div class="mobile-framework-body">
              <!-- 为空的样式开始 -->
              <div v-if="addMsg.FormData.length==0" flex="main:center cross:center" style="
                  height: 200px;
                  color: rgb(173, 177, 184);
                  text-align: center;
                ">
                <div>
                  <i class="el-icon-folder-opened" style="font-size: 32px; margin-bottom: 10px"></i>
                  <div>空空如也</div>
                  <div>请从左侧组件库添加组件</div>
                </div>
              </div>
              <!-- 为空的样式结束 -->
              <div v-for="(item,index) in addMsg.FormData" :key="index" @click="getItem(item)">
                <singletextbox v-if="item.CompKey=='SingleLineText'" :searchData="item" @getSord="getSord"
                  @comDelPlugin="comDelPlugin" :index="index" :dataLeng="addMsg.FormData.length"></singletextbox>
                <multilinetext v-if="item.CompKey=='MultiLineText'" :searchData="item" @getSord="getSord"
                  @comDelPlugin="comDelPlugin" :index="index" :dataLeng="addMsg.FormData.length"></multilinetext>
                <dropdown v-if="item.CompKey=='DorpDownList'" :searchData="item" @getSord="getSord"
                  @comDelPlugin="comDelPlugin" :index="index" :dataLeng="addMsg.FormData.length"></dropdown>
                <imgupform v-if="item.CompKey=='ImageUploadComp'" :searchData="item" @getSord="getSord"
                  @comDelPlugin="comDelPlugin" :index="index" :dataLeng="addMsg.FormData.length"></imgupform>
                <videoform v-if="item.CompKey=='VideoUploadComp'" :searchData="item" @getSord="getSord"
                  @comDelPlugin="comDelPlugin" :index="index" :dataLeng="addMsg.FormData.length"></videoform>
                <uploadform v-if="item.CompKey=='CommonUploadComp'" :searchData="item" @getSord="getSord"
                  @comDelPlugin="comDelPlugin" :index="index" :dataLeng="addMsg.FormData.length"></uploadform>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="tpEdit_btmMenu">
      <el-button type="primary" size="small" @click="SaveData()">保存</el-button>
    </div>
  </div>
</template>
<script>
  import singletextbox from '../tradePavilion/plugin/singletextbox'
  import multilinetext from '../tradePavilion/plugin/multilinetext'
  import dropdown from '../tradePavilion/plugin/dropdown'
  import imgupform from '../tradePavilion/plugin/imgupform'
  import videoform from '../tradePavilion/plugin/videoform'
  import uploadform from '../tradePavilion/plugin/uploadform'
  export default {
    data() {
      return {
        allComponents: [],
        addMsg: {
          Id: 0,
          FormName: '', //表单名称
          FormType: 1, //对应类型
          FormData: []
        },
        queryMsgId: 0, //参数
        CustomTypeList: [],
      };
    },
    created() {
      this.GetPlugInList();
      this.getCustomType();
      if (this.$route.query.Id) {
        this.queryMsgId = this.$route.query.Id;
        this.getCustomFormInfo(this.queryMsgId)
      }
    },
    components: {
      singletextbox,
      multilinetext,
      dropdown,
      imgupform,
      videoform,
      uploadform
    },
    mounted() {

    },
    methods: {
      //获取表单详情
      getCustomFormInfo(Id) {
        this.apipost("/api/CustomForm/GetCustomForm", {
          Id: Id
        }, (res) => {
          if (res.data.resultCode == 1) {
            var tempData = res.data.data;
            if (tempData) {
              this.addMsg.Id = tempData.Id;
              this.addMsg.FormName = tempData.FormName;
              this.addMsg.FormType = tempData.FormType;
              if (tempData.FormDataList && tempData.FormDataList.length > 0) {
                this.addMsg.FormData = tempData.FormDataList;
              }
            }
          } else {
            this.Info(res.data.message);
          }
        });
      },
      //获取左侧菜单
      GetPlugInList() {
        this.apipost("/api/Tenant/GetPlugInList", {
          QPlugTypeStr: "4"
        }, (res) => {
          if (res.data.resultCode == 1) {
            this.allComponents = res.data.data;
          } else {
            this.Info(res.data.message);
          }
        });
      },
      //点击组件
      addPlugin(Id) {
        switch (Id.toString()) {
          //单行文本框
          case "SingleLineText":
            let singleObj = {
              CompKey: "SingleLineText",
              isCked: false,
              CompData: {
                Name: "", //名字
                WordsLength: "", //字数
                TextValue: '', //绑定值
                IsRequire: false, //是否必填
                Remark: '', //提示信息
              },
            };
            this.addMsg.FormData.push(singleObj);
            break;
            //多行文本框
          case "MultiLineText":
            let multiObj = {
              CompKey: "MultiLineText",
              isCked: false,
              CompData: {
                Name: "", //名字
                WordsLength: "", //字数
                TextValue: '', //绑定值
                IsRequire: false, //是否必填
                Remark: '', //提示信息
              },
            };
            this.addMsg.FormData.push(multiObj);
            break;
            //下拉框组件
          case "DorpDownList":
            let dorpObj = {
              CompKey: "DorpDownList",
              isCked: false,
              CompData: {
                Name: "", //名字
                IsMultiple: false, //是否多选
                OptionValue: '', //选项值
                IsRequire: false, //是否必填
                OptionList: [],
                Remark: '', //提示信息
              },
            };
            this.addMsg.FormData.push(dorpObj);
            break;
            //图片上传组件
          case "ImageUploadComp":
            let imgObj = {
              CompKey: "ImageUploadComp",
              isCked: false,
              CompData: {
                Name: "", //名字
                FileCount: '', //上传文件数量
                FileType: '',
                FileSizeLimit: '', //上传文件大小
                Remark: '', //提示信息
                FileList: [], //文件列表
              },
            };
            this.addMsg.FormData.push(imgObj);
            break;
            //视频上传组件
          case "VideoUploadComp":
            let videoObj = {
              CompKey: "VideoUploadComp",
              isCked: false,
              CompData: {
                Name: "", //名字
                FileCount: '', //上传文件数量
                FileType: '',
                FileSizeLimit: '', //上传文件大小
                Remark: '', //提示信息
                FileList: [], //文件列表
              },
            };
            this.addMsg.FormData.push(videoObj);
            break;
            //文件上传组件
          case "CommonUploadComp":
            let uploadObj = {
              CompKey: "CommonUploadComp",
              isCked: false,
              CompData: {
                Name: "", //名字
                FileType: '', //文件类型
                FileCount: '', //上传文件数量
                FileSizeLimit: '', //上传文件大小
                Remark: '', //提示信息
                FileList: [], //文件列表
              },
            };
            this.addMsg.FormData.push(uploadObj);
            break;
        }
      },
      //获取对应类型
      getCustomType() {
        this.apipost("/api/CustomForm/GetCustomType", {}, (res) => {
          if (res.data.resultCode == 1) {
            this.CustomTypeList = res.data.data;
          } else {
            this.Info(res.data.message);
          }
        });
      },
      getItem(item) {
        this.addMsg.FormData.forEach((x) => {
          x.isCked = false;
        });
        item.isCked = true;
      },
      //给子组件调用 重新排序上移下移
      getSord(index, IsUp) {
        var currentItem = this.addMsg.FormData[index];
        if (IsUp == 0) {
          if (index > 0) {
            var upItem = this.addMsg.FormData[index - 1];
            this.$set(this.addMsg.FormData, index - 1, currentItem);
            this.$set(this.addMsg.FormData, index, upItem);
          }
        } else {
          if (index != this.addMsg.FormData.length - 1) {
            var downItem = this.addMsg.FormData[index + 1];
            this.$set(this.addMsg.FormData, index + 1, currentItem);
            this.$set(this.addMsg.FormData, index, downItem);
          }
        }
      },
      //删除组件事件
      comDelPlugin(index) {
        this.addMsg.FormData.splice(index, 1);
      },
      SaveData() {
        for (let i = 0; i < this.addMsg.FormData.length; i++) {
          if (this.addMsg.FormData[i].CompData.Name == '') {
            this.Error(`请输入第${i+1}个组件的名称`);
            return
          }
        }
        this.apipost("/api/CustomForm/SetCustomForm", this.addMsg, (res) => {
          if (res.data.resultCode == 1) {
            var tempData = res.data.data;
            if (tempData) {
              this.queryMsgId = tempData.Id;
              this.getCustomFormInfo(this.queryMsgId);
            }
            this.Success(res.data.message);
          } else {
            this.Info(res.data.message);
          }
        });
      }
    },
  };

</script>
