<template>
  <ui-page :title="title">
    <div class="bi-settlement-rule-adjust-guarantee__form">
      <div class="bi-settlement-rule-adjust-guarantee__item">
        <ui-radio-group v-model="formData.item_rule_flag">
          <ui-radio label="0">不跟随项目规则</ui-radio>
          <ui-radio label="1">跟随项目规则</ui-radio>
        </ui-radio-group>
      </div>
      <div class="bi-settlement-rule-adjust-guarantee__item">
        <span class="bi-settlement-rule-adjust-guarantee__label">泵车单次出车保底</span>
        <div class="bi-settlement-rule-adjust-guarantee__target">
          <span class="bi-settlement-rule-adjust-guarantee__input">
            <ui-select
              v-model="formData.min_vehicle"
              :items="minVehicleOptions"
              :disabled="formData.item_rule_flag === '1'"
            ></ui-select>
          </span>
          <span class="bi-settlement-rule-adjust-guarantee__unit">方</span>
        </div>
      </div>
      <div class="bi-settlement-rule-adjust-guarantee__item">
        <span class="bi-settlement-rule-adjust-guarantee__label">泵车每月结算保底</span>
        <div class="bi-settlement-rule-adjust-guarantee__target">
          <span class="bi-settlement-rule-adjust-guarantee__input">
            <ui-select
              v-model="formData.min_month"
              :items="minMonthOptions"
              :disabled="formData.item_rule_flag === '1'"
            ></ui-select>
          </span>
          <span class="bi-settlement-rule-adjust-guarantee__unit">方</span>
        </div>
      </div>
      <div class="bi-settlement-rule-adjust-guarantee__item">
        <span class="bi-settlement-rule-adjust-guarantee__label">泵车每小时泵送保底</span>
        <div class="bi-settlement-rule-adjust-guarantee__target">
          <span class="bi-settlement-rule-adjust-guarantee__input">
            <ui-select
              v-model="formData.min_hour"
              :items="minHourOptions"
              :disabled="formData.item_rule_flag === '1'"
            ></ui-select>
          </span>
          <span class="bi-settlement-rule-adjust-guarantee__unit">方</span>
        </div>
      </div>
      <div class="bi-settlement-rule-adjust-guarantee__item">
        <span class="bi-settlement-rule-adjust-guarantee__label">工作时长精确范围</span>
        <div class="bi-settlement-rule-adjust-guarantee__target">
          <span class="bi-settlement-rule-adjust-guarantee__input">
            <ui-select
              v-model="formData.work_time"
              :items="timeTypeOptions"
              :disabled="formData.item_rule_flag === '1'"
            ></ui-select>
          </span>
          <span class="bi-settlement-rule-adjust-guarantee__tips">{{workTimeTips}}</span>
        </div>
      </div>
      <div class="bi-settlement-rule-adjust-guarantee__item">
        <span class="bi-settlement-rule-adjust-guarantee__label">车辆到达现场后，</span>
        <div class="bi-settlement-rule-adjust-guarantee__target">
          <span class="bi-settlement-rule-adjust-guarantee__input">
            <ui-spinner
              v-model="formData.start_work_time"
              :disabled="formData.item_rule_flag === '1'"
            ></ui-spinner>
          </span>
          <span class="bi-settlement-rule-adjust-guarantee__tips">小时为实际小票工作开始时间</span>
        </div>
      </div>
    </div>
  </ui-page>
</template>
<script>
export default {
  name: 'BiSettlementRuleAdjustGuarantee',
  inject: ['AdjustRule'],
  props: {
    title: {
      type: String
    }
  },
  data() {
    return {
      formData: {}
    }
  },
  computed: {
    minVehicleOptions() {
      return [{
        text: '0',
        value: '0'
      }, {
        text: '60',
        value: '60'
      }, {
        text: '80',
        value: '80'
      }, {
        text: '100',
        value: '100'
      }, {
        text: '120',
        value: '120'
      }]
    },
    minHourOptions() {
      return [{
        text: '0',
        value: '0'
      }, {
        text: '15',
        value: '15'
      }, {
        text: '20',
        value: '20'
      }, {
        text: '25',
        value: '25'
      }, {
        text: '30',
        value: '30'
      }]
    },
    minMonthOptions() {
      return [{
        text: '0',
        value: '0'
      }, {
        text: '1000',
        value: '1000'
      }, {
        text: '2000',
        value: '2000'
      }, {
        text: '3000',
        value: '3000'
      }, {
        text: '5000',
        value: '5000'
      }]
    },
    workTimeTips() {
      return (this.timeTypeOptions.find(v => v.value === this.formData.work_time) || {}).tips || ''
    },
    timeTypeOptions() {
      return [{
        text: '每分钟',
        value: '1'
      }, {
        text: '每5分钟',
        value: '5',
        tips: '不足5分钟，按5分钟计算'
      }, {
        text: '每10分钟',
        value: '10',
        tips: '不足10分钟，按10分钟计算'
      }, {
        text: '每30分钟',
        value: '30',
        tips: '不足30分钟，按30分钟计算'
      }, {
        text: '每小时',
        value: '60',
        tips: '不到半小时不算，超过半小时按1小时算'
      }]
    }
  },
  created() {
    this.formData = this.AdjustRule.getData('minGuaranteeRule')
  }
}
</script>
<style lang="less">
.bi-settlement-rule-adjust-guarantee__form{
  padding: 0 24px;
}
.bi-settlement-rule-adjust-guarantee__item{
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 36px 0;
}
.bi-settlement-rule-adjust-guarantee__label{
  margin-right: 12px;
}
.bi-settlement-rule-adjust-guarantee__input,
.bi-settlement-rule-adjust-guarantee__unit,
.bi-settlement-rule-adjust-guarantee__tips{
  display: inline-block;
  vertical-align: top;
}
.bi-settlement-rule-adjust-guarantee__unit{
  line-height: 24px;
  padding: 6px 0;
  margin-left: 12px;
}
.bi-settlement-rule-adjust-guarantee__tips{
  color: #999;
  line-height: 24px;
  padding: 6px 0;
  margin-left: 12px;
}
.bi-settlement-rule-adjust-guarantee__input{
  width: 120px;
}
</style>
