<template>
  <div id="leaveDetail">
    <el-row>
      <el-col :span="24" class="style">
        <el-col :span="24" class="top">
          <NavBar v-show="navShow" :title="title" :isleftarrow="isleftarrow"> </NavBar>
        </el-col>
        <el-col :span="24" class="main">
          <leaveRequest :form="form" @submits="submits" @submit="submitForm" @cancelClick="cancelClick" :types="types"></leaveRequest>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import NavBar from '@/layout/common/topInfo.vue';
import leaveRequest from '@/layout/user/leaveRequest.vue';
import { mapState, createNamespacedHelpers, mapGetters } from 'vuex';
const { mapActions: mapLeave } = createNamespacedHelpers('leave');
export default {
  name: 'leaveDetail',
  props: {},
  components: {
    NavBar, //头部导航
    leaveRequest, //请假申请
  },
  data: () => ({
    form: {},
    title: '',
    isleftarrow: '',
    transitionName: 'fade',
    navShow: true,
    types: '',
  }),
  created() {
    this.search();
  },
  computed: {
    type() {
      return this.$route.query.type;
    },
    ...mapState(['user']),
    keyWord() {
      let meta = this.$route.meta;
      let main = meta.title || '';
      return main;
    },
  },
  mounted() {
    this.title = this.$route.meta.title;
    this.isleftarrow = this.$route.meta.isleftarrow;
  },
  watch: {
    $route(to, from) {
      this.title = to.meta.title;
      this.isleftarrow = to.meta.isleftarrow;
    },
  },
  methods: {
    ...mapLeave(['create']),
    async search() {
      console.log(this.type);
      this.$set(this, `types`, this.type);
    },
    async submitForm(form) {
      // this.form.studentid = '5e4f3d096a90e861b0f30871';
      this.form.studentid = this.user.userid;
      this.form.type = '0';
      let data = this.form;

      let res = await this.create(data);
      if (res.errcode === 0) {
        let msg = `${this.keyWord}添加成功`;
        if (this.$checkRes(res, msg)) this.cancelClick();
      } else {
        let msg = `${this.keyWord}添加失败`;
      }
    },

    async submits(form) {
      // this.form.studentid = '5e4f3d096a90e861b0f30871';
      this.form.studentid = this.user.userid;
      this.form.type = '1';
      let data = this.form;

      let res = await this.create(data);
      if (res.errcode === 0) {
        let msg = `${this.keyWord}添加成功`;
        if (this.$checkRes(res, msg)) this.cancelClick();
      } else {
        let msg = `${this.keyWord}添加失败`;
      }
    },

    cancelClick() {
      if (this.types == 0) {
        this.$router.push({ path: '/user/leave' });
      } else {
        this.$router.push({ path: '/user/quit' });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.style {
  width: 100%;
  min-height: 667px;
  position: relative;
  background-color: #f9fafc;
}
.top {
  height: 46px;
  overflow: hidden;
}
.main {
  min-height: 570px;
}
</style>
