<template>
  <div class="flexOne page_PlatformAccount page-body">
    <div class="query-box" style="padding:0 0 10px 0 ">
      <ul>
        <li>
          <em>账户别名</em>&nbsp;
          <el-input v-model="msg.Alias" @keyup.enter.native="getList()"></el-input>
        </li>
        <li>
          <em>校区</em>&nbsp;
          <el-select filterable v-model="msg.RB_Branch_Id">
            <el-option label="不限" value="-1"></el-option>
            <el-option
              v-for="item in CompanyList"
              :label="item.SName"
              :value="item.SId"
              :key="item.SId"
            ></el-option>
          </el-select>
        </li>
        <li>
          <em>开户人</em>&nbsp;
          <el-input v-model="msg.Accountholder" @keyup.enter.native="getList()"></el-input>
        </li>
        <li>
          <q-btn color="primary" size="11px" label="查询" @click="getList()" style="marginRight:10px"/>
          <q-btn color="primary" size="11px" :label="$t('pub.addBtn')"  @click="addShow=true,text=$t('pub.addBtn'),ed=false" style="marginRight:10px"/>
          <q-btn color="primary" size="11px" :label="$t('visa.v_daochu')" @click="downMuban()" />
        </li>
      </ul>
    </div>

    <!--    <v-table-->
    <!--      v-if="isReady"-->
    <!--      is-horizontal-resize-->
    <!--      column-width-drag-->
    <!--      style="width:100%;"-->
    <!--      :columns="columns"-->
    <!--      :table-data="DataList"-->
    <!--      :filter-method="filterMethod"-->
    <!--      :total="total"-->
    <!--      :pageSize="msg.pageSize"-->
    <!--      :pageIndex="msg.pageIndex"-->
    <!--      :handleCurrentChange="handleCurrentChanges"-->
    <!--      :multiple-sort="multipleSort"-->
    <!--      :is-loading="loading"-->
    <!--      sort-always-->
    <!--      @sort-change="sortChange"-->
    <!--      @on-custom-comp='customCompFunc'-->
    <!--      :row-click="rowClick"-->
    <!--    ></v-table>-->
    <el-table :data="DataList" border style="width: 100%;font-size: 12px">
      <el-table-column prop="Alias" label="账户" width="100"></el-table-column>
      <el-table-column prop="allName" label="校区" width="150"></el-table-column>
      <el-table-column prop="Accountholder" label="开户人"></el-table-column>
      <el-table-column prop="Initialbalance" label="账户余额">
        <template slot-scope="scope">
          <span style='color:red;font-weight:bold'
            v-if="scope.row.Initialbalance>=scope.row.RiskLimitMoney&&scope.row.Initialbalance!=0">
            {{scope.row.Initialbalance?scope.row.Initialbalance.toFixed(2):0}} <span style="margin-left:12px">超限</span>
          </span>
          <span style='color:red;font-weight:bold'
            v-else>{{scope.row.Initialbalance?scope.row.Initialbalance.toFixed(2):0}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="Accountholder" label="平台交易费">
        <template slot-scope="scope">
          <span>
            {{scope.row.SettlementType==1?(scope.row.Commission.toFixed(2)+'%'):(scope.row.Commission+'/人')}}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="Royalty" label="平台使用费"></el-table-column>
      <el-table-column prop="HaveContract" label="合同">
        <template slot-scope="scope">
          <span :style="{'color':scope.row.HaveContract==0?'red':'blue'}">{{scope.row.HaveContract==0?'无合同':'有合同'}}
          </span>
          <span>{{scope.row.ContraceDateRange?scope.row.ContraceDateRange:''}} </span>
        </template>
      </el-table-column>
      <el-table-column prop="Accountholder" label="签约线路"></el-table-column>
      <el-table-column prop="BindBankName" label="绑定银行"></el-table-column>
      <el-table-column prop="Remark" label="备注"></el-table-column>
      <el-table-column prop="Remark" label="操作">
        <template slot-scope="scope">
          <div>
            <el-button type="primary" size='mini' icon="el-icon-edit" circle @click="customCompFunc(scope.row,1)">
            </el-button>
            <el-button type="danger" size='mini' icon="el-icon-delete" circle @click="customCompFunc(scope.row,2)">
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="_vMG_edit _scrollbar" v-if="addShow" :class="addShow==true?'edHeight':''">
      <el-row>
        <el-col :span="20">
          <p class="_tit">{{text}}{{$t('fnc.acc')}}</p>
        </el-col>
        <el-col :span="4" class="_add_saveBtn">
          <!-- <button type="button" class="normalBtn" @click="submitForm('addMsg',1)">{{$t('pub.saveBtn')}}</button> -->
          <q-btn color="primary" size="11px" :label="$t('pub.saveBtn')" @click="submitForm('addMsg',1)" style="marginRight:10px"/>
          <!-- <button class="hollowFixedBtn" type="button"
            @click="cancelEdit(),resetForm('addMsg'),addShow=false">{{$t('pub.cancelBtn')}}</button> -->
          <q-btn
           text-color="primary" size="11px" :label="$t('pub.cancelBtn')" @click="cancelEdit(),resetForm('addMsg'),addShow=false"/>
        </el-col>
      </el-row>
      <el-form class="_info_box clearfix" :model="addMsg" ref="addMsg" :rules="rules" label-width="110px">
        <el-row>
          <el-col :span="4" :gutter="35">
            <el-form-item :label="$t('fnc.accBming')" prop="Alias">
              <el-input v-model="addMsg.Alias" class maxlength="10"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="4" :gutter="35">
            <el-form-item :label="$t('fnc.accType')" prop="TypeId">
              <el-select filterable v-model="addMsg.TypeId" class>
                <el-option v-for="item in AccountTypeList" :label="item.Name" :value="item.ID" :key="item.ID">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4" :gutter="35">
            <el-form-item :label="$t('fnc.ptjigou')" prop="BackId">
              <el-select filterable v-model="addMsg.BackId" class>
                <el-option v-for="item in FinancialList" v-if="item.Type == 1" :label="item.Name" :value="item.ID"
                  :key="item.ID"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4" :gutter="35">
            <el-form-item :label="$t('fnc.khuren')" prop="Accountholder">
              <el-input v-model="addMsg.Accountholder" class maxlength="20"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4" :gutter="35">
            <el-form-item :label="$t('fnc.ptAcc')" prop="PlatformNo">
              <el-input v-model="addMsg.PlatformNo" class maxlength="20"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="4" :gutter="35">
            <el-form-item :label="$t('fnc.ptsyongfei')" prop="Royalty">
              <el-input v-model="addMsg.Royalty" class maxlength="20"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4" :gutter="35">
            <el-form-item :label="$t('fnc.ptsffangshi')">
              <el-select filterable v-model="addMsg.SettlementType" class>
                <el-option :label="$t('fnc.abfenbi')" value=1></el-option>
                <el-option :label="$t('fnc.anrentou')" value=2></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4" :gutter="35">
            <el-form-item :label="$t('fnc.ptsxufei')" prop="Commission">
              <el-input v-model="addMsg.Commission" class maxlength="20">
                <template slot="append">{{addMsg.SettlementType==1?'%':'/人'}}</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4" :gutter="35">
            <el-form-item :label="$t('fnc.bzengjin')" prop="Bond">
              <el-input v-model="addMsg.Bond" class maxlength="20"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4" :gutter="35">
            <el-form-item :label="$t('fnc.qyxianlu')">
              <el-input v-model="addMsg.SigningLine" class></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4" :gutter="35">
            <el-form-item :label="$t('fnc.hetong')">
              <el-select filterable v-model="addMsg.HaveContract" class>
                <el-option :label="$t('fnc.yhetong')" value=1></el-option>
                <el-option :label="$t('fnc.whetong')" value=0></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4" :gutter="35">
            <el-form-item :label="$t('fnc.htshuoming')">
              <el-input v-model="addMsg.ContraceDateRange" class></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4" :gutter="35">
            <el-form-item :label="$t('fnc.csyue')" prop="Initialbalance">
              <el-input v-model="addMsg.Initialbalance" class></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4" :gutter="35">
            <el-form-item :label="$t('fnc.zhbizhong')" prop="CurrencyId">
              <el-select filterable v-model="addMsg.CurrencyId" class>
                <el-option v-for="item in financeinfoList" :label="item.Name" :value="item.ID" :key="item.ID">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4" :gutter="35" class="_BranchIdS">
            <el-form-item label="校区" prop="BranchIdS">
              <el-select filterable v-model="addMsg.BranchIdS" collapse-tags>
                <el-option v-for="item in CompanyList" :label="item.SName" :value="item.SId" :key="item.SId"
                  :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4" :gutter="35">
            <el-form-item :label="$t('fnc.fxshangxian')">
              <el-input v-model="addMsg.RiskLimitMoney" type="number" class></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4" :gutter="35">
            <el-form-item :label="$t('fnc.fxxiaxian')">
              <el-input v-model="addMsg.RiskLowerLimitMoney" type="number" class></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4" :gutter="35">
            <el-form-item :label="$t('fnc.bdyhzhanghu')" prop="BindBankID">
              <el-select v-model="addMsg.BindBankID" filterable remote :placeholder="$t('fnc.qsryhzhgjc')"
                :remote-method="remoteQueryBankMethod" :loading="remoteLoading" class="minmargin-box">
                <el-option v-for="item in bankList" :key="item.ID" :label="item.Alias" :value="item.ID">
                  <span style="float: left">{{ item.Alias }}</span>
                  <span class="right-tag">{{ item.BranchName }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4" :gutter="35">
            <el-form-item label="初始本位币金额">
              <el-input v-model="addMsg.AccountStartWBMoney" type="number" class></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4" :gutter="35">
            <el-form-item label="初始原币金额">
              <el-input v-model="addMsg.AccountStartMoney" type="number" class></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4" :gutter="35">
            <el-form-item label="期初应用日期">
              <el-date-picker type="date" v-model="addMsg.BeginTimeStr" value-format="yyyy-MM-dd"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" :gutter="35">
            <el-form-item :label="$t('fnc.beizhu')">
              <el-input type='textarea' v-model="addMsg.Remark" class></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="_vMG_edit _scrollbar" v-if="addCuren == false" :class="addCuren==false?'edHeight_t':''">
      <el-row>
        <el-col :span="20">
          <p class="_tit">{{$t('fnc.qmtiaohui')}}</p>
        </el-col>
        <el-col :span="4" class="_add_saveBtn">
          <!-- <button type="button" class="normalBtn"
            @click="submitForm('SetProfitLossMsg',2)">{{$t('fnc.qrtijiao')}}</button> -->
          <q-btn color="primary" size="11px" :label="$t('fnc.qrtijiao')" @click="submitForm('SetProfitLossMsg',2)"/>

          <!-- <button class="hollowFixedBtn" type="button"
            @click="cancelEdit(),resetForm('SetProfitLossMsg')">{{$t('pub.cancelBtn')}}</button> -->
             <q-btn color="primary" size="11px" :label="$t('pub.cancelBtn')"  @click="cancelEdit(),resetForm('SetProfitLossMsg')"/>
        </el-col>
      </el-row>
      <el-form class="_info_box clearfix" :model="SetProfitLossMsg" ref="SetProfitLossMsg" :rules="rules"
        label-width="100px">
        <el-row>
          <el-col :span="4" :gutter="35">
            <el-form-item :label="$t('fnc.sqhuilv')">
              <el-input v-model="SetProfitLossMsg.initRate" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4" :gutter="35">
            <el-form-item :label="$t('fnc.qmhuilv')" prop="EndRate">
              <el-input v-model="SetProfitLossMsg.EndRate" type="number" @change="Calculation()"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4" :gutter="35">
            <el-form-item :label="$t('fnc.xzqishu')" prop="TermNum">
              <el-date-picker v-model="SetProfitLossMsg.TermNum" value-format="yyyy-MM-dd" type="month" class="_wAuto"
                :placeholder="$('admin.admin_choDate')"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="4" :gutter="35" v-if="costType.length">
            <el-form-item :label="$t('fnc.fyleixing')" prop="CostTypeID">
              <el-select filterable v-model="SetProfitLossMsg.CostTypeID">
                <el-option v-for="item in costType" :label="item.Name" :value="item.ID" :key="item.ID"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4" :gutter="35" class="_yingkui">
            <p v-if="moneyDate.ProfitLoss<0">
              {{$t('fnc.yingkui')}}
              <span class="fc_red">{{moneyDate.ProfitLoss}}</span>
            </p>
            <p v-if="moneyDate.ProfitLoss>0">
              {{$t('fnc.yingli')}}
              <span class="fc_green">{{moneyDate.ProfitLoss}}</span>
            </p>
            <p v-if="moneyDate.ProfitLoss==0">
              {{$t('fnc.yingkui')}}
              <span class="fc_green">0</span>
            </p>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>
<script>
  import Vue from 'vue'
  import {
    getSchoolDropdown
  } from '../../api/school/index'
  export default {
    data() {
      return {
        columns: [],
        remoteLoading: false,
        total: 0,
        tableData: [],
        bankList: [],
        isReady: false,
        multipleSort: false,
        loading: true,
        CompanySelect: [],
        msg: {
          pageIndex: 1,
          pageSize: 15,
          BackId: "-1",
          TypeId: "-1",
          RB_Branch_Id: "-1",
          Alias: "",
          OrderBy: "Initialbalance desc",
          SettlementType: 0,
          HaveContract: -1,
          SigningLine: "",
          Accountholder: ""
        },
        addMsg: {
          ID: 0,
          Alias: "",
          TypeId: "",
          BackId: "",
          Accountholder: "",
          PlatformNo: "",
          Commission: "",
          Initialbalance: "",
          CurrencyId: "",
          RiskLimitMoney: "",
          BranchList: [],
          BranchIdS: 0,
          OutCharge: 0,
          InCharge: 0,
          RiskLowerLimitMoney: "",
          SettlementType: '1',
          Royalty: 0,
          Bond: 0,
          SigningLine: '',
          Remark: '',
          BindBankID: null,
          HaveContract: '0',
          ContraceDateRange: '',
          AccountStartMoney: 0,
          AccountStartWBMoney: 0,
          BeginTimeStr: '',

        },
        getCompanyMsg: {
          RB_Group_Id: "0",
          Status: "0"
        },
        DataList: [],
        total: 0,
        currentPage: 1,
        loading: true,
        text: "",
        dialogTitle: "",
        AccountTypeList: [],
        CompanyList: [],
        FinancialList: [],
        financeinfoList: [],
        addShow: false,
        noData: false,
        inTime: 15,
        ed: false,
        InitTimeFun: "",
        rules: {
          //表单必填验证
          Alias: [{
            required: true,
            message: this.$t('rule.qsrzhbieming'),
            trigger: "blur"
          }],
          TypeId: [{
            required: true,
            message: this.$t('rule.qxzzhleixing'),
            trigger: "change"
          }],
          BackId: [{
            required: true,
            message: this.$t('rule.qxzyhjigou'),
            trigger: "change"
          }],
          Accountholder: [{
            required: true,
            message: this.$t('rule.qsrkhuren'),
            trigger: "blur"
          }],
          PlatformNo: [{
            required: true,
            message: this.$t('rule.qsrptzhanghao'),
            trigger: "blur"
          }],
          Commission: [{
              required: true,
              message: this.$t('rule.qsrptsxufei'),
              trigger: "blur"
            },
            {
              pattern: /^\d+(\.\d{0,8})?$/,
              message: this.$t('rule.qsrzqxufei')
            }
          ],
          BranchIdS: [{
            required: true,
            message: this.$t('rule.qszssgongsi'),
            trigger: "change"
          }],
          CurrencyId: [{
            required: true,
            message: this.$t('rule.qxzzhbizhong'),
            trigger: "change"
          }],
          Initialbalance: [{
              required: true,
              message: this.$t('rule.qsrcsyue'),
              trigger: "blur"
            },
            {
              pattern: /^(\-|\+?)\d+(\.\d+)?$/,
              message: this.$t('rule.qsrzqdyue')
            }
          ],
          OutCharge: [{
            required: true,
            message: this.$t('rule.szfzeren'),
            trigger: "change"
          }],
          InCharge: [{
            required: true,
            message: this.$t('rule.fkfzeren'),
            trigger: "change"
          }],
          CostTypeID: [{
            required: true,
            message: this.$t('rule.qxzfyleixing'),
            trigger: "change"
          }],
          Royalty: [{
            required: true,
            message: this.$t('rule.qtxptsyongfei'),
            trigger: "change"
          }],
          Bond: [{
            required: true,
            message: this.$t('rule.qtxptbzhengjin'),
            trigger: "change"
          }],
          BindBankID: [{
            required: true,
            message: this.$t('rule.qxzbdyinhang'),
            trigger: "change"
          }]
        },
        addCuren: true,
        ed: false,
        loading2: false,
        moneyDate: {
          Money: 0,
          LastR: 0,
          currentR: 0,
          LastM: 0,
          currentM: 0,
          ProfitLoss: 0
        },
        EmployeeMsg: {
          GroupId: "",
          BranchId: -1,
          DepartmentId: 0,
          PostId: 0,
          IsLeave: 0
        },
        showEmployeeList: [],
        showEmployeeList2: [],
        Charge: 3,
        SetProfitLossMsg: {
          ID: 0,
          AccountID: 0,
          EndRate: "",
          TermNum: "",
          CurrencyId: "",
          initRate: "",
          Money: "",
          ProfitLoss: 0,
          Source: 2,
          CostTypeID: ""
        },
        costType: []
      };
    },
    methods: {

      rowClick(rowIndex, rowData, column) {
        let path = 'PlatformAccDetail';
        if (column.title == "账户余额") {
          this.$router.push({
            name: path,
            query: {
              TypeId: rowData.TypeId,
              ID: rowData.ID,
              blank: "y",
            }
          });
        }
      },
      remoteQueryBankMethod(query) {
        if (query != '') {
          this.remoteLoading = true
          this.apipost('bankbase_get_searchbyalias', {
            query
          }, x => {
            this.remoteLoading = false
            this.bankList = x.data.data
          })
        }
      },
      customCompFunc(params, index) {
        if (index == '2') {
          this.financeinfoRemove(params.ID, params.Alias)
        } else if (index == '1') {
          this.editCurency(params.ID)
          this.text = this.$t('pub.updateMsg')
          this.addShow = true
          this.addCuren = true
        }
      },
      initColums() {
        this.isReady = false;
        let that = this;
        let Alias = {
          title: that.$t('fnc.acc'),
          field: "Alias",
          width: 80,
          titleAlign: "left",
          columnAlign: "left",
          isResize: true,
          result: "",
          filterMultiple: false,
          filters: [{}],
          type: "text"
        };
        // let companyList = [];
        this.CompanyList.forEach(x => {
          let item = {};
          item.label = x.SName;
          item.value = x.SId;
          this.CompanySelect.push(item);
        });
        let allName = {
          field: "allName",
          title: that.$t('system.query_company'),
          width: 40,
          titleAlign: "left",
          columnAlign: "left",
          isResize: true,
          filterMultiple: false,
          filters: this.CompanySelect,
          result: "",
          type: "select",
          // isFrozen:true
        };
        let Accountholder = {
          field: "Accountholder",
          title: that.$t('fnc.khuren'),
          width: 80,
          titleAlign: "left",
          columnAlign: "left",
          isResize: true,
          result: "",
          filterMultiple: false,
          filters: [{}],
          type: "text"
        };
        let benBalance = {
          field: "Initialbalance",
          title: that.$t('fnc.zhyue'),
          titleAlign: "left",
          columnAlign: "left",
          isResize: true,
          width: 80,
          orderBy: "desc",
          formatter: function (rowData, rowIndex, pagingIndex, field) {
            if (rowData["Initialbalance"] >= rowData["RiskLimitMoney"] && rowData["Initialbalance"] != 0) {
              let text = that.$t('fnc.chaoxian')
              return `<span style='color:red;font-weight:bold'>${rowData["Initialbalance"].toFixed(2)}</span><span style='color:red;margin-left:12px;'>${text}</span>`;
            } else {
              return rowData["Initialbalance"].toFixed(2)
            }
          }
        };
        let Commission = {
          field: "Commission",
          title: that.$t('fnc.ptjyifei'),
          titleAlign: "left",
          columnAlign: "left",
          isResize: true,
          width: 80,
          formatter: function (rowData, rowIndex, pagingIndex, field) {
            let text = that.$t('hotel.hotel_people')
            return rowData.SettlementType == 1 ?
              rowData.Commission.toFixed(2) + "%" :
              rowData.Commission + "/" + text;
          },
          filterMultiple: true,
          result: [],
          filters: [{
              label: that.$t('fnc.jyebfenbi'),
              value: "1"
            },
            {
              label: that.$t('fnc.jyrtoushu'),
              value: "2"
            }
          ],
          type: "check"
        };
        let Royalty = {
          field: "Royalty",
          title: that.$t('fnc.ptsyongfei'),
          titleAlign: "left",
          columnAlign: "left",
          isResize: true,
          width: 80,
          orderBy: "",
          formatter: function (rowData, rowIndex, pagingIndex, field) {
            return rowData.Royalty.toFixed(2);
          }
        };
        let contract = {
          title: that.$t('fnc.hetong'),
          field: "HaveContract",
          titleAlign: "left",
          columnAlign: "left",
          isResize: true,
          width: 80,
          formatter: function (rowData, rowIndex, pagingIndex, field) {
            let whetong = that.$t('fnc.whetong')
            let yhetong = that.$t('fnc.yhetong')
            return `<span style='color:${
            rowData.HaveContract == 0 ? "red" : "blue"
          };margin-right:12px;'>${
            rowData.HaveContract == 0 ? whetong : yhetong
          }</span><span>${
            rowData.ContraceDateRange ? rowData.ContraceDateRange : ""
          }</span>`;
          },
          filterMultiple: true,
          result: [],
          filters: [{
              label: that.$t('fnc.whetong'),
              value: "1"
            },
            {
              label: that.$t('fnc.whetong'),
              value: "0"
            }
          ],
          type: "check"
        };
        let signingLine = {
          field: "SigningLine",
          title: that.$t('fnc.qyluxian'),
          titleAlign: "left",
          columnAlign: "left",
          isResize: true,
          width: 80,
          result: "",
          filterMultiple: false,
          filters: [{}],
          type: "text"
        };
        let bindBank = {
          field: "BindBankName",
          title: that.$t('fnc.bdyinhang'),
          titleAlign: "left",
          columnAlign: "left",
          isResize: true,
          width: 80
        };
        let remark = {
          field: "Remark",
          title: that.$t('hotel.hotel_remark'),
          titleAlign: "left",
          columnAlign: "left",
          isResize: true,
          width: 80,
          formatter: function (rowData, rowIndex, pagingIndex, field) {
            return `<span style='color:gray'>${rowData.Remark?rowData.Remark:''}</span>`;
          },
        };
        let opera = {
          title: that.$t('hotel.table_operat'),
          titleAlign: "left",
          columnAlign: "left",
          width: 80,
          isResize: false,
          componentName: 'table-operation'
        };
        this.columns = [];
        this.columns.push(Alias);
        this.columns.push(allName);
        this.columns.push(Accountholder);
        this.columns.push(benBalance);
        this.columns.push(Commission);
        this.columns.push(Royalty);
        this.columns.push(contract);
        this.columns.push(signingLine);
        this.columns.push(bindBank);
        this.columns.push(remark);
        this.columns.push(opera);
        this.isReady = true;
      },
      handleCurrentChanges(val) {
        this.msg.pageIndex = val;
        this.getList();
      },
      sortChange(param) {
        if (param.Royalty != "") {
          this.msg.OrderBy = `Royalty ${param.Royalty}`;
        } else if (param.Initialbalance != "") {
          this.msg.OrderBy = `Initialbalance ${param.Initialbalance}`;
        }
        this.getList();
      },
      filterMethod(filters) {
        this.msg.Alias = filters.Alias;
        if (filters.allName == '__all__') {
          filters.allName = '-1'
        }
        this.msg.RB_Branch_Id = filters.allName;
        this.msg.SettlementType =
          filters.Commission.length == 1 ? filters.Commission[0] : 0;
        this.msg.HaveContract =
          filters.HaveContract.length == 1 ? filters.HaveContract[0] : -1;
        this.msg.SigningLine = filters.SigningLine;
        this.msg.Accountholder = filters.Accountholder;
        this.msg.pageIndex = 1;
        this.getList();
      },
      regNum(n, t) {
        // 判断数字    n 值 t 类型
        let reg = /^\d+(\.\d{0,6})?$/;
        if (!n) return 0;
        if (t == 2) {
          if (reg.test(n)) {
            return parseFloat(n);
          }
          return 0;
        } else if (t == 1) {
          if (reg.test(n)) {
            return parseFloat(n);
          }
          return 0;
        }
      },
      Calculation() {
        // 计算盈亏
        this.SetProfitLossMsg.CostTypeID = "";
        this.moneyDate.Money = this.regNum(this.SetProfitLossMsg.Money, 1);
        this.moneyDate.LastR = this.regNum(this.SetProfitLossMsg.initRate, 1);
        this.moneyDate.currentR = this.regNum(this.SetProfitLossMsg.EndRate, 2);
        this.moneyDate.LastM = 0;
        this.moneyDate.currentM = 0;
        this.moneyDate.ProfitLoss = (
          (this.moneyDate.currentR - this.moneyDate.LastR) *
          this.moneyDate.Money
        ).toFixed(2);
        if (this.moneyDate.ProfitLoss > 0) {
          this.getTemplateCostTypeList(1);
        } else if (this.moneyDate.ProfitLoss < 0) {
          this.getTemplateCostTypeList(2);
        } else {
          this.costType = [];
        }
      },
      getTemplateCostTypeList(t) {
        this.apipost(
          "financeinfo_post_GetCostTypeList", {
            Type: t
          },
          res => {
            if (res.data.resultCode == 1) {
              this.costType = res.data.data;
            } else {}
          },
          err => {}
        );
      },
      remoteMethod(query) {
        if (query !== "") {
          this.loadingPeople = true;
          this.apipost(
            "admin_Get_Chat_All_SelectEmpName", {
              EmName: query
            },
            res => {
              if (res.data.resultCode == 1) {
                this.showEmployeeList = res.data.data;
              }
              this.loadingPeople = false;
            },
            err => {}
          );
        } else {
          this.showEmployeeList = [];
        }
      },
      remoteMethod2(query) {
        if (query !== "") {
          this.loadingPeople = true;
          this.apipost(
            "admin_Get_Chat_All_SelectEmpName", {
              EmName: query
            },
            res => {
              if (res.data.resultCode == 1) {
                this.showEmployeeList2 = res.data.data;
              }
              this.loadingPeople = false;
            },
            err => {}
          );
        } else {
          this.showEmployeeList2 = [];
        }
      },
      disabledOption() {
        // 选择公司 如果选择通用则禁用其它选项
        if (this.addMsg.BranchIdS && this.addMsg.BranchIdS.length == 0) {
          this.CompanyList.forEach(y => {
            y.disabled = false;
          });
          return;
        }
        this.addMsg.BranchIdS.forEach(x => {
          if (x == "-1") {
            this.addMsg.BranchIdS = [];
            this.addMsg.BranchIdS.push("-1");
            this.CompanyList.forEach(y => {
              y.disabled = true;
            });
          }
        });
      },
      getfinanceinfoList() {
        //获取币种列表
        this.apipost(
          "financeinfo_post_GetList", {
            Name: ""
          },
          res => {
            if (res.data.resultCode == 1) {
              this.financeinfoList = res.data.data;
            } else {}
          },
          err => {}
        );
      },
      getFinancialList() {
        //获取机构列表
        this.apipost(
          "FinancialInstitutions_post_GetList", {
            Type: -1
          },
          res => {
            if (res.data.resultCode == 1) {
              this.FinancialList = res.data.data;
            } else {}
          },
          err => {}
        );
      },
      getCompanyList() {
        getSchoolDropdown({}).then(res => {
          this.CompanyList = res.Data;
        }).catch(() => {
        })
      },
      editCurency(id) {
        //  修改根据ID 获取信息
        this.apipost(
          "BankAccount_post_GetPlatform", {
            ID: id
          },
          res => {
            if (res.data.resultCode == 1) {
              let data = res.data.data;
              data.BranchIdS = data.BranchList[0].RB_Branch_Id;
              this.remoteMethod(data.InemName);
              this.remoteMethod2(data.OutemName);
              this.addMsg = data;
              this.addMsg.HaveContract = this.addMsg.HaveContract.toString()
              this.addMsg.SettlementType = this.addMsg.SettlementType.toString()
              this.addMsg.BindBankID = this.addMsg.BindBankID == -1 ? null : this.addMsg.BindBankID
              this.remoteQueryBankMethod(this.addMsg.BindBankName)
            } else {
              this.tips(res.data.message, "error");
            }
          },
          err => {}
        );
      },
      cancelEdit(t) {
        // 取消修改、新增
        this.addMsg = {
          ID: 0,
          Alias: "",
          TypeId: "",
          BackId: "",
          Accountholder: "",
          PlatformNo: "",
          Commission: "",
          Initialbalance: "",
          CurrencyId: "",
          RiskLimitMoney: "",
          BranchList: [],
          BranchIdS: 0,
          OutCharge: 0,
          InCharge: 0,
          RiskLowerLimitMoney: "",
          AccountStartMoney: 0,
          AccountStartWBMoney: 0,
          BeginTimeStr: '',
        };
        this.SetProfitLossMsg = {
          ID: 0,
          EndRate: "",
          TermNum: "",
          CurrencyId: "",
          initRate: "",
          Money: "",
          AccountID: 0,
          Source: 2,
          CostTypeID: ""
        };
        if (!t) {
          this.addShow = false;
          this.ed = false;
          this.addCuren = true;
        }
        this.Charge = 3;
        let userInfo = this.getLocalStorage();
        var branchId = userInfo.RB_Branch_id;
        this.addMsg.BranchIdS = branchId;
      },
      getAccountTypeList() {
        //获取账户类型(平台账户只能获取对公账户类型)
        this.apipost(
          "AccountType_post_GetList", {},
          res => {
            if (res.data.resultCode == 1) {
              this.AccountTypeList = res.data.data;
            }
          },
          err => {}
        );
      },
      getList() {
        //获取列表
        this.loading = true;
        this.apipost(
          "BankAccount_post_GetPlatformPageList",
          this.msg,
          res => {
            if (res.data.resultCode == 1) {
              this.total = res.data.data.count;
              let data = res.data.data.pageData;

              if (this.total > 0) {
                this.noData = false;
              } else {
                this.noData = true;
              }
              data.forEach(x => {
                x.showB = false;
                x.benBalance = Number(x.CurrentRate) * x.Initialbalance;
                // x.benBalance =this.$commonUtils.addCommas(x.benBalance);
                let allName = "";
                x.BranchName.forEach(y => {
                  allName = allName + y;
                });
                x.allName = allName;
              });
              this.DataList = data;
              this.loading = false;
              // this.InitTimeFun = setInterval(()=> {this.InitTime()}, 1000);
            } else {
              this.$message.error(res.data.message);
              this.loading = false;
            }
          },
          err => {}
        );
      },
      //导出
      downMuban() {
        let msg = this.msg;
        let userInfo = this.getLocalStorage();
        msg.UId = userInfo.Id;
        this.GetErpLocalFile(
          "BankAccount_post_OutToExcelPlatform",
          msg,
          "平台账户.xls"
        );
      },
      addInstitutions() {
        // 保存 修改、新增
        this.addMsg.BranchList = [];
        if (!this.addMsg.RiskLimitMoney) {
          this.addMsg.RiskLimitMoney = 0;
        }
        let obj = {};
        obj = this.CompanyList.find(item => {
          return item.SId === this.addMsg.BranchIdS; //筛选出匹配数据
        });
        let msg = {
          ID: 0,
          Type: 2,
          RB_Branch_Id: this.addMsg.BranchIdS,
          RB_BranchName: obj.SName

        };
        this.addMsg.BranchList.push(msg);
        this.apipost(
          "BankAccount_post_SetPlatform",
          this.addMsg,
          res => {
            if (res.data.resultCode == 1) {
              this.tips(this.$t('tips.saveYes'), "success");
              this.getList();
              this.initAddMsg();
              this.addShow = false;
            } else {
              this.$message.error(res.data.message);
            }
          },
          err => {}
        );
      },
      financeinfoRemove(id, text) {
        //删除
        this.$confirm(
            this.$t('tips.shifoudui') + "“" + text + "”" + this.$t('tips.zhshanchu'),
            this.$t('tips.tips'), {
              confirmButtonText: this.$t('pub.sureBtn'),
              cancelButtonText: this.$t('pub.cancelBtn'),
              type: "warning"
            }
          )
          .then(() => {
            this.deletInstitutions(id);
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: this.$t('tips.cancleDelete')
            });
          });
      },
      deletInstitutions(id) {
        this.apipost(
          "BankAccount_post_RemovePlatform", {
            ID: id
          },
          res => {
            if (res.data.resultCode == 1) {
              this.innerVisible = false;
              this.$message.success(res.data.message);
            } else {
              this.$message.error(res.data.message);
            }
            this.getList();
          },
          err => {}
        );
      },
      initAddMsg() {
        //初始化添加、修改数据
        let newMsg = {
          ID: 0,
          Alias: "",
          TypeId: "",
          BackId: "",
          Accountholder: "",
          PlatformNo: "",
          Commission: "",
          Initialbalance: "",
          CurrencyId: "",
          RiskLimitMoney: "",
          BranchList: [],
          BranchIdS: 0,
          OutCharge: 0,
          InCharge: 0,
          RiskLowerLimitMoney: ""
        };
        this.addMsg = newMsg;
        let userInfo = this.getLocalStorage();
        var branchId = userInfo.RB_Branch_id;
        this.addMsg.BranchIdS = branchId;
      },
      SetProfitLoss() {
        //币种调汇
        this.apipost(
          "FinanceInfo_post_SetProfitLoss",
          this.SetProfitLossMsg,
          res => {
            if (res.data.resultCode == 1) {
              this.tips(res.data.message, "success");
              this.addShow = false;
              this.addCuren = true;
              this.ed = 0;
            } else {
              this.tips(res.data.message, "error");
            }
          },
          err => {}
        );
      },
      submitForm(addMsg, type) {
        //提交创建、修改表单
        this.$refs[addMsg].validate(valid => {
          if (valid) {
            if (type == 1) {
              this.addInstitutions();
            } else {
              this.SetProfitLoss();
            }
          } else {
            return false;
          }
        });
      },
      resetPageIndex() {
        //查询初始化页码
        this.msg.pageIndex = 1;
        this.currentPage = 1;
      },
      handleCurrentChange(val) {
        //翻页功能按钮
        this.msg.pageIndex = val;
        this.getList();
      },
      tips(msg, type) {
        this.$message({
          message: msg,
          duration: 2000,
          type: type
        });
      },
      closeChangeMachie(done) {
        done();
        this.resetForm("addMsg");
      },
      resetForm(formName) {
        this.initAddMsg();
        this.$refs[formName].resetFields();
      },
      goUrl(path, id, name, source, CurrencyId) {
        this.$router.push({
          name: path,
          query: {
            id: id,
            name: name,
            source: source,
            CurrencyId: CurrencyId
          }
        });
      },
      InitTime() {

      },
      calcPageSize(itemHeight) {
        let yuHeight = itemHeight
        try {
          let obj = null
          document.querySelectorAll('.frame-box').forEach(x => {
            if (x.style.display != 'none') {
              obj = x
            }
          })
          let dom = obj.offsetHeight
          yuHeight = dom - (obj.querySelector('.v-table-header') ? obj.querySelector('.v-table-header').offsetHeight :
            39) - 50 //减去面包屑，减去表格头部，减去分页，减去偏量
          //减去其它同级元素
          obj.childNodes[0].childNodes.forEach(x => {
            if (x.className && x.className.indexOf('v-table-views') == -1) {
              yuHeight -= x.offsetHeight ? x.offsetHeight : 0
            }
          })
        } catch (error) {}
        return Math.floor(yuHeight / itemHeight)
      }
    },
    mounted() {
      // this.msg.pageSize = this.calcPageSize(40);
      // let userInfo = this.getLocalStorage();
      // this.getCompanyMsg.RB_Group_Id = userInfo.RB_Group_id; //集团ID
      // var branchId = userInfo.RB_Branch_id;
      // this.addMsg.BranchIdS = branchId;
      // if(branchId==0||branchId==49){
      //   this.getCompanyList();
      // }else{
      //   this.getCompanyList(2,userInfo);
      //   this.msg.RB_Branch_Id = branchId;
      // }
      this.getCompanyList();

      this.getList();
      this.initColums();
      this.getAccountTypeList();
      this.getFinancialList();
      this.getfinanceinfoList();
    },
    created() {
      Vue.component('table-operation', {
        template: `<div style='width:80px;height:40px;background:#fff;text-align:center;position: relative;left:-5px;padding-top: 6px;padding-top:6px;'><el-button type="primary" size='mini' icon="el-icon-edit" circle @click="update(rowData,index)"></el-button><el-button type="danger" size='mini' icon="el-icon-delete" circle @click="deleteRow(rowData,index)"></el-button></div>`,
        props: {
          rowData: {
            type: Object
          },
          field: {
            type: String
          },
          index: {
            type: Number
          }
        },
        methods: {
          update() {
            let params = {
              type: 'edit',
              id: this.rowData.ID
            };
            this.$emit('on-custom-comp', params);
          },
          deleteRow() {
            let params = {
              type: 'delete',
              id: this.rowData.ID,
              alias: this.rowData.Alias
            };
            this.$emit('on-custom-comp', params);
          }
        }
      })
    }
  };

