<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" @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">
          <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-date-picker v-model="form.billType" class="wd100" type="daterange" size="small" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="项目名称" prop="billType">
                <el-input v-model="form.billType" placeholder="请输入" type="text" size="small" :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" placeholder="请输入" size="small" :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" placeholder="请输入" size="small" :rows="5" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="类型" prop="billType">
                <el-select v-model="form.billType" class="wd100" size="small">
                  <option label="已完成" value="1"></option>
                  <option label="未完成" value="1"></option>
                </el-select>
              </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" placeholder="请输入" size="small" :rows="5" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="合同金额" prop="billType">
                <el-input-number :controls="false" placeholder="请输入" class="wd100 align-left" v-model="form.billType" type="text" size="small" :rows="5" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="是否收票" prop="radios">
                <el-radio-group v-model="form.radios">
                  <el-radio :label="1">是</el-radio>
                  <el-radio :label="0">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row></el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="合同状态" prop="billType">
                <el-select v-model="form.billType" class="wd100" size="small">
                  <option label="已完成" value="1"></option>
                  <option label="未完成" value="1"></option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="经办人联系方式" prop="billType">
                <el-input v-model="form.billType" placeholder="请输入" type="text" size="small" :rows="5" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="已收金额" prop="billType">
                <el-input-number :controls="false" placeholder="请输入" class="wd100 align-left" v-model="form.billType" type="text" size="small" :rows="5" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="8">
            </el-col>
            <el-col :span="8">
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="交易内容" prop="startTime">
                <el-input v-model="form.remark" type="textarea" size="small" :rows="5" placeholder="请输入内容" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="其他" prop="month">
                <el-input v-model="form.remark" type="textarea" :rows="5" placeholder="请输入内容" />
              </el-form-item>
            </el-col>
            <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">
                    <el-button class="btn" size="small"><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-table stripe border :data="oaReimburseFeeitemList" ref="oaReimburseFeeitem">
                  <el-table-column label="序号" align="center" prop="index" width="50" />
                  <el-table-column label="预计付款时间" align="center" prop="endCity" />
                  <el-table-column label="比例" align="center" prop="endCity" />
                  <el-table-column label="实付金额" align="center" prop="endCity" />
                </el-table>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="审批流程">
                <el-table stripe 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-row>
                  <table border="1px" class="table-write">
                    <tr v-for="(item,index) in demoList" :key="index">
                      <td>{{item.name1}}</td>
                      <td>{{item.name2}}</td>
                      <td>{{item.name3}}</td>
                      <td>{{item.name4}}</td>
                    </tr>
                  </table>
                </el-row> -->
              </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>
    <!-- 打印信息 -->
    <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='form' :dialogTitle="'供应商合同审批单'" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { addSrTbApi, editSrTbApi, srTbDetailMsgApi } from '@/api/procurement/supplierTb'
import { debounce } from 'lodash'
export default {
  name: 'supplierTb',
  components: {
    FlowInfo: () => import('@/views/oa/flow/flowInfo'),
    printHtml: () => import('./components/printHtml'),
  },
  created() {
    console.log('路由得信息..', this.$route);
  },
  computed: {
    isShow() {
      return this.$route.path === '/supplierTb/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,
      demoList: [
        { name1: '申请人：赵复临', name2: '所属部门：信息中表现', name3: '审批意见：同意', name4: '审批时间：2023/07/25' },
        { name1: '经办人：赵复临', name2: '所属部门：信息中表现', name3: '审批意见：同意', name4: '审批时间：2023/07/25' },
        { name1: '经办人：赵复临', name2: '所属部门：信息中表现', name3: '审批意见：同意', name4: '审批时间：2023/07/25' },
      ],
      activityList: [],
      // 审批记录
      tasksLoad: true,
      tasks: [],
      processInstance: {},
      // 流程表单详情
      detailForm: {
        fields: []
      },
      // BPMN 数据
      bpmnXML: null,
      bpmnControlForm: {
        prefix: "flowable"
      },
      // 报销费用明细表格数据
      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
    },
    handleSave() {
      // this.$nextTick(() => {
      //   this.$refs.form.validate((bool) => {
      //     if (bool) {
      //       this.$sm('保存成功！')
      //     }
      //   })
      // })
      this.$router.push('/procurement/supplierCt')
    },
    handlePrint() {
      this.showPrintPage = true
    },
  }
}
</script>
<style lang="scss" scoped>
@import '@/assets/styles/form/index.scss';
.my-process-designer {
  background: #fff !important;
}
</style>