<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="senderName">
              <el-select v-model="form.officeNumber" placeholder="请选择">
                <el-option label="001" value=""></el-option>
                <el-option label="002" value=""></el-option>
              </el-select>
            </el-form-item>
          </td>
          <td>
            <el-form-item label="文号" prop="number">
            <el-input v-model="form.number" placeholder="请输入发件人-账号" />
          </el-form-item>
          </td>
        </tr>-->
        <tr>
          <td>
            <el-form-item label="缓急" prop="urgency">
              <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="encryption">
              <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="fwdept">
              <el-input v-model="form.fwdept"  type="text" placeholder=""/>
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td colspan="2">
            <el-form-item label="主送：" :disabled="true" prop="avtiveSend">
              <el-input placeholder="请选择" :disabled="true">
                <el-button slot="append">选择</el-button>
              </el-input>
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td colspan="2">
            <el-form-item label=" 抄送：" :disabled="true" prop="copyTo">
              <el-input placeholder="请选择" :disabled="true">
                <el-button slot="append">选择</el-button>
              </el-input>
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td colspan="2">
            <el-form-item label="上传附件：" prop="accessory">
              <el-upload
                class="upload-demo"
                action="https://jsonplaceholder.typicode.com/posts/"

                :file-list="fileList3">
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传文件，且不超过500kb</div>
              </el-upload>
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td colspan="2">
            <el-form-item label="正文：" prop="content">
              <el-upload
                class="upload-demo"
                action="https://jsonplaceholder.typicode.com/posts/"
                :file-list="fileList3">
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传文件，且不超过500kb</div>
              </el-upload>
            </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>
      </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 @click="cancel">取 消</el-button>
    </div>

  </div>
</template>

