<template>
  <el-dialog
    :title="itemData[item.mainFieldName]"
    :close-on-click-modal="true"
    :visible.sync="showDialog"
    :modal="false"
    custom-class="dialog-style list-dialog dialog-uploadannex"
    width="500px"
    @close="close"
    v-el-drag-dialog
    v-el-dialog-center
  >
    <div id="containt">
      <div class="viewForm-box" style="height: 70vh;">
        <el-form label-position="top" class="form-box" ref="editForm" :model="itemData">
          <table class="form-table">
            <tr v-for="(fieldGroup,index3) in getFieldDTOsGroups(item.fieldDTOs)" :key="index3">
              <template v-for="(fieldDTO,index4) in fieldGroup">
                <th :key="'0-'+index4" :class="getFormItemClass(fieldDTO)">{{ fieldDTO.fieldDesc }}</th>
                <td :key="'1-'+index4" :colspan="fieldDTO.fieldSize=='small'?'1':'3'"
                    :class="getFormItemClass(fieldDTO)">
                  <el-form-item :prop="fieldDTO.fieldName"
                                :rules="[{ required: fieldDTO.required, trigger: ['blur', 'change'] }]"
                  >
                    <compareView :isCompare="isCompare" :oldVal="itemDataH[fieldDTO.fieldName]"
                                 :newVal="itemData[fieldDTO.fieldName]" :oldLabel="getCellValue(itemDataH, fieldDTO)">
                      <template v-if="fieldDTO.fieldStyle==9">
                        <a href="javascript:void(0);" class="a-link underLine" style="color: #2a6494;"
                           @click="openItemDetailDialog(item,fieldDTO,itemData)">{{
                            getCellValue(itemData, fieldDTO)
                          }}</a>
                      </template>
                      <template v-else-if="!billJson.showSaveButton">
                        {{ getCellValue(itemData, fieldDTO) }}
                      </template>
                      <template v-else-if="fieldDTO.fieldStyle==1">
                        <el-input size="small" v-model="itemData[fieldDTO.fieldName]"
                                  maxlength="255" autocomplete="off" clearable v-bind="fieldDTO.option"/>
                      </template>
                      <template v-else-if="fieldDTO.fieldStyle==2">
                        <el-date-picker
                          size="small"
                          v-model="itemData[fieldDTO.fieldName]"
                          type="date"
                          :placeholder="$t1('选择日期')"
                          value-format="yyyy-MM-dd"
                          clearable
                          v-bind="fieldDTO.option"
                        />
                      </template>
                      <template v-else-if="fieldDTO.fieldStyle==3">
                        <el-radio-group v-model="itemData[fieldDTO.fieldName]" v-bind="fieldDTO.option">
                          <el-radio v-for="(fieldStyleValue,index5) in fieldDTO.fieldStyleValue" :key="index5"
                                    :label="fieldStyleValue.value">
                            {{ fieldStyleValue.label }}
                          </el-radio>
                        </el-radio-group>
                      </template>
                      <template v-else-if="fieldDTO.fieldStyle==4">
                        <el-checkbox-group v-model="itemData[fieldDTO.fieldName]" v-bind="fieldDTO.option">
                          <el-checkbox v-for="(fieldStyleValue,index5) in fieldDTO.fieldStyleValue" :key="index5"
                                       :label="fieldStyleValue.value">{{ fieldStyleValue.label }}
                          </el-checkbox>
                        </el-checkbox-group>
                      </template>
                      <template v-else-if="[5,7,8].includes(fieldDTO.fieldStyle)">
                        {{ getCellValue(itemData, fieldDTO) }}
                      </template>
                      <template v-else-if="fieldDTO.fieldStyle==6">
                        <el-select v-model="itemData[fieldDTO.fieldName]" v-bind="fieldDTO.option">
                          <el-option
                            v-for="(fieldStyleValue,index5) in fieldDTO.fieldStyleValue"
                            :key="index5"
                            :value="fieldStyleValue.value"
                          >
                            {{ fieldStyleValue.label }}
                          </el-option>
                        </el-select>
                      </template>
                    </compareView>
                  </el-form-item>
                </td>
              </template>
            </tr>
          </table>
        </el-form>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
			<el-button type="primary" plain class="button-sty full" @click="close">
				<i class="el-icon-close el-icon"></i>
				{{ $t1('关 闭') }}
			</el-button>
		</span>
  </el-dialog>
</template>

<script>

import compareView from "./compareView.vue";

export default {
  name: "itemViewDialog",
  props: {
    billJson: {
      type: Object,
      default: () => {
      }
    },
    item: {
      type: Object,
      default: () => {
      }
    },
    itemData: {
      type: Object,
      default: () => {
      }
    },
    itemDataH: {
      type: Object,
      default: () => {
      }
    },
    isCompare: {
      type: Boolean,
      default: () => false
    },
  },
  components: {compareView},
  data() {
    return {
      showDialog: true
    };
  },
  methods: {
    getFieldDTOsGroups(fieldDTOs, flag) {
      let list = [];
      let items = fieldDTOs.filter(fieldDTO => {
        return fieldDTO.enabled && (flag !== 1 || fieldDTO.showForRow == true)
      });
      let span = 2;
      items.forEach(item => {
        if (item.fieldSize == 'small') {
          if (span == 1) {
            list[list.length - 1].push(item)
            span = 2;
          } else {
            list.push([item]);
            span = 1;
          }
        } else {
          list.push([item]);
          span = 2;
        }
      })
      return list;
    },
    close() {
      this.$emit('update:visiable', false)
    },
    getCellValue(row, fieldDTO) {
      if (!row) return null;
      let rowValue = row[fieldDTO.fieldName];
      if ([1, 2, 5, 9].includes(fieldDTO.fieldStyle)) {
        return rowValue;
      } else if ([3, 6, 7].includes(fieldDTO.fieldStyle)) {
        let item = fieldDTO.fieldStyleValue.find(item => rowValue === item.value)
        return item ? item.label : null;
      } else if ([4, 8].includes(fieldDTO.fieldStyle)) {
        rowValue = rowValue || [];
        let label = fieldDTO.fieldStyleValue.filter(item => rowValue.includes(item.value)).map(item => item.label).join(",");
        return label;
      }
    },
    getHValue(row, itemDTO, fieldDTO) {
      let itemDTOHs = this.formDataH[itemDTO.fieldName] || [];
      let rowH = itemDTOHs.find(item => row.uuid === item.uuid);
      if (rowH) {
        return rowH[fieldDTO.fieldName];
      } else {
        return null;
      }
    },
    getFormItemClass(fieldDTO) {
      let classList = [];
      if (fieldDTO.bold === true) {
        classList.push('bold');
      }
      if (fieldDTO.colorClass) {
        classList.push(fieldDTO.colorClass);
      }
      return classList.join(' ');
    },
    openItemDetailDialog(item, fieldDTO, itemData) {
      this.$emit("openItemDetailDialog", item, fieldDTO, itemData);
    }
  }
}
</script>

<style scoped lang="scss">
.button-sty.full {
  height: 38px
}


::v-deep .el-dialog.dialog-style.list-dialog.dialog-uploadannex {
  overflow: hidden;

  .el-dialog__header, .el-dialog__footer {
    background: #f1f6fc;
  }
}
</style>
