<template>
  <div class="app-container">
    <el-form ref="form" :model="form" :rules="rules" label-width="130px" border>
      <table width="100%" border="1">
        <tr>
          <td colspan="2"><p class="title">发文处理</p></td>
        </tr>
        <tr>
          <td>
            <el-form-item label="缓急" prop="ponderance">
              <el-select v-model="form.ponderance" placeholder="请选择">
                <el-option label="一般" value="4"></el-option>
                <el-option label="平急" value="3"></el-option>
                <el-option label="加急" value="2"></el-option>
                <el-option label="特急" value="1"></el-option>
                <el-option label="特提" value="0"></el-option>
              </el-select>
            </el-form-item>
          </td>
          <td>
            <el-form-item label="密级" prop="securityClass">
              <el-select v-model="form.securityClass" placeholder="请选择">
                <el-option label="一般" value="3"></el-option>
                <el-option label="秘密" value="2"></el-option>
                <el-option label="机密" value="1"></el-option>
                <el-option label="绝密" value="0"></el-option>
              </el-select>
            </el-form-item>
          </td>
        </tr>

        <tr>
          <td colspan="2">
            <el-form-item label="标题：" prop="fwtitle">
              <el-input v-model="form.fwtitle" type="text" placeholder=""/>
            </el-form-item>
          </td>
        </tr>
        <tr>
        <td colspan="2">
          <el-form-item label="发文字号：" prop="fwtitle">
            <el-input v-model="form.referenceNumber" type="text" placeholder=""/>
          </el-form-item>
        </td>
      </tr>
       <!-- <tr>
          <td colspan="2">
            <el-form-item label="部门：" prop="fwdept">
              &lt;!&ndash;              <el-input v-model="form.fwdept"  type="text" placeholder=""/>&ndash;&gt;
              <el-input title="选择发文部门" v-model="form.fwdept" placeholder="请选择发文部门" prop="avtiveSend" :disabled="true">

              </el-input>
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td colspan="2">
            <el-form-item label="主送：" :disabled="true" prop="avtiveSend">
              <el-input v-model="form.avtiveSend" placeholder="请选择主送人" :disabled="true">

              </el-input>
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td colspan="2">
            <el-form-item label=" 抄送：" :disabled="true" prop="copyTo">
              <el-input v-model="form.copyTo" placeholder="请选择抄送人" :disabled="true">

              </el-input>
            </el-form-item>
          </td>
        </tr>-->
        <tr>
          <td colspan="2">
            <el-form-item label="附件：" prop="accessory">
              <el-upload
                accept=".jpg, .png"
                multiple
                :on-preview="handlePreview"
                :action="upload.url"
                :headers="upload.headers"
                :file-list="upload.fileList"
                :auto-upload="false">
                <!--                <div slot="tip" class="el-upload__tip">只能上传文件，且不超过500kb</div>-->
              </el-upload>
              <ul v-show="!!upload.fileList.length" class="old-file-list"></ul>
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td colspan="2">
            <el-form-item label="正文：" prop="content">
              <el-button size="small" type="primary" @click="openIweboffice">读取正文</el-button>
<!--              <el-button size="small" type="primary" @click="closeoffice">bbbb</el-button>-->
            </el-form-item>
          </td>
        </tr>
        <tr v-show="false">
          <td>
            <el-form-item label="actkey：" prop="mailTheme">
              <el-input v-model="form.actkey" type="textarea" placeholder=""/>
            </el-form-item>
          </td>
        </tr>
        <tr v-if="postForm.SelectUserType!=null&&postForm.SelectUserType.includes('custom')">
          <td colspan="2">
            <el-form-item label="选择下一步处理人：" :disabled="true">
              <el-input v-model="postForm.sendUserRealName" placeholder=" 请选择下一步处理人"
                        :disabled="true">
                <template slot="append">
                  <el-button
                    type="primary"
                    icon="el-icon-plus"
                    size="mini"
                    @click="handleSelect()">
                    选择人员
                  </el-button>
                </template>
              </el-input>
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td>
            <el-form-item label="处理意见" prop="">
              <el-select v-model="proccessButton" placeholder="请选择">
                <el-option label="同意" value="agree_"></el-option>
                <el-option label="拒绝" value="disagree_"></el-option>
                <el-option v-if="fkbuttonpopu[0].check" label="驳回" value="reject_"></el-option>
                <el-option v-if="fkbuttonpopu[1].check" label="结束" value="finish_"></el-option>
              </el-select>
            </el-form-item>
          </td>
          <td>
            <el-form-item label="选择节点" v-if="proccessButton==='reject_'">
              <el-select v-model="oldFlowNodeSelect" placeholder="请选择">
                <el-option v-for="item in oldFlowNodes" :key="item.flowid" :label="item.flowname+' - '+item.username"
                           :value="item.flowid"></el-option>
              </el-select>
            </el-form-item>
          </td>
        </tr>
      </table>

    </el-form>
    <div slot="footer" class="dialog-footer" v-show="open3">
      <el-button type="primary" @click="submitForm(1)">提交</el-button>
      <!--      <el-button type="primary" @click="submitForm(0)">保存草稿</el-button>-->
      <el-button @click="cancel">取 消</el-button>
    </div>
    <div slot="footer" class="dialog-footer" v-show="open4">
      <!--      <el-button type="primary" @click="submitToDo()">同意</el-button>-->
      <!--      <el-button type="primary" @click="deleteToDo()">拒绝</el-button>-->
      <el-button type="primary" @click="submitFw()">提交</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
    <el-dialog id="content" title="正文修改" :visible.sync="contentOpen"
               :before-close="cancel1" append-to-body
               width="80%"
               top="10" height="900px">
      <!-- 动态引入组件-->
      <i-web-office   :key="timer" @func="getcontent" :fileData="fileData"></i-web-office>
      <span slot="footer" class="dialog-footer">
        <el-button @click="contentOpen = false">取 消</el-button>
      </span>
    </el-dialog>

    <select-user-by-dept ref="selectUserByDept" :title="title" :open="Renopen"
                         :inputName="postForm.sendUserRealName"
                         :inputAccount="postForm.sendUser"
                         @ok="selectOK"/>

  </div>
