<template>
  <div style="width: 100%">
    <a-input-group compact>
      <a-select v-model:value="selectedValue" :style="{ width: inputWidth}" :disabled="readonly">
        <a-select-option value="" />
        <a-select-option v-for="keyValue in keyValues" :key="keyValue.key" :value="keyValue.key">
          {{ keyValue.value }}
        </a-select-option>
      </a-select>
      <a-button v-if="field.linkCurdWindowNo" :disabled="readonly" @click="linkAdd">
        <template #icon>
          <PlusOutlined />
        </template>
      </a-button>
      <a-button v-if="field.linkCurdWindowNo" :disabled="readonly" @click="linkSkip">
        <template #icon>
          <LinkOutlined />
        </template>
      </a-button>
      <a-button :disabled="readonly" @click="refreshField">
        <template #icon>
          <SyncOutlined />
        </template>
      </a-button>
    </a-input-group>
  </div>
  <Loading v-if="loading" />
</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';
import { PlusOutlined, LinkOutlined, SyncOutlined } from '@ant-design/icons-vue';
export default {
  components: { PlusOutlined, LinkOutlined, SyncOutlined },


  props: {

    windowNo: {
      type: String,
      default: null,
    },
    tabIndex: {
      type: Number,
      default: null,
    },
    readonly: {
      type: Boolean,
      default: null,
    },
    field: {
      type: Object,
      default: function () {
        return null;
      },
    },
    fieldValue: {
      type: Object,
      default: function () {
        return null;
      },
    },
    modelData: {
      type: Object,
      default: function () {
        return null;
      },
    },
  },


  emits: ['valueChanged'],


  data: function () {
    return {
      selectedValue: this.fieldValue == undefined ? {} : this.fieldValue.id,
      field1: this.field,
      loading: false,
    };
  },

  computed: {
    keyValues: function () {
      return this.field1.keyValues;
    },
    inputWidth: function () {
      if (this.field.linkCurdWindowNo) return 'calc(100% - 94px)';
      return 'calc(100% - 32px)';
    },
  },

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

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

    field: function (to) {
      this.field1 = to;
    },
  },

  methods: {

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


      console.log('SelectWidget 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.field1.keyValues = 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;
      var fieldId = _self.field.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.openNewCurdViewWindow(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.openNewCurdNewWindow(successData);
      }, errorData => {
        _self.loading = false;
        Common.processException(errorData);
      });
    },
  },

};

</script>
<style scoped>
.required-mark {
  color: red;
  margin-right: 10px;
}

.select-icon {
  top: 0px !important;
  width: 34px !important;
  text-align: center;
  cursor: pointer;
}

.m-input-group {
  width: 100%;
}
</style>