<template>
  <ui-page :title="title" :query-method="handleQueryData">
    <div class="bi-settlement-rule-adjust-price__tips">
      下方为不含税单价
    </div>
    <div class="bi-settlement-rule-adjust-price__form">
      <ui-form label-position="top">
        <ui-form-item
          v-for="(item, index) in configItems"
          :key="index"
          :label="item.vehicleModel"
        >
          <span class="bi-settlement-rule-adjust-price__input">
            <ui-spinner v-model="formData[item.vehicleModel]" @input="handlePriceChange(item, $event)"></ui-spinner>
          </span>
          <span class="bi-settlement-rule-adjust-price__unit">元/方</span>
        </ui-form-item>
      </ui-form>
    </div>
  </ui-page>
</template>
<script>
export default {
  name: 'BiSettlementRuleAdjustPrice',
  inject: ['AdjustRule'],
  props: {
    title: {
      type: String
    },
    type: {
      type: String
    },
    getSettleRuleCarConfigMethod: {
      type: Function
    }
  },
  data() {
    return {
      configItems: [],
      vehicleRuleItems: [],
      formData: {}
    }
  },
  created() {
    this.vehicleRuleItems = ((this.AdjustRule.getData('vehicleRule') || {}).settings || []).find(v => v.vehicleType === this.type).types || []
    this.formData = this.vehicleRuleItems.reduce((rs, v) => {
      rs[v.model] = v.price
      return rs
    }, {})
  },
  methods: {
    handleQueryData() {
      return this.getSettleRuleCarConfigMethod(this.type).then(rs => {
        this.configItems = rs
      })
    },
    handlePriceChange(item, value) {
      const ruleItem = this.vehicleRuleItems.find(v => v.model === item.vehicleModel)
      if (!ruleItem) {
        return
      }
      ruleItem.price = value
    }
  }
}
</script>
<style lang="less">
.bi-settlement-rule-adjust-price__input{
  display: inline-block;
  width: 280px;
  vertical-align: top;
}
.bi-settlement-rule-adjust-price__unit{
  color: #999;
  display: inline-block;
  vertical-align: top;
  margin-left: 12px;
}
.bi-settlement-rule-adjust-price__tips,
.bi-settlement-rule-adjust-price__form{
  margin: 24px 0;
  padding: 0 24px;
}
.bi-settlement-rule-adjust-price__tips{
  font-size: 12px;
}
</style>
