<template>
  <div>
    <div class="panel panel-default">
      <div class="panel-heading" @click="panelStateChanged">
        {{ $t('lang.attributeViewPanel.attribute') }}
      </div>
      <div v-if="panelBodyIsShow" 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">
                <p v-if="attribute.isInput && !attribute.isNumber" class="div-text">{{ attribute.value.attributeValueStr }}</p>
                <p v-if="attribute.isInput && attribute.isNumber" class="div-text">{{ attribute.value.attributeValueDecimal }}</p>
                <template v-if="attribute.isMutipleSelect">
                  <div v-for="attributeName in attribute.attributeNameDtoList" :key="attributeName.id" class="checkbox">
                    <label v-if="attribute.isNumber && attribute.value.attributeNameIds.indexOf(attributeName.id) >=0">
                      <input autocomplete="off" type="checkbox" checked="true" disabled="true" />
                      {{ attributeName.nameDec }}
                    </label>
                    <label v-if="!attribute.isNumber && attribute.value.attributeNameIds.indexOf(attributeName.id) >=0">
                      <input autocomplete="off" type="checkbox" checked="true" disabled="true" />
                      {{ attributeName.nameStr }}
                    </label>
                  </div>
                </template>
                
                <template v-if="!attribute.isInput && !attribute.isMutipleSelect">
                  <div v-for="attributeName in attribute.attributeNameDtoList" :key="attributeName.id">
                    <p v-if="attribute.isNumber && attribute.value.attributeNameId == attributeName.id" class="div-text">
                      {{ attributeName.nameDec }}
                    </p>
                    <p v-if="!attribute.isNumber && attribute.value.attributeNameId == attributeName.id" class="div-text">
                      {{ attributeName.nameStr }}
                    </p>
                  </div>
                </template>
              </div>
            </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: [],
      panelBodyIsShow:true,
    };
  },

  mounted : function(){
    var _self = this;
    var key = '#AttributeValueState'+ this.windowId;
    var object = localStorage.getItem(key);
    if(object!=undefined&&(object=='false'||object==false)){
      this.panelBodyIsShow = false;
    }
    _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;
    },
    panelStateChanged:function(){
      this.panelBodyIsShow =! this.panelBodyIsShow;
      var key = '#AttributeValueState'+ this.windowId;
      localStorage.setItem(key,this.panelBodyIsShow);
    },
  },
};

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

	.checkbox {
		float: left;
		margin-right: 15px;
	}

	.div-text {
		padding-top: 7px;
	}
</style>