<!--
/**
 * author: vformAdmin
 * email: vdpadmin@163.com
 * website: https://www.vform666.com
 * date: 2021.08.18
 * remark: 如果要分发VForm源码，需在本文件顶部保留此文件头信息！！
 */
-->

<template>
  <container-wrapper :designer="designer" :widget="widget" :parent-widget="parentWidget" :parent-list="parentList"
                     :index-of-parent-list="indexOfParentList" :class="widget.options.isFullscreen ? 'full-height':''">
    <div :key="widget.id" class="grid-container"
         :class="{'selected': selected}" @click.stop="selectWidget(widget)">
      <div class="h5-header">{{ widget.options.label }}</div>
      <div class="h5-search-box" v-if="widget.options.isQueryTable">
        <el-input
          placeholder="请选择" class="txt">
          <i slot="suffix" class="el-input__icon el-icon-search"></i>
          <el-button slot="append" class="btn">搜索</el-button>
        </el-input>
        <div class="icon-screen"><i class="iconfont icon-chaxuntiaojianshezhi"></i>筛选</div>
      </div>
      <div class="h5-list-box">
        <div class="item">
          <template v-if="columns.length>0">
            <div class="t1" v-if="widget.options.isQueryTable">
              <template v-for="(column,columnIndex) in columns.filter((item,index)=>item.isMainFiled)">
                <b>{{ column.title }}：xxxx</b>
              </template>
              <!--<div class="status">未审核</div>-->
            </div>
            <div class="t2">
              <template v-if="!widget.options.isQueryTable || columns.length>1">
                <template v-for="(column,columnIndex) in columns">
                  <template v-if="(!widget.options.isQueryTable || !column.isMainFiled) && column.showForRow">
                    <dl>
                      <div>
                        <dt>{{ column.title }}：</dt>
                        <dd>xxxx</dd>
                      </div>
                    </dl>
                  </template>
                </template>
              </template>
              <!--              <div><p>产地：广东佛山</p></div>
                            <div><p>产地：广东佛山</p></div>
                            <div><p>产地：广东佛山</p></div>-->
            </div>
          </template>
        </div>
      </div>
      <div v-if="widget.options.isQueryTable" class="h5-oper-btns" title-width="92px" title-align="right"
           @click.stop="selectWidget(widget)">
        <div class="tit">操作按钮区域</div>
        <el-form label-position="top">
          <draggable
            :list="widget.buttons"
            v-bind="{ group: 'dragGroup', ghostClass: 'ghost', animation: 200 }"
            handle=".drag-handler"
            @add="evt => onContainerDragAdd(evt, widget.buttons)"
            @update="onContainerDragUpdate"
            :move="checkContainerMove"
          >
            <transition-group name="fade" tag="div" class="sub-form-table form-widget-list">
              <template v-for="(subWidget, swIdx) in widget.buttons">
                <div class="sub-form-table-column" :key="swIdx">
                  <template v-if="'container' === subWidget.category">
                    <component
                      :is="subWidget.type + '-widget'"
                      :widget="subWidget"
                      :designer="designer"
                      :key="subWidget.id"
                      :parent-list="widget.buttons"
                      :index-of-parent-list="swIdx"
                      :parent-widget="widget"
                    ></component>
                  </template>
                  <template v-else>
                    <component
                      :is="subWidget.type + '-widget'"
                      :field="subWidget"
                      :designer="designer"
                      :key="subWidget.id"
                      :parent-list="widget.buttons"
                      :index-of-parent-list="swIdx"
                      :parent-widget="widget"
                      :design-state="true"
                    ></component>
                  </template>
                </div>
              </template>
            </transition-group>
          </draggable>
        </el-form>
      </div>
      <div class="h5-oper-btns" title-width="92px" title-align="right"
           @click.stop="selectWidget(widget)">
        <div class="tit">行操作按钮区域</div>
        <el-form label-position="top">
          <draggable
            :list="widget.lineButtons"
            v-bind="{ group: 'dragGroup', ghostClass: 'ghost', animation: 200 }"
            handle=".drag-handler"
            @add="evt => onContainerDragAdd(evt, widget.lineButtons,{rowFlag:true})"
            @update="onContainerDragUpdate"
            :move="checkContainerMove"
          >
            <transition-group name="fade" tag="div" class="sub-form-table form-widget-list">
              <template v-for="(subWidget, swIdx) in widget.lineButtons">
                <div class="sub-form-table-column" :key="swIdx">
                  <template v-if="'container' === subWidget.category">
                    <component
                      :is="subWidget.type + '-widget'"
                      :widget="subWidget"
                      :designer="designer"
                      :key="subWidget.id"
                      :parent-list="widget.lineButtons"
                      :index-of-parent-list="swIdx"
                      :parent-widget="widget"
                    ></component>
                  </template>
                  <template v-else>
                    <component
                      :is="subWidget.type + '-widget'"
                      :field="subWidget"
                      :designer="designer"
                      :key="subWidget.id"
                      :parent-list="widget.lineButtons"
                      :index-of-parent-list="swIdx"
                      :parent-widget="widget"
                      :design-state="true"
                    ></component>
                  </template>
                </div>
              </template>
            </transition-group>
          </draggable>
        </el-form>
      </div>
      <div v-if="widget.options.isQueryTable" class="h5-oper-btns" title-width="92px" title-align="right"
           @click.stop="selectWidget(widget)">
        <div class="tit">筛选字段区域</div>
        <draggable
          :list="widget.widgetList"
          v-bind="{ group: 'dragGroup', ghostClass: 'ghost', animation: 200 }"
          handle=".drag-handler"
          @add="evt => onContainerDragAdd(evt, widget.widgetList)"
          @update="onContainerDragUpdate"
          :move="checkContainerMove"
        >
          <transition-group name="fade" tag="div" class="form-widget-list">
            <template v-for="(subWidget, swIdx) in widget.widgetList">
              <template v-if="'container' === subWidget.category">
                <component
                  :is="subWidget.type + '-widget'"
                  :widget="subWidget"
                  :designer="designer"
                  :key="subWidget.id"
                  :parent-list="widget.widgetList"
                  :index-of-parent-list="swIdx"
                  :parent-widget="widget"
                ></component>
              </template>
              <template v-else>
                <component
                  :is="subWidget.type + '-widget'"
                  :field="subWidget"
                  :designer="designer"
                  :key="subWidget.id"
                  :parent-list="widget.widgetList"
                  :index-of-parent-list="swIdx"
                  :parent-widget="widget"
                  :design-state="true"
                ></component>
              </template>
            </template>
          </transition-group>
        </draggable>
        <!-- <vxe-form-item title="机构名称:" field="saleOrgName">
          <template v-slot>
            <el-input v-model="formData.saleOrgName" size="small" :disabled="true"></el-input>
          </template>
        </vxe-form-item>
        <vxe-form-item title="登录名:" field="loginAccount">
          <template v-slot>
            <el-input v-model="formData.loginAccount" size="small" clearable></el-input>
          </template>
        </vxe-form-item>
        <vxe-form-item title="手机号:" field="mobile">
          <template v-slot>
            <el-input v-model="formData.mobile" size="small" clearable></el-input>
          </template>
        </vxe-form-item>
        <vxe-form-item title="是否启用:" field="enabled">
          <template v-slot>
            <el-select v-model="formData.enabled" clearable>
              <el-option value="true" label="启用"></el-option>
              <el-option value="false" label="禁用"></el-option>
            </el-select>
          </template>
        </vxe-form-item> -->
      </div>

    </div>

  </container-wrapper>
