<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"> {{isShow ? '付款申请' : '付款申请审批单'}} </el-col>
            <el-col :span="8" style="text-align: right;padding-right: 20px;">
              <el-button type="primary" icon="el-icon-printer" size="mini" v-if="!isShow" @click="handlePrint">打印预览</el-button>
              <el-button type="primary" plain icon="el-icon-check" size="mini" v-if="!isShow" @click="handleSave">提交审批</el-button>
              <!-- <el-button type="primary" plain icon="el-icon-check" size="mini" @click="commitTask()">同意</el-button>
          <el-button type="warning" plain icon="el-icon-close" size="mini" @click="reject()">驳回</el-button> -->
            </el-col>
          </el-row>
        </div>
        <div class="table-card table-card-content" v-if="!isShow">
          <el-row>
            <el-col :span="8">
              <el-form-item label="申请编号" prop="billType">
                <el-input v-model="form.billType" type="text" size="small" placeholder="请输入" :rows="5" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="合同名称" prop="billType">
                <el-input v-model="form.billType" type="text" size="small" placeholder="请输入" :rows="5" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="">
                <!-- <el-input v-model="form.billType" type="text" :rows="5" /> -->
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="合同编号" prop="billType">
                <el-input v-model="form.billType" type="text" size="small" placeholder="请输入" :rows="5" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="供应商名称" prop="billType">
                <el-input v-model="form.billType" type="text" size="small" placeholder="请输入" :rows="5" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="付款金额" prop="billType">
                <el-input-number size="small" :controls="false" class="wd100 align-left" v-model="form.total" placeholder="请输入"></el-input-number>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="8">
              <el-form-item label="付款比例" prop="billType">
                <el-input v-model="form.billType" type="text" size="small" placeholder="请输入" :rows="5" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="申请人" prop="billType">
                <el-input v-model="form.billType" type="text" size="small" placeholder="请输入" :rows="5" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="申请时间" prop="billType">
                <el-date-picker v-model="form.billType" style="width:100%" size="small" type="date" placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item label="附件">
                <div class="flex-div uploaditem">
                  <el-tooltip class="item" effect="dark" :content="tag.name" placement="top-start" v-for="(tag,index) in fileList" :key="index">
                    <el-tag style="margin-right:10px;" :disable-transitions="false" @close="handleClose(index)" closable @click="downloadFile(tag)"><i class="el-icon-paperclip"></i><span class="tagtext">{{tag.name}}</span></el-tag>
                  </el-tooltip>
                  <el-upload class="upload-demo" action :http-request="uploadFile" :show-file-list="false" :headers="headers">
                    <!-- action="/api/file/fileUpload" -->
                    <el-button size="small" class="btn"><i class="el-icon-paperclip"></i>上传附件</el-button>
                  </el-upload>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="">
                <el-button size="small" icon="el-icon-folder-add" @click="handleGetPlan">获取付款计划</el-button>
              </el-form-item>
            </el-col>
            <el-col :span="24" v-if="selectArr.length">
              <el-form-item label="付款计划" prop="billType">
                <el-table border :data="selectArr" ref="oaReimburseFeeitem">
                  <el-table-column label="合同编号" align="center" prop="name" />
                  <el-table-column label="比例" align="center" prop="name" />
                  <el-table-column label="预计付款时间" align="center" prop="name" />
                  <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                      <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row.id)">删除
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <!-- 付款申请查看 -->
        <div class="table-card table-card-content" v-else>
          <el-row>
            <el-col :span="8">
              <el-form-item label="合同编号" prop="billType">
                <el-input v-model="form.billType" type="text" size="small" placeholder="请输入" :rows="5" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="合同名称" prop="billType">
                <el-input v-model="form.billType" type="text" size="small" placeholder="请输入" :rows="5" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="审批状态">
                <el-input v-model="form.billType" type="text" :rows="5" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="项目名称" prop="billType">
                <el-input v-model="form.billType" type="text" size="small" placeholder="请输入" :rows="5" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="供应商名称" prop="billType">
                <el-input v-model="form.billType" type="text" size="small" placeholder="请输入" :rows="5" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="合同总金额" prop="billType">
                <el-input-number size="small" :controls="false" class="wd100 align-left" v-model="form.total" placeholder="请输入"></el-input-number>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="8">
              <el-form-item label="付款确认时间" prop="billType">
                <el-input v-model="form.billType" type="text" size="small" placeholder="请输入" :rows="5" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="付款金额" prop="billType">
                <el-input v-model="form.billType" type="text" size="small" placeholder="请输入" :rows="5" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="付款状态" prop="billType">
                <el-date-picker v-model="form.billType" style="width:100%" size="small" type="date" placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="确认人" prop="billType">
                <el-input v-model="form.billType" type="text" size="small" placeholder="请输入" :rows="5" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
            </el-col>
            <el-col :span="8">
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item label="审批流程">
                <el-table border :data="oaReimburseFeeitemList" ref="oaReimburseFeeitem">
                  <el-table-column label="申请人" align="center" prop="index" />
                  <el-table-column label="所属部门" align="center" prop="index" />
                  <el-table-column label="审批意见" align="center" prop="index" />
                  <el-table-column label="审批时间" align="center" prop="billDate">
                  </el-table-column>
                </el-table>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="流程图">
                <!-- 高亮流程图 -->
                <div slot="header" class="clearfix">
                  <span class="el-icon-picture-outline">流程图 </span>
                </div>
                <my-process-viewer key="designer" v-model="bpmnXML" v-bind="bpmnControlForm" :activityData="activityList" :processInstanceData="processInstance" :taskData="tasks" />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-card>

    </el-form>

    <el-dialog title="流程信息" :visible.sync="showFlowInfo" width="1200px" append-to-body>
      <FlowInfo :businessId="form.id+''" :billType="form.billType" v-if="showFlowInfo"></FlowInfo>
    </el-dialog>
    <!-- 付款计划弹窗 -->
    <PayPlanDialog :isOpen="payPlanDialogShow" @onConfirm="handleConfirm" :propSelectArr="selectArr" @onCancel="payPlanDialogShow=false" />
    <!-- 打印信息 -->
    <el-dialog :visible.sync="showPrintPage" width='1200px' custom-class="print-dialog" style="height: 98vh;overflow-y: auto;">
      <div style="text-align: right;margin-bottom:10px;">
        <el-button @click="PrintRow" type='primary' size='mini' plain>确认打印</el-button>
      </div>
      <div id="printMe" ref="print" class="print-main">
        <print-html :infoForm='staffRecordData' :personInfo='personInfo' :dialogTitle="'付款申请审批单'" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { debounce } from 'lodash'
