<template>
  <tr :style="{'background-color':warningColor}" :class="{'warning':isSelected}">
    <td>{{ serialNumber }}</td>
    <td class="text-center">
      <input
        v-model="isSelected"
        autocomplete="off"
        type="checkbox"
        @click="clickModelData(modelData)"
      />
    </td>

    <td v-if="isShowEdit == undefined || isShowEdit">
      <template v-if="showEditButton">
        <span
          class="operation-delete"
          aria-hidden="true"
          @click="editRecord"
        >
          <i
            class="fa"
            :class="{'fa-pencil': !modelData.editMode, 'fa-check': modelData.editMode}"
          />
        </span>
        <span
          class="operation-edit"
          aria-hidden="true"
          @click="deleteRecord"
        >
          <i class="fa fa-remove" />
        </span>
      </template>
    </td>

    <template v-for="(gridFieldItem, index) in tabGridFields" :key="'TabGridField_' + gridFieldItem.fieldName + '_' + index">
      <td
      
        v-if="!modelData.editMode"
        v-show="gridFieldItem.visible"
      
        @click="clickRecord"
      >
        <div>
          <CellTextItem
            :grid-field-item="gridFieldItem"
            :model-data="modelData"
            :class-name="className"
            @execute-callout="executeCallout(gridFieldItem)"
          />
        </div>
      </td>
      <td
        v-else
        v-show="gridFieldItem.visible"
        :class="{'table-cell-searchwidget' : fieldUtil.isSearchType(gridFieldItem)}"
        @click="clickRecord"
      >
        <CellItem
          :ref="'cellItem' + index"
          :scroll-object="scrollObject"
          :field-item="gridFieldItem"
          :model-data="modelData"
          :parent-model-data="parentModelData"
          :class-name="className"
          :window-no="windowNo"
          :tab-index="tabIndex"
          @value-changed="valueChanged($event, gridFieldItem)"
          @execute-callout="executeCallout(gridFieldItem)"
        />
      </td>
    </template>
  </tr>
</template>

<script>

import WindowClientUtil from '../../resource/dictionary/WindowClientUtil.js';
import FieldUtil from '../../resource/dictionary/FieldUtil.js';
import CellItem from './CellItem.vue';
import CellTextItem from './CellTextItem.vue';
import Common from '../../common/Common.js';

