<template>
  <div class="widget-form-container">
    <div v-if="data.list.length == 0" class="form-empty">
      {{ $t("fm.description.containerEmpty") }}
    </div>
    <el-form
      :size="data.config.size"
      :label-position="data.config.labelPosition"
      :label-width="data.config.labelWidth + 'px'"
    >
      <draggable
        class=""
        v-model="data.list"
        v-bind="{
          group: 'people',
          ghostClass: 'ghost',
          animation: 200,
          handle: '.drag-widget',
        }"
        @end="handleMoveEnd"
        @add="handleWidgetAdd"
      >
        <transition-group name="fade" tag="div" class="widget-form-list">
          <template v-for="(element, index) in data.list">
            <template v-if="element.type == 'grid'">
              <el-row
                class="widget-col widget-view"
                v-if="element && element.key"
                :key="element.key"
                type="flex"
                :class="{ active: selectWidget.key == element.key }"
                :gutter="element.options.gutter ? element.options.gutter : 0"
                :justify="element.options.justify"
                :align="element.options.align"
                @click.native="handleSelectWidget(index)"
              >
                <el-col
                  v-for="(col, colIndex) in element.columns"
                  :key="colIndex"
                  :span="col.span ? col.span : 0"
                >
                  <draggable
                    v-model="col.list"
                    :no-transition-on-drag="true"
                    v-bind="{
                      group: 'people',
                      ghostClass: 'ghost',
                      animation: 200,
                      handle: '.drag-widget',
                    }"
                    @end="handleMoveEnd"
                    @add="handleWidgetColAdd($event, element, colIndex)"
                  >
                    <transition-group
                      name="fade"
                      tag="div"
                      class="widget-col-list"
                    >
                      <template v-for="(el, coli) in col.list">
                        <template v-if="el.type == 'proItem'">
                          <el-form-item label="项目信息" :key="coli">
                            <el-row
                              class="widget-col widget-view"
                              v-if="el && el.key"
                              :key="el.key"
                              type="flex"
                              :class="{ active: selectWidget.key == el.key }"
                              :gutter="
                                el.options.gutter ? el.options.gutter : 0
                              "
                              :justify="el.options.justify"
                              :align="el.options.align"
                              @click.native="handleSelectWidget(coli)"
                            >
                              <el-col
                                v-for="(linecol, linecolIndex) in el.columns"
                                :key="linecolIndex"
                                :span="linecol.span ? linecol.span : 0"
                              >
                                <draggable
                                  v-model="linecol.list"
                                  :no-transition-on-drag="true"
                                  v-bind="{
                                    group: 'people',
                                    ghostClass: 'ghost',
                                    animation: 200,
                                    handle: '.drag-widget',
                                  }"
                                  @end="handleMoveEnd"
                                  @add="
                                    handleWidgetColAdd($event, el, linecolIndex)
                                  "
                                >
                                  <transition-group
                                    name="fade"
                                    tag="div"
                                    class="widget-col-list"
                                  >
                                  
                                    <template v-for="(elem, linecoli) in linecol.list">
                                      <template
                                        v-if="elem.type == 'auditEdItem'"
                                      >
                                        <el-form-item
                                          label="被审计单位"
                                          :key="elem.key"
                                        >
                                          <el-row
                                            class="widget-col widget-view"
                                            v-if="elem && elem.key"
                                            :key="elem.key"
                                            type="flex"
                                            :class="{
                                              active:
                                                selectWidget.key == elem.key,
                                            }"
                                            :gutter="
                                              elem.options.gutter
                                                ? elem.options.gutter
                                                : 0
                                            "
                                            :justify="elem.options.justify"
                                            :align="elem.options.align"
                                            @click.native="
                                              handleSelectWidget(linecoli)
                                            "
                                          >
                                            <el-col
                                              v-for="(
                                                itemcol, itemcolIndex
                                              ) in elem.columns"
                                              :key="itemcolIndex"
                                              :span="
                                                itemcol.span ? itemcol.span : 0
                                              "
                                            >
                                              <draggable
                                                v-model="itemcol.list"
                                                :no-transition-on-drag="true"
                                                v-bind="{
                                                  group: 'people',
                                                  ghostClass: 'ghost',
                                                  animation: 200,
                                                  handle: '.drag-widget',
                                                }"
                                                @end="handleMoveEnd"
                                                @add="
                                                  handleWidgetListAdd(
                                                    $event,
                                                    itemcol,
                                                    itemcolIndex
                                                  )
                                                "
                                              >
                                                <transition-group
                                                  name="fade"
                                                  tag="div"
                                                  class="widget-col-list"
                                                >
                                                  <template
                                                    v-for="(
                                                      elemItem, itemcoli
                                                    ) in itemcol.list"
                                                  >
                                                    {{ linecol }}
                                                    <widget-form-item
                                                      :key="elemItem.key"
                                                      v-if="elemItem.key"
                                                      :element="elemItem"
                                                      :select.sync="selectWidget"
                                                      :index="itemcoli"
                                                      :data="itemcol"
                                                    >
                                                    </widget-form-item>
                                                  </template>
                                                </transition-group>
                                              </draggable>
                                            </el-col>
                                            <div
                                              class=" widget-view-action widget-col-action "
                                              v-if="selectWidget.key == el.key"
                                            >
                                              <i class="iconfont icon-trash"
                                                @click.stop=" handleWidgetDelete(index) "
                                              ></i>
                                            </div>

                                            <div
                                              class=" widget-view-drag widget-col-drag "
                                              v-if="selectWidget.key == el.key"
                                            >
                                              <i class=" iconfont icon-drag drag-widget " ></i>
                                            </div>
                                          </el-row>
                                        </el-form-item>
                                      </template>
                                      <widget-form-item
                                        v-else
                                        :key="elem.key"
                                        :element="elem"
                                        :select.sync="selectWidget"
                                        :index="linecoli"
                                        :data="linecol"
                                      >
                                      </widget-form-item>
                                    </template>
                                  </transition-group>
                                </draggable>
                              </el-col>
                              <div
                                class="widget-view-action widget-col-action"
                                v-if="selectWidget.key == el.key"
                              >
                                <i
                                  class="iconfont icon-trash"
                                  @click.stop="handleWidgetDelete(coli)"
                                ></i>
                              </div>

                              <div
                                class="widget-view-drag widget-col-drag"
                                v-if="selectWidget.key == el.key"
                              >
                                <i class="iconfont icon-drag drag-widget"></i>
                              </div>
                            </el-row>
                          </el-form-item>
                        </template>
                        <template v-else-if="el.type == 'quesItem'">
                          <el-form-item label="问题信息" :key="coli">
                            <el-row
                              class="widget-col widget-view"
                              v-if="el && el.key"
                              :key="el.key"
                              type="flex"
                              :class="{ active: selectWidget.key == el.key }"
                              :gutter="
                                el.options.gutter ? el.options.gutter : 0
                              "
                              :justify="el.options.justify"
                              :align="el.options.align"
                              @click.native="handleSelectWidget(coli)"
                            >
                              <el-col
                                v-for="(linecol, linecolIndex) in el.columns"
                                :key="linecolIndex"
                                :span="linecol.span ? linecol.span : 0"
                              >
                                <draggable
                                  v-model="linecol.list"
                                  :no-transition-on-drag="true"
                                  v-bind="{
                                    group: 'people',
                                    ghostClass: 'ghost',
                                    animation: 200,
                                    handle: '.drag-widget',
                                  }"
                                  @end="handleMoveEnd"
                                  @add="
                                    handleWidgetColAdd($event, el, linecolIndex)
                                  "
                                >
                                  <transition-group
                                    name="fade"
                                    tag="div"
                                    class="widget-col-list"
                                  >
                                    <template v-for="(elem, linecoli) in linecol.list">
                                      <template
                                        v-if="elem.type == 'contrItem'"
                                      >
                                        <el-form-item
                                          label="合同信息"
                                          :key="elem.key"
                                        >
                                          <el-row
                                            class="widget-col widget-view"
                                            v-if="elem && elem.key"
                                            :key="elem.key"
                                            type="flex"
                                            :class="{
                                              active:
                                                selectWidget.key == elem.key,
                                            }"
                                            :gutter="
                                              elem.options.gutter
                                                ? elem.options.gutter
                                                : 0
                                            "
                                            :justify="elem.options.justify"
                                            :align="elem.options.align"
                                            @click.native="
                                              handleSelectWidget(linecoli)
                                            "
                                          >
                                            <el-col
                                              v-for="(
                                                itemcol, itemcolIndex
                                              ) in elem.columns"
                                              :key="itemcolIndex"
                                              :span="
                                                itemcol.span ? itemcol.span : 0
                                              "
                                            >
                                              <draggable
                                                v-model="itemcol.list"
                                                :no-transition-on-drag="true"
                                                v-bind="{
                                                  group: 'people',
                                                  ghostClass: 'ghost',
                                                  animation: 200,
                                                  handle: '.drag-widget',
                                                }"
                                                @end="handleMoveEnd"
                                                @add="
                                                  handleWidgetListAdd(
                                                    $event,
                                                    itemcol,
                                                    itemcolIndex
                                                  )
                                                "
                                              >
                                                <transition-group
                                                  name="fade"
                                                  tag="div"
                                                  class="widget-col-list"
                                                >
                                                  <template
                                                    v-for="(
                                                      elemItem, itemcoli
                                                    ) in itemcol.list"
                                                  >
                                                    {{ linecol }}
                                                    <widget-form-item
                                                      :key="elemItem.key"
                                                      v-if="elemItem.key"
                                                      :element="elemItem"
                                                      :select.sync="
                                                        selectWidget
                                                      "
                                                      :index="itemcoli"
                                                      :data="itemcol"
                                                    >
                                                    </widget-form-item>
                                                  </template>
                                                </transition-group>
                                              </draggable>
                                            </el-col>
                                            <div
                                              class="
                                                widget-view-action
                                                widget-col-action
                                              "
                                              v-if="selectWidget.key == el.key"
                                            >
                                              <i
                                                class="iconfont icon-trash"
                                                @click.stop="
                                                  handleWidgetDelete(index)
                                                "
                                              ></i>
                                            </div>

                                            <div
                                              class="
                                                widget-view-drag widget-col-drag
                                              "
                                              v-if="selectWidget.key == el.key"
                                            >
                                              <i
                                                class="
                                                  iconfont
                                                  icon-drag
                                                  drag-widget
                                                "
                                              ></i>
                                            </div>
                                          </el-row>
                                        </el-form-item>
                                      </template>

                                      <widget-form-item
                                        v-else
                                        :key="elem.key"
                                        :element="elem"
                                        :select.sync="selectWidget"
                                        :index="linecoli"
                                        :data="linecol"
                                      >
                                      </widget-form-item>
                                    </template>
                                  </transition-group>
                                </draggable>
                              </el-col>
                              <div
                                class="widget-view-action widget-col-action"
                                v-if="selectWidget.key == el.key"
                              >
                                <i
                                  class="iconfont icon-trash"
                                  @click.stop="handleWidgetDelete(coli)"
                                ></i>
                              </div>

                              <div
                                class="widget-view-drag widget-col-drag"
                                v-if="selectWidget.key == el.key"
                              >
                                <i class="iconfont icon-drag drag-widget"></i>
                              </div>
                            </el-row>
                          </el-form-item>
                        </template>
                        <template v-else-if="el.type == 'rectifyItem'">
                          <el-form-item label="整改信息" :key="el.key">
                            <el-row
                              class="widget-col widget-view"
                              v-if="el && el.key"
                              :key="el.key"
                              type="flex"
                              :class="{ active: selectWidget.key == el.key }"
                              :gutter="
                                el.options.gutter ? el.options.gutter : 0
                              "
                              :justify="el.options.justify"
                              :align="el.options.align"
                              @click.native="handleSelectWidget(coli)"
                            >
                              <el-col
                                v-for="(linecol, linecolIndex) in el.columns"
                                :key="linecolIndex"
                                :span="linecol.span ? linecol.span : 0"
                              >
                                <draggable
                                  v-model="linecol.list"
                                  :no-transition-on-drag="true"
                                  v-bind="{
                                    group: 'people',
                                    ghostClass: 'ghost',
                                    animation: 200,
                                    handle: '.drag-widget',
                                  }"
                                  @end="handleMoveEnd"
                                  @add="
                                    handleWidgetColAdd($event, el, linecolIndex)
                                  "
                                >
                                  <transition-group
                                    name="fade"
                                    tag="div"
                                    class="widget-col-list"
                                  >
                                    <template v-for="(elem, linecoli) in linecol.list">
                                      <widget-form-item
                                        :key="elem.key"
                                        v-if="elem.key"
                                        :element="elem"
                                        :select.sync="selectWidget"
                                        :index="linecoli"
                                        :data="linecol"
                                      >
                                      </widget-form-item>
                                    </template>
                                  </transition-group>
                                </draggable>
                              </el-col>
                              <div
                                class="widget-view-action widget-col-action"
                                v-if="selectWidget.key == el.key"
                              >
                                <i
                                  class="iconfont icon-trash"
                                  @click.stop="handleWidgetDelete(coli)"
                                ></i>
                              </div>

                              <div
                                class="widget-view-drag widget-col-drag"
                                v-if="selectWidget.key == el.key"
                              >
                                <i class="iconfont icon-drag drag-widget"></i>
                              </div>
                            </el-row>
                          </el-form-item>
                        </template>
                        <template v-else-if="el.type == 'riskmattersItem'">
                          <el-form-item label="风险事项信息" :key="el.key">
                            <el-row
                              class="widget-col widget-view"
                              v-if="el && el.key"
                              :key="el.key"
                              type="flex"
                              :class="{ active: selectWidget.key == el.key }"
                              :gutter="
                                el.options.gutter ? el.options.gutter : 0
                              "
                              :justify="el.options.justify"
                              :align="el.options.align"
                              @click.native="handleSelectWidget(coli)"
                            >
                              <el-col
                                v-for="(linecol, linecolIndex) in el.columns"
                                :key="linecolIndex"
                                :span="linecol.span ? linecol.span : 0"
                              >
                                <draggable
                                  v-model="linecol.list"
                                  :no-transition-on-drag="true"
                                  v-bind="{
                                    group: 'people',
                                    ghostClass: 'ghost',
                                    animation: 200,
                                    handle: '.drag-widget',
                                  }"
                                  @end="handleMoveEnd"
                                  @add="
                                    handleWidgetColAdd($event, el, linecolIndex)
                                  "
                                >
                                  <transition-group
                                    name="fade"
                                    tag="div"
                                    class="widget-col-list"
                                  >
                                    <template v-for="(elem, linecoli) in linecol.list">
                                      
                                      <widget-form-item
                                        :key="elem.key"
                                        v-if="elem.key"
                                        :element="elem"
                                        :select.sync="selectWidget"
                                        :index="linecoli"
                                        :data="linecol"
                                      >
                                      </widget-form-item>
                                    </template>
                                  </transition-group>
                                </draggable>
                              </el-col>
                              <div
                                class="widget-view-action widget-col-action"
                                v-if="selectWidget.key == el.key"
                              >
                                <i
                                  class="iconfont icon-trash"
                                  @click.stop="handleWidgetDelete(coli)"
                                ></i>
                              </div>

                              <div
                                class="widget-view-drag widget-col-drag"
                                v-if="selectWidget.key == el.key"
                              >
                                <i class="iconfont icon-drag drag-widget"></i>
                              </div>
                            </el-row>
                          </el-form-item>
                        </template>
                        <template v-else-if="el.type == 'suggestItem'">
                          <el-form-item label="建议信息" :key="el.key">
                            <el-row
                              class="widget-col widget-view"
                              v-if="el && el.key"
                              :key="el.key"
                              type="flex"
                              :class="{ active: selectWidget.key == el.key }"
                              :gutter="
                                el.options.gutter ? el.options.gutter : 0
                              "
                              :justify="el.options.justify"
                              :align="el.options.align"
                              @click.native="handleSelectWidget(coli)"
                            >
                              <el-col
                                v-for="(linecol, linecolIndex) in el.columns"
                                :key="linecolIndex"
                                :span="linecol.span ? linecol.span : 0"
                              >
                                <draggable
                                  v-model="linecol.list"
                                  :no-transition-on-drag="true"
                                  v-bind="{
                                    group: 'people',
                                    ghostClass: 'ghost',
                                    animation: 200,
                                    handle: '.drag-widget',
                                  }"
                                  @end="handleMoveEnd"
                                  @add="
                                    handleWidgetColAdd($event, el, linecolIndex)
                                  "
                                >
                                  <transition-group
                                    name="fade"
                                    tag="div"
                                    class="widget-col-list"
                                  >
                                    <template v-for="(elem, linecoli) in linecol.list">
                                      <widget-form-item
                                        :key="elem.key"
                                        v-if="elem.key"
                                        :element="elem"
                                        :select.sync="selectWidget"
                                        :index="linecoli"
                                        :data="linecol"
                                      >
                                      </widget-form-item>
                                    </template>
                                  </transition-group>
                                </draggable>
                              </el-col>
                              <div
                                class="widget-view-action widget-col-action"
                                v-if="selectWidget.key == el.key"
                              >
                                <i
                                  class="iconfont icon-trash"
                                  @click.stop="handleWidgetDelete(coli)"
                                ></i>
                              </div>

                              <div
                                class="widget-view-drag widget-col-drag"
                                v-if="selectWidget.key == el.key"
                              >
                                <i class="iconfont icon-drag drag-widget"></i>
                              </div>
                            </el-row>
                          </el-form-item>
                        </template>
                        <template v-else-if="el.type == 'accountabilityItem'">
                          <el-form-item label="责任追究信息" :key="el.key">
                            <el-row
                              class="widget-col widget-view"
                              v-if="el && el.key"
                              :key="el.key"
                              type="flex"
                              :class="{ active: selectWidget.key == el.key }"
                              :gutter="
                                el.options.gutter ? el.options.gutter : 0
                              "
                              :justify="el.options.justify"
                              :align="el.options.align"
                              @click.native="handleSelectWidget(coli)"
                            >
                              <el-col
                                v-for="(linecol, linecolIndex) in el.columns"
                                :key="linecolIndex"
                                :span="linecol.span ? linecol.span : 0"
                              >
                                <draggable
                                  v-model="linecol.list"
                                  :no-transition-on-drag="true"
                                  v-bind="{
                                    group: 'people',
                                    ghostClass: 'ghost',
                                    animation: 200,
                                    handle: '.drag-widget',
                                  }"
                                  @end="handleMoveEnd"
                                  @add="
                                    handleWidgetColAdd($event, el, linecolIndex)
                                  "
                                >
                                  <transition-group
                                    name="fade"
                                    tag="div"
                                    class="widget-col-list"
                                  >
                                  
                                    <template v-for="(elem, linecoli) in linecol.list">
                                      
                                      <widget-form-item
                                        
                                        :key="elem.key"
                                        :element="elem"
                                        :select.sync="selectWidget"
                                        :index="linecoli"
                                        :data="linecol"
                                      >
                                      </widget-form-item>
                                    </template>
                                  </transition-group>
                                </draggable>
                              </el-col>
                              <div
                                class="widget-view-action widget-col-action"
                                v-if="selectWidget.key == el.key"
                              >
                                <i
                                  class="iconfont icon-trash"
                                  @click.stop="handleWidgetDelete(coli)"
                                ></i>
                              </div>

                              <div
                                class="widget-view-drag widget-col-drag"
                                v-if="selectWidget.key == el.key"
                              >
                                <i class="iconfont icon-drag drag-widget"></i>
                              </div>
                            </el-row>
                          </el-form-item>
                        </template>
                        <template v-else-if="el.type == 'countItem'">
                          <el-form-item label="统计信息" :key="el.key">
                            <el-row
                              class="widget-col widget-view"
                              v-if="el && el.key"
                              :key="el.key"
                              type="flex"
                              :class="{ active: selectWidget.key == el.key }"
                              :gutter="
                                el.options.gutter ? el.options.gutter : 0
                              "
                              :justify="el.options.justify"
                              :align="el.options.align"
                              @click.native="handleSelectWidget(coli)"
                            >
                              <el-col
                                v-for="(linecol, linecolIndex) in el.columns"
                                :key="linecolIndex"
                                :span="linecol.span ? linecol.span : 0"
                              >
                                <draggable
                                  v-model="linecol.list"
                                  :no-transition-on-drag="true"
                                  v-bind="{
                                    group: 'people',
                                    ghostClass: 'ghost',
                                    animation: 200,
                                    handle: '.drag-widget',
                                  }"
                                  @end="handleMoveEnd"
                                  @add="
                                    handleWidgetColAdd($event, el, linecolIndex)
                                  "
                                >
                                  <transition-group
                                    name="fade"
                                    tag="div"
                                    class="widget-col-list"
                                  >
                                  
                                    <template v-for="(elem, linecoli) in linecol.list">
                                      <template
                                        v-if="elem.type == 'amountProblemsItem'"
                                      >
                                        <el-form-item
                                          label="金额类问题整改方式（元）"
                                          :key="elem.key"
                                        >
                                          <el-row
                                            class="widget-col widget-view"
                                            v-if="elem && elem.key"
                                            :key="elem.key"
                                            type="flex"
                                            :class="{
                                              active:
                                                selectWidget.key == elem.key,
                                            }"
                                            :gutter="
                                              elem.options.gutter
                                                ? elem.options.gutter
                                                : 0
                                            "
                                            :justify="elem.options.justify"
                                            :align="elem.options.align"
                                            @click.native="
                                              handleSelectWidget(linecoli)
                                            "
                                          >
                                            <el-col
                                              v-for="(
                                                itemcol, itemcolIndex
                                              ) in elem.columns"
                                              :key="itemcolIndex"
                                              :span="
                                                itemcol.span ? itemcol.span : 0
                                              "
                                            >
                                              <draggable
                                                v-model="itemcol.list"
                                                :no-transition-on-drag="true"
                                                v-bind="{
                                                  group: 'people',
                                                  ghostClass: 'ghost',
                                                  animation: 200,
                                                  handle: '.drag-widget',
                                                }"
                                                @end="handleMoveEnd"
                                                @add="
                                                  handleWidgetListAdd(
                                                    $event,
                                                    itemcol,
                                                    itemcolIndex
                                                  )
                                                "
                                              >
                                                <transition-group
                                                  name="fade"
                                                  tag="div"
                                                  class="widget-col-list"
                                                >
                                                  <template
                                                    v-for="(
                                                      elemItem, itemcoli
                                                    ) in itemcol.list"
                                                  >
                                                    <widget-form-item
                                                      :key="elemItem.key"
                                                      v-if="elemItem.key"
                                                      :element="elemItem"
                                                      :select.sync="
                                                        selectWidget
                                                      "
                                                      :index="itemcoli"
                                                      :data="itemcol"
                                                    >
                                                    </widget-form-item>
                                                  </template>
                                                </transition-group>
                                              </draggable>
                                            </el-col>
                                            <div
                                              class="
                                                widget-view-action
                                                widget-col-action
                                              "
                                              v-if="selectWidget.key == el.key"
                                            >
                                              <i
                                                class="iconfont icon-trash"
                                                @click.stop="
                                                  handleWidgetDelete(index)
                                                "
                                              ></i>
                                            </div>

                                            <div
                                              class="
                                                widget-view-drag widget-col-drag
                                              "
                                              v-if="selectWidget.key == el.key"
                                            >
                                              <i
                                                class="
                                                  iconfont
                                                  icon-drag
                                                  drag-widget
                                                "
                                              ></i>
                                            </div>
                                          </el-row>
                                        </el-form-item>
                                      </template>
                                      <template
                                        v-else-if="elem.type == 'notAmountProblemsItem'"
                                      >
                                        <el-form-item
                                          label="非金额类问题整改方式"
                                          :key="elem.key"
                                        >
                                          <el-row
                                            class="widget-col widget-view"
                                            v-if="elem && elem.key"
                                            :key="elem.key"
                                            type="flex"
                                            :class="{
                                              active:
                                                selectWidget.key == elem.key,
                                            }"
                                            :gutter="
                                              elem.options.gutter
                                                ? elem.options.gutter
                                                : 0
                                            "
                                            :justify="elem.options.justify"
                                            :align="elem.options.align"
                                            @click.native="
                                              handleSelectWidget(linecoli)
                                            "
                                          >
                                            <el-col
                                              v-for="(
                                                itemcol, itemcolIndex
                                              ) in elem.columns"
                                              :key="itemcolIndex"
                                              :span="
                                                itemcol.span ? itemcol.span : 0
                                              "
                                            >
                                              <draggable
                                                v-model="itemcol.list"
                                                :no-transition-on-drag="true"
                                                v-bind="{
                                                  group: 'people',
                                                  ghostClass: 'ghost',
                                                  animation: 200,
                                                  handle: '.drag-widget',
                                                }"
                                                @end="handleMoveEnd"
                                                @add="
                                                  handleWidgetListAdd(
                                                    $event,
                                                    itemcol,
                                                    itemcolIndex
                                                  )
                                                "
                                              >
                                                <transition-group
                                                  name="fade"
                                                  tag="div"
                                                  class="widget-col-list"
                                                >
                                                  <template
                                                    v-for="(
                                                      elemItem, itemcoli
                                                    ) in itemcol.list"
                                                  >
                                                    <widget-form-item
                                                      :key="elemItem.key"
                                                      v-if="elemItem.key"
                                                      :element="elemItem"
                                                      :select.sync="
                                                        selectWidget
                                                      "
                                                      :index="itemcoli"
                                                      :data="itemcol"
                                                    >
                                                    </widget-form-item>
                                                  </template>
                                                </transition-group>
                                              </draggable>
                                            </el-col>
                                            <div
                                              class="
                                                widget-view-action
                                                widget-col-action
                                              "
                                              v-if="selectWidget.key == el.key"
                                            >
                                              <i
                                                class="iconfont icon-trash"
                                                @click.stop="
                                                  handleWidgetDelete(index)
                                                "
                                              ></i>
                                            </div>

                                            <div
                                              class="
                                                widget-view-drag widget-col-drag
                                              "
                                              v-if="selectWidget.key == el.key"
                                            >
                                              <i
                                                class="
                                                  iconfont
                                                  icon-drag
                                                  drag-widget
                                                "
                                              ></i>
                                            </div>
                                          </el-row>
                                        </el-form-item>
                                      </template>
                                      <widget-form-item
                                        v-else
                                        :key="elem.key"
                                        :element="elem"
                                        :select.sync="selectWidget"
                                        :index="linecoli"
                                        :data="linecol"
                                      >
                                      </widget-form-item>
                                    </template>
                                  </transition-group>
                                </draggable>
                              </el-col>
                              <div
                                class="widget-view-action widget-col-action"
                                v-if="selectWidget.key == el.key"
                              >
                                <i
                                  class="iconfont icon-trash"
                                  @click.stop="handleWidgetDelete(coli)"
                                ></i>
                              </div>

                              <div
                                class="widget-view-drag widget-col-drag"
                                v-if="selectWidget.key == el.key"
                              >
                                <i class="iconfont icon-drag drag-widget"></i>
                              </div>
                            </el-row>
                          </el-form-item>
                        </template>
                        <template v-else-if="el.type == 'hanldeDeptItem'">
                          <el-form-item label="办理部门" :key="el.key">
                            <el-row
                              class="widget-col widget-view"
                              v-if="el && el.key"
                              :key="el.key"
                              type="flex"
                              :class="{ active: selectWidget.key == el.key }"
                              :gutter="
                                el.options.gutter ? el.options.gutter : 0
                              "
                              :justify="el.options.justify"
                              :align="el.options.align"
                              @click.native="handleSelectWidget(coli)"
                            >
                              <el-col
                                v-for="(linecol, linecolIndex) in el.columns"
                                :key="linecolIndex"
                                :span="linecol.span ? linecol.span : 0"
                              >
                                <draggable
                                  v-model="linecol.list"
                                  :no-transition-on-drag="true"
                                  v-bind="{
                                    group: 'people',
                                    ghostClass: 'ghost',
                                    animation: 200,
                                    handle: '.drag-widget',
                                  }"
                                  @end="handleMoveEnd"
                                  @add="
                                    handleWidgetColAdd($event, el, linecolIndex)
                                  "
                                >
                                  <transition-group
                                    name="fade"
                                    tag="div"
                                    class="widget-col-list"
                                  >
                                    <template v-for="(elem, linecoli) in linecol.list">
                                      <widget-form-item
                                        :key="elem.key"
                                        v-if="elem.key"
                                        :element="elem"
                                        :select.sync="selectWidget"
                                        :index="linecoli"
                                        :data="linecol"
                                      >
                                      </widget-form-item>
                                    </template>
                                  </transition-group>
                                </draggable>
                              </el-col>
                              <div
                                class="widget-view-action widget-col-action"
                                v-if="selectWidget.key == el.key"
                              >
                                <i
                                  class="iconfont icon-trash"
                                  @click.stop="handleWidgetDelete(coli)"
                                ></i>
                              </div>

                              <div
                                class="widget-view-drag widget-col-drag"
                                v-if="selectWidget.key == el.key"
                              >
                                <i class="iconfont icon-drag drag-widget"></i>
                              </div>
                            </el-row>
                          </el-form-item>
                        </template>
                        <template v-else-if="el.type == 'ChiefEngineerItem'">
                          <el-form-item label="局总师" :key="el.key">
                            <el-row
                              class="widget-col widget-view"
                              v-if="el && el.key"
                              :key="el.key"
                              type="flex"
                              :class="{ active: selectWidget.key == el.key }"
                              :gutter="
                                el.options.gutter ? el.options.gutter : 0
                              "
                              :justify="el.options.justify"
                              :align="el.options.align"
                              @click.native="handleSelectWidget(coli)"
                            >
                              <el-col
                                v-for="(linecol, linecolIndex) in el.columns"
                                :key="linecolIndex"
                                :span="linecol.span ? linecol.span : 0"
                              >
                                <draggable
                                  v-model="linecol.list"
                                  :no-transition-on-drag="true"
                                  v-bind="{
                                    group: 'people',
                                    ghostClass: 'ghost',
                                    animation: 200,
                                    handle: '.drag-widget',
                                  }"
                                  @end="handleMoveEnd"
                                  @add="
                                    handleWidgetColAdd($event, el, linecolIndex)
                                  "
                                >
                                  <transition-group
                                    name="fade"
                                    tag="div"
                                    class="widget-col-list"
                                  >
                                    <template v-for="(elem, linecoli) in linecol.list">
                                      <widget-form-item
                                        :key="elem.key"
                                        v-if="elem.key"
                                        :element="elem"
                                        :select.sync="selectWidget"
                                        :index="linecoli"
                                        :data="linecol"
                                      >
                                      </widget-form-item>
                                    </template>
                                  </transition-group>
                                </draggable>
                              </el-col>
                              <div
                                class="widget-view-action widget-col-action"
                                v-if="selectWidget.key == el.key"
                              >
                                <i
                                  class="iconfont icon-trash"
                                  @click.stop="handleWidgetDelete(coli)"
                                ></i>
                              </div>

                              <div
                                class="widget-view-drag widget-col-drag"
                                v-if="selectWidget.key == el.key"
                              >
                                <i class="iconfont icon-drag drag-widget"></i>
                              </div>
                            </el-row>
                          </el-form-item>
                        </template>
                        <template v-else-if="el.type == 'BureauLeaderItem'">
                          <el-form-item label="局领导" :key="el.key">
                            <el-row
                              class="widget-col widget-view"
                              v-if="el && el.key"
                              :key="el.key"
                              type="flex"
                              :class="{ active: selectWidget.key == el.key }"
                              :gutter="
                                el.options.gutter ? el.options.gutter : 0
                              "
                              :justify="el.options.justify"
                              :align="el.options.align"
                              @click.native="handleSelectWidget(coli)"
                            >
                              <el-col
                                v-for="(linecol, linecolIndex) in el.columns"
                                :key="linecolIndex"
                                :span="linecol.span ? linecol.span : 0"
                              >
                                <draggable
                                  v-model="linecol.list"
                                  :no-transition-on-drag="true"
                                  v-bind="{
                                    group: 'people',
                                    ghostClass: 'ghost',
                                    animation: 200,
                                    handle: '.drag-widget',
                                  }"
                                  @end="handleMoveEnd"
                                  @add="
                                    handleWidgetColAdd($event, el, linecolIndex)
                                  "
                                >
                                  <transition-group
                                    name="fade"
                                    tag="div"
                                    class="widget-col-list"
                                  >
                                    <template v-for="(elem, linecoli) in linecol.list">
                                      <widget-form-item
                                        :key="elem.key"
                                        v-if="elem.key"
                                        :element="elem"
                                        :select.sync="selectWidget"
                                        :index="linecoli"
                                        :data="linecol"
                                      >
                                      </widget-form-item>
                                    </template>
                                  </transition-group>
                                </draggable>
                              </el-col>
                              <div
                                class="widget-view-action widget-col-action"
                                v-if="selectWidget.key == el.key"
                              >
                                <i
                                  class="iconfont icon-trash"
                                  @click.stop="handleWidgetDelete(coli)"
                                ></i>
                              </div>

                              <div
                                class="widget-view-drag widget-col-drag"
                                v-if="selectWidget.key == el.key"
                              >
                                <i class="iconfont icon-drag drag-widget"></i>
                              </div>
                            </el-row>
                          </el-form-item>
                        </template>
                        <template v-else-if="el.type == 'HandleCSItem'">
                          <el-form-item label="办理处室" :key="el.key">
                            <el-row
                              class="widget-col widget-view"
                              v-if="el && el.key"
                              :key="el.key"
                              type="flex"
                              :class="{ active: selectWidget.key == el.key }"
                              :gutter="
                                el.options.gutter ? el.options.gutter : 0
                              "
                              :justify="el.options.justify"
                              :align="el.options.align"
                              @click.native="handleSelectWidget(coli)"
                            >
                              <el-col
                                v-for="(linecol, linecolIndex) in el.columns"
                                :key="linecolIndex"
                                :span="linecol.span ? linecol.span : 0"
                              >
                                <draggable
                                  v-model="linecol.list"
                                  :no-transition-on-drag="true"
                                  v-bind="{
                                    group: 'people',
                                    ghostClass: 'ghost',
                                    animation: 200,
                                    handle: '.drag-widget',
                                  }"
                                  @end="handleMoveEnd"
                                  @add="
                                    handleWidgetColAdd($event, el, linecolIndex)
                                  "
                                >
                                  <transition-group
                                    name="fade"
                                    tag="div"
                                    class="widget-col-list"
                                  >
                                    <template v-for="(elem, linecoli) in linecol.list">
                                      <widget-form-item
                                        :key="elem.key"
                                        v-if="elem.key"
                                        :element="elem"
                                        :select.sync="selectWidget"
                                        :index="linecoli"
                                        :data="linecol"
                                      >
                                      </widget-form-item>
                                    </template>
                                  </transition-group>
                                </draggable>
                              </el-col>
                              <div
                                class="widget-view-action widget-col-action"
                                v-if="selectWidget.key == el.key"
                              >
                                <i
                                  class="iconfont icon-trash"
                                  @click.stop="handleWidgetDelete(coli)"
                                ></i>
                              </div>

                              <div
                                class="widget-view-drag widget-col-drag"
                                v-if="selectWidget.key == el.key"
                              >
                                <i class="iconfont icon-drag drag-widget"></i>
                              </div>
                            </el-row>
                          </el-form-item>
                        </template>
                        
                        <template v-else-if="el.type == 'leadershipItem'">
                          <el-form-item label="单位领导" :key="el.key">
                            <el-row
                              class="widget-col widget-view"
                              v-if="el && el.key"
                              :key="el.key"
                              type="flex"
                              :class="{ active: selectWidget.key == el.key }"
                              :gutter="
                                el.options.gutter ? el.options.gutter : 0
                              "
                              :justify="el.options.justify"
                              :align="el.options.align"
                              @click.native="handleSelectWidget(coli)"
                            >
                              <el-col
                                v-for="(linecol, linecolIndex) in el.columns"
                                :key="linecolIndex"
                                :span="linecol.span ? linecol.span : 0"
                              >
                                <draggable
                                  v-model="linecol.list"
                                  :no-transition-on-drag="true"
                                  v-bind="{
                                    group: 'people',
                                    ghostClass: 'ghost',
                                    animation: 200,
                                    handle: '.drag-widget',
                                  }"
                                  @end="handleMoveEnd"
                                  @add="
                                    handleWidgetColAdd($event, el, linecolIndex)
                                  "
                                >
                                  <transition-group
                                    name="fade"
                                    tag="div"
                                    class="widget-col-list"
                                  >
                                    <template v-for="(elem, linecoli) in linecol.list">
                                      <widget-form-item
                                        :key="elem.key"
                                        v-if="elem.key"
                                        :element="elem"
                                        :select.sync="selectWidget"
                                        :index="linecoli"
                                        :data="linecol"
                                      >
                                      </widget-form-item>
                                    </template>
                                  </transition-group>
                                </draggable>
                              </el-col>
                              <div
                                class="widget-view-action widget-col-action"
                                v-if="selectWidget.key == el.key"
                              >
                                <i
                                  class="iconfont icon-trash"
                                  @click.stop="handleWidgetDelete(coli)"
                                ></i>
                              </div>

                              <div
                                class="widget-view-drag widget-col-drag"
                                v-if="selectWidget.key == el.key"
                              >
                                <i class="iconfont icon-drag drag-widget"></i>
                              </div>
                            </el-row>
                          </el-form-item>
                        </template>
                        <template v-else-if="el.type == 'inline'">
                          <el-row
                            class="widget-col widget-view"
                            v-if="el && el.key"
                            :key="el.key"
                            type="flex"
                            :class="{ active: selectWidget.key == el.key }"
                            :gutter="el.options.gutter ? el.options.gutter : 0"
                            :justify="el.options.justify"
                            :align="el.options.align"
                            @click.native="handleSelectWidget(index)"
                          >
                            <el-col
                              v-for="(linecol, linecolIndex) in el.columns"
                              :key="linecolIndex"
                              :span="linecol.span ? linecol.span : 0"
                            >
                              <draggable
                                v-model="linecol.list"
                                :no-transition-on-drag="true"
                                v-bind="{
                                  group: 'people',
                                  ghostClass: 'ghost',
                                  animation: 200,
                                  handle: '.drag-widget',
                                }"
                                @end="handleMoveEnd"
                                @add="
                                  handleWidgetColAdd($event, el, linecolIndex)
                                "
                              >
                                <transition-group
                                  name="fade"
                                  tag="div"
                                  class="widget-col-list"
                                >
                                  <template v-for="(elem, i) in linecol.list">
                                    {{ linecol }}
                                    <widget-form-item
                                      :key="elem.key"
                                      v-if="elem.key"
                                      :element="elem"
                                      :select.sync="selectWidget"
                                      :index="i"
                                      :data="linecol"
                                    >
                                    </widget-form-item>
                                  </template>
                                </transition-group>
                              </draggable>
                            </el-col>
                            <div
                              class="widget-view-action widget-col-action"
                              v-if="selectWidget.key == el.key"
                            >
                              <i
                                class="iconfont icon-trash"
                                @click.stop="handleWidgetDelete(index)"
                              ></i>
                            </div>

                            <div
                              class="widget-view-drag widget-col-drag"
                              v-if="selectWidget.key == el.key"
                            >
                              <i class="iconfont icon-drag drag-widget"></i>
                            </div>
                          </el-row>
                        </template>
                        <template v-else>
                          <widget-form-item
                            :key="el.key"
                            v-if="el.key"
                            :element="el"
                            :select.sync="selectWidget"
                            :index="coli"
                            :data="col"
                          >
                          </widget-form-item>
                        </template>
                      </template>
                    </transition-group>
                  </draggable>
                </el-col>
                <div
                  class="widget-view-action widget-col-action"
                  v-if="selectWidget.key == element.key"
                >
                  <i
                    class="iconfont icon-trash"
                    @click.stop="handleWidgetDelete(index)"
                  ></i>
                </div>

                <div
                  class="widget-view-drag widget-col-drag"
                  v-if="selectWidget.key == element.key"
                >
                  <i class="iconfont icon-drag drag-widget"></i>
                </div>
              </el-row>
            </template>
            <template v-else>
              <widget-form-item
                v-if="element && element.key"
                :key="element.key"
                :element="element"
                :select.sync="selectWidget"
                :index="index"
                :data="data"
              ></widget-form-item>
            </template>
          </template>
        </transition-group>
      </draggable>
    </el-form>
  </div>