export default {
  name: 'payApplyForm',
  components: {
    FlowInfo: () => import('@/views/oa/flow/flowInfo'),
    printHtml: () => import('./components/printHtml'),
    PayPlanDialog: () => import('./components/payPlanDialog')
  },
  computed: {
    isShow() {
      console.log('this.$route.fullPath', this.$route.fullPath, this.$route);
      return this.$route.path === '/payApply/show'
    },
  },
  data() {
    return {
      //上传后的文件列表
      fileList: [],
      // 允许的文件类型
      fileType: ["pdf", "doc", "docx", "xls", "xlsx", "txt", "png", "jpg", "bmp", "jpeg"],
      // 运行上传文件大小，单位 M
      fileSize: 50,
      // 附件数量限制
      fileLimit: 5,
      //请求头
      headers: { "Content-Type": "multipart/form-data" },
      personInfo: {}, //个人信息
      staffRecordData: {
        shells: [],
        resign: {},
        jobs: [],
        salary: {},
        insurances: {},
        contracts: []
      }, //员工档案
      showPrintPage: false,
      selectArr: [],
      fileList: [],
      payPlanDialogShow: false,
      planList: [],
      activityList: [],
      // 审批记录
      tasksLoad: true,
      tasks: [],
      processInstance: {},
      // 流程表单详情
      detailForm: {
        fields: []
      },
      // BPMN 数据
      bpmnXML: null,
      bpmnControlForm: {
        prefix: "flowable"
      },
      isOpen: false,
      // 报销费用明细表格数据
      oaReimburseFeeitemList: [],
      // 子表选中数据
      checkedoaReimburseFeeitem: [],
      // 表单参数
      form: {
        totalAmt: 0,
        billAmt: 0,
        subsidyAmt: 0
      },
      showFlowInfo: false,
      taskId: '',
      // billType:'',
      readonly: false,
      // 表单校验
      rules: {
        month: [
          { required: true, message: "月度不能为空", trigger: "blur" }
        ],
        city: [
          { required: true, message: "出差地点不能为空", trigger: "blur" }
        ],
        startTime: [
          { required: true, message: "开始时间不能为空", trigger: "blur" }
        ],
        endTime: [
          { required: true, message: "结束时间不能为空", trigger: "blur" }
        ],
        billCount: [
          { required: true, message: "票据总数不能为空", trigger: "blur" }
        ]
      },
      showCommitDialog: false,
      commitType: ""

    }
  },
  methods: {
    //上传文件之前
    beforeUpload(file) {
      if (file.type != "" || file.type != null || file.type != undefined) {
        //截取文件的后缀，判断文件类型
        const FileExt = file.name.replace(/.+\./, "").toLowerCase();
        //计算文件的大小
        const isLt5M = file.size / 1024 / 1024 < 50; //这里做文件大小限制
        //如果大于50M
        if (!isLt5M) {
          this.$fm('上传文件大小不能超过 50MB!');
          return false;
        }
        //如果文件类型不在允许上传的范围内
        if (this.fileType.includes(FileExt)) {
          return true;
        }
        else {
          this.$fm('上传文件格式不正确!');
          return false;
        }
      }
    },
    //上传了的文件给移除的事件，由于我没有用到默认的展示，所以没有用到
    handleRemove() {
    },
    //这是我自定义的移除事件
    handleClose(i) {
      this.fileList.splice(i, 1);//删除上传的文件
      if (this.fileList.length == 0) {//如果删完了
        this.fileflag = true;//显示url必填的标识
        // this.$set(this.demoObj.url, 0, { required: true, validator: this.validatorUrl, trigger: 'blur' })//然后动态的添加本地方法的校验规则
      }
    },
    //超出文件个数的回调
    handleExceed() {
      this.$message({
        type: 'warning',
        message: '超出最大上传文件数量的限制！'
      }); return
    },
    //上传文件的事件
    uploadFile(item) {
      //上传文件的需要formdata类型;所以要转
      // let FormDatas = new FormData()
      // FormDatas.append('file', item.file);
      // this.$axios({
      //   method: 'post',
      //   url: '/file/fileUpload',
      //   headers: this.headers,
      //   timeout: 30000,
      //   data: FormDatas
      // }).then(res => {
      //   if (res.data.id != '' || res.data.id != null) {
      //     //this.handleSuccess();
      //   }
      // })
      this.fileList.push(item.file);//成功过后手动将文件添加到展示列表里
      let i = this.fileList.indexOf(item.file)
      // this.fileList[i].id = res.data.id;//id也添加进去，最后整个大表单提交的时候需要的
      if (this.fileList.length > 0) {//如果上传了附件就把校验规则给干掉
        this.fileflag = false;
        // this.$set(this.demoObj.url, 0, '')
      }
    },
    //上传成功后的回调
    handleSuccess() {

    },
    PrintRow: debounce(function () { //确认打印档案
      this.$print(this.$refs.print)
    }, 200),
    showFlowInfoDialog() {
      this.showFlowInfo = true
    },
    handleDelete(id) {
      this.selectArr = this.selectArr.filter(item => item.id !== id) || []
    },
    handleConfirm(arr) {
      this.selectArr = arr
      this.payPlanDialogShow = false
    },
    handleGetPlan() {
      this.payPlanDialogShow = true
    },
    handleChange(file, fileList) {
      this.fileList = fileList.slice(-3);
    },
    showFlowInfoDialog() {
      this.showFlowInfo = true
    },
    handleSave() {
      // this.$nextTick(() => {
      //   this.$refs.form.validate((bool) => {
      //     if (bool) {
      //       this.$sm('保存成功！')
      //     }
      //   })
      // })
      this.$router.push({ path: "/procurement/payApply" });
      // /procurement/payApply
    },
    handleGetPayPlan() {

    },
    handleSubmit() {

    },
    handlePrint() {
      this.showPrintPage = true
    },
  }
}
</script>
<style lang="scss" scoped>
@import '@/assets/styles/form/index.scss';
.form-box {
  background-color: #f4f4f6;
  min-height: 100vh;
  .my-process-designer {
    background: #fff !important;
  }
}
</style>