<template>
  <div class="bi-settlement-rule-select">
    <div
      class="bi-settlement-rule-select__item"
      :class="{'is-active': item.id === value, 'is-hover': popoverVisibleMap[item.id]}"
      v-for="(item, index) in SettlementRuleData"
      :key="index"
    >
      <ui-popover
        trigger="hover"
        placement="bottom-start"
        v-model="popoverVisibleMap[item.id]"
        @input="handlePopoverVisibleChange(item, $event)"
      >
        <div
          class="bi-settlement-rule-select__handle"
          slot="reference"
          @click="handleHandleClick(item)"
        >{{ item.ruleName }}</div>
        <div
          class="bi-settlement-rule-select__main"
          v-if="popoverVisibleMap[item.id]"
        >
          <div
            class="bi-settlement-rule-select__loading"
            v-if="ruleLoadingMap[item.id]"
          >
            <ui-loading :visible="true"></ui-loading>
          </div>
          <div class="bi-settlement-rule-select__detail" v-else-if="currentSettlementRule">
            <template v-if="currentSettlementRule.vehicleRule">
              <h3>{{ currentSettlementRule.vehicleRule.title }}</h3>
              <template v-if="currentSettlementRule.vehicleRule.settings">
                <template
                  v-for="(item, index) in currentSettlementRule.vehicleRule.settings"
                >
                  <p :key="`title-${index}`">{{ item.vehicleType }}</p>
                  <p :key="`content-${index}`">
                    <span
                      v-for="(quota, index) in item.types"
                      :key="index"
                    >{{ quota.model }} <b>{{ quota.price }}</b>元</span>
                  </p>
                </template>
              </template>
            </template>
            <h3>保底</h3>
            <p>泵车单次出车保底 <b>{{ currentSettlementRule.minGuaranteeRule.min_vehicle }}</b> 方</p>
            <p>泵车每月结算保底 <b>{{ currentSettlementRule.minGuaranteeRule.min_month }}</b> 方</p>
            <p>泵车每小时泵送保底 <b>{{ currentSettlementRule.minGuaranteeRule.min_hour }}</b> 方</p>
            <p>工作时长精确范围 <b>{{ currentSettlementRule.minGuaranteeRule.work_type === 'minute' ? '每分钟' : currentProject.minGuaranteeRule.work_type === 'hour' ? '每小时' : '' }}</b></p>
            <p>车辆到达现场后， <b>{{ currentSettlementRule.minGuaranteeRule.start_work_time }}</b> 小时为实景小票工作开始时间</p>
            <h3>税率</h3>
            <p>结算税率 <b>{{ currentSettlementRule.taxRate }}</b> %</p>
          </div>
        </div>
      </ui-popover>
    </div>
  </div>
</template>
<script>
export default {
  name: 'BiSettlementRuleSelect',
  props: {
    data: {
      type: Array
    },
    value: {
      type: String
    },
    getSettlementRuleDetailMethod: {
      type: Function
    }
  },
  data() {
    return {
      popoverVisibleMap: {},
      ruleLoadingMap: {},
      ruleDataMap: {},
      SettlementRuleData: this.data,
      currentVisibleRule: null
    }
  },
  computed: {
    currentSettlementRule() {
      if (!this.currentVisibleRule) {
        return
      }
      let ruleData = this.ruleDataMap[this.currentVisibleRule.id]
      if (ruleData) {
        ruleData = JSON.parse(JSON.stringify(ruleData))
        if (ruleData.vehicleRule && typeof ruleData.vehicleRule === 'string') {
          ruleData.vehicleRule = JSON.parse(ruleData.vehicleRule)
        }
        if (ruleData.minGuaranteeRule && typeof ruleData.minGuaranteeRule === 'string') {
          ruleData.minGuaranteeRule = JSON.parse(ruleData.minGuaranteeRule)
        }
      }
      return ruleData
    }
  },
  watch: {
    data() {
      this.SettlementRuleData = this.data || []
    }
  },
  methods: {
    handleHandleClick(item) {
      if (this.value === item.id) {
        this.$emit('input', null)
        this.$emit('change', {
          item: null
        })
      } else {
        this.$emit('input', item.id)
        this.$emit('change', {
          item
        })
      }
    },
    handlePopoverVisibleChange(item, visible) {
      this.currentVisibleRule = item
      this.$set(this.popoverVisibleMap, item.id, visible)
      if (visible && !this.ruleDataMap[item.id]) {
        this.getSettlementRuleDetail(item.id)
      }
    },
    getSettlementRuleDetail(id) {
      this.$set(this.ruleLoadingMap, id, true)
      this.getSettlementRuleDetailMethod(id).then((rs) => {
        this.$set(this.ruleDataMap, id, rs)
      }).finally(() => {
        this.$set(this.ruleLoadingMap, id, false)
      })
    }
  }
}
</script>
<style lang="less">
.bi-settlement-rule-select__item{
  &:not(:last-child) {
    margin-bottom: 12px;
  }
  &.is-hover {
    .bi-settlement-rule-select__handle{
      background-color: #F3F4F5;
    }
  }
  &.is-active {
    .bi-settlement-rule-select__handle{
      background-color: #edf3fe;
      border-color: #3385FF;
    }
  }
}
.bi-settlement-rule-select__handle{
  display: inline-block;
  height: 24px;
  line-height: 24px;
  padding: 3px 12px;
  border: 1px solid transparent;
  color: #606C80;
  cursor: pointer;
  transition: all .25s;
  border-radius: 3px;
}
.bi-settlement-rule-select__detail{
  color: #131313;
  font-size: 12px;
  line-height: 1.5em;
  padding: 12px 24px;
  min-width: 640px;
  h3{
    font-size: 14px;
  }
  b{
    font-weight: normal;
    color: #5086fa;
  }
  span{
    &:not(:last-child):after {
      content: '、',
    }
  }
}
.bi-settlement-rule-select__loading{
  padding: 24px;
}
</style>