<script>
  import SelectUserByDept from "@/components/SelectRen/selectUserByDept";
  import {submitApply,getFormData,deleteToDoItem,submitToDoItem } from "@/api/activiti/form/fw";
  export default {

    components: {SelectUserByDept},
    props:{
      data:'',
      actOpen:false,
    },
    data() {
      return {
        receiverName: "",
        receiverAccount: "",
        options: [{//部门选择级别
          label: '一级',
          children: [{
            label: '2-1',
            children: [{
              label: '3-1'
            }, {
              label: '3-2'
            }, {
              label: '3-3'
            }]
          },
            {
              value: 'daohang',
              label: '2-2',
              children: [{
                label: '3-1'
              }, {
                label: '3-2'
              }]
            }]
        },
          {
            label: '一级2',
            children: [{
              label: '22-1',
              children: [{
                label: '33-1'
              }, {
                label: '33-2'
              }, {
                label: '33-3'
              }, {
                label: '33-4utton'
              }]
            },
              {
                value: 'form',
                label: 'Form',
                children: [{
                  value: 'radio',
                  label: 'Radio 单选框'
                }, {
                  value: 'checkbox',
                  label: 'Checkbox 多选框'
                }, {
                  value: 'input',
                  label: 'Input 输入框'
                }, {
                  value: 'input-number',
                  label: 'InputNumber 计数器'
                }, {
                  value: 'select',
                  label: 'Select 选择器'
                }, {
                  value: 'cascader',
                  label: 'Cascader 级联选择器'
                }, {
                  value: 'switch',
                  label: 'Switch 开关'
                }, {
                  value: 'slider',
                  label: 'Slider 滑块'
                }, {
                  value: 'time-picker',
                  label: 'TimePicker 时间选择器'
                }, {
                  value: 'date-picker',
                  label: 'DatePicker 日期选择器'
                }, {
                  value: 'datetime-picker',
                  label: 'DateTimePicker 日期时间选择器'
                }, {
                  value: 'upload',
                  label: 'Upload 上传'
                }, {
                  value: 'rate',
                  label: 'Rate 评分'
                }, {
                  value: 'form',
                  label: 'Form 表单'
                }]
              }, {
                value: 'data',
                label: 'Data',
                children: [{
                  value: 'table',
                  label: 'Table 表格'
                }, {
                  value: 'tag',
                  label: 'Tag 标签'
                }, {
                  value: 'progress',
                  label: 'Progress 进度条'
                }, {
                  value: 'tree',
                  label: 'Tree 树形控件'
                }, {
                  value: 'pagination',
                  label: 'Pagination 分页'
                }, {
                  value: 'badge',
                  label: 'Badge 标记'
                }]
              }, {
                value: 'notice',
                label: 'Notice',
                children: [{
                  value: 'alert',
                  label: 'Alert 警告'
                }, {
                  value: 'loading',
                  label: 'Loading 加载'
                }, {
                  value: 'message',
                  label: 'Message 消息提示'
                }, {
                  value: 'message-box',
                  label: 'MessageBox 弹框'
                }, {
                  value: 'notification',
                  label: 'Notification 通知'
                }]
              }, {
                value: 'navigation',
                label: 'Navigation',
                children: [{
                  value: 'menu',
                  label: 'NavMenu 导航菜单'
                }, {
                  value: 'tabs',
                  label: 'Tabs 标签页'
                }, {
                  value: 'breadcrumb',
                  label: 'Breadcrumb 面包屑'
                }, {
                  value: 'dropdown',
                  label: 'Dropdown 下拉菜单'
                }, {
                  value: 'steps',
                  label: 'Steps 步骤条'
                }]
              }, {
                value: 'others',
                label: 'Others',
                children: [{
                  value: 'dialog',
                  label: 'Dialog 对话框'
                }, {
                  value: 'tooltip',
                  label: 'Tooltip 文字提示'
                }, {
                  value: 'popover',
                  label: 'Popover 弹出框'
                }, {
                  value: 'card',
                  label: 'Card 卡片'
                }, {
                  value: 'carousel',
                  label: 'Carousel 走马灯'
                }, {
                  value: 'collapse',
                  label: 'Collapse 折叠面板'
                }]
              }]
          }, {
            value: 'ziyuan',
            label: '资源',
            children: [{
              value: 'axure',
              label: 'Axure Components'
            }, {
              value: 'sketch',
              label: 'Sketch Templates'
            }, {
              value: 'jiaohu',
              label: '组件交互文档'
            }]
          }],
        dialogTableVisible: false,
        gridData: [{//选择人员
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
        fileList3:[],
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 总条数
        total: 0,
        // 【请填写功能名称】表格数据
        infoList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        open1: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          status: undefined,
          deleteTime: undefined
        },
        // 表单参数
        form: {
          actkey:'',
        },  // 表单参数
        flg: '',
        // 表单校验
        rules: {},
        // 判断是否为提交,还是添加
        open3: false  ,
        // 判断是否为提交,还是添加
        open4: false
      };
    },
    created() {

      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: {
      getDetails() {
        getFormData(this.form.formId).then(response => {
          this.form = response.data;
        });
      },
      selectOK(zh, xm) {
        this.receiverAccount = zh;
        this.receiverName=xm;
        this.open=false;
      },
      openda() {
        this.open1 = false;
      },
      /** 查询【请填写功能名称】列表 */

      // 取消按钮
      cancel() {
        this.$emit('getList');
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          everyone: undefined,
        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        // this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
        this.single = selection.length != 1
        this.multiple = !selection.length
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.open = true;
        this.title = "公文发文";
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        const id = row.id || this.ids
        getInfo(id).then(response => {
          this.form = response.data;
          this.open = true;
          this.title = "公文发文";
        });
      },
      handleUpdate1(row) {
        this.reset();
        const id = row.id || this.ids
        getInfo(id).then(response => {
          this.form = response.data;
          this.open1 = true;
          this.title = "公文发文";
        });
      },
      /** 提交按钮 */
      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)
                }
              });
            }
          }
        });
      },
      submitToDo(){
        this.loading = true;
        submitToDoItem(this.form.taskid).then(response => {
          this.msgSuccess("提交成功");
          this.$emit('getList');
        })
      },
      //拒绝按钮
      deleteToDo(){
        this.$confirm('是否确认拒绝这这个申请吗?', '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteToDoItem(this.form.taskid).then(response => {
            this.msgSuccess("拒绝成功")
            this.$emit('getList');
          })

        }).catch(() => {
        });

      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const ids = row.id || this.ids;
        this.$confirm('是否确认删除这一封邮件?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function () {
          return delInfo(ids);
        }).then(() => {
          // this.getList();
          this.msgSuccess("删除成功");
        }).catch(function () {
        });
      },
      /** 导出按钮操作 */
      handleExport() {
        const queryParams = this.queryParams;
        this.$confirm('是否确认导出所有【请填写功能名称】数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function () {
          return exportInfo(queryParams);
        }).then(response => {
          this.download(response.msg);
        }).catch(function () {
        });
      }
    },
  };
</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>
