<template>
  <div>
	<el-dialog v-dialogDrag  title="结算明细"  :visible.sync="settleDialogVisible" width="70%" center destroy-on-close :before-close="beforeClose" v-if="settleDialogVisible">
		<el-form ref="dialogForm" label-width="100px" :model="formData" :rules="rules" style="overflow-y: auto;overflow-x: hidden; padding: 20px;">
			<el-row>
        <c-col :span="12" style="padding-right: 20px;">
          <c-col :span="24">
            <el-form-item label="处理方式" :label-width="formLabelWidth" prop="dsp">
              <c-select v-model="formData.dsp" 
              customModifykey="dsp"
              :markSetData="formData"
              :popper-class="formData.debcdtflg==='D'?'custom-select-red':''"
              :class="formData.debcdtflg==='D'?'custom-select-red-input':''"
              @change="changeDialog(formData, 'dsp')" placeholder="请选择处理方式">
                <el-option v-for="item in formData.dspSet" :key="item.value" :label="item.value + ' ' + item.label" :value="item.value">
                </el-option>
              </c-select>
            </el-form-item>
          </c-col>
          <c-col :span="24">
            <el-form-item label="核心业务代号" :label-width="formLabelWidth" prop="acccode">
              <c-col :span="20">
              <c-input v-model="formData.acccode" disabled></c-input>
              </c-col>
              <c-col :span="4">
              <c-button style="margin-right: 10px" size="small" type="primary" icon="el-icon-info" @click="getCoreAccountInfo(formData)">获取</c-button>
              </c-col>
            </el-form-item>
          </c-col>
          <c-col :span="24">
            <el-form-item label="结算对象" :label-width="formLabelWidth" prop="rol">
              <c-select v-model="formData.rol" dbCode="ROLALL" disabled :isShowKeyAndLabel="true">
							</c-select>
            </el-form-item>
          </c-col>
          <c-col :span="24">
            <el-form-item label="记账币种" :label-width="formLabelWidth" prop="acccur">
              <c-select-cur
               v-if="formData.cur === 'CNY'"
               v-model="formData.acccur"
               dbCode="CURTXT"
               customModifykey="acccur"
               :markSetData="formData"
               :disabled="acccurDisable"
               placeholder="请选择记账币种" @change="changeDialog(formData, 'acccur')">
              </c-select-cur>
              <c-select-cur
               v-else
               v-model="formData.acccur"
               dbCode="CURTXT"
               :filterKey="['CNY', formData.cur]"
               customModifykey="acccur"
               :markSetData="formData"
               :disabled="acccurDisable"
               placeholder="请选择记账币种" @change="changeDialog(formData, 'acccur')">
              </c-select-cur>
            </el-form-item>
          </c-col>
          <c-col :span="24">
            <el-form-item label="原始币种" :label-width="formLabelWidth" prop="cur">
              <c-select-cur v-model="formData.cur" dbCode="acccur" disabled placeholder="请输入原始币种">
              </c-select-cur>
            </el-form-item>
          </c-col>
          <c-col :span="24">
            <el-form-item label="有效日期" :label-width="formLabelWidth" prop="valdat">
              <c-date-picker
                  v-model="formData.valdat"
                  customModifykey="valdat"
                  :markSetData="formData"
                  type="date"
                  @change="changeDialog(formData, 'valdat')"
                  placeholder="选择日期">
                </c-date-picker>
            </el-form-item>
          </c-col>
        </c-col>
        <c-col :span="12" style="padding-left: 20px;">
          <c-col :span="24">
            <el-form-item label="记账账号" :label-width="formLabelWidth" prop="act">
              <c-select v-model="formData.act"
              customModifykey="act"
              :markSetData="formData"
              @change="changeDialog(formData, 'act')" :allow-create="true" :default-first-option="true" :filterable="true" placeholder="请选择记账账号">
                <el-option v-for="item in formData.actSet" :key="item" :label="item" :value="item"></el-option>
              </c-select>
            </el-form-item>
          </c-col>
          <c-col :span="24">
            <el-form-item label="账户余额" :label-width="formLabelWidth" prop="accountBalance">
              <c-input-currency v-model="formData.accountBalance" :currency="formData.acccur" disabled></c-input-currency>
            </el-form-item>
          </c-col>
          <c-col :span="24">
            <el-form-item label="借/贷" :label-width="formLabelWidth" prop="debcdtflg">
              <c-input v-model="formData.debcdtflg" autocomplete="off" placeholder="请输入借/贷" :class="formData.debcdtflg==='D'?'custom-select-red-input':''" disabled></c-input>
            </el-form-item>
          </c-col>
          <c-col :span="24">
            <el-form-item label="记账金额" :label-width="formLabelWidth" prop="fmtaccamt">
              <c-input-currency 
              customModifykey="accamt"
              :markSetData="formData"
              v-model="formData.fmtaccamt" :currency="formData.acccur" @change="changeDialog(formData, 'accamt')" placeholder="请输入记账金额" disabled></c-input-currency>
            </el-form-item>
          </c-col>
          <c-col :span="24">
            <el-form-item label="原始金额" :label-width="formLabelWidth" prop="fmtamt">
              <c-input-currency v-model="formData.fmtamt" :currency="formData.cur" placeholder="请输入原始金额" disabled></c-input-currency>
            </el-form-item>
          </c-col>
          <c-col :span="24">
            <el-form-item label="科目代码" :label-width="formLabelWidth" prop="acttrmtyp">
               <c-input v-if="acttrmtypDisable" v-model="formData.acttrmtyp" autocomplete="off" placeholder="请输入科目代码" disabled></c-input>
               <c-select v-else 
               customModifykey="acttrmtyp"
               :markSetData="formData"
               v-model="formData.acttrmtyp" placeholder="请选择科目代码" @change="changeDialog(formData, 'acttrmtyp')">
                  <el-option v-for="(item,index) in formData.acttrmtypSet" :key="item.value+index" :label="item.value + ' ' +item.label" :value="item.value"></el-option>
               </c-select> 
            </el-form-item>
          </c-col>
        </c-col>
      </el-row>
      <div v-if="formData.exchangeFlag">
        <el-row>
          <el-col :span="24">
            <el-form-item label="该客户存在如下汇率优惠：" label-width="200px"></el-form-item>
          </el-col>
        </el-row>
        <el-row >
          <el-col :span="8">
            <el-form-item label="Seller" :label-width="formLabelWidth">
              <c-select v-model="formData.selrattyp" dbCode="SELTYP" disabled>
              </c-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item :label-width="formLabelWidth"> 
              <c-col :span="10">
                <c-input-currency v-model="formData.preselrat" :precision=6 disabled></c-input-currency>
              </c-col>
              <c-col v-if="formData.selrattyp==='2'" :span="1" style="float: right; text-align: right">
                <span>%</span>
              </c-col>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="Buyer" :label-width="formLabelWidth">
              <c-select v-model="formData.buyrattyp" dbCode="BUYTYP" disabled>
              </c-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item>
              <c-col :span="10">
                <c-input-currency v-model="formData.prebuyrat" :precision=6 disabled></c-input-currency>
              </c-col>
              <c-col v-if="formData.buyrattyp==='2'" :span="1" style="float: right; text-align: right">
                <span>%</span>
              </c-col>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="margin-bottom: 20px;">
          <div class="custom-table-wrap" style="width: 100%;">
            <div class="table-row">
              <div class="table-td1">Cross Rate</div>
              <div class="table-td">Rate Type</div>
              <div class="table-td">Calculate Rate</div>
              <div class="table-td"></div>
            </div>
            <div class="table-row">
              <div class="table-td1" v-text="formData.ratcurlab"></div>
              <div class="table-td">
                <c-select
                  v-model="formData.rattyp"
                  style="width: 80%;"
                  customModifykey="rattyp"
                  :markSetData="formData"
                  dbCode="RATTYP"
                  :filterKey="formData.ratTypFilter"
                  :disabled="rattypDisable"
                  @change="changeDialog(formData, 'rattyp')">
                </c-select>
              </div>
              <div class="table-td">
                <c-input-currency
                  v-model="formData.rat"
                  style="width: 80%;"
                  customModifykey="rat"
                  :markSetData="formData"
                  :precision=6 :disabled="ratDisable"
                  @change="changeDialog(formData, 'rat')"
                />
              </div>
              <div class="table-td">
                <el-form-item label="Selling Rate" :label-width="formLabelWidth">
                  <c-input v-model="formData.selrat" disabled></c-input>
                </el-form-item>
              </div>
            </div>
            <div class="table-row">
              <div class="table-td1" v-text="formData.dcbratlab"></div>
              <div class="table-td">
                <c-select
                  v-model="formData.dcbrattyp"
                  style="width: 80%;"
                  customModifykey="dcbrattyp"
                  :markSetData="formData"
                  dbCode="RATTYP"
                  :disabled="dcbrattypDisable"
                  @change="changeDialog(formData, 'dcbrattyp')"
                ></c-select>
              </div>
              <div class="table-td">
                <c-input-currency
                  v-model="formData.dcbextrat"
                  style="width: 80%;"
                  customModifykey="dcbextrat"
                  :markSetData="formData" 
                  :precision=6
                  :disabled="dcbextratDisable"
                  @change="changeDialog(formData, 'dcbextrat')"
              /></div>
              <div class="table-td">
                <el-form-item label="Middle Rate" :label-width="formLabelWidth">
                  <c-input v-model="formData.midrat" disabled></c-input>
                </el-form-item>
              </div>
            </div>
            <div class="table-row">
              <div class="table-td1" v-text="formData.scbratlab"></div>
              <div class="table-td">
                <c-select
                  v-model="formData.scbrattyp"
                  style="width: 80%;"
                  customModifykey="scbrattyp"
                  :markSetData="formData" 
                  dbCode="RATTYP" :disabled="scbrattypDisable"
                  @change="changeDialog(formData, 'scbrattyp')"
                ></c-select>
              </div>
              <div class="table-td">
                <c-input-currency
                  v-model="formData.scbextrat"
                  style="width: 80%;"
                  customModifykey="scbextrat"
                  :markSetData="formData"
                  :precision=6 :disabled="scbextratDisable"
                  @change="changeDialog(formData, 'scbextrat')"
                ></c-input-currency>
              </div>
              <div class="table-td">
                <el-form-item label="Buying Rate" :label-width="formLabelWidth">
                  <c-input v-model="formData.buyrat" disabled></c-input>
                </el-form-item>
              </div>
            </div>
          </div>
        </el-row>
      </div>
      <el-row>
        <c-col :span="12" style="padding-right: 20px;" v-if="formData.exchangeFlag">
          <el-form-item label="交易主体" :label-width="formLabelWidth" prop="trnman">
            <c-select 
            customModifykey="trnman"
            :markSetData="formData"
            v-model="formData.trnman" dbCode="TRNMAN" @change="changeDialog(formData, 'trnman')" :filterKey="formData.trnmanFilter" placeholder="请选择交易主体">
            </c-select>
					</el-form-item>
        </c-col>
        <c-col :span="12" style="padding-left: 20px;" v-if="formData.trdintFlag || formData.trdoutFlag">
          <el-form-item label="结汇类型" :label-width="formLabelWidth" v-if="formData.trdintFlag" prop="trdint">
						<c-select 
            customModifykey="trdint"
            :markSetData="formData"
            @change="changeDialog(formData, 'trdint')"
            v-model="formData.trdint" dbCode="TRAINT" placeholder="请选择结汇类型">
            </c-select>
					</el-form-item>
          <el-form-item label="售汇类型" :label-width="formLabelWidth" v-if="formData.trdoutFlag" prop="trdout">
						<c-select
            customModifykey="trdout"
            :markSetData="formData"
            @change="changeDialog(formData, 'trdout')"
            v-model="formData.trdout" dbCode="TRAOUT" placeholder="请选择售汇类型">
            </c-select>
					</el-form-item>
        </c-col>
      </el-row>
      <el-row>
         <c-col :span="24">
            <el-form-item label="传票摘要">
              <c-input
                type="textarea"
                :rows="3"
                placeholder="请输入内容"
                customModifykey="txt2"
                :markSetData="formData"
                @change="changeDialog(formData, 'txt2')"
                v-model="formData.txt2">
              </c-input>
            </el-form-item>
          </c-col>
      </el-row>
      <el-row v-if="formData.sftmt !== ''">
        <c-col :span="12" style="padding-right: 20px;">
          <el-form-item label="报文类型" :label-width="formLabelWidth" >
            <c-select v-model="formData.sftmt" dbCode="SFTMT" disabled>
            </c-select>
					</el-form-item>
        </c-col>
        <c-col :span="12">
          <el-form-item label="报文形式" :label-width="formLabelWidth">
						<c-select v-model="formData.dirindflg" dbCode="DIRIND" disabled>
            </c-select>
					</el-form-item>
        </c-col>
      </el-row>
      <el-row v-if="zmqflg === 'X'">
        <c-col :span="12" style="padding-right: 20px;">
          <el-form-item label="国际收支交易编码" :label-width="formLabelWidth">
            <c-fullbox>
              <c-input
              customModifykey="trntyp"
              :markSetData="formData"
              @change="changeDialog(formData, 'trntyp')"
              v-model="formData.trntyp">
              </c-input>
              <template slot="footer">
                <c-button type="primary" size="small" icon="el-icon-search" style="margin-left: 10px;padding: 0 12px;" @click="getBopcodList">
              </c-button>
			</template>
		</c-fullbox>
          </el-form-item>
        </c-col>
        <c-col :span="12">
          <el-form-item label="国别代码" :label-width="formLabelWidth">
           <c-business-cty 
           customModifykey="ctycod"
           :markSetData="formData"
           v-model="formData.ctycod" @handleChange="changeDialog(formData, 'ctycod')"></c-business-cty>
          </el-form-item>
        </c-col>
      </el-row>
      <el-row v-if="zmqflg === 'X'">
        <c-col :span="12" style="padding-right: 20px;">
          <el-form-item label="对方户名" :label-width="formLabelWidth">
              <c-input 
              customModifykey="oppnam"
              :markSetData="formData"
              maxLength="128"
              v-model="formData.oppnam" @change="changeDialog(formData, 'oppnam')"></c-input>
          </el-form-item>
        </c-col>
        <c-col :span="12">
          <el-form-item label="国内地区代码" :label-width="formLabelWidth">
              <c-input 
              customModifykey="discod"
              :markSetData="formData"
              maxLength="6"
              v-model="formData.discod" @change="changeDialog(formData, 'discod')"></c-input>
          </el-form-item>
        </c-col>
      </el-row> 
      <el-row v-if="zmqflg === 'X'">
        <c-col :span="12" style="padding-right: 20px;">
          <el-form-item label="对方账号" :label-width="formLabelWidth">
              <c-input 
              customModifykey="oppacc"
              :markSetData="formData"
              maxLength="35"
              v-model="formData.oppacc" @change="changeDialog(formData, 'oppacc')"></c-input>
          </el-form-item>
        </c-col>
        <c-col :span="12">
          <el-form-item label="虚拟户账号" :label-width="formLabelWidth">
              <c-input 
              customModifykey="xzhacc"
              :markSetData="formData"
              v-model="formData.xzhacc" @change="changeDialog(formData, 'xzhacc')"></c-input>
          </el-form-item>
        </c-col>
      </el-row>
      <el-row v-if="zmqflg === 'X'">
        <c-col :span="12" style="padding-right: 20px;">
          <el-form-item label="对方银行代码" :label-width="formLabelWidth">
              <c-input 
              customModifykey="oppbnk"
              :markSetData="formData"
              maxLength="14"
              v-model="formData.oppbnk" @change="changeDialog(formData, 'oppbnk')"></c-input>
          </el-form-item>
        </c-col>
        <c-col :span="12">
          <el-form-item label="虚拟户名称" :label-width="formLabelWidth">
              <c-input 
              customModifykey="xzhnam"
              :markSetData="formData"
              v-model="formData.xzhnam" @change="changeDialog(formData, 'xzhnam')"></c-input>
          </el-form-item>
        </c-col>
      </el-row>
		</el-form>
		<span slot="footer" class="dialog-footer">
			<c-button v-if="!isDispaly" type="primary" style="margin-right: 20px;" @click="saveDialog">确 定</c-button>
			<el-button @click="cancelDialog">取 消</el-button>
		</span>
	</el-dialog>
  <!-- 交易性质弹窗 -->
  <el-dialog v-dialogDrag width="50%" title="交易性质" :append-to-body="true" :visible.sync="bopcodDialogTableVisible" v-if="bopcodDialogTableVisible">
    <div style="height: 100%;">
      <el-table id='tableRef' height="calc(100% - 32px)" size="small" :data="tableList" @row-dblclick="dbClickRow"
        :before-close="beforeCloseFrmDialog">
        <el-table-column v-for="(item,key) in tableColumn" :key="key" :prop="item.prop" :width="item.width" :label="item.label">
        </el-table-column>
      </el-table>
    </div>
  </el-dialog>
  </div>
