<template>
  <div class="eibs-tab">
    <c-col :span="12">
      <el-form-item label="合同金额" prop="liaall.liaccv.concur">
        <c-row :gutter="20">
          <c-col :span="8">
            <c-select
              v-model="model.liaall.liaccv.concur"
              disabled
              style="width: 100%"
              placeholder="请选择Type of settlement"
            >
              <el-option
                v-for="item in codes.curtxt"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </c-select>
          </c-col>
          <c-col :span="14">
            <c-input
              :readonly="true"
              v-model="model.liaall.liaccv.newamt"
            ></c-input>
          </c-col>
        </c-row>
      </el-form-item>
    </c-col>

    <c-col :span="12">
      <el-form-item label="保证金应收比例" prop="liaall.liaccv.cshpct">
        <c-row>
          <c-col :span="8">
            <c-input v-model="model.liaall.liaccv.cshpct"></c-input>
          </c-col>
          <c-col :span="12" style="margin-left: 20px">
            <span>%</span>
          </c-col>
        </c-row>
      </el-form-item>
    </c-col>

    <c-col :span="12">
      <el-form-item label="Reserved Amount" prop="liaall.liaccv.newresamt">
        <c-row :gutter="20">
          <c-col :span="8">
            <c-select
              v-model="model.liaall.liaccv.concur"
              disabled
              style="width: 100%"
              placeholder="请选择Type of settlement"
            >
              <el-option
                v-for="item in codes.curtxt"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </c-select>
          </c-col>
          <c-col :span="14">
            <c-input
              :readonly="true"
              v-model="model.liaall.liaccv.newresamt"
            ></c-input>
          </c-col>
        </c-row>
      </el-form-item>
    </c-col>

    <c-col :span="12">
      <el-form-item label="保证金实收比例" prop="liaall.misamt">
        <c-row>
          <c-col :span="8">
            <c-input :readonly="true" v-model="model.liaall.misamt"></c-input>
          </c-col>
          <c-col :span="12" style="margin-left: 20px">
            <span>%</span>
          </c-col>
        </c-row>
      </el-form-item>
    </c-col>

    <c-col :span="12">
      <el-form-item label="应付保证金金额" prop="liaall.liaccv.concur">
        <c-row :gutter="20">
          <c-col :span="8">
            <c-select
              v-model="model.liaall.liaccv.concur"
              disabled
              style="width: 100%"
              placeholder="请选择Type of settlement"
            >
              <el-option
                v-for="item in codes.curtxt"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </c-select>
          </c-col>
          <c-col :span="14">
            <c-input
              :readonly="true"
              v-model="model.liaall.liaccv.pctresamt"
            ></c-input>
          </c-col>
        </c-row>
      </el-form-item>
    </c-col>

    <c-col :span="24" style="text-align: right">
      <c-row>
        <c-col :span="2" :offset="19">
          <c-button size="small" type="primary" @click="onLiaccvAdd">
            Add
          </c-button>
          <el-dialog
            :visible.sync="dialogTableVisible"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
          >
            <c-istream-table :list="stmData.data" :columns="stmData.columns">
              <el-table-column prop="op" label="OP" width="100">
                <template slot-scope="scope">
                  <a href="javascript:void(0)" @click="pickDepItem(scope.row)"
                    >选择</a
                  >
                </template>
              </el-table-column>
            </c-istream-table>
          </el-dialog>
        </c-col>

        <c-col :span="2">
          <template slot-scope="scope">
          <c-button size="small" icon="el-icon-delete" @click="onLiaccvDel(scope.$index,scope.row)">
            Del
          </c-button>
          </template>
        </c-col>
      </c-row>
    </c-col>

    <c-col :span="24"><div style="height: 10px"></div></c-col>

    <c-col :span="22" :offset="1">
      <c-table
        :border="true"
        :list="model.liaall.liaccv.liaccvg"
        style="width:80%,text-align:center"
      >
        <el-table-column prop="ccdflg" label="CFO" width="auto">
        </el-table-column>
        <el-table-column prop="ownref" label="保证金编号" width="auto">
        </el-table-column>
        <el-table-column prop="cur" label="币种" width="auto">
        </el-table-column>
        <el-table-column prop="oldamt" label="余额" width="auto">
        </el-table-column>
        <el-table-column prop="amt" label="变动金额" width="auto">
        </el-table-column>
        <el-table-column prop="acc" label="保证金账号" width="auto">
        </el-table-column>
        <el-table-column prop="rat" label="汇率" width="auto">
        </el-table-column>
        <el-table-column prop="concur" label="币种" width="auto">
        </el-table-column>
        <el-table-column prop="covamt" label="折算后金额" width="auto">
        </el-table-column>
      </c-table>
    </c-col>

    <c-col :span="24">
      <el-form-item label="金额总和">
        <c-col :span="8">
          <c-input
            style="width: 50%"
            v-model="model.liaall.liaccv.totcovamt"
            placeholder="请输入金额总和"
          ></c-input>
        </c-col>
      </el-form-item>
    </c-col>

    <c-col :span="12">
      <el-form-item label="Additional Information ">
        <c-input
          type="textarea"
          rows="5"
          v-model="model.liaall.liaccv.addinf"
          maxlength="200"
          show-word-limit
          placeholder="请输入Additional Information "
        ></c-input>
      </el-form-item>
    </c-col>
  </div>
</template>
<script>
import Api from "~/service/Api";
import CommonProcess from "~/mixin/CommonProcess";
import CodeTable from "~/config/CodeTable";
import Event from "~/model/Ditopn/Event";

export default {
  inject: ["root"],
  props: ["model", "codes"],
  mixins: [CommonProcess],
  data() {
    return {
      dialogTableVisible: false,
      stmData: {
        columns: [
          '1 1:1 "Ref." 120',
          '2 2:1 "User" 80',
          '3 3:1 "Applicant" 196',
          '4 4:1 "Account" 120',
          '5 5:1 "Cur" 50',
          '6 6:1 "Amount" 80 2 0 1 18.3',
          '7 7:1 "Open date" 80 4 7',
          '8 8:1 "flg" 40',
          '9 9:1 "Remarks" 180',
          "P COLORED TRUE",
          "P VERTLINES TRUE",
          "P HORZLINES TRUE",
          "P MULTISELECT FALSE",
          "P COLUMNSIZING TRUE",
        ],
        data: [],
      },
      relrowDisabled: true,
    };
  },
  methods: { ...Event },
  created: function () {},
};
</script>
<style>
</style>
