<template>
  <div>
    <!-- 添加区域 -->
    <div class="getadd" style="margin-left: 5%">
      <el-row v-loading="loading" element-loading-text="图片上传中。。。">
        <el-col :xl="8" :lg="10" :md="8" :sm="12" :xs="24">
          <el-form
            style="width: 100%; margin: 30px 0px"
            :model="addTO"
            :rules="rules"
            ref="addTO"
            label-width="80px"
            class="demo-ruleForm"
          >
            <el-form-item label="发票代码" prop="code">
              <el-input
                v-model="addTO.code"
                maxlength="12"
                minlength="12"
                onkeyup="this.value=this.value.replace(/\D|^/g,'')"
              ></el-input>
            </el-form-item>
            <el-form-item label="发票号码" prop="number">
              <el-input
                v-model="addTO.number"
                maxlength="8"
                minlength="8"
                onkeyup="this.value=this.value.replace(/\D|^/g,'')"
              ></el-input>
            </el-form-item>
            <el-form-item label="发票时间" required prop="time">
              <el-date-picker
                v-model="addTO.time"
                type="datetime"
                placeholder="选择日期时间"
                @change="timestampToTime1()"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="发票类型" prop="category">
              <el-select v-model="addTO.category" placeholder="请选择">
                <el-option
                  v-for="item in categoryOptions"
                  :key="item.value"
                  :label="item.category"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="发票类别" prop="type">
              <el-select v-model="addTO.type" placeholder="请选择">
                <el-option
                  v-for="item in typeOptions"
                  :key="item.value"
                  :label="item.type"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="发票金额" prop="mone">
              <el-input v-model="addTO.mone"></el-input>
            </el-form-item>
            <el-form-item label="发票文件">
              <el-upload
                class="upload-demo"
                ref="upload"
                :headers="fileUploadHeader"
                :file-list="fileList"
                :action="action"
                :auto-upload="false"
                :data="addTO"
                :on-change="onChange"
                :on-remove="delfile"
                :on-success="fileSuccess"
                :limit="1"
                :on-error="geterror"
                drag
              >
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">
                  将文件拖到此处，或
                  <em>点击上传</em>
                </div>
                <div class="el-upload__tip" slot="tip">
                  只能上传jpg/png/pdf文件，且不超过500kb
                </div>
              </el-upload>
            </el-form-item>
            <el-form-item>
              <el-col>
                <el-button
                  type="success"
                  icon="el-icon-folder-checked"
                  @click="getlistForm()"
                  >立即创建</el-button
                >
                <el-button type="info" icon="el-icon-refresh" @click="delectdd"
                  >重置信息</el-button
                >
              </el-col>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { getFileUrl } from "@/api/companyFile";
import { insertList } from "@/api/project";
import {
  addRecordRules as rules,
  categoryOptions,
  typeOptions,
  statusOptions,
} from "../expense";
export default {
  created() {
    this.action = process.env.VUE_APP_BASE_API + "/invoice/insert";
    this.fileUploadHeader["X-Token"] = this.$store.getters.token;
  },
  computed: {
    ...mapGetters(["companyId", "urId"]),
  },
  data() {
    return {
      rules: rules,
      //添加发票的数据
      addTO: {
        category: null,
        code: null,
        mone: null,
        number: null,
        status: 0,
        time: null,
        type: null,
      },
      categoryOptions,
      typeOptions,
      statusOptions,
      fileList: [],
      loading: false,
      action: null,
      fileUploadHeader: {
        "X-Token": null,
      },
    };
  },
  methods: {
    //校验发票文件格式
    onChange(file) {
      const fileNamepdf = file.name;
      let fileType = fileNamepdf.substring(fileNamepdf.lastIndexOf("."));
      if (fileType == ".pdf" || fileType == ".png" || fileType == ".jpg") {
        this.fileTypeJpg = true;
      } else {
        this.fileTypeJpg = false;
        this.$message.warning("发票文件只能是pdf，png，jpg格式文件");
        this.$refs.upload.clearFiles();
      }
    },
    //清除发片文件
    delfile() {
      this.fileTypeJpg = false;
    },
    //文件上传成功
    fileSuccess(res) {
      this.loading = false;
      if (res.success) {
        //发票提交
        this.delectdd();
        this.$emit("childFnGetParent", "first");
        this.$message.success(res.msg);
      } else {
        this.loading = false;
        this.$message.error(res.msg);
      }
      this.isgetid = true;
    },
    geterror() {
      this.loading = true;
    },
    //时间处理 yyyy-MM-dd hh:mm:ss
    timestampToTime1() {
      var date = this.addTO.time;
      var Y = date.getFullYear() + "-";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var D =
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
      var h =
        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
      var m =
        (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
        ":";
      var s =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      this.addTO.time = Y + M + D + h + m + s;
    },
    //发票提交页面的提交
    getlistForm() {
      if (this.fileTypeJpg == true) {
        this.$refs.addTO.validate((valid) => {
          if (valid) {
            this.addTO.companyId = this.companyId;
            this.addTO.userId = this.urId;
            this.$refs.upload.submit();
          }
        });
      } else {
        this.$message.warning("没有发票文件，无法提交");
      }
    },
    //数据清除
    delectdd() {
      this.$refs.addTO.resetFields();
      this.fileList = this.fileList.filter((item) => item.uid !== file.uid);
    },
  },
};
</script>

<style scoped lang="scss">
</style>