<template>
  <div>
    <div class="body">
      <el-row>
        <el-col :span="6">
          <div class="grid-content bg-purple">当前登录用户ID</div>
        </el-col>
        <el-col :span="6">
          <el-input v-model="curLoginUser.id"></el-input>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">当前登录用户名称</div>
        </el-col>
        <el-col :span="6">
          <el-input v-model="curLoginUser.name"></el-input>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="6">
          <div class="grid-content bg-purple">流程模板ID</div>
        </el-col>
        <el-col :span="6">
          <el-input v-model="curTemplateWFId"></el-input>
        </el-col>
      </el-row>

      <el-row>
        <el-button @click="createBill">创建申请</el-button>
        <el-button @click="getAllWaitSendBills">获取用户所有待处理单据</el-button>
        <el-button @click="getAllSentBills">获取用户所有审批中单据</el-button>
        <el-button @click="getAllFinishedBills">获取用户所有已完结单据</el-button>
      </el-row>

      <el-table :data="bills" style="width: 100%">
        <el-table-column label="ID" width="180">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.itPurchaseViewModel.id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="单据简述" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.itPurchaseViewModel.billName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleView(scope.$index, scope.row)">查看详情</el-button>
            <el-button size="mini" @click="sendbill(scope.$index, scope.row)">送审</el-button>
            <el-button size="mini" @click="backBill(scope.$index, scope.row)">退回</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-button @click="addItem">新增一行</el-button>
      <el-button @click="btnSave">保存</el-button>
      <div v-show="billTableShow">
        <el-row>
          <div class="tiltle top-layer">{{bill.companyName}}</div>
        </el-row>
        <el-row class="tiltle tiltle-layer">
          <div>{{bill.billName}}</div>
        </el-row>

        <el-row>
          <el-col :span="2">
            <div class="cell-title">姓名</div>
          </el-col>
          <el-col :span="4">
            <el-input
              class="cell-title cell-input"
              v-model="bill.applicantName"
              placeholder="请输入内容"
            ></el-input>
          </el-col>
          <el-col :span="2">
            <div class="cell-title">部门</div>
          </el-col>
          <el-col :span="4">
            <el-input
              class="cell-input cell-title"
              v-model="bill.departmentName"
              placeholder="请输入内容"
            ></el-input>
          </el-col>
          <el-col :span="2">
            <div class="cell-title">项目名称</div>
          </el-col>
          <el-col :span="4">
            <el-input class="cell-input cell-title" v-model="bill.projectName" placeholder="请输入内容"></el-input>
          </el-col>
          <el-col :span="2">
            <div class="cell-title cell-title">制单日期</div>
          </el-col>
          <el-col :span="4">
            <el-input class="cell-input cell-title" v-model="bill.createTime" placeholder="请输入内容"></el-input>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">
            <div class="cell-title">品名</div>
          </el-col>
          <el-col :span="4">
            <div class="cell-title">规格</div>
          </el-col>
          <el-col :span="4">
            <div class="cell-title">用途</div>
          </el-col>
          <el-col :span="4">
            <div class="cell-title">采购数量</div>
          </el-col>
          <el-col :span="4">
            <div class="cell-title">预计金额</div>
          </el-col>
          <el-col :span="4">
            <div class="cell-title">现有库存</div>
          </el-col>
          <div v-for="(item,index) in bill.assetItem" :key="index">
            <el-col :span="4">
              <el-input class="cell-input cell-title" v-model="item.name" placeholder="请输入名称"></el-input>
            </el-col>
            <el-col :span="4">
              <el-input
                class="cell-input cell-title"
                v-model="item.specifications"
                placeholder="请输入规格"
              ></el-input>
            </el-col>
            <el-col :span="4">
              <el-input class="cell-input cell-title" v-model="item.purpose" placeholder="请输入用途"></el-input>
            </el-col>
            <el-col :span="4">
              <el-input
                class="cell-input cell-title"
                v-model="item.purchaseQuantity"
                placeholder="请输入数量"
                @change="sumAcount"
              ></el-input>
            </el-col>
            <el-col :span="4">
              <el-input
                class="cell-input cell-title"
                v-model="item.estimatedAmount"
                placeholder="请输入金额"
                @change="sumAcount"
              ></el-input>
            </el-col>
            <el-col :span="4">
              <el-input
                class="cell-input cell-title"
                v-model="item.inventoryOnHand"
                placeholder="请输入库存"
              ></el-input>
            </el-col>
          </div>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div class="cell-title cell-right">合计：</div>
          </el-col>
          <el-col :span="4">
            <el-input
              class="cell-input cell-title"
              v-model="bill.estimatedAmount"
              placeholder="合计金额"
              readonly
            ></el-input>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="5">
            <div class="cell-title cell-left cell-advise">总经理：</div>
          </el-col>
          <el-col :span="5">
            <div class="cell-title cell-left cell-advise">副总经理：</div>
          </el-col>
          <el-col :span="5">
            <div class="cell-title cell-left cell-advise">部门经理：</div>
          </el-col>
          <el-col :span="5">
            <div class="cell-title cell-left cell-advise">财务经理：</div>
          </el-col>
          <el-col :span="4">
            <div class="cell-title cell-left cell-advise">申请人：</div>
          </el-col>
        </el-row>
      </div>
    </div>

    <wf-viewer ref="wfviewer" v-show="wfViewerShow"></wf-viewer>

    <wf-back ref="wfback"></wf-back>
  </div>
