<template>
  <div>
    <el-row style="margin-bottom: 16px;">
      <el-col :span="12" label-width="0" v-for="(item, index) of 4" style="margin-bottom: 8px">
        <el-tooltip effect="dark" :content="`单击设置${item}档电价，双击全部设置为${item}档电价`" placement="top">
          <el-button
            :disabled="disabled"
            :size="size"
            :plain="amountIndex !== index"
            :type="indexStyle[index]"
            @click="handleSetAmountIndex(index)"
            @dblclick.native="handleAllSet(index)">
            {{item}}档电价
          </el-button>
        </el-tooltip>
        <el-input-number
          :disabled="disabled"
          :size="size"
          v-model="gearAmount[index]"
          controls-position="right"
          placeholder="请输入电价"
          :precision="2"
          style="width: calc(100% - 11em)"
        /> {{gearUnit}}
      </el-col>
    </el-row>
    <el-row style="margin-bottom: 16px">
      <el-col :span="6" v-for="(item, index) of 24" :key="index" v-if="!refresh">
        <el-button :disabled="disabled" :size="size" plain style="width: 100%" :type="timeType(index)" @click="handleClickTimeItem(index)">{{index}} 时</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { SuitFeeType } from '@/utils/constants'

export default {
  name: 'SuitTimePrice',
  props: {
    // 档位金额
    gearAmount: {
      type: Array,
      default: () => ([])
    },
    // 档位时间
    gearTime: {
      type: Array,
      default: () => ([])
    },
    // 收费方式
    feeType: {
      type: String,
      default: null
    },
    size: {
      type: String,
      default: null,
    },
    disabled: {
      type: Boolean,
      default: false,
    }
  },
  data() {
    return {
      indexStyle: ['success', 'primary', 'warning', 'danger'],
      refresh: false,
      // 当前设置电价的索引
      amountIndex: null,
    }
  },
  computed: {
    // 收费方式单位
    gearUnit() {
      return this.feeType === SuitFeeType.TIME_COUNT ? '元 / 度' : '元 / 时 '
    },
    // 时间显示类型
    timeType() {
      return (index) => {
        if(this.gearTime[index] == null) {
          return null;
        }
        return this.indexStyle[this.gearTime[index]];
      }
    }
  },
  methods: {
    // 处理点击索引按钮
    handleSetAmountIndex(index) {
      if (this.amountIndex === index) {
        this.amountIndex = null;
      } else {
        this.amountIndex = index;
      }
    },
    // 全部设置为某一个类型
    handleAllSet(index) {
      for(let i = 0; i < 24; i ++) {
        this.gearTime[i] = index;
      }
      this.refreshItems();
    },
    handleClickTimeItem(index) {
      if (this.amountIndex != null) {
        this.gearTime[index] = this.amountIndex;
        this.refreshItems();
      }
    },
    // 刷新列表
    refreshItems() {
      this.refresh = true;
      this.$nextTick(() => {
        this.refresh = false
      })
    },
  }
}
</script>
<style scoped lang="scss">

</style>
