<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>
    </c-col>

    <c-col :span="24">
      <span style="float: left">
        <el-button type="primary" ref="xrtInsertBtn" size="small" v-if="isShowAddBtn" @click="xrtAdd">新增</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="xrtData" :columns="xrtColumns" :pageNumber="model.pageNum" :pageSize="model.pageSize"
        :total="model.total" v-on:queryFunc="queryFunc" :border="true" @sort-change="sortChange" sortable="custom">
        <c-table-column fixed="right" prop="op" label="操作" width="250px">
          <template slot-scope="{ scope }">
            <c-button style="margin-left: 5px" size="small" type="info" ref="xrtDisplayBtn"
              @click="xrtDisplay(scope.row)">详情</c-button>
            <c-button style="margin-left: 5px" size="small" type="primary" v-if="isShowUpdBtn" ref="xrtUpdateBtn"
              @click="xrtEdit(scope.row)">修改</c-button>
            <c-button size="small" style="margin-left: 5px" type="danger" v-if="isShowDelBtn" ref="xrtDeleteBtn"
              @click="xrtDelete(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="true"
      :close-on-click-modal="false" center modal="true">
      <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 :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: 100%" placeholder="请选择生效日期" :disabled="xrttyp == 'edit'"></c-date-picker>
            </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" :precision="6" :step="0.000001" autocomplete="off"
                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" :precision="6" :step="0.000001" autocomplete="off"
                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" :precision="6" :step="0.000001" autocomplete="off"
                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" :precision="6" :step="0.000001" autocomplete="off"
                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" :precision="6" :step="0.000001" autocomplete="off"
                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" :precision="6" :step="0.000001" autocomplete="off"
                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" :precision="6" :step="0.000001" autocomplete="off"
                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" :precision="6" :step="0.000001" autocomplete="off"
                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" :precision="6" :step="0.000001" autocomplete="off"
                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 :span="12">
            <el-form-item label="失效日期" :label-width="formLabelWidth" v-if="xrttyp == 'edit'" prop="enddat">
              <c-date-picker type="date" v-model="form.enddat" value-format="yyyy-MM-dd"
                :picker-options="endDatePicker" style="width: 100%" placeholder="请选择失效日期" :disabled="true"></c-date-picker>
            </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,
    deleteById,
    edit,
    add,
    queryById
  } from "~/service/manage/xrt.js";
  import Xrt, {
    Pattern
  } from "./Xrt.js";
  import commonFunctions from "~/mixin/commonFunctions.js";
