<template>
  <div class="inputs">
    <el-radio-group
      v-if="inputWriteable"
      v-validate="inputValidate"
      :name="inputName"
      v-model="inputVal"
      @change="change"
    >
      <el-radio
        :class="{'el-radio-vertical': optionLayout=='vertical', 'el-radio-horizontal' : optionLayout=='horizontal'}"
        v-for="item in this.options"
        :key="item[propKey]"
        :label="item[propKey]"
        :disabled="readonly||disabled || item.disabled "
      >{{item[propValue]}}</el-radio>
    </el-radio-group>
    <ht-field-tail v-if="permission!='n'" :writeable.sync="writeable" :fieldName="inputName" :readonly="!inputWriteable" :inputValue="formatValue||inputVal" />
  </div>
</template>
<script>
import utils from "@/utils.js";
import service from "@/service.js";
import HtFieldTail from "@/components/HtFieldTail.vue";

export default {
  name: "ht-radio",
  props: {
    validate: [String, Object],
    value: [String, Number, Boolean],
    name: String,
    permission: {
      type: String,
      default: "w",
      validator: function(value) {
        return ["b", "w", "r", "n"].indexOf(value) !== -1;
      }
    },
    options: Array,
    optionLayout: {
      type: String,
      default: "horizontal",
      validator: function(value) {
        return ["horizontal", "vertical"].some(i => i == value);
      }
    },
    props: {
      type: Object,
      default: function() {
        return {
          key: "key",
          value: "value"
        };
      }
    },
    readonly: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    linkage: [Object, Array],
    ganged: Object
  },
  components: {
    HtFieldTail
  },
  data() {
    return {
      inputName: null,
	  writeable: true,
      formatValue:""
    };
  },
  computed: {
    inputVal: {
      get: function() {
        if(utils.isEmpty(this.value)){
          return "";
        }

        if (
          this.value !== null &&
          this.value !== undefined &&
          !this.inputWriteable && 
          this.options && 
          this.options.length > 0
        ) {
          this.formatValue = this.options.find(opt => opt[this.propKey] == this.value).value;
        }
        return this.value;
      },
      set: function(val) {
        this.$emit("input", val);
      }
    },
    inputWriteable: function() {
      return this.writeable ? utils.getWriteable(this.permission):this.writeable;
    },
    inputValidate: function() {
      return utils.addRequiredOrNot(this.permission, this.validate, this);
    },
    propKey: function() {
      if (this.props && this.props.key) {
        return this.props.key;
      }
      return "key";
    },
    propValue: function() {
      if (this.props && this.props.value) {
        return this.props.value;
      }
      return "value";
    }
  },
  mounted() {
    const _me = this;
    this.mountedLinkage();
  },
  created() {
    this.inputName = this.name ? this.name : utils.getName();
    this.$validator = this.$root.$validator;
  },
  methods: {
    mountedLinkage(){
      if (this.linkage) {
        const exp = this.linkage;
        //如果要联动的字段权限是只读“r”,则把联动配置里面要联动的字段权限“w”改为只读“r”
        if (exp && exp.length > 0) {
          const frmInst = utils.getOnlineFormInstance(this);
          //表单所有字段的初始权限
          if (frmInst && frmInst.permission) {
            exp.forEach((item) => {
              let effect = item.effect;
              effect.forEach((effectItem) => {
                let initPermission = utils.getValueByPath(frmInst,effectItem.target);
                if (
                  effectItem.target &&
                  effectItem.target.indexOf("permission") != -1 &&
                  effectItem.value != "n" && initPermission == "r"
                ) {
                  effectItem.value =  initPermission;
                }
              });
            });
          }
        }
        service.linkageHandler(this, exp);
      }
    },
    change( radioLabel ){
      this.$emit("change",radioLabel);
    }
  }
};
</script>
<style lang="scss" scoped>
label.el-radio-horizontal {
  margin: 0px 30px 0 0;
}

label.el-radio-vertical {
  display: block;
}

label.el-radio-vertical ~ label.el-radio-vertical {
  margin-top: 10px;
  margin-left: 0px;
}

.el-radio-group {
  line-height: inherit;
}

div.el-radio-group[aria-invalid='true'] {
  border: 1px solid #f56c6c;
  padding: 0 0 10px 10px;
}
</style>