</template>

<script>
import Draggable from "vuedraggable";
import WidgetFormItem from "./WidgetFormItem";

import fm from "../lang/zh-CN";

export default {
  components: {
    Draggable,
    WidgetFormItem,
  },
  props: ["data", "select"],
  data() {
    return {
      selectWidget: this.select,
    };
  },
  mounted() {
    document.body.ondrop = function (event) {
      let isFirefox = navigator.userAgent.toLowerCase().indexOf("firefox") > -1;
      if (isFirefox) {
        event.preventDefault();
        event.stopPropagation();
      }
    };
  },
  methods: {
    handleMoveEnd({ newIndex, oldIndex }) {
      console.log("index", newIndex, oldIndex);
    },
    handleSelectWidget(index) {
      console.log(index, "#####");
      this.selectWidget = this.data.list[index];
    },
    handleWidgetAdd(evt) {
      console.log("add", evt);
      console.log("end", evt);
      const newIndex = evt.newIndex;
      const to = evt.to;
      console.log(to);

      //为拖拽到容器的元素添加唯一 key
      const key =
        Date.parse(new Date()) + "_" + Math.ceil(Math.random() * 99999);
      this.$set(this.data.list, newIndex, {
        ...this.data.list[newIndex],
        options: {
          ...this.data.list[newIndex].options,
          remoteFunc: "func_" + key,
        },
        key,
        // 绑定键值
        model: this.data.list[newIndex].type + "_" + key,
        rules: [],
      });

      if (
        this.data.list[newIndex].type === "radio" ||
        this.data.list[newIndex].type === "checkbox" ||
        this.data.list[newIndex].type === "select"
      ) {
        this.$set(this.data.list, newIndex, {
          ...this.data.list[newIndex],
          options: {
            ...this.data.list[newIndex].options,
            options: this.data.list[newIndex].options.options.map((item) => ({
              ...item,
            })),
          },
        });
      }

      if (
        this.data.list[newIndex].type === "grid" ||
        this.data.list[newIndex].type === "inline" ||
        this.data.list[newIndex].type === "proItem"
      ) {
        console.log(
          this.data.list,
          this.data.list[newIndex].type,
          "************"
        );
        this.$set(this.data.list, newIndex, {
          ...this.data.list[newIndex],
          columns: this.data.list[newIndex].columns.map((item) => ({
            ...item,
          })),
        });
      }

      this.selectWidget = this.data.list[newIndex];
    },
    handleWidgetColAdd($event, row, colIndex) {
      console.log("coladd", $event, row, colIndex);
      const newIndex = $event.newIndex;
      const oldIndex = $event.oldIndex;
      const item = $event.item;

      console.log(row.columns[colIndex].list[newIndex], "99999999");

      // 防止布局元素的嵌套拖拽
      if (item.className.indexOf("data-grid") >= 0) {
        // 如果是列表中拖拽的元素需要还原到原来位置
        item.tagName === "DIV" &&
          this.data.list.splice(
            oldIndex,
            0,
            row.columns[colIndex].list[newIndex]
          );

        row.columns[colIndex].list.splice(newIndex, 1);

        return false;
      }

      console.log("from", item);

      const key =
        Date.parse(new Date()) + "_" + Math.ceil(Math.random() * 99999);
      let flag = row.columns[colIndex].list[newIndex].type;
      console.log(flag);
      if (fm.fm.Specialfield.hasOwnProperty(flag)) {
        this.$set(row.columns[colIndex].list, newIndex, {
          ...row.columns[colIndex].list[newIndex],
          options: {
            ...row.columns[colIndex].list[newIndex].options,
            remoteFunc: "func_" + key,
          },
          key,
          // 绑定键值
          model: fm.fm.Specialfield[flag],
          rules: [],
        });
      } else {
        this.$set(row.columns[colIndex].list, newIndex, {
          ...row.columns[colIndex].list[newIndex],
          options: {
            ...row.columns[colIndex].list[newIndex].options,
            remoteFunc: "func_" + key,
          },
          key,
          // 绑定键值
          model: row.columns[colIndex].list[newIndex].type + "_" + key,
          rules: [],
        });
      }

      //布局内部添加行
      if (
        row.columns[colIndex].list[newIndex].type === "radio" ||
        row.columns[colIndex].list[newIndex].type === "checkbox" ||
        row.columns[colIndex].list[newIndex].type === "select"
      ) {
        this.$set(row.columns[colIndex].list, newIndex, {
          ...row.columns[colIndex].list[newIndex],
          options: {
            ...row.columns[colIndex].list[newIndex].options,
            options: row.columns[colIndex].list[newIndex].options.options.map(
              (item) => ({
                ...item,
              })
            ),
          },
        });
      }
      if (row.columns[colIndex].list[newIndex].type === "inline") {
        this.$set(row.columns[colIndex].list, newIndex, {
          ...row.columns[colIndex].list[newIndex],
          columns: row.columns[colIndex].list[newIndex].columns.map((item) => ({
            ...item,
          })),
        });
      }

      if (row.columns[colIndex].list[newIndex].type === "auditEdItem") {
        this.$set(row.columns[colIndex].list, newIndex, {
          ...row.columns[colIndex].list[newIndex],
          columns: row.columns[colIndex].list[newIndex].columns.map((item) => ({
            ...item,
          })),
        });
      }

      if (row.columns[colIndex].list[newIndex].type === "proItem") {
        this.$set(row.columns[colIndex].list, newIndex, {
          ...row.columns[colIndex].list[newIndex],
          columns: row.columns[colIndex].list[newIndex].columns.map((item) => ({
            ...item,
          })),
        });
      }

      this.selectWidget = row.columns[colIndex].list[newIndex];
    },
    handleWidgetListAdd($event, row, colIndex) {
      console.log($event);
      const newIndex = $event.newIndex;
      const oldIndex = $event.oldIndex;
      const item = $event.item;

      console.log(row.list[newIndex], "99999999");

      // 防止布局元素的嵌套拖拽
      if (item.className.indexOf("data-grid") >= 0) {
        // 如果是列表中拖拽的元素需要还原到原来位置
        item.tagName === "DIV" &&
          this.data.list.splice(
            oldIndex,
            0,
            row.columns[colIndex].list[newIndex]
          );

        row.columns[colIndex].list.splice(newIndex, 1);

        return false;
      }

      console.log("from", item);

      const key =
        Date.parse(new Date()) + "_" + Math.ceil(Math.random() * 99999);
      let flag = row.list[newIndex].type;
      console.log(flag);
      if (fm.fm.Specialfield.hasOwnProperty(flag)) {
        this.$set(row.list, newIndex, {
          ...row.list[newIndex],
          options: {
            ...row.list[newIndex].options,
            remoteFunc: "func_" + key,
          },
          key,
          // 绑定键值
          model: fm.fm.Specialfield[flag],
          rules: [],
        });
      } else {
        this.$set(row.list, newIndex, {
          ...row.list[newIndex],
          options: {
            ...row.list[newIndex].options,
            remoteFunc: "func_" + key,
          },
          key,
          // 绑定键值
          model: row.list[newIndex].type + "_" + key,
          rules: [],
        });
      }

      //布局内部添加行
      if (
        row.list[newIndex].type === "radio" ||
        row.list[newIndex].type === "checkbox" ||
        row.list[newIndex].type === "select"
      ) {
        this.$set(row.list, newIndex, {
          ...row.list[newIndex],
          options: {
            ...row.list[newIndex].options,
            options: row.list[newIndex].options.options.map(
              (item) => ({
                ...item,
              })
            ),
          },
        });
      }

      if (row.list[newIndex].type === "auditEdItem") {
        this.$set(row.list, newIndex, {
          ...row.list[newIndex],
          columns: row.list[newIndex].columns.map((item) => ({
            ...item,
          })),
        });
      }

      if (row.list[newIndex].type === "contrItem") {
        this.$set(row.list, newIndex, {
          ...row.list[newIndex],
          columns: row.list[newIndex].columns.map((item) => ({
            ...item,
          })),
        });
      }

      this.selectWidget = row.list[newIndex];
    },
    handleWidgetDelete(index) {
      if (this.data.list.length - 1 === index) {
        if (index === 0) {
          this.selectWidget = {};
        } else {
          this.selectWidget = this.data.list[index - 1];
        }
      } else {
        this.selectWidget = this.data.list[index + 1];
      }

      this.$nextTick(() => {
        this.data.list.splice(index, 1);
      });
    },
  },
  watch: {
    select(val) {
      this.selectWidget = val;
    },
    selectWidget: {
      handler(val) {
        this.$emit("update:select", val);
      },
      deep: true,
    },
  },
};
</script>