</template>

<script>
import commonDepend from "~/mixin/commonDepend.js";
import { cloneDeep } from "lodash";
import Api from '~/service/Api';
import commonFunctions from '~/mixin/commonFunctions.js';
export default {
	inject: ["root"],
  mixins: [commonDepend, commonFunctions],
  props: {
		dialog3: {
			type: Object,
			default: () => {}
    },
    zmqflg: {
			type: String,
			default: ""
    },
	},
	computed: {
		isDispaly() {
			return this.$store.state.Status.mode === 'display'
    },
    acttrmtypDisable(){
        if (this.formData.disableSet) {
          return this.formData.disableSet.includes("acttrmtyp");
        } else {
          return false; 
        }
    },
    rattypDisable(){
        if (this.formData.disableSet) {
          return this.formData.disableSet.includes("rattyp");
        } else {
          return false; 
        }
    },
    dcbextratDisable(){
        if (this.formData.disableSet) {
          return this.formData.disableSet.includes("dcbextrat");
        } else {
          return false; 
        }
    },
    dcbsqrratDisable(){
        if (this.formData.disableSet) {
          return this.formData.disableSet.includes("dcbsqrrat");
        } else {
          return false; 
        }
    },
    dcbrattypDisable(){
        if (this.formData.disableSet) {
          return this.formData.disableSet.includes("dcbrattyp");
        } else {
          return false; 
        }
    },
    scbextratDisable(){
        if (this.formData.disableSet) {
          return this.formData.disableSet.includes("scbextrat");
        } else {
          return false; 
        }
    },
    scbsqrratDisable(){
        if (this.formData.disableSet) {
          return this.formData.disableSet.includes("scbsqrrat");
        } else {
          return false; 
        }
    },
    scbrattypDisable(){
        if (this.formData.disableSet) {
          return this.formData.disableSet.includes("scbrattyp");
        } else {
          return false; 
        }
    },
    ratDisable(){
        if (this.formData.disableSet) {
          return this.formData.disableSet.includes("rat");
        } else {
          return false; 
        }
    },
    acccurDisable(){
      if (this.formData.disableSet) {
        return this.formData.disableSet.includes("acccur");
      } else {
        return false; 
      }
    },
	},
  data() {
    return {
			formData:{},
			settleDialogVisible: false,
      formLabelWidth: "100px",
      initData:{},
      bopcodDialogTableVisible: false,
      tableList: [],
      tableColumn: [
        { label: "交易代码", prop: "cod" },
        { label: "描述", prop: "txt" }
      ],
      rules: {
        dsp: [{ required: true, message: "必填" }],
        act: [{ required: true, message: "必填" }],
        acccur: [{ required: true, message: "必填" }],
        trnman: [{ required: true, message: "必填" }],
        trdint: [{ required: true, message: "必填" }],
        trdout: [{ required: true, message: "必填" }],
        acttrmtyp: [{ required: true, message: "必填" }],
      }
    };
	},
  methods: {
		init(first) {
      this.formData = this.dialog3;
      if (first) {
        this.initData = cloneDeep(this.formData);
      }
		},
    changeDialog(setgll, prop) {
      this.$emit('changeSettleDialog',setgll,prop);
    },
    cancelDialog(){
      this.settleDialogVisible = false;
      this.$emit('cancelSettleDialog',this.initData);
    },
    saveDialog(){
      this.$refs.dialogForm.validate(async valid => {
        if (!valid) {
          console.log("详细填写不合法");
          return;
        }
        this.settleDialogVisible = false;
        this.$emit('saveDialog',this.formData);
      });
    },
    beforeClose() {
      this.settleDialogVisible = false;
    },
    async getCoreAccountInfo(setgll) {
      if (setgll.act === '') {
        this.$alert('请先获取账号!', '提示', {
          confirmButtonText: '确定'
        });
        return;
      }
      let params = {};
      this.$emit("getParams", null, val => {params = val})
      let objtyp = params.rec.objtyp;
      let request = {
        account: setgll.act
      }
      let loading = this.loading('正在请求Account8091接口');
      let rtnmsg = await Api.post(`/${this.moduleRouter()}/${objtyp.toLowerCase()}/getCoreAcctInfo`, request);
			if (rtnmsg.respCode === SUCCESS) {
          if (rtnmsg.data.errorMsg !== '' && rtnmsg.data.errorMsg !== null) {
            this.$alert(rtnmsg.data.errorMsg, '提示', {
              confirmButtonText: '确定'
            });
          } else {
            setgll.acccode = rtnmsg.data.acctCode;
            setgll.accountBalance = rtnmsg.data.acctBalance;
          }
      }
      loading.close();
    },
    beforeCloseFrmDialog() {
      this.bopcodDialogTableVisible = false;
    },
    async getBopcodList() {
      this.bopcodDialogTableVisible = true;
      this.tableList = [];
      let params = {};
      this.$emit("getParams", null, val => {params = val})
      let request = {
         transName: params.transName,
         userId: params.userId,
         ptsList: params.ptsList,
         rec: params.rec,
         typ: this.formData.typ,
         trntyp: this.formData.trntyp
      }
      let loading = this.loading('正在请求交易性质列表');
      let res = await Api.post(`/${this.moduleRouter()}/codetable/bopcod/list`, request);
      if (res.respCode === SUCCESS) {
        this.tableList = res.data;
      }
      loading.close();
    },
    dbClickRow(row, column, event) {
      // 回填数据
      this.formData.trntyp = row.cod;
      this.bopcodDialogTableVisible = false;
      this.changeDialog(this.formData, 'trntyp');
    },
  }
};
</script>
<style scoped lang="less">
.dialog-wrap {
  height: 400px;
  overflow: auto;
}
::v-deep .el-dialog__header {
  height: 52px;
  .el-dialog__headerbtn {
    top: 10px;
  }
}
::v-deep .el-dialog__body {
  padding: 10px 15px 10px;
  height: calc(100% - 100px);
  .el-form {
    height: 100%!important;
  }
}
::v-deep .el-dialog__footer {
	padding: 10px 10px 0;
}
.cur-form-item {
  ::v-deep .el-form-item__content {
    margin-left: 0!important;
  }
}
.custom-table-wrap {
  /deep/ .el-form-item {
    margin-bottom: 0!important;
  }
}
.table-row {
  width: 100%;
  height: 40px;
  line-height: 40px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.table-td1 {
  width: 100px;
  padding-right: 20px;
  text-align: right;
  font-size: 12px;
  color: #000000;
}
.table-td {
  width: 25%;
  font-size: 12px;
  color: #000000;
}
</style>