<template>
  <div>
    <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-row>
    <el-row>
      <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-button @click="createBill">创建申请</el-button>
    <el-button @click="getAllWaitSendBills">获取用户所有待处理单据</el-button>
    <el-button @click="getAllSentBills">获取用户所有审批中单据</el-button>
    <el-button @click="getAllFinishedBills">获取用户所有已完结单据</el-button>
    <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.springTourApply.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="活动简述" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.springTourApply.name }}</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-dialog title="单据详情" :visible.sync="dialogBillVisible">
      <el-row>
        <el-col :span="6">
          <div>活动名称</div>
        </el-col>
        <el-col :span="6">
          <el-input v-model="curBill.name"></el-input>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <div>地点</div>
        </el-col>
        <el-col :span="6">
          <el-input v-model="curBill.area"></el-input>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <div>参与人数</div>
        </el-col>
        <el-col :span="6">
          <el-input v-model="curBill.participantNum"></el-input>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <div>申请经费</div>
        </el-col>
        <el-col :span="6">
          <el-input v-model="curBill.price"></el-input>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <div>开始时间</div>
        </el-col>
        <el-col :span="6">
          <el-input v-model="curBill.startTime"></el-input>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <div>持续</div>
        </el-col>
        <el-col :span="5">
          <el-input v-model="curBill.totalDay"></el-input>
        </el-col>
        <el-col :span="1">
          <div>天</div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <div>辅导员意见</div>
        </el-col>
        <el-col :span="6">
          <el-input v-model="curBill.counsellorOptions"></el-input>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <div>班主任意见</div>
        </el-col>
        <el-col :span="6">
          <el-input v-model="curBill.headTeacherOptions"></el-input>
        </el-col>
      </el-row>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogBillVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveBillEdit">确 定</el-button>
      </div>
    </el-dialog>

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

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

<script>
import https from "../https";
import WfViewer from "../components/WFViewer.vue";
import WfBack from "../components/WFBack.vue";

export default {
  components: {
    WfViewer,
    WfBack
  },
  data() {
    return {
      curLoginUser: {
        id: "",
        name: ""
      },
      curTemplateWFId: "",
      bills: [],
      curBill: {
        id: "00000000-0000-0000-0000-000000000000",
        name: "",
        area: "",
        price: 0,
        startTime: 0,
        totalDay: 0,
        participantNum: 0,
        createUserId: "00000000-0000-0000-0000-000000000000",
        createUserName: "",
        counsellorOptions: "",
        headTeacherOptions: ""
      },
      curWF: null,
      dialogBillVisible: false,
      isAdd: false, //是否为新增单据状态,
      billDefault: {
        id: "00000000-0000-0000-0000-000000000000",
        name: "",
        area: "",
        price: 0,
        startTime: 0,
        totalDay: 0,
        participantNum: 0,
        createUserId: "00000000-0000-0000-0000-000000000000",
        createUserName: "",
        counsellorOptions: "",
        headTeacherOptions: ""
      }
    };
  },
  computed: {
    wfViewerShow: () => {
      try {
        return !this.$refs.wfback.isShow;
      } catch (ex) {
        return true;
      }
    }
  },
  methods: {
    createBill(e) {
      https
        .fetchGet("api/WFEngine/GetWFWhiteByTemplate", {
          id: this.curTemplateWFId
        })
        .then(data => {
          console.log(data);
          this.curWF = data.data;

          this.dialogBillVisible = true;
          this.isAdd = true;
          this.curBill = this.billDefault;
        })
        .catch(err => {
          console.log(err);
        });
    },
    handleView(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;

          that.$refs.wfviewer.initWF(
            row.wfInstanceId,
            row.nodeInstanceId,
            row.springTourApply
          );
        })
        .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.springTourApply
          );
        })
        .catch(err => {
          console.log(err);
        });
    },
    sendbill(index, row) {
      var paras = {
        wfInstanceId: row.wfInstanceId,
        nodeInstanceId: row.nodeInstanceId,
        bussinessInfo: row.springTourApply,
        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);
        });
    },

    getAllWaitSendBills(e) {
      https
        .fetchGet("api/SpringTourApply/GetWaitSendBills", {
          userId: this.curLoginUser.id
        })
        .then(data => {
          console.log(data);
          this.bills = data.data;
        })
        .catch(err => {
          console.log(err);
        });
    },
    getAllSentBills(e) {
      https
        .fetchGet("api/SpringTourApply/GetSentBills", {
          userId: this.curLoginUser.id
        })
        .then(data => {
          console.log(data);
          this.bills = data.data;
        })
        .catch(err => {
          console.log(err);
        });
    },
    getAllFinishedBills(e) {
      https
        .fetchGet("api/SpringTourApply/GetFinishedBills", {
          userId: this.curLoginUser.id
        })
        .then(data => {
          console.log(data);
          this.bills = data.data;
        })
        .catch(err => {
          console.log(err);
        });
    },
    saveBillEdit(e) {
      if (this.isAdd === true) {
        var para = {
          userId: this.curLoginUser.id,
          userName: this.curLoginUser.name,
          wFDefine: this.curWF,
          springTourApply: this.curBill
        };
        https
          .fetchPost("api/SpringTourApply", para)
          .then(data => {
            console.log(data);
          })
          .catch(err => {
            console.log(err);
          });
      }
    }
  }
};
</script>