<template>
  <div class="eibs-tab">
    <c-col :span="8" class="col-left">
      <el-form-item label="货币类型">
        <c-select v-model="model.cur" style="height:30px;" placeholder="请选择货币类型" dbCode="CURTXT"
          :isShowKeyAndLabel="true" />
      </el-form-item>
    </c-col>
    <c-col :span="16" class="col-center">
      <el-form-item label="更新时间" style="width: 100%">
        <c-col :span="11">
          <c-date-time-picker v-model="model.begdat" :picker-options="startDatePicker2" style="width: 100%"
            placeholder="请选择开始日期" />
        </c-col>
        <c-col :span="2" style="text-align: center">
          <label style="display: inline-block; width: 100%">--</label>
        </c-col>
        <c-col :span="11">
          <c-date-time-picker v-model="model.enddat" picker-options="endDatePicker2" style="width: 100%"
            placeholder="请选择截止日期" />
        </c-col>
      </el-form-item>
      <!-- <el-form-item label="失效日期" style="width: 100%">
        <c-col :span="11" style="display:flex;">
          <span style="width: 5%;font-size:18px;float:left;display: inline-block;">
            <el-tooltip effect="dark" content="开始时间应小于截止时间" placement="top">
              <i class="el-icon-info" />
            </el-tooltip>
          </span>
          <c-date-picker type="date" v-model="model.begdat" value-format="yyyy-MM-dd" :picker-options="startDatePicker2"
            style="width: 93%" placeholder="请选择开始时间" />
        </c-col>
        <c-col :span="2" style="text-align: center">
          <label style="display: inline-block; width: 100%">--</label>
        </c-col>
        <c-col :span="11">
          <c-date-picker type="date" v-model="model.enddat" value-format="yyyy-MM-dd" :picker-options="endDatePicker2"
            style="width: 93%;display: inline-block;" placeholder="请选择截止时间" />
          <span style="width: 5%;font-size:18px;float:right">
            <el-tooltip effect="dark" content="截止时间应大于开始时间" placement="top">
              <i class="el-icon-info" />
            </el-tooltip>
          </span>
        </c-col>
      </el-form-item> -->
    </c-col>

    <c-col :span="24">
      <span style="float: left">
        <el-button type="primary" size="small" ref="zmqInsertBtn" v-if="isShowAddBtn" @click="zmqxrtAdd">新增</el-button>
      </span>
      <span style="float: right;">
        <el-button size="small" @click="handleReset">重置</el-button>
        <el-button type="primary" icon="el-icon-search" size="small" :loading="searchLoading" @click="onSearch()">查询
        </el-button>
        <el-button type="primary" icon="el-icon-search" size="small" :loading="searchLoadingRimo" @click="onSearchRimo()">日末牌价
        </el-button>
      </span>
    </c-col>
    <c-col :span="24">
      <c-paging-table :data="zmqxrtData" :columns="zmqxrtColumns" :pageNumber="model.pageNum" :pageSize="model.pageSize"
        :total="model.total" v-on:queryFunc="queryFunc" :border="true">
        <c-table-column fixed="right" prop="op" label="操作" width="200px">
          <template slot-scope="{ scope }">
            <c-button style="margin-left: 5px" size="small" type="info" @click="zmqxrtDisplay(scope.row)">详情</c-button>
            <c-button style="margin-left: 5px" size="small" type="primary" v-if="isShowUpdBtn" ref="zmqUpdateBtn"
              @click="zmqxrtEdit(scope.row)">修改</c-button>
            <c-button size="small" style="margin-left: 5px" type="danger" v-if="isShowDelBtn" ref="zmqDeleteBtn"
              @click="zmqxrtDelete(scope.row)">删除</c-button>
          </template>
        </c-table-column>
      </c-paging-table>
    </c-col>

    <el-dialog :title="dialogNam[xrttyp]" :visible.sync="dialogAdd" :modal-append-to-body="false"
      :close-on-click-modal="false" center>
      <el-form :model="form" ref="modelForm" label-suffix="：" :rules="rules" :disabled="isDisabled">
        <c-col :span="24">
          <c-col :span="12">
            <el-form-item label="汇率币种" :label-width="formLabelWidth" prop="cur">
              <c-select v-model="form.cur" autocomplete="off" placeholder="请输入汇率币种" dbCode="CURTXT"
                :disabled="xrttyp == 'edit'" :isShowKeyAndLabel="true"></c-select>
            </el-form-item>
          </c-col>
        </c-col>
        <c-col :span="24">
          <c-col :span="12">
            <el-form-item label="生效日期" :label-width="formLabelWidth" prop="begdat">
              <c-date-picker type="date" v-model="form.begdat" value-format="yyyy-MM-dd"
                :picker-options="startDatePicker" style="width: 93%" placeholder="请选择生效日期"></c-date-picker>
              <span style="width: 5%;font-size:18px;float:right">
                <el-tooltip effect="dark" content="生效日期应小于失效日期" placement="top">
                  <i class="el-icon-info" />
                </el-tooltip>
              </span>
            </el-form-item>
          </c-col>
          <c-col :span="12">
            <el-form-item label="失效日期" :label-width="formLabelWidth" prop="enddat">
              <c-date-picker type="date" v-model="form.enddat" value-format="yyyy-MM-dd" :picker-options="endDatePicker"
                style="width: 93%" placeholder="请选择失效日期"></c-date-picker>
              <span style="width: 5%;font-size:18px;float:right">
                <el-tooltip effect="dark" content="失效日期应大于生效日期" placement="top">
                  <i class="el-icon-info" />
                </el-tooltip>
              </span>
            </el-form-item>
          </c-col>
        </c-col>
        <c-col :span="24">
          <c-col :span="12">
            <el-form-item label="现汇买入价" :label-width="formLabelWidth" prop="buyrat">
              <c-input type="number" v-model="form.buyrat" autocomplete="off" :precision="6" :step="0.000001" min="0"
                placeholder="请输入现汇买入价"></c-input>
            </el-form-item>
          </c-col>
          <c-col :span="12">
            <el-form-item label="现汇卖出价" :label-width="formLabelWidth" prop="selrat">
              <c-input type="number" v-model="form.selrat" autocomplete="off" :precision="6" :step="0.000001" min="0"
                placeholder="请输入现汇卖出价"></c-input>
            </el-form-item>
          </c-col>
        </c-col>
        <c-col :span="24">
          <c-col :span="12">
            <el-form-item label="现钞买入价" :label-width="formLabelWidth" prop="buy1rat">
              <c-input type="number" v-model="form.buy1rat" autocomplete="off" :precision="6" :step="0.000001" min="0"
                placeholder="请输入现钞买入价"></c-input>
            </el-form-item>
          </c-col>
          <c-col :span="12">
            <el-form-item label="现钞卖出价" :label-width="formLabelWidth" prop="sel1rat">
              <c-input type="number" v-model="form.sel1rat" autocomplete="off" :precision="6" :step="0.000001" min="0"
                placeholder="请输入现钞卖出价"></c-input>
            </el-form-item>
          </c-col>
        </c-col>
        <c-col :span="24">
          <c-col :span="12">
            <el-form-item label="买入参考汇率" :label-width="formLabelWidth" prop="rebrat">
              <c-input type="number" v-model="form.rebrat" autocomplete="off" :precision="6" :step="0.000001" min="0"
                placeholder="请输入买入参考汇率"></c-input>
            </el-form-item>
          </c-col>
          <c-col :span="12">
            <el-form-item label="卖出参考汇率" :label-width="formLabelWidth" prop="resrat">
              <c-input type="number" v-model="form.resrat" autocomplete="off" :precision="6" :step="0.000001" min="0"
                placeholder="请输入卖出参考汇率"></c-input>
            </el-form-item>
          </c-col>
        </c-col>
        <c-col :span="24">
          <c-col :span="12">
            <el-form-item label="中间价" :label-width="formLabelWidth" prop="midrat">
              <c-input type="number" v-model="form.midrat" autocomplete="off" :precision="6" :step="0.000001" min="0"
                placeholder="请输入中间价"></c-input>
            </el-form-item>
          </c-col>
          <c-col :span="12">
            <el-form-item label="报表折算价" :label-width="formLabelWidth" prop="ibrrat">
              <c-input type="number" v-model="form.ibrrat" autocomplete="off" :precision="6" :step="0.000001" min="0"
                placeholder="请输入报表折算价"></c-input>
            </el-form-item>
          </c-col>
        </c-col>
        <c-col :span="24">
          <c-col :span="12">
            <el-form-item label="指定买价" :label-width="formLabelWidth" prop="ttrrat">
              <c-input type="number" v-model="form.ttrrat" autocomplete="off" :precision="6" :step="0.000001" min="0"
                placeholder="请输入指定买价"></c-input>
            </el-form-item>
          </c-col>
          <c-col :span="12">
            <el-form-item label="票据买断汇款" :label-width="formLabelWidth" prop="odrrat">
              <c-input type="number" v-model="form.odrrat" :precision="6" :step="0.000001" autocomplete="off" min="0"
                placeholder="请输入票据买断汇款"></c-input>
            </el-form-item>
          </c-col>
        </c-col>
        <c-col :span="24">
          <c-col :span="12">
            <el-form-item label="更新时间" :label-width="formLabelWidth" v-if="xrttyp == 'edit'" prop="xrttim">
              <el-input v-model="form.xrttim" autocomplete="off" placeholder="请输入更新时间" :disabled="true"></el-input>
            </el-form-item>
          </c-col>
        </c-col>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="commitAdd" v-if="xrttyp == 'add'">提 交</el-button>
        <el-button type="primary" @click="commitEdit" v-if="xrttyp == 'edit'">提 交</el-button>
        <el-button @click="dialogAdd = false" v-if="xrttyp == 'info'">返 回</el-button>
        <el-button @click="dialogAdd = false" v-if="xrttyp != 'info'">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import Utils from "~/utils";
  import {
    queryByPage,
    queryRiMoByPage,
    add,
    edit,
    deleteById,
    queryById
  } from "~/service/manage/zmqxrt.js";
  import Zmqxrt, {
    Pattern
  } from "./Zmqxrt.js";
  import commonFunctions from "~/mixin/commonFunctions.js";

  export default {
    mixins: [commonFunctions],
    name: "",
    props: ["model"],
    inject: ["root"],
    data() {
      return {
        rules: Pattern,
        zmqxrtData: [],
        zmqxrtColumns: [{
            label: '汇率币种',
            prop: 'cur',
            width: '160'
          },
          {
            label: '更新时间',
            prop: 'xrttim',
            width: '240'
          },
          {
            label: '生效日期',
            prop: 'begdat',
            width: '140'
          },
          {
            label: '失效日期',
            prop: 'enddat',
            width: '140'
          },
          {
            label: '现汇买入价',
            prop: 'buyrat',
            width: '160'
          },
          {
            label: '中间价',
            prop: 'midrat',
            width: '120'
          },
          {
            label: '现汇卖出价',
            prop: 'selrat',
            width: '160'
          },
          {
            label: '指定买价',
            prop: 'ttrrat',
            width: '140'
          },
          {
            label: '票据买断汇款',
            prop: 'odrrat',
            width: '180'
          },
          {
            label: '卖出参考汇率',
            prop: 'resrat',
            width: '180'
          },
          {
            label: '买入参考汇率',
            prop: 'rebrat',
            width: '180'
          },
          {
            label: '报表折算价',
            prop: 'ibrrat',
            width: '160'
          },
          {
            label: '现钞卖出价',
            prop: 'sel1rat',
            width: '160'
          },
          {
            label: '现钞买入价',
            prop: 'buy1rat',
            width: '160'
          },
          {
            label: '报表折算价',
            prop: 'ibrrat',
            width: '160'
          },
        ],
        dialogNam: {
          'add': '自贸区牌价信息新增',
          'edit': '自贸区牌价信息编辑',
          'info': '自贸区牌价信息查看',
        },
        isDisabled: false,
        isShowAddBtn: false,
        isShowUpdBtn: false,
        isShowDelBtn: false,
        searchLoading: false,
        searchLoadingRimo: false,
        dialogAdd: false,
        form: new Zmqxrt().data,
        xrttyp: "",
        formLabelWidth: "160px",
        startDatePicker: this.beginDate(),
        endDatePicker: this.processDate(),
        startDatePicker2: this.beginDate2(),
        endDatePicker2: this.processDate2(),
        searchType:"common",
      };
    },
    activated() {
      const {
        update
      } = this.$route.params
      if (update) {
        this.onInfzmqxrtSearch()
      }
    },
    created() {
      this.model.enddat = '2299-12-31 23:59:59';
      this.onSearch();
    },
    mounted() {
      this.getHiddenButtonVue();
    },
    methods: {
      getHiddenButtonVue() {
        const loading = this.loading();
        this.$buttonControlService.hiddenBtnList()
          .then((res) => {
            // 【新增】按钮
            let hasInsert = res.some((item) => {
              return item.ITEMID === 'zmqInsertBtn';
            })
            if (hasInsert) {
              this.isShowAddBtn = false;
            } else {
              this.isShowAddBtn = true;
            }
            // 【修改】按钮
            let hasUpdate = res.some((item) => {
              return item.ITEMID === 'zmqUpdateBtn';
            })
            if (hasUpdate) {
              this.isShowUpdBtn = false;
            } else {
              this.isShowUpdBtn = true;
            }
            // 【删除】按钮
            let hasDelete = res.some((item) => {
              return item.ITEMID === 'zmqDeleteBtn';
            })
            if (hasDelete) {
              this.isShowDelBtn = false;
            } else {
              this.isShowDelBtn = true;
            }
            loading.close();
          })
      },
      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.form.enddat) { //如果结束时间不为空，则小于结束时间
              return new Date(self.form.enddat).getTime() - 86400000 < time.getTime()
            } else {
              // return time.getTime() > Date.now()//开始时间不选时，结束时间最大值小于等于当天
            }
          }
        }
      },
      beginDate2() {
        const self = this
        return {
          disabledDate(time) {
            if (self.model.enddat) { //如果结束时间不为空，则小于结束时间
              return new Date(self.model.enddat).getTime() - 86400000 < time.getTime()
            } else {
              // return time.getTime() > Date.now()//开始时间不选时，结束时间最大值小于等于当天
            }
          }
        }
      },
      processDate() {
        const self = this
        return {
          disabledDate(time) {
            if (self.form.begdat) { //如果开始时间不为空，则结束时间大于开始时间
              return new Date(self.form.begdat).getTime() > time.getTime()
            } else {
              // return time.getTime() > Date.now()//开始时间不选时，结束时间最大值小于等于当天
            }
          }
        }
      },
      processDate2() {
        const self = this
        return {
          disabledDate(time) {
            if (self.model.begdat) { //如果开始时间不为空，则结束时间大于开始时间
              return new Date(self.model.begdat).getTime() > time.getTime()
            } else {
              // return time.getTime() > Date.now()//开始时间不选时，结束时间最大值小于等于当天
            }
          }
        }
      },
      handleReset() {
        this.model.cur = "";
        this.model.begdat = null;
        this.model.enddat = "2299-12-31 23:59:59";
      },
      onSearch() {
        this.searchType = "common";
        this.model.pageNum = 1;
        this.model.pageSize = PageSize;
        this.onInfzmqxrtSearch();
      },
      onSearchRimo() {
        this.searchType = "rimo";
        this.model.pageNum = 1;
        this.model.pageSize = PageSize;
        this.onInfXrtSearchRimo();
      },
      onInfzmqxrtSearch() {
        this.searchLoading = true;
        delete this.model.isModify;
        delete this.model.modifySet;
        queryByPage(this.model).then(res => {
          if (res.respCode == SUCCESS) {
            const list = res.data.list
            this.zmqxrtData = list
            this.model.pageNum = res.data.pageNumber
            this.model.pageSize = res.data.pageSize
            this.model.total = res.data.total
            this.searchLoading = false;
          } else {
            this.searchLoading = false;
            this.$notify.error("查询失败");
          }
        })
      },
      onInfXrtSearchRimo() {
        delete this.model.isModify;
        delete this.model.modifySet;
        if(this.model.begdat == null || this.model.begdat == ''){
          this.$notify.warning("请选择更新开始日期");
          return;
        }
        if(this.model.enddat == null || this.model.enddat == ''){
          this.$notify.warning("请选择更新截止日期");
          return;
        }
        this.searchLoadingRimo = true;
        let model=this.model;
        queryRiMoByPage(model).then(res => {
          if (res.respCode == SUCCESS) {
            this.zmqxrtData = res.data.list
            this.model.pageNum = res.data.pageNumber
            this.model.pageSize = res.data.pageSize
            this.model.total = res.data.total
            this.searchLoadingRimo = false;
          } else {
            this.$notify.warning(res.respMsg);
            this.searchLoadingRimo = false;
          }
        })
      },
      queryFunc(pageNumber, pageSize) {
        this.model.pageNum = pageNumber
        this.model.pageSize = pageSize
        if(this.searchType == "common"){
          this.onInfzmqxrtSearch()
        } else {
          this.onInfXrtSearchRimo();
        }
      },
      zmqxrtAdd() {
        this.dialogAdd = true;
        this.xrttyp = "add";
        this.isDisabled = false;
        this.form = new Zmqxrt().data;
      },
      zmqxrtDisplay(row) {
        this.dialogAdd = true;
        this.xrttyp = "info";
        this.isDisabled = true;
        queryById(row).then((res) => {
          if (res.respCode == SUCCESS) {
            if (res.data.inr) {
              this.form = res.data;
            } else {
              this.$notify.error("牌价信息不存在")
            }
          }
        });
      },
      zmqxrtEdit(row) {
        this.dialogAdd = true;
        this.xrttyp = "edit";
        this.isDisabled = false;
        queryById(row).then((res) => {
          if (res.respCode == SUCCESS) {
            if (res.data.inr) {
              this.form = res.data;
            } else {
              this.$notify.error("牌价信息不存在")
            }
          }
        });
      },
      zmqxrtDelete(row) {
        this.$confirm("是否确认删除?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(() => {
            deleteById(row)
              .then((res) => {
                if (res.respCode == SUCCESS) {
                  this.$notify.success("删除成功！");
                  this.onInfzmqxrtSearch();
                } else {
                  this.$notify.error("删除失败！");
                }
              })
              .catch((err) => {
                this.$notify.error("删除失败！");
              });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      },
      commitAdd() {
        this.$refs.modelForm.validate((validated) => {
          if (validated) {
            this.form.caozbz = "1";
            if (this.form.cur == "CNY") {
              this.form.canssm = "RMB";
            } else {
              this.form.canssm = this.form.cur;
            }
            delete this.form.isModify;
            delete this.form.modifySet;
            add(this.form)
              .then((res) => {
                if (res.respCode == SUCCESS) {
                  this.$notify.success("添加成功！");
                  this.dialogAdd = false;
                  this.onInfzmqxrtSearch();
                } else {
                  this.$notify.error("添加失败！");
                }
              })
              .catch((err) => {
                this.$notify.error("添加失败！");
              });
          } else {
            this.$notify.error({
              title: '失败',
              message: '请检查必输项！'
            });
          }
        });
      },
      commitEdit() {
        this.$refs.modelForm.validate((validated) => {
          if (validated) {
            this.form.caozbz = "1";
            if (this.form.cur == "CNY") {
              this.form.canssm = "RMB";
            } else {
              this.form.canssm = this.form.cur;
            }
            delete this.form.isModify;
            delete this.form.modifySet;
            edit(this.form)
              .then((res) => {
                if (res.respCode == SUCCESS) {
                  this.$notify.success("修改成功！");
                  this.dialogAdd = false;
                } else {
                  this.$notify.error("修改失败！");
                }
              })
              .catch((err) => {
                this.$notify.error("修改失败！");
              });
          } else {
            this.$notify.error({
              title: '失败',
              message: '请检查必输项！'
            });
          }
        });
      },
    },
  };
</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>