<template>
  <div
    v-if="permission != 'n'"
    :class="[
      'inputs',
      formInputsDisplay == 'block'
        ? 'ht-form-inputs__block'
        : 'ht-form-inputs__inline',
      isMobile && optionsVal && optionsVal.length > 2
        ? 'has-margin-radio-box'
        : 'mobile-radio-box',
    ]"
  >
    <div v-if="inputWriteable && permission_sub != 'n'">
      <template v-if="isSubCellReadOnly">
        <input
          v-validate="validateRules"
          :value="inputVal"
          type="hidden"
          :name="inputName"
          :data-vv-as="name"
        />
        <div class="sub-table-cell-readonly" @click="handleCellClick">
          <span>
            {{ formatValue || inputVal }}
          </span>
        </div>
      </template>
      <template v-else>
        <el-radio-group
          v-if="!isMobile"
          v-model="inputVal"
          v-validate="validateRules"
          :size="inputSize"
          :name="inputName"
          :data-vv-as="name"
          :style="styles"
          :disabled="
            !inputWriteable ||
            (permission && permission === 'd' ? true : false) ||
            (permission_sub && permission_sub === 'd')
          "
          @change="change"
        >
          <el-radio
            v-for="item in optionsVal"
            :key="item[propKey]"
            :class="{
              'el-radio-vertical': optionLayout == 'vertical',
              'el-radio-horizontal': optionLayout == 'horizontal',
            }"
            :label="item[propKey]"
            :disabled="
              readonly ||
              disabled ||
              item.disabled ||
              !inputWriteable ||
              (permission && permission === 'd' ? true : false) ||
              (permission_sub && permission_sub === 'd')
            "
          >
            {{ $td(item.i18nKey, item[propValue]) }}
          </el-radio>
        </el-radio-group>
        <div v-else-if="isBtnRadio" class="btn-radio__wrap">
          <!-- 校验 -->
          <input
            v-model="inputVal"
            v-validate="validateRules"
            type="hidden"
            :name="inputName"
            :data-vv-as="name"
          />
          <van-grid :gutter="12" column-num="3">
            <van-grid-item
              v-for="(item, index) in optionsVal"
              :key="item[propKey]"
              :class="{ 'active-radio': activeIndex === index && inputVal }"
              :text="$td(item.i18nKey, item[propValue])"
              @click="handleClickRadio(item, index)"
            />
          </van-grid>
        </div>
        <div v-else>
          <van-radio-group
            v-model="inputVal"
            v-validate="validateRules"
            :name="inputName"
            :data-vv-as="name"
            :direction="optionLayout == 'horizontal' ? 'horizontal' : ''"
            :icon-size="18"
            @change="change"
          >
            <van-radio
              v-for="item in optionsVal"
              :key="item[propKey]"
              :name="item[propKey]"
              checked-color="#409EFF"
              :disabled="
                readonly ||
                disabled ||
                item.disabled ||
                !inputWriteable ||
                (permission && permission === 'd' ? true : false) ||
                (permission_sub && permission_sub === 'd')
              "
            >
              {{ $td(item.i18nKey, item[propValue]) }}
            </van-radio>
          </van-radio-group>
        </div>
      </template>
    </div>
    <ht-field-tail
      v-if="permission != 'n'"
      :field-name="inputName"
      :readonly="!inputWriteable"
      :input-value="formatValue || inputVal"
    />
  </div>
