<template>
  <ui-page
    class="bi-settlement-rule"
    title="结算规则"
    :query-method="handleQueryData"
  >
    <div class="bi-settlement-rule__form">
      <div v-if="!settlementRuleData || !settlementRuleData.length" class="bi-settlement-rule__empty">
        <ui-empty>暂无结算规则数据</ui-empty>
      </div>
      <template v-else>
        <ui-form ref="form" :model="formData" :rules="formRules">
          <ui-form-item prop="ruleId" label-width="0px">
            <settlement-rule-select
              v-model="formData.ruleId"
              :data="settlementRuleData"
              @change="handleProjectRuleChange"
            />
          </ui-form-item>
          <ui-toolbar slot="toolbar">
            <ui-toolbar-item>
              <ui-button type="primary" :click="handleConfirmClick">保存</ui-button>
            </ui-toolbar-item>
          </ui-toolbar>
        </ui-form>
      </template>
    </div>
  </ui-page>
</template>
<script>
import SettlementRuleSelect from '../settlement-rule-select/settlement-rule-select.vue'

export default {
  name: 'BiSettlementRuleSetting',
  components: {
    SettlementRuleSelect
  },
  props: {
    saveSettlementRuleMethod: {
      type: Function
    },
    loadSettlementRuleDataMethod: {
      type: Function
    }
  },
  data() {
    return {
      settlementRuleData: [],
      formData: {
        ruleId: null,
        ruleName: ''
      }
    }
  },
  computed: {
    formRules() {
      return {
        ruleId: [{
          required: true,
          message: '结算规则不能为空',
          trigger: 'change'
        }]
      }
    }
  },
  methods: {
    handleQueryData() {
      return this.loadSettlementRuleDataMethod().then(rs => {
        this.settlementRuleData = rs || []
      })
    },
    handleProjectRuleChange({ item }) {
      if (item) {
        this.formData.ruleName = item.ruleName
      } else {
        this.formData.ruleName = ''
      }
    },
    handleConfirmClick() {
      return this.$refs.form.validate().then(() => {
        return this.saveSettlementRuleMethod(Object.assign({}, this.formData, {
        })).then(() => {
          this.$success('保存成功')
        })
      })
    }
  }
}
</script>
<style lang="less">
.bi-settlement-rule__form{
  padding: 24px;
}
.bi-settlement-rule__empty{
  padding: 60px;
}
</style>
