<template>
	<div class="eibs-tab">
		<c-col :span="24">
			<c-table :list="model.liaall.liaallg" style="text-align: center;" :border="true" :total="model.liaall.liaallg.length"
			  highlight-current-row @current-change="handleCurrentChange">
				<el-table-column prop="trntyp" label="业务" min-width="150px">
          <template #default="scope">
						<el-form-item label-width="0" :prop="'liaall.liaallg.' + scope.$index + '.trntyp'">
							<c-select-value-to-label v-model="scope.row.trntyp" :code="codes.liatrntyp">
							</c-select-value-to-label>
						</el-form-item>
					</template>
				</el-table-column>
				<el-table-column prop="cbtpfx" label="类型" min-width="100px">
           <template #default="scope">
						<el-form-item label-width="0" :prop="'liaall.liaallg.' + scope.$index + '.cbtpfx'">
							<c-select-value-to-label v-model="scope.row.cbtpfx" dbCode="cbtpfx">
							</c-select-value-to-label>
						</el-form-item>
					</template>
				</el-table-column>
				<el-table-column prop="matdat" label="到期日" width="180px">
					<template slot-scope="scope">
						<el-form-item label-width="0" :prop="'liaall.liaallg.' + scope.$index + '.matdat'">
							<c-date-picker type="date" v-model="scope.row.matdat" value-format="yyyy-MM-dd" placeholder="请选择日期" style="width: 100%" disabled
							  :customModifykey="'liaall.liaallg.' + scope.$index + '.matdat'" @change="customAddModify(scope.row, 'matdat')">
							</c-date-picker>
						</el-form-item>
					</template>
				</el-table-column>
				<!-- <el-table-column prop="tenday" label="期限" min-width="110px">
					<template slot-scope="scope">
						<el-form-item label-width="0" :prop="'liaall.liaallg.' + scope.$index + '.tenday'">
							<c-input-number :min=0 :max=999 v-model="scope.row.tenday" style="width: 100%" placeholder="请输入" :customModifykey="'liaall.liaallg.' + scope.$index + '.tenday'" @change="customAddModify(scope.row, 'tenday')">
							</c-input-number>
						</el-form-item>
					</template>
				</el-table-column> -->
				<el-table-column prop="rol" label="借方" min-width="200px">
            <template slot-scope="scope">
              <el-form-item label-width="0" :prop="'liaall.liaallg.' + scope.$index + '.rol'">
                <c-select-value-to-label v-model="scope.row.rol" dbCode="ROLALL" :isShowKeyAndLabel="true">
							  </c-select-value-to-label>
              </el-form-item>
					  </template>
				</el-table-column>
				<el-table-column prop="cur" label="币种" min-width="80px">
				</el-table-column>
				<el-table-column prop="oldamt" label="初始金额" min-width="180px">
            <template slot-scope="scope">
              <el-form-item label-width="0" :prop="'liaall.liaallg.' + scope.$index + '.oldamt'">
                {{ moneyFormat(scope.row.oldamt, scope.row.cur) }}
              </el-form-item>
					  </template>
				</el-table-column>
				<el-table-column prop="amt" label="记账金额" min-width="180px">
            <template slot-scope="scope">
              <el-form-item label-width="0" :prop="'liaall.liaallg.' + scope.$index + '.amt'">
                {{ moneyFormat(scope.row.amt, scope.row.cur) }}
              </el-form-item>
					  </template>
				</el-table-column>
				<!-- <el-table-column prop="tenpct" label="比例(%)" min-width="100px">
            <template slot-scope="scope">
              <el-form-item label-width="0" :prop="'liaall.liaallg.' + scope.$index + '.tenpct'">
                 {{ scope.row.tenpct }}
              </el-form-item>
					  </template>
				</el-table-column> -->
				<el-table-column prop="acc" label="账号" min-width="200px">
					<template slot-scope="scope">
						<el-form-item label-width="0" :prop="'liaall.liaallg.' + scope.$index + '.acc'">
              <c-select v-if="scope.row.accSet.length > 1" v-model="scope.row.acc" :isFixed="true" :customModifykey="'liaall.liaallg.' + scope.$index + '.acc'" @change="customAddModify(scope.row, 'acc')">
								<el-option v-for="item in scope.row.accSet" :key="item" :label="item" :value="item"></el-option>
							</c-select>
              <span v-else>{{ scope.row.acc }}</span>
						</el-form-item>
					</template>
				</el-table-column>
        <el-table-column prop="valdat" label="记账日期" width="110px">
				</el-table-column>
				<el-table-column label="" prop="det" width="150px" height="0px" fixed="right">
					<!-- <template slot-scope="scope" slot="header">
						<c-button circle style="padding: 4px" class="el-icon-plus" size="mini" @click="addRow(scope)">
						</c-button>
						<c-button style="padding: 4px" circle class="el-icon-minus" size="mini" @click="removeRow(scope)">
						</c-button>
					</template> -->
					<template slot-scope="scoped">
						<el-button style="margin-left: 0" size="small" type="primary" icon="el-icon-info" @click="detailEngpDialog(scoped.$index, scoped.row)"></el-button>
					</template>
				</el-table-column>
			</c-table>
		</c-col>
		<!-- <c-col :span="16" style="margin-top: 10px">
			<el-form-item label="未分配金额">
				<c-input style="width: 15%" disabled v-model="model.liaall.concur" maxlength="3" placeholder="" :customModifykey="'liaall.liaallg.' + scope.$index + '.tenday'"
				  @change="customAddModify(model.liaall, 'liaall.concur')"></c-input>
				<c-input-currency style="width: 40%; margin-left: 10px;margin-right: 10px;" disabled v-model="model.liaall.misamt" :currency="model.liaall.concur" placeholder="请输入金额" :customModifykey="'liaall.liaallg.' + scope.$index + '.tenday'"
				  @blur="customAddModify(model.liaall, 'liaall.misamt')"></c-input-currency>
				<c-button style="width: 20%" size="small" disabled type="primary" @click="onLiaallButmisamt">
					添加到当前行
				</c-button>
			</el-form-item>
		</c-col> -->
		<!-- 弹框 -->
		<EngpDialog :visible="showEngpDialog" :initData="engpList" :close-on-click-modal="false" :close-on-press-escape="false" ref="engpDialog"
		  :model="model" :idx="index" :codes="codes" @onSubmit="onSubmit" @closeEngpDialog="closeEngpDialog" />
	</div>
