<template>
  <div>
    <div class="clearfix screen-btns">
      <div class="fl">
        <slot name="buttonLeft"></slot>
      </div>
      <div class="fr">
        <vxe-button status="warning" icon="iconfont icon-shaixuan" class="button-sty orgn"
                    @click="openAdvancedSearchDialog" v-if="form2Fields.length>0">
          {{ $t2('高级筛选', 'components.advancedSearchDialog.title') }}
        </vxe-button>
        <slot name="buttonRight"></slot>
        <a class="a-link" @click="openTableColumnsDialog" style="margin-left: 12px;">
          <el-tooltip :enterable="false" effect="dark"
                      :content="$t2('查询条件设置', 'components.table.setQueryCondition')" placement="top"
                      popper-class="tooltip-skin">
            <el-button type="success" icon="iconfont icon-chaxuntiaojianshezhi" class="button-sty icon"></el-button>
          </el-tooltip>
        </a>
      </div>
    </div>
    <vxe-form ref="searchForm" class="screen-box" :data="formData" title-width="92px" title-align="right"
              v-if="form1Fields.length>0" @submit="searchEvent">
      <template v-for="(form1Field,index) in form1Fields">
        <template v-if="!!form1Field.slot">
          <template v-if="form1Field.formItem===false">
            <vxe-form-item :key="form1Field.field + index">
              <template v-slot>
                <slot :name="form1Field.slot" v-bind="{slotFormData:formData,searchColumn:form1Field}"></slot>
              </template>
            </vxe-form-item>
          </template>
          <template v-else>
            <slot :name="form1Field.slot" v-bind="{slotFormData:formData,searchColumn:form1Field}"></slot>
          </template>
        </template>
        <template v-else>
          <vxe-form-item :key="form1Field.field + index" :title="form1Field.title+ ':'" :field="form1Field.field">
            <template v-slot>
              <template v-if="form1Field.type =='input'">
                <el-input :key="form1Field.field" v-model="formData[form1Field.field]" size="small" clearable
                          :disabled="form1Field.disabled===true"></el-input>
              </template>
              <template v-else-if="form1Field.type =='number'">
                <base-input-numbuer :key="form1Field.field" v-model="formData[form1Field.field]"
                                    :disabled="form1Field.disabled===true"></base-input-numbuer>
              </template>
              <template v-else-if="form1Field.type =='select'">
                <el-select :key="form1Field.field" v-model="formData[form1Field.field]" size="mini" clearable
                           :multiple="!!form1Field.multiple"
                           :collapse-tags="!!form1Field.multiple" :disabled="form1Field.disabled===true">
                  <el-option v-for="(item,index1) in form1Field.itemOption" :value="item.value" :label="item.label"
                             :key="index1"></el-option>
                </el-select>
              </template>
              <template v-else-if="form1Field.type =='inputBatch'">
                <base-input-batch :key="form1Field.field" v-model="formData[form1Field.field]"
                                  :disabled="form1Field.disabled===true" @clear="formData[form1Field.field]=[]"/>
              </template>
              <template v-else-if="form1Field.type =='dateRange'">
                <el-date-picker
                  v-model="formData[form1Field.field]"
                  :type="form1Field.widgetType"
                  placeholder=""
                  size="small"
                  clearable
                  :value-format="form1Field.valueFormat"
                  :picker-options="$baseStartPickerOptions(formData[form1Field.field2])"
                ></el-date-picker>
                <span>-</span>
                <el-date-picker
                  v-model="formData[form1Field.field2]"
                  :type="form1Field.widgetType"
                  placeholder=""
                  size="small"
                  clearable
                  :value-format="form1Field.valueFormat"
                  :picker-options="$baseEndPickerOptions(formData[form1Field.field])"
                ></el-date-picker>
              </template>
              <template v-else-if="form1Field.type =='date'">
                <el-date-picker
                  v-model="formData[form1Field.field]"
                  :type="form1Field.widgetType"
                  placeholder=""
                  size="small"
                  clearable
                  :value-format="form1Field.valueFormat"
                  v-bind="form1Field.widgetConfig"
                ></el-date-picker>
              </template>
              <template v-else-if="form1Field.type =='time'">
                <el-time-picker
                  v-model="formData[form1Field.field]"
                  placeholder=""
                  size="small"
                  clearable
                  :value-format="form1Field.valueFormat"
                  v-bind="form1Field.widgetConfig"
                ></el-time-picker>
              </template>
            </template>
          </vxe-form-item>
        </template>
      </template>
      <vxe-button type="submit" @click="searchEvent" v-show="false"></vxe-button>
    </vxe-form>
    <advancedSearchDialog v-if="showAdvancedSearch" :visiable.sync="showAdvancedSearch" class="adSearchForm_all"
                           @confirm="confirmAdvancedSearchDialog"
                          @clear="clearAdvancedSearchDialog" ref="advancedSearchDialog">
      <template #form>
        <vxe-form :model="advancedFormData" title-width="102px" :inline="true" class="adSearchForm">
          <template v-if="showAdvancedContent">
            <template v-for="(form1Field,index) in form2Fields">
              <template v-if="!!form1Field.slot">
                <template v-if="form1Field.formItem===false">
                  <vxe-form-item :key="form1Field.field + index">
                    <template v-slot>
                      <slot :name="form1Field.slot"
                            v-bind="{slotFormData:advancedFormData,searchColumn:form1Field}"></slot>
                    </template>
                  </vxe-form-item>
                </template>
                <template v-else>
                  <slot :name="form1Field.slot" v-bind="{slotFormData:advancedFormData,searchColumn:form1Field}"></slot>
                </template>
              </template>
              <template v-else>
                <vxe-form-item :key="index" :title="form1Field.title+ ':'">
                  <template v-slot>
                    <template v-if="form1Field.type =='input'">
                      <el-input v-model="advancedFormData[form1Field.field]" size="small" clearable
                                :disabled="form1Field.disabled===true"></el-input>
                    </template>
                    <template v-else-if="form1Field.type =='number'">
                      <base-input-numbuer v-model="advancedFormData[form1Field.field]"
                                          :disabled="form1Field.disabled===true"></base-input-numbuer>
                    </template>
                    <template v-else-if="form1Field.type =='select'">
                      <el-select v-model="advancedFormData[form1Field.field]" size="mini" clearable
                                 :multiple="!!form1Field.multiple"
                                 :collapse-tags="!!form1Field.multiple" :disabled="form1Field.disabled===true">
                        <el-option v-for="(item,index1) in form1Field.itemOption" :value="item.value" :label="item.label"
                                   :key="index1"></el-option>
                      </el-select>
                    </template>
                    <template v-else-if="form1Field.type =='inputBatch'">
                      <base-input-batch v-model="advancedFormData[form1Field.field]"
                                        :disabled="form1Field.disabled===true"
                                        @clear="advancedFormData[form1Field.field]=[]"/>
                    </template>
                    <template v-else-if="form1Field.type =='dateRange'">
                      <div class="dateRange">
                        <el-date-picker
                          v-model="advancedFormData[form1Field.field]"
                          :type="form1Field.widgetType"
                          placeholder=""
                          size="small"
                          clearable
                          :value-format="form1Field.valueFormat"
                          :picker-options="$baseStartPickerOptions(advancedFormData[form1Field.field2])"
                        ></el-date-picker>
                        <span>-</span>
                        <el-date-picker
                          v-model="advancedFormData[form1Field.field2]"
                          :type="form1Field.widgetType"
                          placeholder=""
                          size="small"
                          clearable
                          :value-format="form1Field.valueFormat"
                          :picker-options="$baseEndPickerOptions(advancedFormData[form1Field.field])"
                        ></el-date-picker>
                      </div>
                    </template>
                    <template v-else-if="form1Field.type =='date'">
                      <el-date-picker
                        v-model="advancedFormData[form1Field.field]"
                        :type="form1Field.widgetType"
                        placeholder=""
                        size="small"
                        clearable
                        :value-format="form1Field.valueFormat"
                        v-bind="form1Field.widgetConfig"
                      ></el-date-picker>
                    </template>
  
                    <template v-else-if="form1Field.type =='time'">
                      <el-time-picker
                        v-model="advancedFormData[form1Field.field]"
                        placeholder=""
                        size="small"
                        clearable
                        v-bind="form1Field.widgetConfig"
                      ></el-time-picker>
                    </template>
                  </template>
                </vxe-form-item>
              </template>
            </template>
          </template>
        </vxe-form>
      </template>
    </advancedSearchDialog>
    <el-dialog
      v-if="dialogVisible"
      custom-class="dialog-style list-dialog"
      :title="$t2('查询条件设置', 'components.table.setQueryCondition')"
      :visible.sync="dialogVisible"
      :show-close="!0"
      :append-to-body="false"
      :modal="false"
      :close-on-click-modal="!1"
      :close-on-press-escape="!1"
      :destroy-on-close="!0"
      width="750px"
      v-dialog-drag
      v-el-dialog-center
    >
      <div class="cont" style="height: 508px;">
        <el-table
          ref="singleTable"
          width="100%"
          :data="tableColumns"
          border=""
          row-key="field"
          stripe=""
        >
          <el-table-column type="index" width="35" fixed="left"></el-table-column>
          <el-table-column label="" width="38"><i class="iconfont icon-tuodongweizhi drag-option"></i></el-table-column>
          <el-table-column :label="$t2('名称', 'components.table.name')" width="150" prop="title">
            <template slot-scope="scope">
              {{ scope.row.title }}
            </template>
          </el-table-column>
          <el-table-column :label="$t2('默认值', 'components.table.defaultValue')" width="375" prop="defaultValue">
            <template slot-scope="scope">
              <template
                v-if="scope.row.defaultValueEnabled!==false && (scope.row.defaultValueEnabled || !scope.row.slot)">
                <template v-if="scope.row.type =='input'">
                  <el-input v-model="scope.row.defaultValue" size="small" clearable></el-input>
                </template>
                <template v-else-if="scope.row.type =='number'">
                  <base-input-numbuer v-model="scope.row.defaultValue"></base-input-numbuer>
                </template>
                <template v-else-if="scope.row.type =='select'">
                  <el-select v-model="scope.row.defaultValue" size="mini" clearable :multiple="!!scope.row.multiple"
                             :collapse-tags="!!scope.row.multiple">
                    <el-option v-for="(item,index1) in scope.row.itemOption" :value="item.value" :label="item.label"
                               :key="index1"></el-option>
                  </el-select>
                </template>
                <template v-else-if="scope.row.type =='inputBatch'">
                  <base-input-batch v-model="scope.row.defaultValue" @clear="scope.row.defaultValue=[]"/>
                </template>
                <template v-else-if="scope.row.type =='date'">
                  <el-date-picker
                    v-model="scope.row.defaultValue"
                    :type="scope.row.widgetType"
                    placeholder=""
                    size="small"
                    clearable
                    :value-format="scope.row.valueFormat"
                      v-bind="scope.row.widgetConfig"
                  ></el-date-picker>
                </template>
                <template v-else-if="scope.row.type =='time'">
                  <el-time-picker
                    v-model="scope.row.defaultValue"
                    placeholder=""
                    size="small"
                    clearable
                    :value-format="scope.row.valueFormat"
                      v-bind="scope.row.widgetConfig"
                  ></el-time-picker>
                </template>
              </template>
            </template>
          </el-table-column>
          <el-table-column :label="$t2('是否常用', 'components.table.common')" width="70" prop="common">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.common"></el-switch>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
			<el-button type="primary" plain class="button-sty" @click="dialogVisible = !1">
				<i class="el-icon-close el-icon"></i>
				{{ $t2('取 消', 'system.button.cancel2') }}
			</el-button>
        <el-button type="primary" plain class="button-sty" @click="dialogReset()">
				<i class="el-icon-brush el-icon"></i>
				{{ $t2('还 原', 'components.table.revert2') }}
			</el-button>
			<el-button type="primary" @click="dialogPrimary()" class="button-sty">
				<i class="el-icon-check el-icon"></i>
				{{ $t2('确 定', 'system.button.confirm2') }}
			</el-button>
		</span>
    </el-dialog>

  </div>
</template>

<script>
import mixin from "./tableFormMixin";

export default {
  name: "tableForm",
  mixins: [mixin]

}
</script>

<style scoped>

</style>
