<template>
  <div class="box">
    <div class="input-group">
      <select
        v-model="selectedValue"
        class="form-control"
        :readonly="readonly"
        :disabled="readonly"
        aria-describedby="basic-addon2"
      >
        <option value="-1" />
        <option
          v-for="keyValue in keyValues2"
          :key="keyValue.key"
          :value="keyValue.key"
        >
          {{ keyValue.value }}
        </option>
      </select>
      <span
        v-if="field.linkCurdWindowNo"
        :class="{'select-icon-small' : field.linkCurdWindowNo}"
        class="input-group-addon glyphicon glyphicon-plus select-icon"
        @click="linkAdd"
      />
      <span
        v-if="field.linkCurdWindowNo"
        :class="{'select-icon-small' : field.linkCurdWindowNo}"
        class="input-group-addon glyphicon glyphicon-share-alt select-icon"
        @click="linkSkip"
      />
      <span
        :class="{'select-icon-small' : field.linkCurdWindowNo}"
        class="input-group-addon glyphicon glyphicon-refresh select-icon"
        @click="refreshField"
      />
    </div>
    <Loading v-if="loading" />
  </div>
</template>

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

import WindowServerUtil from '../../resource/dictionary/WindowServerUtil.js';
import WindowClientUtil from '../../resource/dictionary/WindowClientUtil.js';
import TabResource from '../../api/dic/TabResource.js';
import { Notify, Uuid } from 'pc-component-v3';


export default {

  components: {
    
  },

  
  props: {
    windowNo: {
      type: String,
      default: null,
    },
    tabIndex: {
      type: Number,
      default: null,
    },
    readonly: {
      type: Boolean,
      default: null,
    },
    field: {
      type: Object,
      default : function(){
        return null;
      },
    },
    modelData: {
      type: Object,
      default : function(){
        return null;
      },
    },
    keyValues: {
      type: Array,
      default : function(){
        return null;
      },
    },
    fieldValue: {
      type: Object,
      default : function(){
        return null;
      },
    },
  },
  emits: ['valueChanged'],

  data: function () {
    return {
      selectedValue: this.fieldValue.id,
      keyValues2: this.keyValues,
      loading: false,
    };
  },

  watch: {
    selectedValue: function (curVal, oldVal) {
      if (curVal != oldVal) {
        if (curVal < 0) {
          curVal = null;
        }
        var newFieldValue = {
          id: curVal,
          fieldType: 'Key',
        };
        this.$emit('valueChanged', newFieldValue);
      }
    },


    'fieldValue': {
      deep: true,
      handler(curVal, oldVal) {
        this.selectedValue = curVal.id;
      },
    },

    keyValues: function (val) {
      this.keyValues2 = val;
    },
  },

  methods: {
    /**
         * 刷新选择框数据
         * @return {void} 
         */
    refreshField: function () {
      var _self = this;
      var field = _self.field;
      _self.loading=true;
      var obj = {
        fieldName: _self.field.fieldName,
        windowNo:_self.windowNo,
        tabIndex:_self.tabIndex,
        modelData: _self.modelData,
      };


      console.log('SelectCell RefreshField');

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

    /**
         * 链接列跳转
         * @return {void} 
         */
    linkSkip: function () {
      var _self = this;
      var linkCurdWindowNo = _self.field.linkCurdWindowNo;
      var recordId = _self.fieldValue.id;

      if (_self.fieldValue == undefined || recordId == undefined || recordId < 0 || recordId == '') {
        Notify.error('不能跳转', '未选择数据，不能跳转，您可以新建数据。',false);
        return;
      }
      _self.loading=true;
            
      TabResource.getWindowOpenParam(linkCurdWindowNo, _self.field.fieldName, recordId).then(successData => {
        _self.loading=false;
        WindowClientUtil.openCurdViewWindow(successData);
      }, errorData => {
        _self.loading=false;
        Common.processException(errorData);
      });
    },

    /**
         * 链接列新增
         * @return {void} 
         */
    linkAdd: function () {
      var _self = this;
      _self.loading=true;
      var linkCurdWindowNo = _self.field.linkCurdWindowNo;
            
      TabResource.getWindowOpenParam(linkCurdWindowNo, _self.field.fieldName, null).then(successData => {
        _self.loading=false;
        WindowClientUtil.openCurdNewWindow(successData);
      }, errorData => {
        _self.loading=false;
        Common.processException(errorData);
      });
    },
  },
};

</script>
<style scoped>
.select-icon {
    top: 0px !important;
    width: 34px !important;
    text-align: center;
    cursor: pointer;
    
}

.select-icon-small{
    width: 26px !important;
    padding: 6px 0px;
}
</style>