<template>
  <div
    v-if="permission != 'n' && permission_sub != 'n'"
    :style="{
      width: isMobile
        ? '100%'
        : formInputsDisplay == 'block'
        ? '100%'
        : '220px',
      textAlign: isMobile ? 'end' : 'start',
    }"
    :class="[
      'inputs',
      formInputsDisplay == 'block'
        ? 'ht-form-inputs__block'
        : 'ht-form-inputs__inline',
    ]"
  >
    <!-- 校验 -->
    <input
      v-if="!isSubCellReadOnly"
      v-model="value"
      v-validate="inputValidate"
      type="hidden"
      :name="inputName"
      :data-vv-as="name"
    />

    <template v-if="!isMobile">
      <template v-if="isSubCellReadOnly">
        <input
          v-if="isSubCellReadOnly"
          v-model="value"
          v-validate="inputValidate"
          type="hidden"
          :name="inputName"
          :data-vv-as="name"
        />
        <div
          class="sub-table-cell-readonly"
          :style="{
            background: !inputWriteable && '#fff',
          }"
          @click="handleCellClick"
        >
          <span>
            {{ inputVal }}
            <span v-if="showScore">分</span>
          </span>
        </div>
      </template>
      <template v-else>
        <div v-if="!isMobile">
          <el-rate
            v-model="inputVal"
            :max="max"
            :allow-half="allowHalf"
            :show-score="showScore || !inputWriteable"
            :text-color="textColor"
            :disabled="!inputWriteable"
            :icon-classes="iconClasses"
            :void-icon-class="iconClass"
            :disabled-void-icon-class="iconClass"
            :colors="activeColors"
            :score-template="showScore ? `{value}分` : ''"
          ></el-rate>
        </div>
      </template>
    </template>
    <div v-else class="mobile-rate">
      <van-rate
        v-model="inputVal"
        size="22"
        :allow-half="allowHalf"
        :disabled="!inputWriteable"
        color="#F7BA2A"
        disabled-color="#FFAE44"
        :count="max"
        :void-icon="voidIconChange"
        :icon="iconChange"
        :icon-prefix="iconPrefix"
      />
      <span v-if="showScore" class="core">{{ inputVal }}分</span>
    </div>
    <ht-field-tail
      :writeable.sync="inputWriteable"
      :field-name="inputName"
      :input-value="value"
      class="ht-rate-field-tail"
    />
  </div>
</template>
<script>
  import permission from '@/mixins/permission.js'
  import inputName from '@/mixins/inputName.js'
  import form from '@/mixins/form.js'
  import mobileMode from '@/mixins/mobileMode.js'
  import tableFieldReadOnly from '@/mixins/tableFieldReadOnly.js'
  export default {
    name: 'HtRate',
    mixins: [permission, inputName, form, mobileMode, tableFieldReadOnly],
    props: {
      value: [Number, String],
      allowHalf: {
        type: Boolean,
        default: false,
      },
      max: {
        type: Number,
        default: 5,
      },
      defaultValue: {
        type: Number,
        default: 5,
      },
      showScore: {
        type: Boolean,
        default: false,
      },
      textColor: {
        type: String,
        default: '#1F2D3D',
      },
      iconClass: {
        type: String,
        default: 'el-icon-star-off',
      },
      activeColor: {
        type: String,
        default: '#F7BA2A',
      },
    },
    computed: {
      voidIconChange() {
        if (this.iconClass.startsWith('icon-')) {
          return this.iconClass.substring(5)
        }
        if (this.isMobile && this.iconClass === 'el-icon-star-off') {
          return 'star-o'
        }
        return this.iconClass
      },
      iconChange() {
        if (this.iconClass.startsWith('icon-')) {
          return this.iconClass.substring(5)
        }
        if (this.isMobile && this.iconClass === 'el-icon-star-off') {
          return 'star'
        }
        return this.iconClass
      },
      iconPrefix() {
        if (this.isMobile && this.iconClass === 'el-icon-star-off') {
          return 'van-icon'
        }
        return 'icon'
      },
      inputVal: {
        get() {
          if (this.value > this.max) {
            return this.max
          }
          if (
            this.value !== null &&
            this.value !== undefined &&
            this.value.constructor == String
          ) {
            if (this.value.trim() == '') {
              return 0
            }
            const valueNum = Number(this.value)
            if (isNaN(valueNum)) {
              throw `HtRate组件的值必须是数字或值为数字的字符串。`
            }
            return valueNum
          }
          return this.value
        },
        set(val) {
          this.$emit('input', val === 0 ? '' : val)
        },
      },
      iconClasses() {
        let defaultClass =
          this.iconClass === 'el-icon-star-off'
            ? 'el-icon-star-on'
            : this.iconClass
        return [defaultClass, defaultClass, defaultClass]
      },
      activeColors() {
        return [this.activeColor, this.activeColor, this.activeColor]
      },
    },
    mounted() {
      if (!this.value) {
        this.inputVal = this.defaultValue
      }
    },
  }
</script>
<style lang="scss" scoped>
  .ht-rate-field-tail {
    position: absolute;
    top: 35px;
    width: 100%;
  }
  input[type='hidden'][aria-invalid='true'] + .el-rate {
    outline: 1px solid #f56c6c;
  }
  input[type='hidden'][aria-invalid='true'] + .van-rate {
    border: none;
  }
  ::v-deep .el-rate {
    display: inline-block;
    .el-icon-star-on {
      color: #eead3e !important;
    }
  }
  .core {
    display: inline-block;
    font-size: 14px;
    margin-left: 2px;
    vertical-align: middle;
    min-width: 40px;
  }
  .mobile-rate {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 10px 0;
    ::v-deep {
      .van-icon.van-rate__icon.van-rate__icon--half {
        position: absolute;
      }
    }
  }
</style>
