<template>
  <div>
    <div class="title">表外明细</div>
		<div class="e-table-wrapper">
			<el-table
				:data="model.liaall.liaallg"
				style="width: 100%"
				>
				<el-table-column
					prop="bussec"
					label="业务种类">
				</el-table-column>
				<el-table-column
					prop="liatyp"
					label="表外类型">
				</el-table-column>
				<el-table-column
					prop="cur"
					label="币种">
				</el-table-column>
				<el-table-column
					prop="oldamt"
					label="原金额">
				</el-table-column>
				<el-table-column
					prop="chgamt"
					label="变动金额">
				</el-table-column>
				<el-table-column
					prop="amt"
					label="金额">
				</el-table-column>
				<el-table-column
					prop="acc"
					label="表外账号">
				</el-table-column>
			</el-table>

		</div>

    <div class="title">保证金明细</div>
    <el-col :span="12">
      <el-col :span="22">
        <el-form-item label="业务余额">
					<el-col :span="24">
						<el-col :span="12" class="m-cur-select">
							<el-form-item>
								<el-select v-model="model.liaall.liaccv.concur" style="width:100%" placeholder="请选择" disabled>
									<el-option
										v-for="item in codes.curtxt"
										:key="item.value"
										:label="item.label"
										:value="item.value">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item>
								<el-input v-model="model.liaall.liaccv.newamt" :precision="2" :step="0.1" :max="100000000000000" placeholder="请输入" disabled></el-input>
							</el-form-item>
						</el-col>
					</el-col>
				</el-form-item>
      </el-col>

      <el-col :span="22">
        <el-form-item label="变动金额">
					<el-col :span="24">
						<el-col :span="12" class="m-cur-select">
							<el-form-item>
								<el-select v-model="model.liaall.liaccv.concur" style="width:100%" placeholder="请选择" disabled>
									<el-option
										v-for="item in codes.curtxt"
										:key="item.value"
										:label="item.label"
										:value="item.value">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item>
								<el-input v-model="model.liaall.liaccv.chgamt" :precision="2" :step="0.1" :max="100000000000000" placeholder="请输入" disabled></el-input>
							</el-form-item>
						</el-col>
					</el-col>
				</el-form-item>
      </el-col>

      <el-col :span="22">
        <el-form-item label="应收/支保证金">
					<el-col :span="24">
						<el-col :span="12" class="m-cur-select">
							<el-form-item>
								<el-select v-model="model.liaall.liaccv.concur" style="width:100%" placeholder="请选择" disabled>
									<el-option
										v-for="item in codes.curtxt"
										:key="item.value"
										:label="item.label"
										:value="item.value">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item>
								<el-input v-model="model.liaall.liaccv.pctresamt" :precision="2" :step="0.1" :max="100000000000000" placeholder="请输入" disabled></el-input>
							</el-form-item>
						</el-col>
					</el-col>
				</el-form-item>
      </el-col>
    </el-col>

    <el-col :span="12">
      <el-col :span="22">
        <el-form-item label="保证金应收比例（%）" label-width="200px">
          <el-input v-model="model.liaall.liaccv.cshpct" :precision="2" :step="0.1" :max="100000000000000" placeholder="请输入"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="22">
        <el-form-item label="保证金实收比例（%）" label-width="200px">
          <el-input v-model="model.liaall.liaccv.relcshpct" :precision="2" :step="0.1" :max="100000000000000" placeholder="请输入" disabled></el-input>
        </el-form-item>
      </el-col>
    </el-col>
    <el-col :span="24" class="m-block">
      <div class="e-table-wrapper">
        <el-table
          :data="model.liaall.liaccv.liaccvg"
          style="width: 100%"
          >
          <el-table-column
            prop="cur"
            label="币种">
          </el-table-column>
          <el-table-column
            prop="oldamt"
            label="原始金额">
          </el-table-column>
          <el-table-column
            prop="chgamt"
            label="变动金额">
          </el-table-column>
          <el-table-column
            prop="amt"
            label="金额">
          </el-table-column>
          <el-table-column
            prop="cusact"
            label="结算账号">
          </el-table-column>
          <el-table-column
            prop="ccvact"
            label="保证金账号">
          </el-table-column>
          <el-table-column
            prop="gleflg"
            label="记账">
          </el-table-column>
          <el-table-column
            prop=""
            label="操作">
            <template slot-scope="scope">
              <el-button type="text" size="small">查看</el-button>
              <el-button type="text" size="small">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-button plain class="add-btn" @click="dialogVisible = true">+</el-button>
    </el-col>

    <el-col :span="24" class="m-block">
      <el-col :span="12">
        <el-col :span="22">
          <el-form-item label="保证金合计">
            <el-col :span="24">
              <el-col :span="12" class="m-cur-select">
                <el-form-item>
                  <el-select v-model="model.liaall.liaccv.concur" style="width:100%" placeholder="请选择" disabled>
                    <el-option
                      v-for="item in codes.curtxt"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item>
                  <el-input v-model="model.liaall.liaccv.totcovamt" :precision="2" :step="0.1" :max="100000000000000" placeholder="请输入" disabled></el-input>
                </el-form-item>
              </el-col>
            </el-col>
          </el-form-item>
        </el-col>
      </el-col>
    </el-col>

    <el-dialog
      :visible.sync="dialogVisible"
      width="30%">
      <span slot="title"></span>
      <m-liaccvg-detail
        v-bind:model="liaccvg"
        v-bind:codes="codes" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleAdd">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import LiaccvgDetail from './LiaccvgDetail'

export default {
  components: {
    'm-liaccvg-detail': LiaccvgDetail,
  },
  props: ['model', 'codes'],
  data () {
    return {
      dialogVisible: false,
      liaccvg: {
        cur: '',
        oldamt: '',
        chgamt: '',
        amt: '',
        cusact: '',
        ccvact: '',
        gleflg: ''
      }
    }
  },
  methods: {
    handleAdd () {
      this.dialogVisible = false
      this.model.liaall.liaccv.liaccvg.push(this.liaccvg)
    }
  }
}
</script>

<style scoped>
.title {
	color: rgba(0, 0, 0, 0.65);
	font-size: 14px;
	padding: 20px 0;
}
.add-btn {
	margin: 12px 0;
	text-align: center;
	width: 100%;
	color: #ccc;
}
.m-block {
  margin: 20px 0;
}
</style>