<template>
  <div class="app-container form-box" style="padding: 20px">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-card class="top15">
        <div class="table-card">
          <el-row type="flex" class="mt10" justify="space-around">
            <el-col :span="8"></el-col>
            <el-col :span="8" class="formTitle"> {{ title }}</el-col>
            <el-col :span="8" style="text-align: right; padding-right: 20px">
              <!-- <el-button type="primary" icon="el-icon-printer" size="mini" @click="handlePrint">打印预览</el-button> -->
              <el-button
                type="primary"
                plain
                icon="el-icon-check"
                size="mini"
                @click="submitForm"
                v-if="!isNewShow"
                >保存</el-button
              >
              <el-button type="primary" size="mini" @click="handleBack"
                >返回</el-button
              >
            </el-col>
          </el-row>
        </div>
        <div class="table-card table-card-content">
          <el-row :gutter="20">
            <el-col :span="8" class="line-rt pr-4">
              <el-form-item label="上传发票" style="margin-left: -50px">
                <UploadImgPdf :files="fileList" @onConfirm="handleImg" />
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-row>
                <el-col :span="8">
                  <el-form-item label="发票类型" prop="invoiceType">
                    <el-select
                      v-model="form.invoiceType"
                      class="wd100"
                      size="small"
                      placeholder="请选择"
                      filterable
                    >
                      <el-option
                        v-for="it of typeList"
                        :key="it.value"
                        :value="it.value"
                        :label="it.label"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="发票代码" prop="invoiceCode">
                    <el-input
                      size="small"
                      v-model="form.invoiceCode"
                      placeholder="请输入发票代码"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="发票号码" prop="invoiceNum">
                    <el-input
                      size="small"
                      v-model="form.invoiceNum"
                      placeholder="请输入发票号码"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="开票日期" prop="invoiceDate">
                    <el-date-picker
                      clearable
                      v-model="form.invoiceDate"
                      value-format="yyyy/MM/dd"
                      class="wd100"
                      type="date"
                      placeholder="选择开票日期"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="税额" prop="taxAmount">
                    <el-input
                      size="small"
                      v-model="form.taxAmount"
                      placeholder="请输入税额"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="不含税金额" prop="excludingTaxAmount">
                    <el-input
                      size="small"
                      v-model="form.excludingTaxAmount"
                      placeholder="请输入不含税金额"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="价税合计" prop="totalAmount">
                    <el-input
                      size="small"
                      v-model="form.totalAmount"
                      placeholder="请输入价税合计"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="销售方" prop="seller">
                    <el-input
                      size="small"
                      v-model="form.seller"
                      placeholder="请输入销售方"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <!-- <el-row>
            <el-col :span="8">
              <el-form-item label="发票类型" prop="invoiceType">
                <el-select v-model="form.invoiceType" class="wd100" size="small" placeholder="请选择发票类型">
                  <el-option label="请选择字典生成" value="1" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="发票代码" prop="invoiceCode">
                <el-input size="small" v-model="form.invoiceCode" placeholder="请输入发票代码" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="发票号码" prop="invoiceNum">
                <el-input size="small" v-model="form.invoiceNum" placeholder="请输入 发票号码" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="开票日期" prop="invoiceDate">
                <el-date-picker clearable v-model="form.invoiceDate" class="wd100" type="date" value-format="timestamp" placeholder="选择开票日期" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="税额" prop="taxAmount">
                <el-input size="small" v-model="form.taxAmount" placeholder="请输入税额" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="不含税金额" prop="excludingTaxAmount">
                <el-input size="small" v-model="form.excludingTaxAmount" placeholder="请输入不含税金额" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="价税合计" prop="totalAmount">
                <el-input size="small" v-model="form.totalAmount" placeholder="请输入价税合计" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="销售方" prop="seller">
                <el-input size="small" v-model="form.seller" placeholder="请输入销售方" />
              </el-form-item>
            </el-col>
          </el-row> -->
        </div>
      </el-card>
    </el-form>
  </div>
</template>

<script>
import { createInvoice, updateInvoice, getInvoice } from "@/api/bs/invoice";
import { listData } from "@/api/system/dict/data";
import dayjs from "dayjs";
export default {
  name: "",
  components: {
    UploadImgPdf: () => import("@/components/UploadImgPdf"),
    // printHtml: () => import('./printHtml'),
  },
  computed: {
    title() {
      return this.$route.query.id ? "修改我的发票" : "添加我的发票";
    },
    isNewShow() {
      return this.$route.query.isShow;
    },
  },
  created() {
    this.handleInitList();
    if (this.$route.query.id) {
      this.handleInitForm(this.$route.query.id);
    }
  },
  data() {
    return {
      pdfName: null,
      isPdf: false,
      fileList: [],
      imgList: [], //当前图片src数组
      dialogVisible: false,
      prviewUrl: null,
      form: {},
      isShow: false,
      // 表单校验
      rules: {
        files: [{ required: true, message: "附件不能为空", trigger: "blur" }],
        invoiceType: [
          { required: true, message: "发票类型不能为空", trigger: "change" },
        ],
        invoiceCode: [
          { required: true, message: "发票代码不能为空", trigger: "blur" },
        ],
        invoiceNum: [
          { required: true, message: " 发票号码不能为空", trigger: "blur" },
        ],
        invoiceDate: [
          { required: true, message: "开票日期不能为空", trigger: "blur" },
        ],
      },
      typeList: [],
    };
  },
  methods: {
    handleImg(list) {
      this.fileList = list;
    },
    handleTimeChange(val) {
      console.log("266+6", val);
      this.$set(this.form, "invoiceDate", dayjs(val).format("YYYY/MM/DD"));
    },
    handleInitList() {
      listData({
        pageNo: 1,
        pageSize: 50,
        dictType: "bs_invoice_type",
      }).then((res) => {
        this.typeList = res.data.list || [];
      });
    },

    handleBack() {
      history.back();
    },
    handleInitForm(id) {
      getInvoice(id).then((res) => {
        this.form = {
          ...(res.data || {}),
          invoiceDate: new Date(res.data.invoiceDate),
        };
        this.fileList = this.form.files;
        console.log("form...", this.form);
      });
    },
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (!valid) {
          return;
        }
        let form = {
          ...this.form,
          files: this.fileList,
          invoiceDate: dayjs(this.form.invoiceDate).valueOf(),
        };
        // 修改的提交
        if (this.form.id != null) {
          updateInvoice(form).then((response) => {
            // this.form = {}
            // this.fileList = []
            // this.$refs.form.resetFields()
            history.back();
            this.$modal.msgSuccess("修改成功！");
          });
          return;
        }
        // 添加的提交
        createInvoice(form).then((response) => {
          this.$nextTick(() => {
            this.form = {};
            this.fileList = [];
            this.$refs.form.resetFields();
            this.$modal.msgSuccess(
              "新增成功,本页面可以重复添加发票！如需退出，请点击返回按钮！"
            );
          });
          // history.back()
        });
      });
    },
    cancel() {
      this.$emit("onCancel");
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/styles/form/index.scss";
.my-process-designer {
  background: #fff !important;
}
</style>
