<template>
  <ui-page
    class="bi-settlement-rule-history"
    title="结算规则"
    :query-method="handleQueryData"
  >
    <div v-if="currentRuleData" class="bi-settlement-rule-history__current">
      <ui-panel
        size="small"
        title="当前使用"
      >
        <div class="bi-settlement-rule-history__item is-vertical">
          <div class="bi-settlement-rule-history__item-main">
            <strong class="bi-settlement-rule-history__item-title">{{ currentRuleData.ruleName }}</strong>
            <span class="bi-settlement-rule-history__item-date">{{ currentRuleData.startTime || '开始' }} - {{ currentRuleData.endTime || '至今' }}</span>
          </div>
          <div class="bi-settlement-rule-history__item-tools">
            <ui-toolbar>
              <ui-toolbar-item>
                <ui-button type="text" @click="handleRuleAdjustClick">变更</ui-button>
              </ui-toolbar-item>
              <ui-toolbar-item>
                <ui-button type="text" @click="handleRuleChangeClick">重新选择</ui-button>
              </ui-toolbar-item>
            </ui-toolbar>
          </div>
        </div>
      </ui-panel>
    </div>
    <div class="bi-settlement-rule-history__history">
      <ui-panel
        size="small"
        title="历史使用"
      >
        <template v-if="historyRuleData && historyRuleData.length">
          <div
            class="bi-settlement-rule-history__item is-horizon"
            v-for="(item, index) in historyRuleData"
            :key="index"
          >
            <div class="bi-settlement-rule-history__item-main">
              <strong class="bi-settlement-rule-history__item-title">{{ item.ruleName }}</strong>
              <span class="bi-settlement-rule-history__item-date">
                {{ item.startTime || '开始' }} - {{ item.endTime || '至今' }}
              </span>
            </div>
          </div>
        </template>
        <template v-else>
          <ui-empty></ui-empty>
        </template>
      </ui-panel>
    </div>
    <ui-dialog
      title="重新选择"
      v-model="showChangeDialog"
    >
      <settlement-rule-change
        :load-settlement-rule-data-method="loadSettlementRuleDataMethod"
        :change-settlement-rule-method="changeSettlementRuleMethod"
        :rule-id="currentRuleData && currentRuleData.id"
        :min-time="currentRuleData && currentRuleData.startTime"
        :max-time="maxChangeTime"
        :success="handleRuleChangeSuccess"
      ></settlement-rule-change>
    </ui-dialog>
  </ui-page>
</template>
<script>
import SettlementRuleChange from '../settlement-rule-change/settlement-rule-change'
import { formatDate } from '@huntianning/components/src/utils/date'

export default {
  name: 'BiSettlementRuleDetail',
  components: {
    SettlementRuleChange
  },
  props: {
    rootPath: {
      type: String
    },
    getCurrentSettlementRuleDetailMethod: {
      type: Function
    },
    loadSettlementRuleDataMethod: {
      type: Function
    },
    changeSettlementRuleMethod: {
      type: Function
    }
  },
  data() {
    return {
      ruleDetailData: [],
      showChangeDialog: false
    }
  },
  computed: {
    currentRuleData() {
      return this.ruleDetailData.find(v => v.flag === '1')
    },
    historyRuleData() {
      return this.ruleDetailData.filter(v => v.flag !== '1')
    },
    maxChangeTime() {
      return formatDate(new Date(), 'YYYY-mm-dd')
    }
  },
  methods: {
    handleQueryData() {
      return this.getCurrentSettlementRuleDetailMethod(this.projectId).then((rs) => {
        this.ruleDetailData = rs
      })
    },
    handleRuleAdjustClick() {
      this.$router.push({
        path: `${this.rootPath}/adjust`
      })
    },
    handleRuleChangeClick() {
      this.showChangeDialog = true
    },
    handleRuleChangeSuccess() {
      return this.getCurrentSettlementRuleDetailMethod(this.projectId).then((rs) => {
        this.ruleDetailData = rs
      })
    }
  }
}
</script>
<style lang="less">
.bi-settlement-rule-history__current,
.bi-settlement-rule-history__history{
  padding: 24px 0;
  margin: 0 24px;
}
.bi-settlement-rule-history__current{
  border-bottom: 1px solid #D5D8DC;
}
.bi-settlement-rule-history__item{
  display: flex;
  flex-direction: row;
  line-height: 1.5em;
  min-height: 40px;
  &.is-vertical {
    .bi-settlement-rule-history__item-main{
      display: flex;
      flex-direction: column;
    }
    .bi-settlement-rule-history__item-date{
      margin-top: 6px;
    }
  }
  &.is-horizon {
    .bi-settlement-rule-history__item-main{
      display: flex;
      flex-direction: row;
      align-items: center;
    }
    .bi-settlement-rule-history__item-date{
      margin-left: 42px;
    }
  }
}
.bi-settlement-rule-history__item-main{
  flex: 1;
}
.bi-settlement-rule-history__item-title{
  font-size: 16px;
  font-weight: normal;
}
.bi-settlement-rule-history__item-date{
  color: #606C80;
}
</style>