</template>
<script>
  import utils from '@/utils.js'
  import HtFieldTail from '../../FieldTail/index'
  import permission from '@/mixins/permission.js'
  import linkage from '@/mixins/linkage.js'
  import inputName from '@/mixins/inputName.js'
  import ganged from '@/mixins/ganged.js'
  import form from '@/mixins/form.js'
  import formDataUpdate from '@/mixins/formDataUpdate.js'
  import mobileMode from '@/mixins/mobileMode.js'
  import tableFieldReadOnly from '@/mixins/tableFieldReadOnly.js'

  export default {
    name: 'HtRadio',
    components: {
      HtFieldTail,
    },
    mixins: [
      permission,
      inputName,
      linkage,
      ganged,
      form,
      formDataUpdate,
      mobileMode,
      tableFieldReadOnly,
    ],
    props: {
      value: [String, Number, Boolean],
      options: Array,
      optionLayout: {
        type: String,
        default: 'horizontal',
        validator: function (value) {
          return ['horizontal', 'vertical'].some((i) => i == value)
        },
      },
      readonly: {
        type: Boolean,
        default: false,
      },
      disabled: {
        type: Boolean,
        default: false,
      },
      rdlist: String,
      styles: Object,
      isBtnRadio: {
        type: Boolean,
        default: false,
      },
      isValidate: {
        type: Boolean,
        default: false,
      },
    },
    data() {
      return {
        formatValue: '',
        optionsVal: [],
        mobileChecked: '',
        activeIndex: '',
      }
    },
    computed: {
      inputVal: {
        get: function () {
          if (utils.isEmpty(this.value)) {
            return ''
          }
          if (
            this.value !== null &&
            this.value !== undefined &&
            (!this.inputWriteable || this.isSubCellReadOnly) &&
            this.optionsVal &&
            this.optionsVal.length > 0
          ) {
            // eslint-disable-next-line
            this.formatValue = this.optionsVal.find(
              // eslint-disable-next-line
              (opt) => opt[this.propKey] == this.value
            ).value
          }
          return this.value
        },
        set: function (val) {
          this.$emit('input', val)
        },
      },
      validateRules() {
        return this.disabled && !this.isValidate ? '' : this.inputValidate
      },
    },
    watch: {
      options() {
        this.loadOption()
      },
      optionsVal() {
        if (this.isMobile) {
          this.addMobileCenterStyle()
        }
      },
    },
    created() {
      this.$on('formDataUpdate', () => {
        this.loadOption()
      })
    },
    mounted() {
      this.$nextTick(() => {
        this.loadOption()
      })
    },
    methods: {
      change(radioLabel) {
        this.$emit('change', radioLabel)
      },
      //加载选项
      loadOption() {
        // 动态选项
        if (this.ganged && this.ganged.alias) {
          this.dynamicLoadOption()
        } else {
          // 静态选项
          this.optionsVal = this.rdlist
            ? JSON.parse(this.rdlist)
            : this.options
            ? this.options
            : []
        }
      },
      // 动态加载选项
      dynamicLoadOption() {
        this.doCustomQuery(null, true).then(({ data }) => {
          if (data != null || data != undefined) {
            this.optionsVal = data
          }
        })
      },
      handleClickRadio(item, index) {
        this.activeIndex = index
        this.$emit('input', item[this.propKey])
      },
    },
  }
</script>
<style lang="scss" scoped>
  label.el-radio-horizontal {
    margin-right: 30px;
  }

  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: 1.2;
    max-width: 100%;
  }
  ::v-deep .el-radio__label {
    white-space: wrap;
    line-height: 1.2;
  }
  div.el-radio-group[aria-invalid='true'] {
    outline: 1px solid #f56c6c;
  }
  div.van-radio-group[aria-invalid='true'] {
    border: none;
  }
  .van-radio {
    margin: 5px 0 5px 24px;
    justify-content: flex-end;
  }

  ::v-deep .van-radio__icon--disabled .van-icon {
    background-color: #f9f9f9;
    border-color: #e6e6e6;
  }
  ::v-deep .van-radio__icon--checked.van-radio__icon--disabled .van-icon {
    color: #fff;
    background-color: #a0cfff !important;
    border-color: #a0cfff;
  }
  .btn-radio__wrap {
    ::v-deep {
      .van-grid {
        padding-left: 0 !important;
        .van-grid-item {
          .van-grid-item__content {
            background-color: #f9f9f9;
            border-radius: 8px;
            padding: 13px 16px;
            .van-grid-item__text {
              font-size: 14px;
              color: #262626;
            }
          }
          .van-grid-item__content--surround::after {
            border-radius: 8px;
            border-width: 0;
          }
        }
        .active-radio {
          .van-grid-item__content {
            background-color: #409eff;
            .van-grid-item__text {
              color: #fff;
            }
          }
        }
      }
    }
  }

  ::v-deep .van-radio-group--horizontal {
    justify-content: flex-end;
  }
</style>