</template>

<script>
import i18n from "../../../../../components/xform/utils/i18n"
import containerMixin from "../../../../../components/xform/form-designer/form-widget/container-widget/containerMixin"
import ContainerWrapper from "../../../../../components/xform/form-designer/form-widget/container-widget/container-wrapper"
import refMixinDesign from "../../../../../components/xform/form-designer/refMixinDesign"
import Draggable from 'vuedraggable'
import FieldComponents from "../../../../../components/xform/form-designer/form-widget/field-widget";

export default {
  name: "list-h5-widget",
  componentName: 'ContainerWidget',
  mixins: [i18n, containerMixin, refMixinDesign],
  inject: ['refList'],
  components: {
    ContainerWrapper,
    Draggable,
    ...FieldComponents,
  },
  props: {
    widget: Object,
    parentWidget: Object,
    parentList: Array,
    indexOfParentList: Number,
    designer: Object,
  },
  computed: {
    selected() {
      return this.widget.id === this.designer.selectedId
    },

    customClass() {
      return this.widget.options.customClass || ''
    },
    columns() {
      let tableColumns = this.widget.options.tableColumns;
      let newColumns = [];
      let firstColumn = tableColumns.find(column => {
        return !!column.prop && !!column.showForRow;
      });
      let mainFiled = firstColumn?.prop;

      tableColumns.forEach(t => {
        let col = {
          fixed: !!t.fixed && t.fixed,
          field: t.prop,
          title: t.label,
          witdh: t.width,
          sortable: t.sortable,
          align: t.align ? t.align : 'center',
          // formatter: this.formatterValue,
          isMainFiled: mainFiled == t.prop,
          showForRow: t.showForRow,
          visible: t.show
        };
        newColumns.push(col);
      });
      return newColumns;
    }

  },
  watch: {
    //
  },
  created() {
    this.initRefList()
  },
  mounted() {
    //
  },
  methods: {
    checkContainerMove(evt) {
      return true;
    }
  }
}
</script>

<style lang="scss" scoped>
.grid-container {
  min-height: 50px;
  //line-height: 48px;
  //padding: 6px;
  outline: 1px dashed #336699;

  > div {
    height: 100%;
  }

  .form-widget-list {
    min-height: 36px;
    border: 1px dashed #336699;
    height: 100%;
  }

}

.grid-container.selected, .grid-cell.selected {
  outline: 2px solid $--color-primary !important;
}

.grid-cell {
  min-height: 38px;
  //margin: 6px 0;  /* 设置了margin，栅格列的offset、push、pull会失效！！ */
  padding: 3px;
  outline: 1px dashed #336699;
  position: relative;

  > div {
    height: 100%;
  }

  .form-widget-list {
    min-height: 50px;
    height: 100%
  }

  .grid-col-action {
    position: absolute;
    bottom: 0;
    right: -2px;
    height: 28px;
    line-height: 28px;
    background: $--color-primary;
    z-index: 999;

    i {
      font-size: 14px;
      color: #fff;
      margin: 0 5px;
      cursor: pointer;
    }
  }

  .grid-col-handler {
    position: absolute;
    top: -2px;
    left: -2px;
    height: 22px;
    line-height: 22px;
    background: $--color-primary;
    z-index: 9;

    i {
      font-size: 14px;
      font-style: normal;
      color: #fff;
      margin: 4px;
      cursor: default;
    }
  }
}

</style>