</template>

<script>
// Import uuid
import { Guid } from "guid-typescript";
import https from "../https";
import WfViewer from "../components/WFViewer.vue";
import WfBack from "../components/WFBack.vue";
import { isNumber } from "util";

export default {
  components: {
    WfViewer,
    WfBack
  },
  data() {
    return {
      curLoginUser: {
        id: "08d75cfc-5923-9935-155a-2be26554bd60",
        name: "小强"
      },
      curTemplateWFId: "08d763ec-e4ae-91bc-5ff3-b68e613601e2",
      bill: {
        assetItem: [
          {
            id: Guid.EMPTY,
            billId: Guid.EMPTY,
            name: "",
            specifications: "",
            purpose: "",
            purchaseQuantity: undefined,
            estimatedAmount: undefined,
            inventoryOnHand: undefined
          }
        ],
        id: Guid.EMPTY,
        billName: "采购申请单",
        companyName: "上海魔铠信息科技有限公司",
        applicantId: Guid.EMPTY,
        applicantName: "",
        departmentId: Guid.EMPTY,
        departmentName: "",
        projectId: Guid.EMPTY,
        projectName: "",
        createTime: 0,
        estimatedAmount: undefined,
        count: 0,
        hadCount: 0,
        signatureOfFM: "",
        dataOfSFM: 0,
        signatureOfDP: "",
        dataOfSDP: 0,
        signatureOfVGM: "",
        dataOfSVGM: 0,
        signatureOfGM: "",
        dataOfSGM: 0
      },
      defaultBill: {
        assetItem: [
          {
            id: Guid.EMPTY,
            billId: Guid.EMPTY,
            name: "",
            specifications: "",
            purpose: "",
            purchaseQuantity: undefined,
            estimatedAmount: undefined,
            inventoryOnHand: undefined
          }
        ],
        id: Guid.EMPTY,
        billName: "采购申请单",
        companyName: "上海魔铠信息科技有限公司",
        applicantId: Guid.EMPTY,
        applicantName: "",
        departmentId: Guid.EMPTY,
        departmentName: "",
        projectId: Guid.EMPTY,
        projectName: "",
        createTime: 0,
        estimatedAmount: undefined,
        count: 0,
        hadCount: 0,
        signatureOfFM: "",
        dataOfSFM: 0,
        signatureOfDP: "",
        dataOfSDP: 0,
        signatureOfVGM: "",
        dataOfSVGM: 0,
        signatureOfGM: "",
        dataOfSGM: 0
      },
      bills: [],
      billState: "", //add,view,update
      curWF: null
    };
  },
  computed: {
    billTableShow() {
      return this.billState !== "";
    },
    wfViewerShow: () => {
      try {
        return !this.$refs.wfback.isShow;
      } catch (ex) {
        return true;
      }
    }
  },
  methods: {
    sumAcount(e) {
      console.log(e);
      this.bill.estimatedAmount = 0;
      this.bill.assetItem.forEach(element => {
        console.log(typeof element.estimatedAmount);
        if (element.estimatedAmount !== undefined) {
          try {
            let num = Number.parseFloat(element.estimatedAmount);
            this.bill.estimatedAmount += num;
          } catch (ex) {}
        }
      });
    },
    addItem() {
      this.bill.assetItem.push({
        id: Guid.EMPTY,
        billId: Guid.EMPTY,
        name: "",
        specifications: "",
        purpose: "",
        purchaseQuantity: undefined,
        estimatedAmount: undefined,
        inventoryOnHand: undefined
      });
    },
    createBill(e) {
      https
        .fetchGet("api/WFEngine/GetWFWhiteByTemplate", {
          id: this.curTemplateWFId
        })
        .then(data => {
          console.log(data);
          this.curWF = data.data;

          this.billState = "add";
          this.bill = this.defaultBill;
        })
        .catch(err => {
          console.log(err);
        });
    },
    getAllWaitSendBills(e) {
      let ss = <div></div>
      https
        .fetchGet("api/ITPurchase/GetWaitSendBills", {
          userId: this.curLoginUser.id
        })
        .then(data => {
          console.log(data);
          this.bills = data.data;
        })
        .catch(err => {
          console.log(err);
        });
    },
    getAllSentBills(e) {
      https
        .fetchGet("api/ITPurchase/GetSentBills", {
          userId: this.curLoginUser.id
        })
        .then(data => {
          console.log(data);
          this.bills = data.data;
        })
        .catch(err => {
          console.log(err);
        });
    },
    getAllFinishedBills(e) {
      https
        .fetchGet("api/ITPurchase/GetFinishedBills", {
          userId: this.curLoginUser.id
        })
        .then(data => {
          console.log(data);
          this.bills = data.data;
        })
        .catch(err => {
          console.log(err);
        });
    },
    btnSave(e) {
      if (this.billState === "add") {
        var para = {
          userId: this.curLoginUser.id,
          userName: this.curLoginUser.name,
          wFDefine: this.curWF,
          itPurchaseVM: this.bill
        };
        https
          .fetchPost("api/ITPurchase/CreateOrUpdate", para)
          .then(data => {
            console.log(data);
          })
          .catch(err => {
            console.log(err);
          });
      }
    },
    handleView(index, row) {
      this.billState = "view";
      this.bill = row.itPurchaseViewModel;
      var that = this;
      https
        .fetchGet("api/WFEngine/GetWFInstanceById", {
          id: row.wfInstanceId
        })
        .then(data => {
          console.log(data);
          that.curWF = data.data;

          //   this.dialogBillVisible = true;
          that.isAdd = true;
          that.curBill = that.billDefault;

          that.$refs.wfviewer.initWF(
            row.wfInstanceId,
            row.nodeInstanceId,
            row.itPurchaseViewModel
          );
        })
        .catch(err => {
          console.log(err);
        });
    },
    sendbill(index, row) {
      var paras = {
        wfInstanceId: row.wfInstanceId,
        nodeInstanceId: row.nodeInstanceId,
        bussinessInfo: row.itPurchaseViewModel,
        options: "请帮个忙啦",
        userName: "录入员A",
        userConfigs: []
      };
      https
        .fetchPost("api/WFEngine/Send", paras)
        .then(data => {
          console.log(data);
          this.curWF = data.data;

          this.isAdd = true;
          this.curBill = this.billDefault;
        })
        .catch(err => {
          console.log(err);
        });
    },
    backBill(index, row) {
      var that = this;
      https
        .fetchGet("api/WFEngine/GetWFInstanceById", {
          id: row.wfInstanceId
        })
        .then(data => {
          console.log(data);
          that.curWF = data.data;

          //   this.dialogBillVisible = true;
          // that.isAdd = true;
          that.curBill = that.billDefault;

          this.$refs.wfback.isShow = true;
          that.$refs.wfback.initWF(
            row.wfInstanceId,
            row.nodeInstanceId,
            row.itPurchaseViewModel,
            "退回",
            this.curLoginUser.name
          );
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>

<style  lang="css" scoped>
.top-layer {
  margin-top: 20px;
}
.tiltle {
  font-size: 20px;
}
.tiltle-layer {
  margin-bottom: 10px;
}
.cell-input >>> .el-input__inner {
  border: 1px solid lightgrey;

  height: 38px;

  border-radius: 0;
  border: 0px;
}
.cell-title {
  border: 1px solid lightgrey;

  margin-bottom: -1px;
  margin-right: -1px;
  height: 38px;
  display: flex;
  /*实现垂直居中*/
  align-items: center;
  /*实现水平居中*/
  justify-content: center;
}

.cell-left {
  align-items: flex-start;
  justify-content: left;
}
.cell-right {
  justify-content: flex-end;
}

.cell-advise {
  height: 100px;
}
</style>