<template>
  <div
    v-if="permission !== 'n'"
    v-express
    :class="[
      'inputs',
      formInputsDisplay == 'block'
        ? 'ht-form-inputs__block'
        : 'ht-form-inputs__inline',
      isMobile ? 'mobile-btn-box' : 'pc-btn-box',
    ]"
  >
    <template v-if="!isMobile && (inputWriteable || isShowButton)">
      <template v-if="isSubCellReadOnly">
        <div class="sub-table-cell-readonly" @click="handleCellClick">
          <span>
            {{ inputVal }}
          </span>
        </div>
      </template>
      <template v-else>
        <ht-input
          v-if="isShowInput"
          v-model="inputVal"
          :size="inputSize"
          :placeholder="placeholder"
          display-style="block"
          type="text"
          :permission="permission_sub"
        >
          <template v-if="inputWriteable" slot="append">
            <el-button
              btn="btn"
              :size="inputSize"
              :icon="icon"
              :class="[styleType ? 'ht-button--' + styleType : '']"
              :style="{
                '--btnColor': textColor ? textColor : '#fff',
                '--btnBackground':
                  lableColor && styleType == 'fillButton' ? lableColor : '#fff',
                '--btnBorderColor':
                  lableColor && styleType != 'textButton' ? lableColor : '',
              }"
              :type="styleType == 'textButton' ? 'text' : 'default'"
              :plain="styleType == 'lineButton' ? true : false"
              @click="customEvilJS"
            >
              {{ btnName }}
            </el-button>
          </template>
        </ht-input>
        <el-button
          v-else
          :disabled="!inputWriteable && !isShowButton"
          btn="btn"
          :size="inputSize"
          :icon="icon"
          :class="[styleType ? 'ht-button--' + styleType : '']"
          :style="{
            '--btnColor': textColor ? textColor : '#fff',
            '--btnBackground':
              lableColor && styleType == 'fillButton' ? lableColor : '#fff',
            '--btnBorderColor':
              lableColor && styleType != 'textButton' ? lableColor : '',
          }"
          :type="styleType == 'textButton' ? 'text' : 'default'"
          :plain="styleType == 'lineButton' ? true : false"
          @click="customEvilJS"
        >
          {{ btnName }}
        </el-button>
      </template>
    </template>
    <template v-if="isMobile">
      <van-field
        v-if="isShowInput"
        v-model="inputVal"
        class="btn-field"
        :size="inputSize"
        placeholder="请输入"
      >
        <template v-if="inputWriteable" #button>
          <van-button
            :size="inputSize"
            center
            clearable
            class="mobile-btn__text"
            :class="[styleType ? 'ht-button--' + styleType : '']"
            :style="{
              '--btnColor': textColor ? textColor : '#fff',
              '--btnBackground':
                lableColor && styleType == 'fillButton' ? lableColor : '#fff',
              '--btnBorderColor':
                lableColor && styleType != 'textButton' ? lableColor : '',
            }"
            @click.prevent="customEvilJS"
          >
            <template #icon>
              <i v-if="icon" :class="icon"></i>
              <van-icon v-else name="more-o" />
            </template>
            {{ btnName }}
          </van-button>
        </template>
      </van-field>
      <van-button
        v-else
        class="mobile-btn"
        :disabled="!inputWriteable"
        :size="inputSize"
        :class="[styleType ? 'ht-button--' + styleType : '']"
        :style="{
          '--btnColor': textColor ? textColor : '#fff',
          '--btnBackground':
            lableColor && styleType == 'fillButton' ? lableColor : '#fff',
          '--btnBorderColor':
            lableColor && styleType != 'textButton' ? lableColor : '',
        }"
        @click.prevent="customEvilJS"
      >
        <template #icon>
          <i v-if="icon" :class="icon"></i>
        </template>
        {{ btnName }}
      </van-button>
    </template>
  </div>
