<template>
  <div>
    <div class="panel panel-default">
      <div class="panel-heading">
        属性
      </div>
      <div class="panel-body">
        <div class="row">
          <div
            v-for="attribute in attributes"
            :key="attribute.name"
            class="form-horizontal"
          >
            <div class="form-group">
              <label class="col-xs-5 col-sm-4 col-md-3 col-lg-2 control-label">
                <span
                  v-if="attribute.isRequired"
                  class="required-mark"
                >*</span>{{ attribute.name }}
              </label>
              <div class="col-xs-7 col-sm-8 col-md-9 col-lg-10">
                <input
                  v-if="attribute.isInput && !attribute.isNumber"
                  v-model="attribute.value.attributeValueStr"
                  autocomplete="off"
                  type="text"
                  class="form-control"
                />
                <input
                  v-if="attribute.isInput && attribute.isNumber"
                  v-model="attribute.value.attributeValueDecimal"
                  autocomplete="off"
                  type="number"
                  class="form-control"
                />
                <template v-if="attribute.isMutipleSelect">
                  <div
                    v-for="attributeName in attribute.attributeNameDtoList"
                  
                    :key="attributeName.id"
                    class="checkbox"
                  >
                    <label v-if="attribute.isNumber">
                      <input
                        v-model="attribute.value.attributeNameIds"
                        autocomplete="off"
                        :value="attributeName.id"
                        type="checkbox"
                      />{{ attributeName.nameDec }}
                    </label>
                    <label v-if="!attribute.isNumber">
                      <input
                        v-model="attribute.value.attributeNameIds"
                        autocomplete="off"
                        :value="attributeName.id"
                        type="checkbox"
                      />{{ attributeName.nameStr }}
                    </label>
                  </div>
                </template>
                
                <select
                  v-if="!attribute.isInput && !attribute.isMutipleSelect"
                  v-model="attribute.value.attributeNameId"
                  class="form-control"
                >
                  <template v-if="attribute.isNumber">
                    <option
                      v-for="attributeName in attribute.attributeNameDtoList"                    
                      :key="attributeName.id"
                      :value="attributeName.id"
                    >
                      {{ attributeName.nameDec }}
                    </option>
                  </template>
                  <template v-else>
                    <option
                      v-for="attributeName in attribute.attributeNameDtoList"
                      :key="attributeName.id"
                      :value="attributeName.id"
                    >
                      {{ attributeName.nameStr }}
                    </option>
                  </template>
                </select>
              </div>
            </div>
          </div>
          <div
            v-show="!validateMandatory"
            class="form-group"
          >
            <div class="col-xs-7 col-sm-8 col-md-9 col-lg-10 col-xs-offset-5 col-sm-offset-4 col-md-offset-3 col-lg-offset-2">
              <span
                id="check-result"
                class="required-mark control-label"
              >请填写完整属性</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Common from '../../common/Common.js';


export default {

  components: {
    
  },

  
  props: {
   
    attributeKey: {
      type: String,
      default: null,
    },
    attributeValueKey: {
      type: String,
      default: null,
    },
    windowId: {
      type: String,
      default: null,
    },
  },



  data: function () {
    return {
      attributes: [],
      validateMandatory: true,
    };
  },

  mounted: function () {
    var _self = this;
    _self.getAttributeComposite();
  },

  methods: {
    /**
                 * 获取属性数据
                 * @return {void} 
                 */
    getAttributeComposite: function () {
      var _self = this;
      $.ajax({
        url: Common.getApiURL('attributeResource/getAttributeComposite'),
        type: 'get',
        dataType: 'json',
        beforeSend: function (request) {
          Common.addTokenToRequest(request);
        },
        data: {
          definitionKey: _self.attributeKey,
          recordKey: _self.attributeValueKey,
        },
        success: function (data) {
          console.log(data);
          _self.initData(data);
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },

    /**
                 * 初始化数据
                 * @return {void} 
                 */
    initData: function (data) {
      var _self = this;
      if (data != undefined) {
        data.attributeDtos.forEach(function (item) {
          var flag = true;
          data.attributeValueDtos.forEach(function (item1) {
            if (item1.attributeId == item.id) {
              flag = false;
              item.value = item1;
            }
          });
          if (flag) {
            item.value = {
              classKey: _self.attributeKey,
              attributeId: item.id,
              attributeNameId: null,
              attributeNameIds: [],
              attributeValueStr: '',
              attributeValueDecimal: null,
            };
          }
        });
        _self.attributes = data.attributeDtos;

      }
    },

    /**
                 * 获取属性值
                 * @return {void} 
                 */
    getValue: function () {
      var _self = this;
      var values = [];
      _self.attributes.forEach(function (item) {
        values.push(item.value);
      });
      return values;
    },

    /**
                 * 验证表单
                 * @return {void} 
                 */
    performValide: function () {
      var _self = this;
      _self.validateMandatory = true;

      if (_self.attributes != null) {
        _self.attributes.forEach(function (item) {
          var validateDate = {};
          if (item.isRequired == true) {
            if (item.isInput == true) {
              var stringValue = null;
              if (item.isNumber == true) {
                stringValue = item.value == undefined ? undefined : item.value.attributeValueDecimal;
              } else {
                stringValue = item.value == undefined ? undefined : item.value.attributeValueStr;
              }
              if (stringValue == null || stringValue == '') {
                _self.validateMandatory = false;
              }
            } else {
              var idValue = null;
              if (item.isMutipleSelect) {
                idValue = item.value == undefined ? undefined : item.value.attributeNameIds;
              } else {
                idValue = item.value == undefined ? undefined : item.value.attributeNameId;
              }
              if (idValue == null || idValue == '' || idValue < 1) {
                _self.validateMandatory = false;
              }
            }
          }
        });
      }
      return _self.validateMandatory;
    },

  },
};

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