<style scoped>
.user-panel {
  margin: 10px auto;
}
</style>
<template>
  <el-dialog :visible.sync="showDialog" :title="title" :modal-append-to-body="false" style="text-align:left;" @close="closeDialog" :close-on-click-modal="false">
    <div class="user-panel" v-loading="loading">
      <el-descriptions direction="vertical" :column="3" border>
        <el-descriptions-item label="客户">{{ formModel.customerName }}</el-descriptions-item>
        <el-descriptions-item label="工单">{{ formModel.name }}</el-descriptions-item>
        <el-descriptions-item label="计划单号">{{ formModel.number }}</el-descriptions-item>
        <el-descriptions-item label="成品数">{{ formModel.actualQuantity }}</el-descriptions-item>
        <el-descriptions-item label="单价">{{ formModel.unitPrice }}</el-descriptions-item>
        <el-descriptions-item label="金额">{{ formModel.actualAmount }}</el-descriptions-item>
        <el-descriptions-item label="坯布数">{{ formModel.clothQuantity }}</el-descriptions-item>
        <el-descriptions-item label="坯布单价">{{ formModel.clothPrice }}</el-descriptions-item>
        <el-descriptions-item label="金额">{{ formModel.clothAmount }}</el-descriptions-item>
        <el-descriptions-item label="卷数">{{ formModel.rollQuantity }}</el-descriptions-item>
        <el-descriptions-item label="单价">{{ formModel.wages }}</el-descriptions-item>
        <el-descriptions-item label="金额">{{ formModel.rollAmount }}</el-descriptions-item>
        <el-descriptions-item label="" :span="2"></el-descriptions-item>
        <el-descriptions-item label="总金额">{{ formModel.totalAmount }}</el-descriptions-item>
      </el-descriptions>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">关 闭</el-button>
      <el-button type="primary" @click="handleSubmit" :loading="submitting">生成账单</el-button>
    </span>
  </el-dialog>
</template>
<script>
import Constant from "@/constant";
import workApi from "@/api/base/work";
import accountApi from "@/api/base/account";

export default {
  props: ["businessKey", "title"],
  data() {
    return {
      formModel: {},
      showDialog: true,
      loading: false,
      submitting: false,
    };
  },
  methods: {
    closeDialog() {
      this.$emit("close", false);
    },
    handleSubmit() {
      var self = this;
      self.submitting = true;

      var formData = new FormData();
      formData.append("workId", self.formModel.id);
      formData.append("amount", self.formModel.totalAmount);
      formData.append("actualAmount", self.formModel.actualAmount);
      formData.append("clothAmount", self.formModel.clothAmount);
      formData.append("rollAmount", self.formModel.rollAmount);

      accountApi.addBill(formData).then(response => {
        var jsonData = response.data;
        self.submitting = false;

        if (jsonData.result) {
          self.$message({message: "保存成功!", type: "success"});
          self.$emit("close", true);
        }
        else {
          self.$message({message: jsonData.message + "", type: "warning"});
          self.$emit("close", false);
        }
      });
    },
  },
  mounted: function () {
    var self = this;
    self.loading = true;

    accountApi.createBill(self.businessKey).then(response => {
      var jsonData = response.data;
      self.loading = false;

      if (jsonData.result) {
        self.formModel = jsonData.data;
      } else {
        self.$message.error(jsonData.message + "");
      }
    });
  }
};
</script>