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

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-plus" size="mini" @click="handleUpdate"
                   v-hasPermi="['ecw:currency:update']">{{$t('修改')}}
        </el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <!-- 列表 -->
    <el-table v-loading="loading" :data="list">
      <el-table-column :label="$t('金额')" align="center" prop="fromFee">
        <template slot-scope="scope">
          <span>{{scope.row.fromFee}}
            <!-- {{ scope.row.fromCurrency | currencyDataFilter(currencyDictDatas) }} -->
            {{currencyName(scope.row.fromCurrency)}}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="" align="center">=</el-table-column>
      <el-table-column :label="$t('兑换金额')" align="center">
        <template slot-scope="scope">
          <el-input v-show="showFlag" v-model="scope.row.toFee" type="text" @blur="updateEcash(scope.row)"></el-input>
          <span v-show="!showFlag">{{ scope.row.toFee}}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('兑换货币类型')" align="center" prop="toCurrency">
        <template slot-scope="scope">
          <!-- <span>{{ scope.row.toCurrency | currencyDataFilter(currencyDictDatas) }}</span> -->
          {{currencyName(scope.row.toCurrency)}}
        </template>
      </el-table-column>
    </el-table>
    <el-card>
      <el-form ref="retForm" :model="retForm">
        <el-form-item :label="$t('有效时间') + '（' + $t('尼日利亚') + '）'">
          <el-col :span="3">
            <el-date-picker type="datetime" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss"
                            v-model="retForm.nrlyStartTime"
                            style="width: 100%;" @change="changeDictData1"></el-date-picker>
          </el-col>
          <el-col :span="1" align="center">-</el-col>
          <el-col :span="3">
            <el-date-picker type="datetime" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss"
                            v-model="retForm.nrlyEndTime" @change="changeDictData2"
                            style="width: 100%;"></el-date-picker>
          </el-col>
        </el-form-item>
      </el-form>
      <el-form>
        <el-form-item :label="$t('有效时间') +'（' + $t('北京') + '）'">
          <el-col :span="3">
            <el-date-picker type="datetime" :disable="showFlag" value-format="yyyy-MM-dd HH:mm:ss"
                            format="yyyy-MM-dd HH:mm:ss" @change="changeDictData3"
                            v-model="retForm.bjStartTime"
                            style="width: 100%;"></el-date-picker>
          </el-col>
          <el-col align="center" :span="1">-</el-col>
          <el-col :span="3">
            <el-date-picker type="datetime" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss"
                            v-model="retForm.bjEndTime" @change="changeDictData4"
                            style="width: 100%;"></el-date-picker>
          </el-col>
        </el-form-item>
      </el-form>
      <el-form :inline="true">
        <el-form-item :label="$t('过期提示语')" prop="remark">
          <el-input v-model="retForm.remark" type="textarea" @change="changeDictData5"></el-input>
        </el-form-item>
      </el-form>
    </el-card>
    <!--    &lt;!&ndash; 分页组件 &ndash;&gt;-->
    <!--    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"-->
    <!--                @pagination="getList"/>-->

    <!-- 对话框(添加 / 修改) -->
    <el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item :label="$t('金额')" prop="fromFee">
          <el-input v-model="form.fromFee" :placeholder="$t('请输入金额')"/>
        </el-form-item>
        <el-form-item :label="$t('货币类型')" prop="fromCurrency">
          <el-select v-model="form.fromCurrency" clearable>
            <el-option v-for="item in currencyList" :key="item.id"
                       :label="$l(item, 'title')" :value="item.id"/>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('兑换金额')" prop="toFee">
          <el-input v-model="form.toFee" :placeholder="$t('请输入兑换金额')"/>
        </el-form-item>
        <!--        <el-form-item :label="$t('状态')" prop="show">-->
        <!--          <el-input v-model="form.show" :placeholder="$t('请输入状态')" />-->
        <!--        </el-form-item>-->
        <el-form-item :label="$t('兑换货币类型')" prop="toCurrency">
          <el-select v-model="form.toCurrency" clearable>
            <el-option v-for="item in currencyList" :key="item.id"
                       :label="$l(item, 'title')" :value="item.id"/>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('开始时间（尼日利亚）')" prop="nrlyStartTime">
          <el-date-picker v-model="form.nrlyStartTime" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss"
                          type="datetime" :placeholder="$t('选择开始时间')"></el-date-picker>
        </el-form-item>
        <el-form-item :label="$t('结束时间（尼日利亚）')" prop="nrlyEndTime">
          <el-date-picker v-model="form.nrlyEndTime" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss"
                          type="datetime" :placeholder="$t('选择结束时间')"></el-date-picker>
        </el-form-item>
        <el-form-item :label="$t('开始时间（北京）')" prop="bjStartTime">
          <el-date-picker v-model="form.bjStartTime" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss"
                          type="datetime" :placeholder="$t('选择开始时间')"></el-date-picker>
        </el-form-item>
        <el-form-item :label="$t('结束时间（北京）')" prop="bjEndTime">
          <el-date-picker v-model="form.bjEndTime" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss"
                          type="datetime" :placeholder="$t('选择结束时间')"></el-date-picker>
        </el-form-item>
        <el-form-item :label="$t('过期提示语')" prop="remark">
          <el-input v-model="form.remark" type="textarea"></el-input>
        </el-form-item>
        <!--        <el-form-item label="" prop="createAt">-->
        <!--          <el-input v-model="form.createAt" :placeholder="$t('请输入')" />-->
        <!--        </el-form-item>-->
        <!--        <el-form-item label="" prop="updateAt">-->
        <!--          <el-input v-model="form.updateAt" :placeholder="$t('请输入')" />-->
        <!--        </el-form-item>-->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">{{ $t('确 定') }}</el-button>
        <el-button @click="cancel">{{ $t('取 消') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
    import {
        createCurrencyEcash,
        updateCurrencyEcash,
        deleteCurrencyEcash,
        updateCurrencyEcashAll,
        getCurrencyEcash,
        getCurrencyEcashPage,
        exportCurrencyEcashExcel
    } from "@/api/ecw/currencyEcash";
    import {CommonStatusEnum} from "@/utils/constants";
    import {changeUserStatus} from "@/api/system/user";
    import {DICT_TYPE, getDictDatas, getDictData} from "@/utils/dict";
    import { getCurrencyList } from "@/api/ecw/currency";
    import {arrryToKeyedObjectBy} from '@/utils/index'
    export default {
        name: "CurrencyEcash",
        components: {},
        /* filters: {
            currencyDataFilter(e, currencyDictDatas) {
                if (e) return currencyDictDatas.find(item => item.value == e)
            },
            ecashDataFilter(e, ecashDatas) {
                if (e) return ecashDatas.find(item => item.value == e)
            }
        }, */
        data() {
            return {
                // 遮罩层
                loading: true,
                // 导出遮罩层
                exportLoading: false,
                // 显示搜索条件
                showSearch: true,
                // 总条数
                total: 0,
                // E-Cash汇率单位列表
                list: [],
                // 弹出层标题
                title: "",
                // 是否显示弹出层
                open: false,
                dateRangeCreateTime: [],
                showFlag: false,
                nrlyStartTime: getDictData(DICT_TYPE.ECASH_INIT, 1).label,
                nrlyEndTime: getDictData(DICT_TYPE.ECASH_INIT, 2).label,
                bjStartTime: getDictData(DICT_TYPE.ECASH_INIT, 3).label,
                bjEndTime: getDictData(DICT_TYPE.ECASH_INIT, 4).label,
                remark: getDictData(DICT_TYPE.ECASH_INIT, 5).label,
                startTime: "",
                // 查询参数
                queryParams: {
                    pageNo: 1,
                    pageSize: 10,
                    titleZh: null,
                    titleEn: null,
                    fuhao: null,
                    status: null,
                    huilv: null,
                    aorder: null,
                },
                retForm: {},
                updForm: {},
                // 表单参数
                form: {},
                // 表单校验
                rules: {},
                /* statusDictDatas: getDictDatas(DICT_TYPE.COMMON_STATUS), */
                /* ecashDatas: getDictDatas(DICT_TYPE.ECASH_INIT), */
                currencyList: []
            };
        },
        computed:{
          currencyMap(){
            return arrryToKeyedObjectBy(this.currencyList, 'id')
          },
          currencyName(){
            return id => {
              let obj = this.currencyMap[id]
              if(obj) return this.$l(obj, 'title')
              return this.$t('未知')
            }
          }
        },
        created() {
            this.getList();
            getCurrencyList().then(res => {
              this.currencyList = res.data
            })
        },
        methods: {
            /** 查询列表 */
            getList() {
                this.loading = true;
                // 处理查询参数
                let params = {...this.queryParams};
                this.addBeginAndEndTime(params, this.dateRangeCreateTime, 'createTime');
                // 执行查询
                getCurrencyEcashPage(params).then(response => {
                    this.list = response.data.list;
                    this.retForm = response.data.list[0];
                    this.total = response.data.total;
                    this.loading = false;
                });
            },
            /** 取消按钮 */
            cancel() {
                this.open = false;
                this.reset();
            },
            /** 表单重置 */
            reset() {
                this.form = {
                    id: undefined,
                    titleZh: undefined,
                    titleEn: undefined,
                    fuhao: undefined,
                    status: undefined,
                    huilv: undefined,
                    aorder: undefined,
                };
                this.resetForm("form");
            },
            /** 搜索按钮操作 */
            handleQuery() {
                this.queryParams.pageNo = 1;
                this.getList();
            },
            /** 重置按钮操作 */
            resetQuery() {
                this.dateRangeCreateTime = [];
                this.resetForm("queryForm");
                this.handleQuery();
            },
            /** 新增按钮操作 */
            handleAdd() {
                this.reset();
                this.open = true;
                this.title = this.$t("添加E-Cash汇率单位");
            },
            /** 修改按钮操作 */
            handleUpdate() {
                this.showFlag = true;
                // this.reset();
                // const id = row.id;
                // getCurrencyEcash(id).then(response => {
                //   this.form = response.data;
                //   this.open = true;
                //   this.title = "修改E-Cash汇率单位";
                // });
            },
            updateEcash(row) {
                updateCurrencyEcash(row).then(response => {
                    this.$modal.msgSuccess(this.$t("修改成功"));
                    this.getList();
                    this.showFlag = false;
                });
            },
            changeDictData1(value) {
                this.updForm.nrlyStartTime = value;
                updateCurrencyEcashAll(this.updForm).then(response => {
                    this.$modal.msgSuccess(this.$t("修改成功"));
                    this.getList();
                    this.showFlag = false;
                });
            },
            changeDictData2(value) {
                this.updForm.nrlyEndTime = value;
                updateCurrencyEcashAll(this.updForm).then(response => {
                    this.$modal.msgSuccess(this.$t("修改成功"));
                    this.getList();
                    this.showFlag = false;
                });
            },
            changeDictData3(value) {
                this.updForm.bjStartTime = value;
                updateCurrencyEcashAll(this.updForm).then(response => {
                    this.$modal.msgSuccess(this.$t("修改成功"));
                    this.getList();
                    this.showFlag = false;
                });
            },
            changeDictData4(value) {
                this.updForm.bjEndTime = value;
                updateCurrencyEcashAll(this.updForm).then(response => {
                    this.$modal.msgSuccess(this.$t("修改成功"));
                    this.getList();
                    this.showFlag = false;
                });
            },
            changeDictData5(value) {
                this.updForm.remark = value;
                updateCurrencyEcashAll(this.updForm).then(response => {
                    this.$modal.msgSuccess(this.$t("修改成功"));
                    this.getList();
                    this.showFlag = false;
                });
            },
            /** 提交按钮 */
            submitForm() {
                this.$refs["form"].validate(valid => {
                    if (!valid) {
                        return;
                    }
                    // 修改的提交
                    // if (this.form.id != null) {
                    //   updateCurrencyEcash(this.form).then(response => {
                    //     this.$modal.msgSuccess(this.$t("修改成功"));
                    //     this.open = false;
                    //     this.getList();
                    //   });
                    //   return;
                    // }
                    // 添加的提交
                    createCurrencyEcash(this.form).then(response => {
                        this.$modal.msgSuccess(this.$t("新增成功"));
                        this.open = false;
                        this.getList();
                    });
                });
            },
            /** 删除按钮操作 */
            handleDelete(row) {
                const id = row.id;
                this.$modal.confirm(this.$t('是否确认删除E-Cash汇率单位编号为{id}的数据项?', {id})).then(function () {
                    return deleteCurrencyEcash(id);
                }).then(() => {
                    this.getList();
                    this.$modal.msgSuccess(this.$t("删除成功"));
                }).catch(() => {
                });
            },
            /** 导出按钮操作 */
            handleExport() {
                // 处理查询参数
                let params = {...this.queryParams};
                params.pageNo = undefined;
                params.pageSize = undefined;
                this.addBeginAndEndTime(params, this.dateRangeCreateTime, 'createTime');
                // 执行导出
                this.$modal.confirm(this.$t('是否确认导出所有E-Cash汇率单位数据项?')).then(() => {
                    this.exportLoading = true;
                    return exportCurrencyEcashExcel(params);
                }).then(response => {
                    this.$download.excel(response, '${table.classComment}.xls');
                    this.exportLoading = false;
                }).catch(() => {
                });
            }
        }
    };
</script>