import Context from '../common/Context.js';
import JsUtil from '../../common/JsUtil.js';
import { Notify, Uuid } from 'pc-component-v3';
export default {

  components: {
    CellItem, CellTextItem, 
  },

  
  props: {
   
    windowNo: {
      type: String,
      default: null,
    },
    tabIndex: {
      type: Number,
      default: null,
    },
    tabGridFields: {
      type: Array,
      default : function(){
        return null;
      },
    },
    modelData: {
      type: Object,
      default : function(){
        return null;
      },
    },
    parentModelData: {
      type: Object,
      default : function(){
        return null;
      },
    },
    className: {
      type: String,
      default: null,
    },
    isShowEdit: {
      type: Boolean,
      default : false,
    },
    scrollObject: {
      type: String,
      default: null,
    },
    serialNumber: {
      type: String,
      default: null,
    },
    jsUrl: {
      type: String,
      default: null,
    },
  },
  emits: ['deleteRecord', 'editRecord', 'readRecord', 'clickModelData', 'executeCallout', 'valueChanged'],


  data: function () {
    return {
      tabGridFields1: this.tabGridFields,
      lastClickTime: 0,
      fieldUtil: FieldUtil,
    };
  },
  computed: {
    modelDataCopy: function(){
      return JSON.parse(JSON.stringify(this.modelData));
    },

    isSelected: {
      get: function () {
        return this.modelData.select == true;
      },
      set: function () {

      },
    },
    /**
         * 获取报警颜色
         */
    warningColor:function(){
      if (this.modelData.data['warningColor'] != undefined && this.modelData.data['warningColor'].displayValue.length > 0) {
        return this.modelData.data['warningColor'].displayValue[0];
      } else {
        return 'none';
      }
           
    },

    /**
         * 是否显示编辑按钮
         */
    showEditButton: function () {
      if (this.isShowEdit == undefined || this.isShowEdit) {
        if (this.modelData != undefined
                    && this.modelData.data != undefined
                    && this.modelData.data['documentStatus'] != undefined
                    && this.modelData.data['documentStatus'].displayValue != undefined
                    && (this.modelData.data['documentStatus'].displayValue[0] == 'APPROVED'
                        || this.modelData.data['documentStatus'].displayValue[0] == 'REJECTED'
                        || this.modelData.data['documentStatus'].displayValue[0] == 'PROCESSING')) {
          return false;
        }
        return true;
      }
      return false;
    },
  },
  watch: {
    'parentModelData': {
      deep: true,
      handler(curVal, oldVal) {
        var _self = this;
        for(let index = 0; index < _self.tabGridFields.length; index ++){
          const tabGridField = _self.tabGridFields[index];
          let oldTabGridFieldString = JSON.stringify(tabGridField);

          const columnShowLogical = tabGridField.columnShowLogical;
          if(columnShowLogical != null && columnShowLogical.length > 0){                    
            let functionName = tabGridField.fieldName.replace('.', '_') + '_showLogical';

            let executeFunction = function(){
              let parentCtx = new _self.getContext(_self.parentModelData);
              try{
                tabGridField.visible = _self[functionName](null, parentCtx.modelData);
              }catch(e){
                console.error('js代码 %s 执行异常 %o', columnShowLogical, e);
                tabGridField.visible = true;
              }
            };

            if(_self[functionName] == null){
              // 执行服务端的脚本
              const jsUrl = _self.jsUrl;
              if(jsUrl == null || jsUrl == undefined){
                Notify.error('数据字典定义异常', '【' + tabGridField.fieldName + '】列显示逻辑的JS文件不存在,请联系管理员检查数据字典是否JS文件。', false);
                return;
              }
              let promise = JsUtil.dynamicLoadJsFunction(jsUrl, columnShowLogical);
              promise.then(dynamicFunction => {          
                let targetFunction = dynamicFunction;
          
                if(targetFunction == null){
                  Notify.error('数据字典定义异常', '【' + tabGridField.fieldName + '】列显示逻辑定义异常,请联系管理员检查数据字典的定义。', false);
                  return;
                }

                _self[functionName] = targetFunction;

                executeFunction();
              }, errorData => {
                console.error(errorData);
              });        
            }else{
              executeFunction();
            }
          }else{
            tabGridField.visible = true;
          }

          let newTabGridFieldString = JSON.stringify(tabGridField);

          // bug fixed by jack 2022-01-17
          // 只有当数据发生改变以后，才重新设置数据，解决当子表数据量很打的时候，输入卡顿的问题。
          if(oldTabGridFieldString != newTabGridFieldString){
            _self.tabGridFields[index]=tabGridField;
          }
        }
        console.log(_self.tabGridFields);
      },
    },
  },


  methods: {
    /**
         * 获取Context
         */
    getContext : Context,
        
    deleteRecord: function () {
      this.$emit('deleteRecord');
    },

    // 改变表格行元素的编辑状态
    editRecord: function () {
      this.$emit('editRecord');
    },

    readRecord: function () {
      this.$emit('readRecord');
    },

    clickModelData: function () {
      this.$emit('clickModelData');
    },

    // 值发生改变
    valueChanged: function (newFieldValue, gridFieldItem) {
      var valueObject = {
        newFieldValue: newFieldValue,
        gridFieldItem: gridFieldItem,
      };
      this.$emit('valueChanged', valueObject);

      this.refreshSelectField(this.modelData, gridFieldItem.fieldName);
    },

    // 刷新下拉选择框keyValues
    refreshSelectField: function (modelData, valueChangedFieldName) {
      var _self = this;
      if (_self.tabGridFields1) {
        _self.tabGridFields1.forEach(function (item) {
          if (item.displayType == 'ListBoxEditor') {
            var name1 = ':' + valueChangedFieldName;
            var showLogical = item.showLogical;
            if (showLogical != undefined && showLogical.indexOf(name1) >= 0) {
              refresh(item);
            }
          }
        });
      }

      function refresh(item) {
        var obj = {
          fieldId: item.id,
          modelData: modelData,
        };

        console.log('GridBody RefreshField');
        $.ajax({
          url: Common.getApiURL('FieldResource/refreshField'),
          async: false,
          dataType: 'json',
          type: 'post',
          data: JSON.stringify(obj),
          contentType: 'application/json',
          beforeSend: function (request) {
            Common.addTokenToRequest(request);
          },
          success: function (data) {
            if (data != undefined) {
              item.keyValues=data.keyValues;
            }
          },
          error: function (XMLHttpRequest, textStatus, errorThrown) {
            Common.processException(XMLHttpRequest, textStatus, errorThrown);
          },
        });
      }
    },

    performValidate: function () {
      var validateResults = [];
      for (var i = 0; i < this.tabGridFields1.length; i++) {
        let cellId = 'cellItem' + i;
        if (this.$refs[cellId] && this.$refs[cellId][0]) {
          var result = this.$refs[cellId][0].performValidate();
          validateResults.push(result);
        }
      }
      return validateResults;
    },
    clickRecord: function () {
      var now = new Date().getTime();
      if (now - this.lastClickTime < 500) {
        this.readRecord();
      }
      this.lastClickTime = now;
    },

    /**
     * 执行Callout
     */
    executeCallout: function (gridFieldItem) {
      this.$emit('executeCallout', gridFieldItem);
    },
  },
};
</script>

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

/** 搜索框，自动提示表格， */
.table-cell-searchwidget{
    position: relative;
}

.text-center {
    text-align: center;
}

.warning{
    background-color: #fcf8e3 !important;
}

.operation-delete {
    margin-left: 10px;
    margin-right: 5px;
}

.operation-edit {
    margin-left: 5px;
    margin-right: 10px;
}
</style>