<template>
  <div class="n-app-container">

    <el-card shadow="never">
      <div slot="header" class="clearfix">
        <el-button type="primary" @click="dialogShowAdd=true;editId=0">添加税率</el-button>
      </div>
      <el-table
        v-loading="dataLoading"
        :data="data"
        :highlight-current-row="true"
        :select-on-indeterminate="true"
        width="100%"
      >
        <el-table-column label="开始时间" prop="StartTime" />
        <el-table-column label="结束时间" prop="EndTime" />
        <el-table-column label="添加人" prop="CreateUserName" />
        <el-table-column label="添加时间" prop="CreateTime" />
        <el-table-column label="更新人 " prop="UpdateUserName" />
        <el-table-column label="更新时间" prop="UpdateTime" />
        <el-table-column label="操作" width="300">
          <template slot-scope="r">
            <el-button size="mini" @click="editId=r.row.Id;dialogShowAddTime=true;">
              调整时间
            </el-button>
            <el-button size="mini" @click="editId=r.row.Id;dialogShowEditDetail=true;">
              重新上传
            </el-button>
            <el-button size="mini" @click="showDetail(r.row.Id)">
              查看明细
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :page-sizes="[10, 20, 40,100, 400]"
        :current-page="pagerDto.PageIndex"
        :page-size.sync="pagerDto.PageSize"
        background
        layout="prev, pager, next ,total ,jumper,sizes,slot "
        :total="pagerDto.total"
        @size-change="changePager"
        @current-change="pagerSerach"
      />
    </el-card>
    <el-form>
      <el-dialog title="调整时间" :visible.sync="dialogShowAddTime">
        <el-form-item label="时间">
          <el-date-picker
            v-model="dtime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            value-format="yyyy-MM-dd"
            end-placeholder="结束日期"
          />
        </el-form-item>
        <el-button
          @click="saveChangeEUExchangeRate()"
        >
          调整时间
        </el-button>
      </el-dialog>
      <el-dialog title="重新上传明细" :visible.sync="dialogShowEditDetail">
        <el-form-item label="明细文件">
          <el-upload
            class="upload-demo"
            action="http://wms.xingyunyi.cn/api/Finance/updateLoadFile"
            :on-success="changeFileUrl"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传excel文件</div>
          </el-upload>
        </el-form-item>
        <el-button
          @click="saveChangeEUExchangeDetail()"
        >重新上传</el-button></el-dialog>
      <el-dialog title="上传税率" :visible.sync="dialogShowAdd">
        <el-form-item label="时间">
          <el-date-picker
            v-model="dtime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            value-format="yyyy-MM-dd"
            end-placeholder="结束日期"
          /></el-form-item>
        <el-form-item label="明细文件">
          <el-upload
            class="upload-demo"
            action="http://wms.xingyunyi.cn/api/Finance/updateLoadFile"
            :on-success="changeFileUrl"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传excel文件</div>
          </el-upload>
        </el-form-item>
        <el-button
          @click="saveAddEUExchangeRate()"
        >上传税率</el-button>
      </el-dialog>
      <el-dialog title="税率明细" :visible.sync="dialogShowDetail">
        <span style="font-weight:800;height:32px;line-height:32px;font-size:16px;">总计:{{ data2.length }}</span>
        <el-table :data="data2" border>
          <el-table-column label="国家" prop="ReceiveryCountryCode" />
          <el-table-column label="税率" prop="Rate" />
        </el-table>

      </el-dialog>
    </el-form>
  </div>
</template>
<script>
import { addEUExchangeRate, changeEUExchangeRate, changeEUExchangeDetail, getPageResult, GetList } from '@/api/euExchangeRate'
export default {
  name: 'EsRate',

  data() {
    return {
      dialogShowDetail: false,
      dialogShowAddTime: false,
      dialogShowEditDetail: false,
      dialogShowAdd: false,
      dtime: [],
      editId: 0,
      data: [], dataLoading: false,
      pagerDto: { PageIndex: 0, PageSize: 10, total: 0 },
      fileUrl: '',
      data2: []
    }
  },
  mounted() {
    this.pagerSerach(1)
  },
  methods: {
    showDetail(id) {
      this.dialogShowDetail = true
      GetList(id).then(r => {
        this.data2 = r
      })
    },
    pagerSerach(index) {
      this.dataLoading = true
      if (index) {
        this.pagerDto.PageIndex = index
      }
      getPageResult(this.pagerDto).then(res => {
        this.data = res.Result
        this.pagerDto.total = res.TotalCount
      }).finally(res => { this.dataLoading = false })
    },
    changeFileUrl(r) {
      this.fileUrl = r.Data.url
    },
    saveChangeEUExchangeDetail() {
      changeEUExchangeDetail({ Id: this.editId, Url: this.fileUrl }).then(r => {
        this.pagerSerach()
      }).finally(r => {
        this.dialogShowEditDetail = false
      })
    },
    saveAddEUExchangeRate() {
      addEUExchangeRate({ Id: this.editId, StartTime: this.dtime[0], EndTime: this.dtime[1], Url: this.fileUrl }).then(r => {
        this.pagerSerach()
      }).finally(r => {
        this.dialogShowAdd = false
      })
    },
    saveChangeEUExchangeRate() {
      changeEUExchangeRate({ Id: this.editId, StartTime: this.dtime[0], EndTime: this.dtime[1] }).then(r => {
        this.pagerSerach()
      }).finally(r => {
        this.dialogShowAddTime = false
      })
    },
    changePager(v) {
      this.PageSize = v
      this.pagerSerach()
    }
  }
}

</script>
