<style scoped>
    .currentManage .addCompany {width: 440px;}
    /* 币种管理 */
    .cm_content{padding:0;overflow-x: auto;}
    .cmc_item{float: left;width:212px;height: 195px;background:rgba(255,255,255,1);border-radius:4px;overflow: hidden;margin-right: 12px;margin-bottom: 15px;border: 1px solid #ebebeb}
    .cmci_top{background-color: #3AD892;padding: 14px 20px;font-size: 14px;color: #009251}
    .cmci_top p span:nth-child(2){display: inline-block;padding: 2px 5px;font-size: 12px;color: #FFFFFF;background-color: #02AE62;border-radius:4px;margin-left: 5px;vertical-align:top;}
    .cmci_cen{padding: 14px 20px;color: #666666;font-size: 12px}
    .cmci_cen p{padding: 4px 0;}
    .cmci_cen p .fr{font-weight: bold;font-family: "PingFangSC-fine";color: #333333}
    .cmci_cen p .icon-shuaxin{background-color: #E7E7E7;color: #999999;display: inline-block;margin-left: 5px;border-radius: 50%;font-size: 12px;transform: rotate(60deg);cursor: pointer;transition: all linear 0.2s;width: 12px;height: 12px;line-height: 12px;}
    .cmci_cen p .icon-shuaxin:hover{background-color: #E95252;color: white;}
    .fc_green{color: #47BF8C !important}
    .fc_red{color: #E95252 !important}
    .cmci_bot{padding:0 20px 20px 20px;font-size: 12px !important;text-align: center}
    .cmci_bot .el-button-group .el-button{padding: 4px;}
    .cmci_bot .el-button{font-size: 12px !important}
    .cmc_item:hover{box-shadow:0px 0px 20px rgba(191,191,191,1);transition: all linear 0.5s;}
    ._benwei{background-color: #2AAEF2!important;color: #0877B0!important}
    ._benweiA{background-color: #0F80BA!important}
    ._underline{text-decoration: underline;cursor: pointer;}
    .currentManage ._vMG_edit{overflow: auto;display: none;position:absolute;font-family: 'PingFangSc-Fine';bottom:0;left: 0;border-top:1px solid #d1d1d1;background-color:#FFFFFF;padding: 10px;width: 100%;}
    .currentManage ._vMG_edit ._tit{padding-left: 10px;border-left: 3px solid #E95252; font-size: 16px;color: #000000}
    .currentManage ._vMG_edit ._tit span{color: #666666;font-size: 14px;}
    ._edHeight{height:400px;}
    .edHeight{display: block !important;height: 230px;}
    ._scrollbar::-webkit-scrollbar{width: 4px;height: 8px;}
    ._scrollbar::-webkit-scrollbar-thumb{border-radius: 4px;box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);background: #c9c9c9;}
    ._scrollbar::-webkit-scrollbar-track{box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);border-radius: 4px;background: #EDEDED;}
    .currentManage ._info_box ul{margin-top: 15px}
    .currentManage ._info_box ul li{float: left;    width: 250px;}
    ._max_width{max-width: 100px; overflow:hidden;text-overflow: ellipsis;white-space: nowrap;display: inline-block;vertical-align:top;}
    ._yingkui{height: 40px;line-height: 40px;font-size: 12px;color: #666666}
    ._tips{font-size: 12px;color: #666666;padding: 15px 0}
        .currentManage .po_content{
    border-collapse: collapse;
}
.currentManage .po_content{
    width: 100%;
}
.currentManage .po_content tr:first-child{
    font-size: 12px;
    color: #666666;
    background-color: #DCDCDC;
}
.currentManage .po_content tr th,.currentManage .po_content tr td{
    padding: 10px 20px;
    text-align: left;
}
.currentManage .po_content tr td{
    color: #333333;
    font-size: 14px;
    border:1px solid #E6E6E6;
}
.currentManage .po_content tr td .iconfont{
    font-size: 14px;
    padding: 4px;
}
.currentManage .query-box .iconfont{
    cursor: pointer;
    background-color: #E95252;
    color: white;
    width: 30px;
    height: 30px;
    display: inline-block;
    text-align: center;
    line-height: 30px;
    border-radius: 50%;
    margin-left: 10px;
}
.currentManage ._yuan{
    width:12px;
    height:12px;
    background:rgba(233,82,82,1);
    border-radius:50%;
    display: inline-block;
}
.currentManage ._yuan._yuan_red{
    background:#47BF8C;
}
._flex_rete{
    cursor: pointer;
}
.display_none{
    opacity: 0;
}
._flex_rete .icon-qiehuan{
    background-color: #E5E5E5;
    color: white;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    text-align: center;
    font-size: 12px;
    padding: 0 !important;
    line-height: 20px;
    float: right;
}
._flex_rete .icon-qiehuan:hover{
    background-color: rgba(233,82,82,1);
    color: white;
}
</style>
<template>
  <div class="flexOne currentManage">
       <div class="query-box">
           <ul>
               <li>
                   <span>
                       <em>币种</em>
                       <el-select  filterable v-model='msg.CurrencyId' :placeholder="$t('rule.qxzbzhong')" class=" _border_b_1">
                        <el-option :label="$t('pub.unlimitedSel')" value='-1' key='-1'></el-option>
                        <el-option v-for='item in coinGetList'
                            :label='item.Name'
                            :value='item.ID'
                            :key='item.ID'>
                        </el-option>
                        </el-select>
                   </span>
               </li>
               <li>
                   <span>
                    <span>
                        <em>本位币</em>
                        <el-select  filterable v-model='msg.StandardCurrencyId' :placeholder="$t('rule.qxzbzhong')" class=" _border_b_1">
                         <el-option :label="$t('pub.unlimitedSel')" value='-1' key='-1'></el-option>
                         <el-option v-for='item in coinGetList'
                             :label='item.Name'
                             :value='item.ID'
                             :key='item.ID'>
                         </el-option>
                         </el-select>
                    </span>
                   </span>
               </li>
               <li>
                <span>
                 <span>
                     <em>开始日期</em>
                     <el-date-picker class="w150" v-model="msg.StartTime" type="date" :placeholder="$t('pub.pleaseSel')" value-format="yyyy-MM-dd">
                    </el-date-picker>
                 </span>
                </span>
                </li>
                <li>
                    <span>
                     <span>
                         <em>结束日期</em>
                         <el-date-picker class="w150" v-model="msg.EndTime" type="date" :placeholder="$t('pub.pleaseSel')" value-format="yyyy-MM-dd">
                        </el-date-picker>
                     </span>
                    </span>
                    </li>
               <li>
                    <button class="hollowFixedBtn" @click="resetPageIndex(),initTableInfo()">{{$t('pub.searchBtn')}}</button>
                    <button class="normalBtn" @click="addShow=true,dialogTitle='批量添加/修改'" >批量添加/修改汇率</button>
                    <!-- <el-tooltip class="item" effect="dark" :content="$t('fnc.qhpaiban')" placement="top-end">
                        <i v-if="transitionShow" class="iconfont icon-biaoge" @click="switchMethod(1)"></i>
                        <i v-if="transitionShow2" class="iconfont icon-icon-ssan" @click="switchMethod(2)"></i>
                    </el-tooltip> -->
               </li>
           </ul>
       </div>
       <div class="cm_content _scrollbar" :class="addShow==true?'_edHeight':''">
           <table class="po_content singeRowTable" style="border:1px solid #E6E6E6;" cellspacing="0" cellpadding="0" v-if="transitionShow2" v-loading="loading2">
                <tr>
                    <th>币种</th>
                    <th>{{$t('fnc.bweibi')}}</th>
                    <th>汇率</th>
                    <th>日期</th>
                    <!-- <th>{{$t('objFill.shangtiaohl')}}</th> -->
                </tr>
                <tr v-for="(item,index) in tableInfo" :key="index">
                    <td>{{item.CurrencyName}}</td>
                    <td>{{item.StandardCurrencyName}}</td>
                    <td >
                        {{item.CurrentRate}}
                    </td>
                    <td>{{item.Date}}</td>
                    <!-- <td>{{item.ExchangeRates?item.ExchangeRates:'-'}}</td> -->
                </tr>
            </table>
           <div class="noData" v-show="noData">
                {{$t('system.content_noData')}}
            </div>
           <div>
               <el-pagination
                    background
                    @current-change="handleCurrentChange"
                    :current-page.sync="currentPage"
                    layout="total,prev, pager, next, jumper"
                    :page-size=msg.pageSize
                    :total=total>
                </el-pagination>
           </div>
       </div>

        <div class="_vMG_edit" :class="addShow==true?'edHeight':''">
            <p class="_tit">批量{{dialogTitle}}汇率</p>
            <el-form class="_info_box clearfix" :model="addMsg" ref="addMsg" :rules="rules" label-width="100px">
                <ul class="clearfix" >
                        <li>
                            <el-form-item label="币种" prop="CurrencyId">
                                <el-select  filterable v-model='addMsg.CurrencyId' placeholder="请选择币种" class=" _border_b_1">
                                    <el-option v-for='item in coinGetList'
                                        :label='item.Name'
                                        :value='item.ID'
                                        :key='item.ID'>
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </li>
                        <li>
                            <el-form-item :label="$t('fnc.bweibi')" prop="StandardCurrencyId">
                                <el-select filterable v-model='addMsg.StandardCurrencyId' :placeholder="$t('objFill.qingxuanzhebwd')" class=" _border_b_1">
                                    <el-option v-for='item in coinGetList'
                                        :label='item.Name'
                                        :value='item.ID'
                                        :key='item.ID'>
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </li>
                        <li>
                            <el-form-item label="汇率" prop="CurrentRate">
                                <el-input v-model="addMsg.CurrentRate" @change="getRate"></el-input>
                            </el-form-item>
                        </li>

                        <li>
                            <el-form-item :label="$t('system.table_begTime')" prop="StartTime">
                                <el-date-picker class="w150" v-model="addMsg.StartTime" type="date" :placeholder="$t('pub.pleaseSel')" value-format="yyyy-MM-dd">
                                </el-date-picker>
                            </el-form-item>
                        </li>
                        <li>
                            <el-form-item :label="$t('salesModule.EndTime')" prop="EndTime">
                                <el-date-picker class="w150" v-model="addMsg.EndTime" type="date" :placeholder="$t('pub.pleaseSel')" value-format="yyyy-MM-dd">
                                </el-date-picker>
                            </el-form-item>
                        </li>


                    </ul>
            </el-form>
            <div>
                <ul class="clearfix" style="text-align: right;">
                    <li class="_add_saveBtn" style="float: initial;" >
                        <button v-loading="loading" type="button" class="normalBtn" @click="submitForm('addMsg')">{{$t('pub.saveBtn')}}</button>
                        <button class="hollowFixedBtn" type="button" @click="cancelEdit(),resetForm('addMsg')">{{$t('pub.cancelBtn')}}</button>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>
<script>
	export default {
		data() {
			return {
                coinGetList: [],
                msg:{
                    pageIndex:1,
                    pageSize:14,
                    CurrencyId:'-1',
                    StandardCurrencyId:3,
                    StartTime: '',
                    EndTime: ''
                },
                addMsg:{
                    CurrencyId:'',
                    StandardCurrencyId:'',
                    CurrentRate:'',
                    StartTime:'',
                    EndTime:'',
                },
                total:0,
                currentPage: 1,
                loading2:true,
                loading:false,
                tableInfo:'',
                addShow:false,
                noData:false,
                dialogTitle: '',
                rules: {//表单必填验证
                    CurrencyId: [
                        { required: true, message: '请选择币种', trigger: 'change' }
                    ],
                    StandardCurrencyId: [
                        { required: true, message: '请选择本位币', trigger: 'change' }
                    ],
                    CurrentRate:[
                        { required: true, message: '请输入汇率', trigger: 'blur' },
                        {pattern: /^\d+$|^\d*\.\d+$/g, message: '请输入正确的汇率数'}
                    ],
                    StartTime:[
                        { required: true, message: '请选择开始时间', trigger: 'change' }
                    ],
                    EndTime:[
                        { required: true, message: '请选择结束时间', trigger: 'change' }
                    ]
                },
                transitionShow:false,
                transitionShow2:true,
                contenWidth:0,
                contenHeight:0,
                tableSize:0,
                blockSize:0,
			}
		},created(){
            let allH,allW,cH,cW;
            allH = document.documentElement.clientHeight;
            allW = document.documentElement.clientWidth;
            cW = allW-90;
            cH = allH-260; // = 50 40 75 46 49
            this.contenWidth = cW;
            this.contenHeight = cH;
            this.tableSize = this.msg.pageSize = parseInt(cH/45);
            this.financeinfo_post_GetList()
        },
		methods: {
            getRate(value){
                this.addMsg.CurrentRate = this.moneyFormatB(value)
            },
            financeinfo_post_GetList(TCID){ // 获取币种
                this.apipost('financeinfo_post_GetList',
                {Name:'', TCID: -1, StandCurrBranchId: -1}, res => {
                if(res.data.resultCode == 1) {
                    this.coinGetList = res.data.data;}
                })
            },
            cancelEdit(){  // 取消修改、新增
                this.addMsg = {
                    CurrencyId:'',
                    StandardCurrencyId:'',
                    CurrentRate:'',
                    StartTime:'',
                    EndTime:'',
                }
                this.addShow = false
            },
            initTableInfo(){
                this.tableInfo = [];
                this.loading2 = true;
                this.apipost('financeinfo_post_GetCurrencyForeignHistoryPageList',this.msg, res => {
						if(res.data.resultCode == 1) {
                            let data = res.data.data.pageData;
                            this.total = res.data.data.count;
                            this.loading2 = false;
                            if(this.total>0){
                                this.noData =false;
                            }else{
                                this.noData =true;
                            }
                            this.tableInfo = data
						} else {
                            this.tips(res.data.message,'error');
                            this.loading2 = false;
						}
                }, err => {this.loading2 = false;})
            },
            handleCurrentChange(val) {
				this.msg.pageIndex = val;
				this.initTableInfo();
            },
            resetPageIndex(){
                this.msg.pageIndex=1;
                this.currentPage = 1
            },
            addFlightmodule(){//添加汇率
                this.apipost('financeinfo_post_SetCurrencyForeignRate',this.addMsg, res => {
                    if(res.data.resultCode == 1) {
                        this.tips(res.data.message,'success');
                        this.initTableInfo();
                        this.addShow =false
                        this.loading = false
                        this.cancelEdit()
                        this.resetForm('addMsg')
                    } else {
                        this.tips(res.data.message,'error');
                        this.loading = false
                    }
                }, err => {this.loading = false})
            },
            submitForm(addMsg) {//提交创建、修改表单
                let that = this;
                that.$refs[addMsg].validate((valid) => {
                    if (valid) {
                        if(!that.loading){
                            that.loading = true
                            that.addFlightmodule()
                        }
                    } else {
                        return false;
                    }
                });
            },
            resetForm(formName) {//弹出框取消 初始化谈框内表单
                this.$refs[formName].resetFields();
            },
            tips(msg,type) {
                this.$message({
                    message: msg,
                    duration:2000,
                    type: type
                });
            },
            goUrl (path,id,name) {
	            this.$router.push({ name: path,query:{"id":id,'name':name} })
	        }
        },
        mounted(){
            this.initTableInfo();
        }
	}
</script>
