<template>
  <div class="manage-check">
    <!-- <div class="search search-bar">
      <div class="input-row margin-bottom-none">
        <el-date-picker
          v-model="time"
          type="daterange"
          size="small"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="dateFormatting"
        />
        <el-button class="search-btn" type="primary" size="small" @click="search">
          <i class="el-icon-search" />
          搜索
          <el-tooltip
            effect="light"
          >
            <div slot="content" style="max-width:500px">不输入日期默认查询上一次查询的日期数据</div>
            <i class="el-icon-question" />
          </el-tooltip>
        </el-button>
      </div>
    </div> -->

    <!-- 搜索栏 -->
    <div class="search-bar">
      <el-form :inline="true" :rules="dataRule" ref="searchForm" :model="searchForm" size="small">
        <div class="input-row">
          <el-form-item class="is-required" :label="$t('formData.timeLimit')+':'">
            <el-form-item prop="startTime">
              <el-date-picker
                v-model="searchForm.startTime"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetime"
                :clearable="false"
                size="small"
                :placeholder="$t('coupon.startTime')"
              ></el-date-picker>
            </el-form-item>
            <span>{{$t('date.tip')}}</span>
            <el-form-item prop="endTime">
              <el-date-picker
                v-model="searchForm.endTime"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetime"
                :clearable="false"
                size="small"
                :placeholder="$t('coupon.endTime')"
              ></el-date-picker>
            </el-form-item>
          </el-form-item>
          <el-form-item>
            <div class="default-btn primary-btn" @click="searchChange">
              {{$t('crud.searchBtn')}}
              <el-tooltip
                effect="light"
              >
                <div slot="content" style="max-width:500px">{{$t("shopWallet.trovaTips")}}</div>
                <i class="el-icon-question" />
              </el-tooltip>
            </div>
          </el-form-item>
        </div>
      </el-form>
    </div>

    <div class="table-box">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane :label="this.$i18n.t('shopWallet.incomeCheck')" name="revenue">
          <revenue ref="revenue" />
        </el-tab-pane>
        <el-tab-pane :label="this.$i18n.t('shopWallet.refundCheck')" name="refunds">
          <refunds ref="refunds" />
        </el-tab-pane>
      </el-tabs>
    </div>

  </div>
</template>

<script>
  import revenue from './revenue.vue'
  import refunds from './refunds.vue'
  import moment from 'moment'
  export default {
    components: {
      revenue,
      refunds
    },
    data () {
      var validateTime = (rule, value, callback) => {
        if (Date.parse(this.searchForm.startTime) >= Date.parse(this.searchForm.endTime)) {
          callback(new Error(this.$i18n.t('coupon.validateTime')))
        } else {
          callback()
        }
      }
      return {
        activeName: 'revenue', // 对账类型 0支出 1 收入
        searchForm: {
          startTime: moment().startOf('day').format('YYYY-MM-DD HH:mm:ss'),
          endTime: moment().endOf('day').format('YYYY-MM-DD HH:mm:ss')
        },
        tableData: [],
        dataRule: {
          startTime: [
            { required: true, message: this.$i18n.t('coupon.startTimeCannotBeEmpty'), trigger: 'blur' },
            { validator: validateTime, trigger: 'blur' }
          ],
          endTime: [
            { required: true, message: this.$i18n.t('coupon.endTimeCannotBeEmpty'), trigger: 'blur' },
            { validator: validateTime, trigger: 'blur' }
          ]
        }
      }
    },

    mounted () {
      // this.params.startTime = this.time[0]
      // this.params.endTime = this.time[1]
      // console.log(this.searchForm.time[1])
      this.getData()
    },

    methods: {
      handleClick (tab) {
        this.getData()
      },
      getData () {
        if (this.activeName === 'revenue') {
          this.$refs.revenue.getDataDetail(JSON.parse(JSON.stringify(this.searchForm)))
        } else if (this.activeName === 'refunds') {
          this.$refs.refunds.getDataDetail(JSON.parse(JSON.stringify(this.searchForm)))
        }
      },

      // 条件查询
      searchChange () {
        if (this.searchForm.startTime === '' || this.searchForm.endTime === '') {
          return this.$message.error('请选择时间')
        }
        this.getData()
      },
      /**
       * 重置表单
       * @param {String} formName 表单名称
       */
      resetSearchForm (formName) {
        this.$refs[formName].resetFields()
        // this.searchForm.time = []
      }
    }
  }
</script>

<style lang="scss" scoped>
.manage-check {
  .search-bar {
    padding-bottom: 25px;
    .input-row {
      ::v-deep .el-form-item.el-form-item--small{
        margin-bottom: 0;
        margin-right: 0 !important;
      }
      & span {
        padding: 0 12px;
      }
      .default-btn {
        margin-left: 20px;
      }
    }
  }
}
</style>