</template>
<script>
  import permission from '@/mixins/permission.js'
  import inputName from '@/mixins/inputName.js'
  import form from '@/mixins/form.js'
  import script from '@/mixins/script.js'
  import mobileMode from '@/mixins/mobileMode.js'
  import utils from '@/utils.js'
  import tableFieldReadOnly from '@/mixins/tableFieldReadOnly.js'
  export default {
    name: 'HtButton',
    mixins: [
      permission,
      inputName,
      form,
      script,
      mobileMode,
      tableFieldReadOnly,
    ],
    props: {
      value: [String, Number],
      icon: String,
      btnName: String,
      isShowInput: Boolean,
      styleType: String,
      lableColor: String,
      textColor: String,
      isShowButton: {
        type: Boolean,
        default: false,
      },
    },
    computed: {
      inputVal: {
        get() {
          return this.value
        },
        set(val) {
          this.$emit('input', val)
        },
      },
    },
    methods: {
      customEvilJS() {
        const { index, subScopeEl } = utils.getSubScopeElAndIndex(this.$el)
        //孙表时，获取孙表所属子表序号
        var parentIndex
        if (subScopeEl) {
          const subIdxObj = utils.getSubScopeElAndIndex(
            subScopeEl.parentElement
          )
          parentIndex = subIdxObj.index
        }
        const result = this.evilJS(index, parentIndex)
        if (result != null && result != undefined) {
          this.inputVal = result
        }
      },
    },
  }
</script>
<style lang="scss" scoped>
  .pc-btn-box {
    max-width: 220px;
  }
  .inputs.mobile-btn-box {
    height: 48px;
    display: flex;
    align-items: center;
  }
  div[aria-invalid='true'] ::v-deep .el-input__inner,
  div[aria-invalid='true'] ::v-deep .el-input__inner:focus {
    border-color: #f56c6c;
  }
  .button-row {
    margin: 5px 10px;
    float: right;
  }
  .btn-field {
    padding: 0;
  }
  .mobile-btn {
    height: 32px;
    line-height: 32px;
    border-radius: 8px;
    padding: 0 16px;
    margin-left: 16px;
    overflow: hidden;
    ::v-deep {
      .van-button__icon {
        font-size: 22px;
      }
      .van-button__text {
        font-size: 14px;
        font-weight: 500;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
  .mobile-btn:nth-child(1) {
    margin-left: 0;
  }
  .mobile-btn__text {
    border-radius: 8px;
    font-size: 14px;
    .van-button__icon {
      font-size: 22px;
    }
  }
  ::v-deep {
    .ht-button--fillButton {
      color: var(--btnColor);
      border-color: var(--btnBorderColor);
      background-color: var(--btnBackground);
      &:hover {
        color: var(--btnColor);
        border-color: var(--btnBorderColor);
        background-color: var(--btnBackground);
        opacity: 0.8;
      }
    }
    .ht-button--lineButton {
      color: var(--btnColor);
      border-color: var(--btnBorderColor);
      &:hover {
        color: #fff;
        border-color: var(--btnBorderColor);
        background-color: var(--btnBorderColor);
      }
    }
    .ht-button--textButton {
      color: var(--btnColor);
      border: none;
    }
    .inputs .el-input-group__append {
      text-align: center;
      .ht-button--fillButton {
        color: var(--btnColor);
        border-color: var(--btnBorderColor);
        background-color: var(--btnBackground);
        &:hover {
          color: var(--btnColor);
          border-color: var(--btnBorderColor);
          background-color: var(--btnBackground);
          opacity: 0.8;
        }
      }
      .ht-button--lineButton {
        color: var(--btnColor);
        border-color: var(--btnBorderColor);
        &:hover {
          color: #fff;
          border-color: var(--btnBorderColor);
          background-color: var(--btnBorderColor);
        }
      }
      .ht-button--textButton {
        color: var(--btnColor);
      }
    }
  }
</style>
