<template>
	<div>
		<el-dialog v-dialogDrag title="详情" :visible="visible" :modal-append-to-body="false" :close-on-click-modal="false" :before-close="beforeClose"
		  center destroy-on-close width="70%" v-if="visible">
			<el-form v-model="EngpFormData" label-width="100px" style="height: 400px;overflow-y: auto;overflow-x: hidden;">
				<c-col :span="12" style="padding-right: 20px;">
					<c-col :span="24">
						<el-form-item label="业务">
							<c-select v-model="EngpFormData.trntyp" dbCode="trntyp" disabled>
              </c-select>
						</el-form-item>
					</c-col>
					<c-col :span="24">
						<el-form-item label="类型">
              <c-select v-model="EngpFormData.cbtpfx" dbCode="cbtpfx" disabled>
              </c-select>
            </el-form-item>
					</c-col>
					<c-col :span="24">
						<el-form-item label="到期日">
							<c-date-picker type="date" v-model="EngpFormData.matdat" format="yyyy-MM-dd" style="width: 100%" placeholder="请选择起算时间"
							  @change="customAddModify(EngpFormData, 'matdat')" disabled></c-date-picker>
						</el-form-item>
					</c-col>
					<c-col :span="24">
						<el-form-item label="期限">
              <c-input v-model="EngpFormData.tenday" disabled></c-input>
						</el-form-item>
					</c-col>
					<c-col :span="24">
						<el-form-item label="借方">
              <c-select v-model="EngpFormData.rol" dbCode="ROLALL" :isShowKeyAndLabel="true" disabled placeholder="请选择借方"></c-select>
            </el-form-item>
					</c-col>
					<c-col :span="24">
						<el-form-item label="贷方">
              <c-select v-model="EngpFormData.cdtrol" dbCode="ROLALL" :isShowKeyAndLabel="true" disabled placeholder="请选择贷方"></c-select>
            </el-form-item>
					</c-col>
				</c-col>
				<c-col :span="12" style="padding-left: 20px;">
					<c-col :span="24">
						<el-form-item label="币种">
							<c-input v-model="EngpFormData.cur" autocomplete="off" placeholder="请输入修改标识" disabled></c-input>
						</el-form-item>
					</c-col>
					<c-col :span="24">
						<el-form-item label="初始金额">
							<c-input-currency v-model="EngpFormData.oldamt" :currency="EngpFormData.cur" autocomplete="off" placeholder="请输入修改标识" disabled></c-input-currency>
						</el-form-item>
					</c-col>
					<c-col :span="24">
						<el-form-item label="记账金额">
							<c-input-currency v-model="EngpFormData.amt" :currency="EngpFormData.cur" autocomplete="off" placeholder="请输入修改标识" disabled></c-input-currency>
						</el-form-item>
					</c-col>
					<c-col :span="24">
						<el-form-item label="比例">
              <c-col :span="22">
              <c-input-currency :precision=2 v-model="EngpFormData.tenpct" disabled></c-input-currency>
              </c-col>
              <c-col :span="1" style="margin-left:5px">
              <span>%</span>
              </c-col>
            </el-form-item>
					</c-col>
					<c-col :span="24">
						<el-form-item label="借方账号">
							<c-input v-model="EngpFormData.acc" disabled/>
						</el-form-item>
					</c-col>
					<c-col :span="24">
						<el-form-item label="贷方账号">
							<c-input v-model="EngpFormData.acc2" disabled/>
						</el-form-item>
					</c-col>
					<c-col :span="24">
						<el-form-item label="记账日期">
							<c-date-picker type="date" v-model="EngpFormData.valdat" disabled format="yyyy-MM-dd" style="width: 100%" placeholder="请选择记账日期"
							  @change="customAddModify(EngpFormData, 'valdat')"></c-date-picker>
						</el-form-item>
					</c-col>

				</c-col>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<!-- <el-button v-if="!isDispaly" type="primary" @click="submitForm()">确 定</el-button>
				<el-button @click="resetForm()">取 消</el-button> -->
        <el-button @click="closeForm()">关 闭</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import commonDepend from "~/mixin/commonDepend.js";

export default {
  mixins: [commonDepend],
  props: {
    codes: Object,
    visible: {
      type: Boolean,
      default: false
    },
    initData: {
      type: Object,
      default: () => {}
    }
	},
	computed: {
		isDispaly() {
			return this.$store.state.Status.mode === 'display'
		}
	},
  data() {
    return {
      EngpFormData: {
        acc: "",
        amt: "",
        bussec: "",
        cbtpfx: "",
        cdtrol: "",
        cur: "",
        curUuid: "",
        matdat: "",
        oldamt: "",
        rol: "",
        tenday: "",
        tenpct: "",
        valdat: ""
			},
    };
  },
  watch: {
    visible(show) {
      if (show) {
        this.EngpFormData = this.initData;
      }
		},
	},
  methods: {
    resetForm() {
      this.$emit("onSubmit", this.initData);
    },
    submitForm() {
      this.$emit("onSubmit", this.EngpFormData);
    },
    beforeClose() {
      this.$emit("closeEngpDialog");
    },
    closeForm() {
      this.$emit("closeEngpDialog");
		}
  }
};
</script>

<style></style>