<template>
  <div class="table-cell-text">
    <div
      v-if="!fieldUtil.isManyToManySetType(gridFieldItem) 
        && !fieldUtil.isImageType(gridFieldItem) 
        && !fieldUtil.isImageListType(gridFieldItem) 
        && !fieldUtil.isVideoType(gridFieldItem) 
        && !fieldUtil.isFileType(gridFieldItem) 
        && !fieldUtil.isEnumMultiType(gridFieldItem)
        && !fieldUtil.isEnumListType(gridFieldItem)
        && !fieldUtil.isTextAreaType(gridFieldItem)
        && !fieldUtil.isRichTextAreaEditor(gridFieldItem)"
    >
      {{ displayValue(modelData) }}
    </div>

    <p
      v-if="fieldUtil.isRichTextAreaEditor(gridFieldItem)"
    >
      {{ displayValue(modelData) }}
    </p>

    <div
      v-if="fieldUtil.isTextAreaType(gridFieldItem)"
      class="table-cell-text-line"
    >
      {{ displayValue(modelData) }}
    </div>

    <div v-if="fieldUtil.isEnumListType(gridFieldItem)">
      {{ getEnmuValue() === "编辑中" ? $t("lang.TabFormFieldView.editing"):
        getEnmuValue() === "审批中" ? $t("lang.TabFormFieldView.pendingApproval"):
        getEnmuValue() === "审批通过" ? $t("lang.TabFormFieldView.approved"):
        getEnmuValue() === "审批不通过" ? $t("lang.TabFormFieldView.rejected"):
        getEnmuValue() === "单据已撤回" ? $t("lang.TabFormFieldView.withdraw"):
        getEnmuValue() === "转移" ? $t("lang.TabFormFieldView.transfer"):
        getEnmuValue() === "报废" ? $t("lang.TabFormFieldView.disposal"):
        getEnmuValue() === "全盘" ? $t("lang.TabFormFieldView.overall"):
        getEnmuValue() === "抽盘" ? $t("lang.TabFormFieldView.randomInventory"):getEnmuValue()
      }}
    </div>

    <div v-if="fieldUtil.isEnumMultiType(gridFieldItem)">
      {{ getMultiEnmuValue() }}
    </div>

    <div v-if="fieldUtil.isManyToManySetType(gridFieldItem)">
      <span
        v-for="item, index in getManyToManyValues()"
        :key="index"
        class="selected-tag"
      >
        {{ item }}
      </span>
    </div>

    <AuthImage
      v-if="fieldUtil.isImageType(gridFieldItem)"
      :auth-src="imageUrl"
      class="cell-image"
    />

    <span v-if="fieldUtil.isImageListType(gridFieldItem)">
      <AuthImage
        v-for="singleImageName in imageUrls"
        :key="singleImageName"
        :auth-src="singleImageName"
        class="cell-image-list"
      />
    </span>

    <VideoListCell
      v-if="fieldUtil.isVideoType(gridFieldItem)"
      :field="gridFieldItem"
      :field-value="fieldValue"
      :class-name="className"
      :readonly="true"
    />

    <ButtonCell
      v-if="fieldUtil.isButtonType(gridFieldItem)"
      :field="gridFieldItem"
      :field-value="fieldValue"
      :readonly="readOnly"
      @execute-callout="executeCallout"
    />

    <div
      v-if="fieldUtil.isFileType(gridFieldItem)"
      style="padding: 0px 10px"
    >
      <FileListWidget
        :field="gridFieldItem"
        :field-value="fieldValue"
        :class-name="className"
        :readonly="true"
      />
    </div>
  </div>
</template>

<script>
import FieldUtil from '../../resource/dictionary/FieldUtil.js';
import Common from '../../common/Common.js';

import VideoListCell from '../tabGridWidget/VideoListCell.vue';
import FileListWidget from '../tabFormWidget/FileListWidget.vue';
import ButtonCell from '../tabGridWidget/ButtonCell.vue';
import AuthImage from '../../widget/AuthImage.vue';

