<template>
  <div>


    <c-page title="买方信用证开立">
      <div class="eContainer">
        <el-form :model="model" :rules="rules" ref="ditopnForm" label-position="left" label-width="150px" size="small">
          <el-tabs v-model="activeName" type="card" @tab-click="onTabClick">

            <el-tab-pane label="明细" name="ovwp">
              <m-ovwp
                v-bind:model="model"
                v-bind:codes="codes" />
            </el-tab-pane>

            <el-tab-pane label="附加" name="dept">
              <m-detp
                v-bind:model="model"
                v-bind:codes="codes" />
            </el-tab-pane>

            <el-tab-pane label="条款" name="tkp">
              <m-tkp
                v-bind:model="model"
                v-bind:codes="codes" />
            </el-tab-pane>

            <el-tab-pane label="表外&保证金" name="engp">
              <m-engp
                v-bind:model="model"
                v-bind:codes="codes" />
            </el-tab-pane>

            <el-tab-pane label="费用&账务" name="fee">
              <m-fee
                v-bind:model="model"
                v-bind:codes="codes" />
            </el-tab-pane>

            <el-tab-pane label="会计分录" name="glelst">
              <m-glelst
                v-bind:model="model"
                v-bind:codes="codes" />
            </el-tab-pane>

            <el-tab-pane label="面函" name="doc">
              <m-doc
                v-bind:model="model"
                v-bind:codes="codes" />
            </el-tab-pane>

          </el-tabs>
        </el-form>
        <el-col class="eContainer-func">
          <el-button
            type="primary"
            size="small"
            @click="handleSubmit('ditopnForm')"
          >提交</el-button>
          <el-button v-if="activeName !== 'baosong'" type="primary" size="small" @click="handleCheck('ditopnForm')">检核</el-button>
          <el-button v-if="activeName !== 'baosong'" type="primary" size="small" @click="handleSave">暂存</el-button>
          <el-button v-if="activeName !== 'baosong'" type="primary" size="small" @click="exitDialogVisible = true">退出</el-button>
        </el-col>
      </div>
    </c-page>
    <el-dialog
      title="确定退出？"
      :visible.sync="exitDialogVisible"
      width="30%">
      <span></span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleSaveExit">暂存并退出</el-button>
        <el-button @click="handleExit">直接退出</el-button>
        <el-button @click="exitDialogVisible = false">放弃退出</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Ovwp from "./Ovwp"
import Detp from "./Detp"
import Tkp from "./Tkp"
import Engp from "./Engp"

import Glelst from "../../Public/Glelst"
import Doc from "../../Public/Doc"
import Fee from "../../Public/Fee"

import model from "../../../model/ditopn"
import codes from "../../../config/ditopn"

export default {
  components: {
    'm-ovwp': Ovwp,
    'm-detp': Detp,
    'm-tkp': Tkp,
    'm-engp': Engp,
    'm-glelst': Glelst,
    'm-doc': Doc,
    'm-fee': Fee,
  },
  data () {
    return {
      activeName: 'ovwp',
      model,
      codes,
      rules: {},
      exitDialogVisible: false
    }
  },
  methods: {
    onTabClick () {
      //
    },
    handleSubmit (formName) {
      let self = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          self.$confirm('确定提交？', '', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            self.$message({
              type: 'success',
              message: '提交成功!'
            });
          }).catch(() => {
            self.$message({
              type: 'info',
              message: '已取消提交'
            });
          });
        } else {
          alert('有参数没有完成填写');
          return false;
        }
      });
    },
    handleCheck (formName, callback) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (callback) {
          } else {
            alert('check success')
          }
        } else {
          alert('有参数没有完成填写');
          return false;
        }
      });
    },
    handleSave () {
      // TODO: check 成功后的回调中执行 save
      this.$confirm('确认暂存？', '', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.save()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消暂存'
        })
      })
    },
    handleSaveExit () {
      this.exitDialogVisible = false
      // TODO: handleSave 成功后的回调中执行 exit
      this.handleSave()
      this.exit()
    },
    handleExit () {
      this.exitDialogVisible = false
      this.exit()
    },
    save () {
      console.log('暂存')
    },
    exit () {
      console.log('退出')
    }
  }
}
</script>

<style>
.eContainer {
  margin: 10px;
}
.eContainer-func {
  text-align: center;
  margin-top: 20px;
}
.m-inputbtn {
	position: relative
}
.m-inputbtn-input {
	padding-right: 64px;
	display: inline-block;
}
.m-inputbtn-btn {
	position: absolute;
	right: 0;
}
.m-cur-select {
  padding-right: 20px;
}
.m-inputtail {
  position: relative;
  padding-right: 30px;
}
.m-inputtail-tail {
  position: absolute;
  right: 10px;
  top: 0;
}
</style>

