<template>
  <div class="inputs ht-component">
    <!-- 只读也要显示选择框 -->
    <!-- v-if="inputWriteable" -->
    <el-radio-group
      v-if="permission != 'n'"
      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 || permission == 'r'"
      >
        {{ item[propValue] }}
      </el-radio>
    </el-radio-group>
    <!-- v-if="permission != 'n'" -->
    <ht-field-tail
      v-if="!['r', 'n'].includes(permission)"
      :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
        ) {
          /* eslint-disable */
          this.formatValue = this.options.find(
            (opt) => opt[this.propKey] == this.value
          ).value;
          /* eslint-enable */
        }
        return this.value;
      },
      set: function(val) {
        this.$emit("input", val);
      }
    },
    inputWriteable: function() {
      return this.writeable
        ? utils.getWriteable(this.permission)
        : this.writeable;
    },
    inputValidate: function() {
      if (this.permission == "r") return;
      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() {
    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;
                }
              });
            });
          }
        }
        setTimeout(() => {
          service.linkageHandler(this, exp);
        }, 0);
      }
    },
    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>