import { localeData } from 'moment';

  export default {
    mixins: [commonFunctions],
    name: "",
    props: ["model"],
    inject: [],
    data() {
      return {
        rules: Pattern,
        xrtData: [],
        xrtColumns: [
          {
            label: '币种',
            prop: 'cur',
            width: '100'
          },
          {
            label: '币种名称',
            prop: 'curnam',
            width: '140'
          },
          {
            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: '160'
          },
          {
            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'
          },
        ],
        dialogNam: {
          'add': '牌价信息新增',
          'edit': '牌价信息编辑',
          'info': '牌价信息查看',
        },
        isDisabled: false,
        searchLoading: false,
        searchLoadingRimo: false,
        isShowAddBtn: false,
        isShowUpdBtn: false,
        isShowDelBtn: false,
        dialogAdd: false,
        form: new Xrt().data,
        xrttyp: "",
        formLabelWidth: "160px",
        startDatePicker: this.beginDate(),
        endDatePicker: this.processDate(),
        startDatePicker2: this.beginDate2(),
        endDatePicker2: this.processDate2(),
      };
    },
    computed: {

    },
    activated() {
      const {
        update
      } = this.$route.params
      if (update) {
        this.onInfXrtSearch()
      }
    },
    created() {
      let today=new Date();
      let month = today.getMonth() < 9 ? "0" + (today.getMonth() + 1) : (today.getMonth() + 1)
      let day = today.getDate() <= 9 ? "0" + today.getDate() : today.getDate()
      let today1=today.getFullYear().toString()+'-'+month+'-'+day
      this.model.begdat=today1+' 00:00:00'
      this.model.enddat=today1+' 23:59:59'
      //this.model.enddat = '2299-12-31 23:59:59';
      //this.onSearch();
    },
    mounted() {
      this.getHiddenButtonVue();
    },
    methods: {
      //全量排序
      sortChange(obj) {
        let order = obj.order === 'descending' ? 'desc' : 'asc';
        let prop = obj.prop;
        let column = "";
        switch (prop) {
          case 'cur':
            column = "cur";
            break;
          case 'begdat':
            column = "begdat";
            break;
          case 'enddat':
            column = "enddat";
            break;
          case 'buyrat':
            column = "buyrat";
            break;
          case 'midrat':
            column = "midrat";
            break;
          case 'selrat':
            column = "selrat";
            break;
          case 'ttrrat':
            column = "ttrrat";
            break;
          case 'odrrat':
            column = "odrrat";
            break;
          case 'resrat':
            column = "resrat";
            break;
          case 'rebrat':
            column = "rebrat";
            break;
          case 'ibrrat':
            column = "ibrrat";
            break;
          case 'sel1rat':
            column = "sel1rat";
            break;
          case 'buy1rat':
            column = "buy1rat";
            break;
          case 'xrttim':
            column = "xrttim";
            break;
        }
        let orderObj = {
          order: order,
          column: column
        }
        this.model.orderStr = orderObj.order;
        this.model.columnStr = orderObj.column;
        this.onInfXrtSearch()
      },
      getHiddenButtonVue() {
        const loading = this.loading();
        this.$buttonControlService.hiddenBtnList()
          .then((res) => {
            // 【新增】按钮
            let hasInsert = res.some((item) => {
              return item.ITEMID === 'xrtInsertBtn';
            })
            if (hasInsert) {
              this.isShowAddBtn = false;
            } else {
              this.isShowAddBtn = true;
            }
            // 【修改】按钮
            let hasUpdate = res.some((item) => {
              return item.ITEMID === 'xrtUpdateBtn';
            })
            if (hasUpdate) {
              this.isShowUpdBtn = false;
            } else {
              this.isShowUpdBtn = true;
            }
            // 【删除】按钮
            let hasDelete = res.some((item) => {
              return item.ITEMID === 'xrtDeleteBtn';
            })
            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() - 86400000 > 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() {
        let today=new Date();
        let today1=today.getFullYear().toString()+'-'+(today.getMonth()+1)+'-'+today.getDate()
        this.model.begdat=today1+' 00:00:00'
        this.model.enddat=today1+' 23:59:59'

        this.model.cur = "";
        //this.model.begdat = null;
        //this.model.enddat = "2299-12-31";
        this.model.orderStr = null;
        this.model.columnStr = null;
      },
      onSearch() {
        this.model.pageNum = 1;
        this.model.pageSize = PageSize;
        this.onInfXrtSearch();
      },
      onSearchRimo() {
        this.model.pageNum = 1;
        this.model.pageSize = PageSize;
        this.onInfXrtSearchRimo();
      },
      onInfXrtSearch() {
        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.xrtData = 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;
          }
        })
      },

      onInfXrtSearchRimo() {
        this.searchLoadingRimo = true;
        delete this.model.isModify;
        delete this.model.modifySet;
        let model=this.model;
        model.cur="";
        queryByPage(model).then(res => {
          if (res.respCode == SUCCESS) {
            const list = res.data.list
            this.xrtData = list
            console.log("this.xrtData---",this.xrtData)
            this.model.pageNum = res.data.pageNumber
            this.model.pageSize = res.data.pageSize
            this.model.total = res.data.total
            this.searchLoadingRimo = false;
          } else {
            this.searchLoadingRimo = false;
          }
        })
      },

      queryFunc(pageNumber, pageSize) {
        this.model.pageNum = pageNumber
        this.model.pageSize = pageSize
        this.onInfXrtSearch()
      },
      xrtAdd() {
        this.dialogAdd = true;
        this.xrttyp = "add";
        this.isDisabled = false;
        this.form = new Xrt().data;
      },
      xrtDisplay(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("牌价信息不存在")
            }
          }
        });
      },
      xrtEdit(row) {
        const loading = this.loading();
        this.xrttyp = "edit";
        queryById(row).then((res) => {
          if (res.respCode == SUCCESS) {
            this.dialogAdd = true;
            this.isDisabled = false;
            if (res.data.inr) {
              this.form = res.data;
              loading.close();
            } else {
              this.$notify.error("牌价信息不存在")
              loading.close();
            }
          }
        });
      },
      xrtDelete(row) {
        this.$confirm("是否确认删除?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(() => {
            deleteById(row)
              .then((res) => {
                if (res.respCode == SUCCESS) {
                  this.$notify.success("删除成功！");
                  this.onInfXrtSearch();
                } else {
                  this.$notify.error("删除失败！");
                }
              })
              .catch((err) => {
                this.$notify.error("删除失败！");
              });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      },
      commitAdd() {
        this.$refs.modelForm.validate((validated) => {
          if (validated) {
            this.dialogAdd = false;
            const loading = this.loading();
            delete this.form.isModify;
            delete this.form.modifySet;
            add(this.form)
              .then((res) => {
                if (res.respCode == "AAAAAA") {
                  this.$notify.success(res.respMsg);
                  loading.close();
                  this.onInfXrtSearch();
                } else {
                  this.$notify.error(res.respMsg);
                  loading.close();
                }
              })
              .catch((err) => {
                this.$notify.error("添加失败！");
                loading.close();
              });
          } else {
            this.$notify.error({
              title: '失败',
              message: '请检查必输项！'
            });
          }
        });
      },
      commitEdit() {
        this.$refs.modelForm.validate((validated) => {
          if (validated) {
            this.dialogAdd = false;
            const loading = this.loading();
            delete this.form.isModify;
            delete this.form.modifySet;
            // if (this.form.begdat == this.form.enddat) {
            //   this.$notify.error("生效时间不能等于失效时间！");
            // } else {
              edit(this.form)
                .then((res) => {
                  if (res.respCode == SUCCESS) {
                    this.$notify.success("修改成功！");
                    loading.close();
                    this.onInfXrtSearch();
                  } else {
                    this.$notify.error("修改失败！");
                    loading.close();
                  }
                })
                .catch((err) => {
                  this.$notify.error("修改失败！");
                  loading.close();
                });
            // }
          } 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>