<template>
  <div>
    <template v-for="(eainsGroupDTO, eainsGroupDTOIndex) in eainsGroupDTOs">
      <template v-for="(eaInsDataDTO, eaInsDataDTOIndex) in eaInsDataDTOs">
        <template v-if="eaInsDataDTO.eaGroupCode == eainsGroupDTO.eaGroupCode">
          <template v-if="eainsGroupDTO.eaGroupType == 1">
            <baseTabPane :label="eainsGroupDTO.eaGroupDesc" :key="eainsGroupDTOIndex+'_'+eaInsDataDTOIndex">
              <template #button></template>
              <template #default>
                <table class="table-detail">
                  <tbody>
                  <tr v-for="(eaInsGroupFieldDTOs, i) in eainsGroupDTO.eaInsGroupFieldNewDTOs"
                      :key="'eaInsGroupFieldNewDTOs' + i">
                    <template v-for="(eaInsGroupFieldDTO,t) in eaInsGroupFieldDTOs">
                      <th :key="'eaInsGroupFieldDTO1'+t">
                        <em class="f-red" v-if="eaInsGroupFieldDTO.required">*</em>
                        {{ eaInsGroupFieldDTO.fieldDesc }}
                      </th>
                      <td :key="'eaInsGroupFieldDTO2'+t">
                        <el-form-item
                          :prop="
                            'eaInsDataDTOs.' + eaInsDataDTOIndex + '.eaInsSingleDTO.' + (eaInsGroupFieldDTO.fieldStyle == 4 ? '_$ignore_field_' : '') + eaInsGroupFieldDTO.fieldName
                          "
                          :rules="[{ required: eaInsGroupFieldDTO.required, trigger: 'blur' }]"
                        >
                          <template v-if="eaInsGroupFieldDTO.fieldStyle == 1">
                            <el-input size="small" v-model="eaInsDataDTO.eaInsSingleDTO[eaInsGroupFieldDTO.fieldName]"
                                      maxlength="255" autocomplete="off" clearable/>
                          </template>
                          <template v-else-if="eaInsGroupFieldDTO.fieldStyle == 2">
                            <el-date-picker
                              size="small"
                              v-model="eaInsDataDTO.eaInsSingleDTO[eaInsGroupFieldDTO.fieldName]"
                              type="date"
                              placeholder="选择日期"
                              value-format="yyyy-MM-dd"
                              clearable
                            />
                          </template>
                          <template v-else-if="eaInsGroupFieldDTO.fieldStyle == 3">
                            <el-select v-model="eaInsDataDTO.eaInsSingleDTO[eaInsGroupFieldDTO.fieldName]">
                              <template v-for="(selectItem, selectItemIndex) in eaInsGroupFieldDTO.fieldStyleValue.split(',')">
                                <el-option
                                  :key="'selectItem' + selectItemIndex + '-' + eaInsGroupFieldDTO.id"
                                  v-if="selectItem"
                                  :value="selectItem"
                                >
                                  {{ selectItem }}
                                </el-option>
                              </template>
                            </el-select>
                          </template>
                          <template v-else-if="eaInsGroupFieldDTO.fieldStyle == 4">
                            <el-select
                              v-model="eaInsDataDTO.eaInsSingleDTO['_$ignore_field_' + eaInsGroupFieldDTO.fieldName]"
                              @change="handleMultiVauleFirst(eaInsDataDTO, eaInsGroupFieldDTO)"
                              multiple
                              size="small"
                            >
                              <template v-for="(selectItem, selectItemIndex) in eaInsGroupFieldDTO.fieldStyleValue.split(',')">
                                <el-option
                                  :key="'selectItem' + selectItemIndex + '-' + eaInsGroupFieldDTO.id"
                                  v-if="selectItem"
                                  :value="selectItem"
                                >
                                  {{ selectItem }}
                                </el-option>
                              </template>
                            </el-select>
                          </template>
                        </el-form-item>
                      </td>
                    </template>
                  </tr>
                  </tbody>
                </table>
              </template>
            </baseTabPane>
          </template>
          <template v-else-if="eainsGroupDTO.eaGroupType == 2">
            <baseTabPane :label="eainsGroupDTO.eaGroupDesc" :key="eainsGroupDTOIndex+'_'+eaInsDataDTOIndex">
              <template #button>
                <el-button class="button-sty" @click="addEaInsListDTO(eaInsDataDTO)" icon="el-icon-search">
                  新增{{ eainsGroupDTO.eaGroupDesc }}
                </el-button>
              </template>
              <template #default>
                <vxe-grid
                  :ref="eainsGroupDTO.gridTarget"
                  :data="eaInsDataDTO.eaInsListDTOs"
                  :eaInsDataDTOIndex="eaInsDataDTOIndex"
                  v-bind="eainsGroupDTO.gridoption"
                  @resizable-change="$vxeTableUtil.onColumnWitchChange"
                  @custom="$vxeTableUtil.customHandle"
                >
                  <template #groupField="obj">
                    <el-form-item
                      :prop="'eaInsDataDTOs.' + eaInsDataDTOIndex + '.eaInsListDTOs.' + obj.$rowIndex + '.' + obj.column.field"
                      :rules="[{ required: obj.column.params.required, trigger: 'blur' }]"
                    >
                      <template v-if="obj.column.params.fieldStyle == 1">
                        <el-input size="small" v-model="obj.row[obj.column.field]" maxlength="255" autocomplete="off"
                                  clearable/>
                      </template>
                      <template v-else-if="obj.column.params.fieldStyle == 2">
                        <el-date-picker size="small" v-model="obj.row[obj.column.field]" type="date" placeholder="选择日期"
                                        value-format="yyyy-MM-dd" clearable/>
                      </template>
                      <template v-else-if="obj.column.params.fieldStyle == 3">
                        <el-select v-model="obj.row[obj.column.field]">
                          <template v-for="(selectItem, selectItemIndex) in (obj.column.params.fieldStyleValue || '').split(',')">
                            <el-option
                              v-if="selectItem"
                              :key="'gridSelectItem' + selectItemIndex + '-' + obj.column.params.groupFieldId"
                              :value="selectItem"
                            >
                              {{ selectItem }}
                            </el-option>
                          </template>
                        </el-select>
                      </template>
                      <template v-else-if="obj.column.params.fieldStyle == 4">
                        <el-select v-model="obj.row['_$ignore_field_' + obj.column.field]"
                                   @change="handleMultiVauleSecond(obj)" multiple size="small">
                          <template v-for="(selectItem, selectItemIndex) in (obj.column.params.fieldStyleValue || '').split(',')">
                            <el-option
                              v-if="selectItem"
                              :key="'gridSelectItem' + selectItemIndex + '-' + obj.column.params.groupFieldId"
                              :value="selectItem"
                            >
                              {{ selectItem }}
                            </el-option>
                          </template>
                        </el-select>
                      </template>
                    </el-form-item>
                  </template>
                  <template #operate="obj">
                    <a class="a-link" @click="eaInsDataDTOs[eaInsDataDTOIndex].eaInsListDTOs.splice(obj.$rowIndex, 1)">
                      <el-tooltip :enterable="false" effect="dark" content="删除" placement="top"
                                  popper-class="tooltip-skin"><i class="el-icon-delete"/></el-tooltip>
                    </a>
                  </template>
                </vxe-grid>
              </template>
            </baseTabPane>
          </template>
          <template v-else-if="eainsGroupDTO.eaGroupType == 3">
            <baseTabPane :label="eainsGroupDTO.eaGroupDesc" :key="eainsGroupDTOIndex+'_'+eaInsDataDTOIndex">
              <template #default>
                <table class="table-detail">
                  <tbody>
                  <tr>
                    <td colspan="8">
                      <baseUpload accept="file" multi="true" :file.sync="eaInsDataDTO.attachmentDTOs"></baseUpload>
                    </td>
                  </tr>
                  </tbody>
                </table>
              </template>
            </baseTabPane>
          </template>
        </template>
      </template>
    </template>
    <!-- <div class="slide-wrap">
			<a href="javascript:void(0)" class="slide-nav"><p>运费信息</p></a>
      <a href="javascript:void(0)" class="slide-nav"><p>运费信息</p></a>
      <a href="javascript:void(0)" class="slide-nav"><p>运费信息</p></a>
		</div> -->
  </div>
</template>

<script>
import {mixins} from './mixins';

export default {
  mixins: [mixins]
};
</script>

<style></style>