export default {

  components: {
    VideoListCell, FileListWidget, ButtonCell, AuthImage,
  },

  
  props: {
    gridFieldItem: {
      type: Object,
      default : function(){
        return null;
      },
    },
    modelData: {
      type: Object,
      default : function(){
        return null;
      },
    },
    className: {
      type: String,
      default: null,
    },
    
  },
  emits: ['executeCallout'], 


  data: function () {
    this.Common = Common;
    return {
      fieldUtil: FieldUtil,
    };
  },

  computed: {
    imageUrl: function () {
      var _self = this;
      var value = this.displayValue(this.modelData);
      if (value != undefined) {
        var tempImageUrl = _self.getImageUrl(value);
        return tempImageUrl;
      }
      return '';
    },

    imageUrls: function () {
      var _self = this;
      var value = this.displayValue(this.modelData);
      var images = [];
      if (value != undefined && value.length > 0) {
        var values = value.split(',');
        values.forEach(function (tempValue) {
          var tempImageUrl = _self.getImageUrl(tempValue);
          images.push(tempImageUrl);
        });
      }
      return images;
    },

    fieldValue: function () {
      var _self = this;
      var modelData = _self.modelData;

      var fieldValue = {};

      if (modelData.data[_self.gridFieldItem.fieldName] != undefined) {
        fieldValue = modelData.data[_self.gridFieldItem.fieldName];
      } else {
        fieldValue = {
          displayValue: [],
          fieldType: 'String',
        };
      }
      return fieldValue;
    },

    /**
         * 字段是否只读
         */
    readOnly: function () {
      if (this.gridFieldItem == undefined) {
        return true;
      }

      if (this.gridFieldItem != undefined && this.gridFieldItem.readOnly == true) {
        return true;
      }

      if (this.gridFieldItem != undefined && this.gridFieldItem.entityFieldIndex > 0) {
        return true;
      }

      if (this.modelData != undefined && this.modelData.id > 0 && (this.gridFieldItem.updatable == undefined || this.gridFieldItem.updatable == false)) {
        return true;
      }

      return this.gridFieldItem.readOnly;
    },
  },

  methods: {

    /**
         * 执行Callout
         */
    executeCallout: function (field) {
      this.$emit('executeCallout', field);
    },

    displayValue: function (modelData) {
      if (modelData == undefined) {
        return '';
      } else if (modelData.data == undefined) {
        return '';
      } else if (modelData.data[this.gridFieldItem.fieldName] == undefined) {
        return '';
      } else if (modelData.data[this.gridFieldItem.fieldName].displayValue == undefined) {
        return '';
      } else {
        var value = modelData.data[this.gridFieldItem.fieldName].displayValue[this.gridFieldItem.entityFieldIndex];
        if (FieldUtil.isCheckBoxType(this.gridFieldItem)) {
          if (value == 'true' || value == true) {
            return this.$t('lang.TabFormFieldView.yes');
          } else if (value == 'false' || value == false) {
            return this.$t('lang.TabFormFieldView.no');
          }
        } else if (FieldUtil.isRedGreenEditorType(this.gridFieldItem)) {
          if (value == 'true' || value == true) {
            return '红单';
          } else if (value == 'false' || value == false) {
            return '蓝单';
          }
        }
        return value;
      }
    },

    // 获取
    getImageUrl: function (name) {
      return Common.getThumbnailImageSrc(this.className, name);
    },

    /**
         * 获取枚举单选框的值
         */
    getEnmuValue: function () {
      var _self = this;
      var result;
      if (_self.fieldValue != undefined && _self.fieldValue.displayValue != undefined) {
        var value0 = _self.fieldValue.displayValue[0];
        if (_self.gridFieldItem != null && _self.gridFieldItem.keyValues != null) {
          _self.gridFieldItem.keyValues.forEach(function (item1) {
            if (value0 == item1.keyStr) {
              result = item1.value;
            }
          });
        }
      }
      return result;
    },


    /**
         * 获取枚举多选框的值
         */
    getMultiEnmuValue: function () {
      var _self = this;
      var fieldValue = (_self.modelData.data == undefined) ? [] : _self.modelData.data[_self.gridFieldItem.fieldName];
      var result = [];
      if (fieldValue != undefined && _self.fieldValue.displayValue != undefined) {
        var arr = fieldValue.displayValue[0].split(',');
        arr.forEach(function (item) {
          _self.gridFieldItem.keyValues.forEach(function (item1) {
            if (item == item1.keyStr) {
              result.push(item1.value + ' ');
            }
          });
        });
      }
      return result.join(',');
    },

    // 获取枚举多选框的值
    getManyToManyValues: function () {
      var modelData = this.modelData;
      if (modelData == undefined) {
        return [];
      } else if (modelData.data == undefined) {
        return [];
      } else if (modelData.data[this.gridFieldItem.fieldName] == undefined) {
        return [];
      } else if (modelData.data[this.gridFieldItem.fieldName].displayValue == undefined) {
        return [];
      } else {
        return modelData.data[this.gridFieldItem.fieldName].displayValue;
      }
    },
  },
};

</script>
<style scoped>
.table-cell-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}

.table-cell-text-line {
    word-break: break-all;
    white-space: pre-line;
    max-height: 4em;
}

.required-mark {
    color: red;
}

.cell-image {
    width: 80px;
    height: 80px;
}

.cell-image-list {
    width: 40px;
    height: 40px;
    margin-right: 5px;
}

.selected-tag {
    color: #333;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 4px;
    height: 26px;
    margin: 4px 4px 0px 0px;
    padding: 6px 0.25em;
}
</style>