</template>

<script>
import EngpDialog from "./EngpDialog.vue";
import Utils from "~/utils";
import commonDepend from "~/mixin/commonDepend.js";
import { cloneDeep } from "lodash";
import moment from 'moment'
import event from '../event';

export default {
  inject: ["root"],
  mixins: [commonDepend, event],
  components: {
    EngpDialog
	},
  props: ["model", "codes"],
  data() {
    return {
      showEngpDialog: false, //国外弹窗显示与隐藏
      engpList: {
        acc: "",
        amt: "",
        bussec: "",
        cbtpfx: "",
        cdtrol: "",
        cur: "",
        curUuid: "",
        matdat: "",
        oldamt: "",
        rol: "",
        tenday: "",
        tenpct: "",
        valdat: ""
      },
      index: 0,
      currentRow: null,
    };
  },
  methods: {
    // 添加行
    addRow() {
      let tempRow = {
        bussec: "",
        cbtpfx: "",
        matdat: "",
        tenday: "",
        rol: "",
        cdtrol: "",
        cur: "",
        oldamt: "",
        amt: "",
        tenpct: "",
        acc: "",
        valdat: "",
        curUuid: Utils.generateUUID()
      };
      if (this.currentRow) {
        this.model.liaall.liaallg.map((item, index) => {
          if (item.curUuid === this.currentRow.curUuid) {
            this.model.liaall.liaallg.splice(index + 1, 0, tempRow);
          }
        });
      } else {
        this.model.liaall.liaallg.push(tempRow);
      }
    },
    // 选中行
    handleCurrentChange(val) {
      console.log(val);
      this.currentRow = val;
    },
    // 删除行
    removeRow() {
      if (this.currentRow) {
        this.model.liaall.liaallg.map((item, index) => {
          if (item.curUuid === this.currentRow.curUuid) {
            this.model.liaall.liaallg.splice(index, 1);
          }
        });
      } else {
        this.model.liaall.liaallg.pop();
        this.currentRow = null;
      }
    },
    // 详情
    detailEngpDialog(index, row) {
			this.engpList = cloneDeep(row);
			//this.engpList.valdat= moment(new Date()).format('YYYY-MM-DD') 
      this.index = index;
      this.showEngpDialog = true;
    },
    onSubmit(formValues) {
      this.$set(this.model.liaall.liaallg, this.index, formValues);
      this.showEngpDialog = false;
		},
		
    async onLiaallButmisamt() {
      console.log(11);
		},
		closeEngpDialog(){
			this.showEngpDialog=false
    },
  }
};
</script>
<style lang="less" scoped>
.eibs-tab {
  padding: 16px;
  /deep/ .el-col .el-divider--horizontal {
    margin-top: 10px;
  }
  .formItemLabel /deep/ .el-form-item__label {
    text-align: left;
    font-weight: bold;
  }
  .messageLabel /deep/ .el-form-item__label {
    text-align: left;
    font-weight: bold;
    font-size: 12px;
	}
}
</style>