<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item>
          <el-button icon="el-icon-search" size="small" type="primary" @click="addRate">添加汇率</el-button>
        </el-form-item>
      </el-form>

      <el-table :data="sData" border>
        <el-table-column label="币种" prop="Currency" />
        <el-table-column label="CNY汇率" prop="ToCNY" />
        <el-table-column label="USD汇率" prop="ToUSD" />
        <el-table-column label="开始时间" prop="StartDate" />
        <el-table-column label="结束时间" prop="EndDate" />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="editRate(scope.row)">
              编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-dialog title="添加汇率" :visible.sync="dialogAddRate">
        <el-form :model="createDto" label-width="80px">
          <el-form-item label="币种">
            <el-input v-model="createDto.Currency" autocomplete="off" />
          </el-form-item>
          <el-form-item label="CNY汇率">
            <el-input v-model="createDto.ToCNY" autocomplete="off" />
          </el-form-item>
          <el-form-item label="USD汇率">
            <el-input v-model="createDto.ToUSD" autocomplete="off" />
          </el-form-item>
          <el-form-item label="时间">
            <div class="block">
              <el-date-picker
                v-model="createDto.RateDate"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                value-format="yyyy-MM-dd"
                end-placeholder="结束日期"
              />
            </div>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogAddRate = false">取 消</el-button>
          <el-button type="primary" @click="postAddRate">确 定</el-button>
        </div>
      </el-dialog>

      <el-dialog title="编辑汇率" :visible.sync="dialogEditRate">
        <el-form :model="editDto" label-width="80px">
          <el-form-item label="币种">
            <el-input v-model="editDto.Currency" autocomplete="off" />
          </el-form-item>
          <el-form-item label="CNY汇率">
            <el-input v-model="editDto.ToCNY" autocomplete="off" />
          </el-form-item>
          <el-form-item label="USD汇率">
            <el-input v-model="editDto.ToUSD" autocomplete="off" />
          </el-form-item>
          <el-form-item label="时间">
            <div class="block">
              <el-date-picker
                v-model="editDto.RateDate"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                value-format="yyyy-MM-dd"
                end-placeholder="结束日期"
              />
            </div>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogEditRate = false">取 消</el-button>
          <el-button type="primary" @click="postEditRate">确 定</el-button>
        </div>
      </el-dialog>

    </div>
  </div>
</template>
<script>

import { Message } from 'element-ui'
import { _getRates, _addRate, _editRate } from '@/api/financeCustomerRate'

export default {
  name: 'FinanceCustomerRate',
  data() {
    return {
      sData: [],
      createDto: {
        Currency: '',
        ToCNY: 1,
        RateDate: [],
        StartDate: {},
        EndDate: {}
      },
      dialogAddRate: false,
      editDto: {
        Currency: '',
        ToCNY: 1,
        RateDate: [],
        StartDate: {},
        EndDate: {},
        Id: 0
      },
      dialogEditRate: false
    }
  },
  created() {
    this.search()
  },
  methods: {
    search() {
      _getRates().then(response => {
        this.sData = response
      })
    },
    addRate() {
      this.dialogAddRate = true
    },
    postAddRate() {
      if (this.createDto.RateDate.length == 0) {
        Message({
          message: '请输入时间',
          type: 'error',
          duration: 5 * 1000
        })
        return
      }

      this.createDto.StartDate = this.createDto.RateDate[0]
      this.createDto.EndDate = this.createDto.RateDate[1]
      _addRate(this.createDto).then(response => {
        this.dialogAddRate = false
        this.search()
      })
    },
    editRate(row) {
      this.editDto.Id = row.Id
      this.editDto.StartDate = row.StartDate
      this.editDto.EndDate = row.EndDate
      this.editDto.Currency = row.Currency
      this.editDto.ToCNY = row.ToCNY
      this.editDto.RateDate = [this.editDto.StartDate, this.editDto.EndDate]
      this.dialogEditRate = true
    },
    postEditRate() {
      if (this.editDto.RateDate.length == 0) {
        Message({
          message: '请输入时间',
          type: 'error',
          duration: 5 * 1000
        })
        return
      }

      this.editDto.StartDate = this.editDto.RateDate[0]
      this.editDto.EndDate = this.editDto.RateDate[1]
      _editRate(this.editDto).then(response => {
        this.dialogEditRate = false
        this.search()
      })
    }

  }
}
</script>