</script>
<style scoped>
  @import "css/cssReset.css";
  
  .page_PlatformAccount .query-box li label {
    display: inline-block;
    min-width: 80px;
    text-align: right;
    font-style: normal;
    margin: 0 20px 0 0;
  }

  ._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;
  }

  .page_PlatformAccount ._vMG_edit {
    overflow: auto;
    display: none;
    position: absolute;
    font-family: "PingFangSc-Fine";
    bottom: 0;
    left: 0;
    border-top: 3px solid #38425d;
    background-color: #ffffff;
    padding: 10px;
    margin: 15px;
    width: calc(100% - 30px);
  }

  .page_PlatformAccount ._vMG_edit ._tit {
    padding-left: 10px;
    border-left: 3px solid #e95252;
    font-size: 16px;
    color: #000000;
  }

  .page_PlatformAccount ._vMG_edit ._tit span {
    color: #666666;
    font-size: 14px;
  }

  .cm_content {
    margin: 0;
    padding: 0;
    overflow-x: auto;
  }

  ._edHeight {
    height: 400px;
  }

  .edHeight {
    display: block !important;
    height: 300px;
  }

  .edHeight_t {
    display: block !important;
    height: 152px;
  }

  .page_PlatformAccount ._info_box ul li {
    float: left;
    margin-right: 12px;
  }

  .instMg_list_item {
    width: 296px;
    height: auto;
    border-radius: 4px;
    border: 1px solid #ebebeb;
    float: left;
    background: rgba(255, 255, 255, 1);
    overflow: hidden;
    margin-right: 15px;
    margin-bottom: 15px;
  }

  .instMg_list_item:hover {
    box-shadow: 0px 0px 20px rgba(191, 191, 191, 1);
    transition: all linear 0.5s;
  }

  ._tips {
    font-size: 12px;
    color: #666666;
    padding: 15px 0;
  }

  ._top {
    text-align: center;
    height: 50px;
    border-bottom: 1px solid #eeeeee;
    overflow: hidden;
    padding: 10px 0;
  }

  ._top img {
    height: 100%;
  }

  ._bt {
    padding: 20px;
    font-size: 14px;
  }

  ._bt_t {
    border-radius: 4px;
    background-color: #47bf8c;
    color: #ffffff;
  }

  ._bt_t>p {
    padding: 10px 0;
    text-align: center;
  }

  ._bt_t>p>span {
    display: inline-block;
    padding: 3px 10px;
    background-color: #ffa200;
    border-radius: 4px;
  }

  ._bt_t ._btt_b {
    padding: 14px;
    background-color: #32b37c;
  }

  ._bt_t ._btt_b>div:nth-child(1) {
    display: flex;
    text-align: center;
    padding: 0 0 9px 0;
  }

  ._bt_t ._btt_b>div>p {
    flex: 1;
  }

  ._bt_t ._btt_b>div:nth-child(1)>p:nth-child(2) {
    border-left: 2px solid #4fc794;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 5px;
  }

  .icon-img-ren {
    color: #4fc794;
  }

  ._bt_t ._btt_b .PingFangSC {
    font-weight: bold;
    text-align: center;
    padding: 5px 0;
    border: 1px solid rgba(79, 199, 148, 1);
    border-radius: 4px;
    width: 162px;
  }

  .icon-qiehuan,
  .icon-ico-renwuyaoqiu {
    background-color: #e7e7e7;
    border-radius: 50%;
    color: #999999;
    font-size: 12px;
    width: 18px;
    height: 18px;
    display: inline-block;
    text-align: center;
    line-height: 19px;
    cursor: pointer;
  }

  .icon-ico-renwuyaoqiu {
    font-size: 10px;
  }

  .icon-qiehuan:hover,
  .icon-ico-renwuyaoqiu:hover {
    background-color: #e95252;
    color: white;
  }

  ._bt_b {
    padding: 15px 0 0 0;
    border-bottom: 1px solid #eeeeee;
  }

  ._bt_b>p {
    display: flex;
    justify-content: space-between;
    padding-bottom: 10px;
  }

  ._bt_b>p span._name {
    color: #333333;
    font-size: 12px;
  }

  ._btn {
    padding: 20px 30px 0 30px;
    text-align: center;
  }

  ._btn span {
    display: inline-block;
    font-size: 12px;
    background-color: #e7e7e7;
    color: #333333;
    padding: 5px 20px;
    border-radius: 14px;
    cursor: pointer;
    margin-left: 10px;
  }

  ._btn span:hover {
    background-color: #e95252;
    color: white;
  }

  .fc_green {
    color: #47bf8c !important;
  }

  .fc_red {
    color: #e95252 !important;
  }

  .page_PlatformAccount .PingFangSC,
  ._bold,
  .PingFangCom {
    font-weight: bold;
  }

  ._no_bold {
    font-weight: normal;
  }

  ._max_wd {
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: top;
    display: inline-block;
  }

  ._bt_t .PingFangCom {
    font-family: "PingFangSC-fine" !important;
    text-align: center;
    padding: 6px 2px;
    border-radius: 4px;
    width: 50px;
    background-color: #19a268;
    margin-left: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    overflow: hidden;
  }

  ._btt_b>div:nth-child(1).over_ellipsis {
    max-width: 107px;
  }

  ._add_saveBtn {
    text-align: right;
    margin-bottom: 10px;
  }

  ._cp_name {
    width: 185px;
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    overflow: hidden;
    text-align: right;
  }

  ._underline {
    text-decoration: underline;
    cursor: pointer;
  }

  .page_PlatformAccount .el-button-group .el-button {
    padding: 4px;
  }

  ._yingkui {
    height: 40px;
    line-height: 40px;
    font-size: 12px;
    color: #666666;
    padding-left: 20px;
  }

  .page_PlatformAccount .query-box {
    padding: 20px 0 0;
  }

  .page_PlatformAccount ._wAuto {
    width: auto;
  }

  .el-date-editor.el-input {
    width: 100% !important;
  }

  .page_PlatformAccount .el-input-group__append,
  .page_PlatformAccount .el-input-group__prepend {
    border-radius: 0px;
  }

  .right-tag {
    float: right;
    color: rgb(255, 255, 255);
    font-size: 12px;
    background: rgb(64, 158, 255);
    padding: 2px 7px;
    border-radius: 2px;
    height: 22px;
    line-height: 18px;
    margin-top: 7px;
  }

  .el-select-dropdown__item.selected {
    font-weight: unset;
  }

  .minmargin-box .el-select-dropdown__item {
    padding: 0 5px;
  }

</style>
