<template>
  <div class="p20">
    <h3 class="font-size-16">退休</h3>
    <el-form ref="form" class="tx-form" :model="txForm" label-width="0px">
      <table class="form-table mt15" cellpadding="0" cellspacing="0">
        <tr>
          <td>
            <h3 class="font-size-14">退休人员</h3>
          </td>
          <td>
            <el-form-item prop="wtx_txry">
              <el-input v-model="txForm.wtx_txry"></el-input>
            </el-form-item>
          </td>
          <td>
            <h3 class="font-size-14">所属部门</h3>
          </td>
          <td>
            <el-form-item prop="wtx_ssbm">
              <el-input v-model="txForm.wtx_ssbm"></el-input>
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td>
            <h3 class="font-size-14">入职日期</h3>
          </td>
          <td>
            <el-form-item prop="wtx_rzrq">
              <el-date-picker
                v-model="txForm.wtx_rzrq"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-form-item>
          </td>
          <td>
            <h3 class="font-size-14">退休日期</h3>
          </td>
          <td>
            <el-form-item prop="wtx_sqlzrq">
              <el-date-picker
                v-model="txForm.wtx_txrq"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td>
            <h3 class="font-size-14">退休年龄</h3>
          </td>
          <td colspan="3">
            <el-form-item prop="wtx_pzlzrq">
              <el-input v-model="txForm.wtx_txnl"></el-input>
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td>
            <h3 class="font-size-14">部门领导意见</h3>
          </td>
          <td colspan="3">
            <el-form-item prop="wtx_bmldyj">
              <el-input v-model="txForm.wtx_bmldyj"></el-input>
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td>
            <h3 class="font-size-14">人力资源部门意见</h3>
          </td>
          <td colspan="3">
            <el-form-item prop="wtx_rlzybyj">
              <el-input v-model="txForm.wtx_rlzybmyj"></el-input>
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td>
            <h3 class="font-size-14">备注</h3>
          </td>
          <td colspan="3">
            <el-form-item prop="wtx_bz">
              <el-input v-model="txForm.wtx_bz"></el-input>
            </el-form-item>
          </td>
        </tr>
      </table>
      <div class="footer">
        <el-form-item>
          <el-button @click="formCancel">取 消</el-button>
          <el-button type="primary" @click="formSubmit">确 定</el-button>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script>
import { txlc_add } from "./api";

export default {
  name: "index",
  data() {
    return {
      txForm: {
        wtx_txry: "",
        wtx_ssbm: "",
        wtx_rzrq: "",
        wtx_txrq: "",
        wtx_txnl: "",
        wtx_bmldyj: "",
        wtx_rlzybmyj: "",
        wtx_bz: "",
      },
    };
  },
  methods: {
    formCancel() {
      this.$router.push({ name: "jsld_txlc" });
    },
    formSubmit() {
      let data = {
        wtx_txry: this.txForm.wtx_txry,
        wtx_ssbm: this.txForm.wtx_ssbm,
        wtx_rzrq: this.txForm.wtx_rzrq,
        wtx_sqlzrq: this.txForm.wtx_txrq,
        wtx_pzlzrq: this.txForm.wtx_txnl,
      };

      txlc_add(data).then((res) => {
        if (res.code == 1) {
          this.$message({
            message: "申请添加成功！",
            type: "success",
          });
          this.$router.push({ name: "jsld_txlc" });
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      });
    },
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
.form-table {
  width: 100%;
  border: 1px solid #dbdbdb;
  border-collapse: collapse;

  td {
    padding: 8px 0;
    border: 1px solid #dbdbdb;
    &:nth-child(odd) {
      background: #f6f6f6;
      width: 20%;
      padding-left: 10px;
    }
    &:nth-child(even) {
      background: #fff;
      width: 30%;
    }
  }
  tr:nth-child(n + 3) td {
    &:nth-child(odd) {
      background: #f6f6f6;
      width: 20%;
      padding-left: 10px;
    }
    &:nth-child(even) {
      background: #fff;
      width: 80%;
    }
  }
}
.footer {
  width: 300px;
  height: 100px;
  margin: 0 auto;
  margin-top: 30px;
}
</style>

<style lang="scss">
.tx-form {
  .el-form-item {
    margin: 0;
    .el-input__inner {
      height: 25px !important;
      line-height: 25px !important;
      border: 0 !important;
      border-radius: 0 !important;
      padding: 0 15px;
    }
    .el-input__prefix {
      display: none;
      left: 0;
    }
  }
}
</style>