</template>

<script>
  import SelectUserByDept from '@/components/SelectRen/selectUserByDept'
  import iWebOffice from './iWebOffice'
  import SelectRen from '@/components/SelectRen'
  import { getFormData, submitApply,deleteToDoItem, submitToDoItem, updateInfo, rejectToDoItem } from '@/api/activiti/form/fw'
  import Treeselect from '@riophae/vue-treeselect'
  import { getToken } from '@/utils/auth'

  export default {

    components: {
      SelectUserByDept, iWebOffice, SelectRen,
      Treeselect
    },

    props: {
      data: '',
      actOpen: false
    },
    data() {
      return {
        Renopen: false,
        contentOpen: false,
        //正文的文件地址
        fileData: {
          filePath: '/profile/doc/NewCreate.doc',
          user: 'xxx'
        },
        // 弹出层标题
        title: '',
        //子组件每次打开刷新
        timer: '',
        // 是否显示弹出层
        open: false,
        // 表单参数
        form: {
          fwtitle: '',
          actkey: '',
          content: '',
          fwdept: '',
          ponderance: '',
          securityClass: '',
          referenceNumber:'',
          copyTo: '',
          accessory: '',
          avtiveSend: ''
        },  // 表单参数
        postForm: {
          SelectUserType: '',
          sendUserRealName: '',
          sendUser: ''
        },
        // 表单校验
        rules: {
          fwtitle: [
            { required: true, message: '标题题不能为空', trigger: 'blur' }
          ],
          referenceNumber: [
            { required: true, message: "发文字号不能为空", trigger: "blur" }
          ],
         /* fwdept: [
            { required: true, message: '请选择发文部门', trigger: 'blur' }
          ],
          copyTo: [
            { required: true, message: '请选择抄送部门', trigger: 'blur' }
          ],
          avtiveSend: [
            { required: true, message: '请选择主送部门', trigger: 'blur' }
          ],*/
          ponderance: [
            { required: true, message: '请选择缓急程度', trigger: 'blur' }
          ],
          securityClass: [
            { required: true, message: '请选择密级等级', trigger: 'blur' }
          ]
        },
        flg: '',
        // 判断是否为提交,还是添加
        open3: false,
        open4: false,
        openSelectUser: false,
        // 部门
        deptOpen: false,
        // 部门树选项
        deptOptions: [],
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        // 部门id
        depid: [],
        depname: [],
        // 上传参数
        upload: {
          // 是否禁用上传
          isUploading: false,
          // 设置上传的请求头部
          headers: { Authorization: 'Bearer ' + getToken() },
          // 上传的地址
          url: process.env.VUE_APP_BASE_API + '/common/upload',
          // 上传的文件列表
          fileList: []
        },
        //页面按钮
        fkbuttonpopu: [],
        proccessButton: 'agree_',
        oldFlowNodes: [],
        oldFlowNodeSelect: undefined
      }
    },
    created() {
      //flg 为流程状态, 1:打开代办中的流程, eles  为查看流程详情
      this.flg = this.data.flg
      this.form.actkey = this.data.getactkey

      if (this.flg ==undefined) {
        this.open3 = true;
      }
      else if (this.flg == '1') {
        this.form = this.data
        this.getDetails()
        this.open4 = true
      } else {
        this.form = this.data
        this.getDetails()
      }
    },
    methods: {

      /** 写 选择人员 按钮弹窗操作 */
      /*  handleSelect(type) {
          this.deptOpen = true;
          if (type == 0) {
            this.title = "主送部门";
          } else {
            this.title = "抄送部门";
          }

        }, /!** 写 选择人员 按钮弹窗操作 *!/
        handleSelectDept() {
          this.deptOpen = true;
          this.title = "发文部门";
        },*/
      submitFw() {
        switch (this.proccessButton) {
          case 'agree_':
            this.submitToDo()
            break
          case 'disagree_':
            this.deleteToDo()
            break
          case 'reject_':
            this.rejectToDo()
            break
          case  'finish_':
        }
      },
      handleSelect() {
        this.$refs.selectUserByDept.childOpen = true
        this.Renopen = true
      },
      cancel1(){
        this.contentOpen = false;
      },
      // 取消按钮
      cancel() {
        this.$emit('getList')
        this.open = false
        this.reset()
      },
      cancelDept() {
        this.deptOpen = false
      },
      selectOK(zh, xm) {
        this.postForm.sendUser = zh
        this.postForm.sendUserRealName = xm
        this.Renopen = false
      },
      //返回正文
      getcontent(data) {
        this.contentOpen = false
        this.form.content = data
        this.fileData.filePath = data
      },

      //获取详细信息，修改用到
      getDetails() {

        getFormData(this.form.formId).then(response => {
          this.form = response.data
          this.fileData.filePath = this.form.content == '' ? '/profile/doc/NewCreate.doc' : this.form.content
          this.fileData.user = this.form.user
          var files = response.data.accessory.split(',')
          if (response.data.accessory!="") {
            for (var i = 0; i < files.length; i++) {
              var fiellist = {
                'name': files[i].substring(files[i].lastIndexOf('/') + 1, files[i].length),
                'url': process.env.VUE_APP_BASE_API + files[i]
              }
              this.upload.fileList.push(fiellist)
            }
          }
          //下一节点用户选择规则
          this.postForm.SelectUserType = response.data.SelectUserType
          //获取页面按钮
          this.fkbuttonpopu = JSON.parse(response.data.fkbuttonpopu)
          //获取历史节点
          this.oldFlowNodes = JSON.parse(response.data.oldFlowNodes)

        })
      },
      handlePreview(file) {
        // 预览,一些文件因为格式问题无法预览。推荐使用a标签，src为文件的下载地址，点击即可下载,参照录音
        window.open(file.url);
      },
      //打开weboffice 页面添加正文
      openIweboffice() {
        this.timer = new Date().getTime()
        this.contentOpen = true
      },
      //同意
      submitToDo() {
        //有问题，应该单独传参
        var tempForm = {
          content: this.form.content,
          id: this.form.id
        }
        updateInfo(tempForm).then(response => {
          if (response.code == 200) {
            submitToDoItem(this.form.taskid, this.postForm).then(response1 => {
              this.msgSuccess('提交成功')
              console.log(response1.code)
              this.$emit('getList')
            })
          }
        })
      },
      /** 提交按钮 */
      submitForm: function (flg) {
        this.$refs["form"].validate(valid => {
          this.$set(this.form, "sendFlg", flg)
          if (valid) {
            if (this.form.id != undefined) {
              updateInfo(this.form).then(response => {
                if (response.code === 200) {
                  this.msgSuccess("修改成功");
                  // this.getList();
                }
              });
            } else {
              submitApply(this.form).then(response => {
                console.log(response.code)
                if (response.code === 200) {
                  console.log(response.code)
                  this.msgSuccess("提交成功");
                  // this.open = false;
                  this.$emit('transferUser', this.open)
                }
              });
            }
          }
        });
      },
      //拒绝按钮
      deleteToDo() {
        this.$confirm('是否确认拒绝这这个申请吗?', '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteToDoItem(this.form.taskid).then(response => {
            this.msgSuccess('拒绝成功')
            this.$emit('getList')
          })

        }).catch(() => {
        })
      },
      //驳回
      rejectToDo() {
        //有问题，应该单独传参
        var tempForm = {
          content: this.form.content,
          id: this.form.id
        }
        updateInfo(tempForm).then(response => {
          if (response.code == 200) {
            tempForm = {
              taskId: this.form.taskid,
              targetFlowId: this.oldFlowNodeSelect
            }
            rejectToDoItem(tempForm).then(response1 => {
              this.msgSuccess('驳回成功')
              console.log(response1.code)
              this.$emit('getList')
            })
          }
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .apple {
    width: 150px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .title {
    font-size: 30px;
    text-align: center;
    margin-top: 30px;
  }

  .bottom10 {
    margin-bottom: 20px;
  }

  .el-dialog__title {
    text-align: center;
    font-weight: bold;
  }

  table {
    border-collapse: collapse;
  }

  .el-form-item {
    margin-bottom: 10px !important;
    margin-top: 10px;
  }

  .dialog-footer {
    text-align: center;
    margin-top: 20px;
  }
</style>
