<template>
  <div class="eibs-tab">
    <!-- ----------左 ---------->
    <c-col :span="12" class="col-left">
      <c-col :span="24">
        <el-form-item label="开始时间" prop="begdat">
          <el-date-picker
              v-model="model.begdat"
              type="date"
              value-format="yyyy-MM-dd"
              format="yyyy-MM-dd"
              :picker-options="startDatePicker"
              placeholder="请选择开始时间">
          </el-date-picker>
        </el-form-item>
      </c-col>
    </c-col>

    <!------------- 右 ---------->
    <c-col :span="12" class="col-right">
      <c-col :span="24">
        <el-form-item label="结束时间" prop="enddat">
          <el-date-picker
              v-model="model.enddat"
              type="date"
              value-format="yyyy-MM-dd"
              format="yyyy-MM-dd"
              :picker-options="endDatePicker"
              placeholder="请选择结束时间">
          </el-date-picker>
        </el-form-item>
      </c-col>
    </c-col>

    <c-col :span="24">
      <c-col :span="24" style="text-align: right">
        <el-button size="small" @click="handleReset">重置</el-button>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="small"
          @click="onSearch()"
          >查询
        </el-button>
      </c-col>
    </c-col>
    <c-col :span="24">
      <c-paging-table :data="trnData" :columns="trnColumns" :pageNumber="model.pageNum" :pageSize="model.pageSize"
        :total="model.total" v-on:queryFunc="queryFunc" :border="true">
      </c-paging-table>
    </c-col>
  </div>
</template>

<script>
import codes from '~/config/CodeTable'
import { queryTByPage } from '~/service/manage/trn.js'

export default {
  name: '',
  props: ['model'],
  inject: ['root'],
  data() {
    return {
      trnData: [],
      trnColumns: [
        { label: '交易代码', prop: 'inifrm', width: '150' },
        { label: '业务编号', prop: 'ownref', width: '150' },
        { label: '币种', prop: 'reloricur', width: '100' },
        { label: '金额', prop: 'reloriamt', width: '100' },
        { label: '交易开始时间', prop: 'inidattim', width: '150' },
        { label: '交易状态', prop: 'relflg', width: '150' },
        { label: '授权要求', prop: 'relreq', width: '150' },
        { label: '当前授权状态', prop: 'relres', width: '150' },
        { label: '总行授权要求', prop: 'relreq0', width: '150' },
        { label: '当前总行授权状态', prop: 'relres0', width: '180' },
        { label: '分行授权要求', prop: 'relreq1', width: '150' },
        { label: '当前分行授权状态', prop: 'relres1', width: '180' },
        { label: '支行授权要求', prop: 'relreq2', width: '150' },
        { label: '当前支行授权状态', prop: 'relreq2', width: '180' },
        { label: '交易创建用户', prop: 'iniusr', width: '150' },
        { label: '附加信息', prop: 'addtxt', width: '150' },
        { label: '机构名称', prop: 'bchnam', width: '150' },
        { label: '柜员名字', prop: 'unam', width: '150' }
      ],
      startDatePicker: this.beginDate(),
      endDatePicker: this.processDate(),
    }
  },
  computed: {},
  activated() {
    // const { update } = this.$route.params
    // if (update) {
      // TODO
      //this.onDblTrnSearch()
      //获取当前页数
    // }
  },
  created() {
    this.model.begdat = this.getNowDate();
    this.model.enddat = this.getNowDate();
    this.onDblTrnSearch()
  },
  methods: {
    getNowDate() {
      const timeOne = new Date()
      const year = timeOne.getFullYear()
      let month = timeOne.getMonth() + 1
      let day = timeOne.getDate()
      month = month < 10 ? '0' + month : month
      day = day < 10 ? '0' + day : day
      const NOW_MONTHS_AGO = `${year}-${month}-${day}`
      return NOW_MONTHS_AGO
    },
    beginDate(){
      const self = this
      return {
        disabledDate(time){
          if (self.model.endDate) {  //如果结束时间不为空，则小于结束时间
            return time.getTime() > new Date(self.model.endDate).getTime();
          } else {
            // return time.getTime() > Date.now()//开始时间不选时，结束时间最大值小于等于当天
          }
        }
      }
    },
    processDate() {
      const  self = this
      return {
        disabledDate(time) {
          if (self.model.beginDate) {  //如果开始时间不为空，则结束时间大于开始时间
            return time.getTime() < new Date(self.model.beginDate).getTime() - 86400000;  
        } else {
            // return time.getTime() > Date.now()//开始时间不选时，结束时间最大值小于等于当天
          }
        }
      }
    },
    handleReset() {
      this.root.$refs.modelForm.resetFields()
      this.onDblTrnSearch()
    },
    onSearch() {
      this.model.pageNum = 1
      this.model.pageSize = 5
      this.onDblTrnSearch()
    },
    onDblTrnSearch() {
      delete this.model.modifySet;
      queryTByPage(this.model).then((res) => {
        if(res.respCode == SUCCESS) {
          const list = res.data.list
          this.trnData = list
          this.model.pageNum = res.data.pageNumber
          this.model.pageSize = res.data.pageSize
          this.model.total = res.data.total
        }
      })
    },
    queryFunc(pageNumber, pageSize) {
      this.model.pageNum = pageNumber
      this.model.pageSize = pageSize
      this.onDblTrnSearch()
    },
    getCodesByKey(key) {
      return codes[key] || []
    },
    trnAdd() {
      this.$router.push(`/business/dbatrn`)
    },
    trnInfo(index, row) {
      this.$router.push(`/business/dbitrn/${row.inr}`)
    },
    trnEdit(index, row) {
      this.$router.push(`/business/dbetrn/${row.inr}`)
    },
  },
}
</script>

<style scoped>
.table-button-item-list {
  padding: 0;
  margin: 0;
}
.table-button-item-list li {
  list-style: none;
  padding: 5px 0;
  text-align: center;
  color: #606266;
  cursor: pointer;
}
</style>