<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-form :model="queryParams" ref="queryForm" :inline="true">
          <el-form-item label="请输入标题" prop="mailTheme">
            <el-input
              v-model="queryParams.mailTheme"
              placeholder="请输入标题"
              clearable
              size="small"
            />
          </el-form-item>
          <el-form-item label="请输入机关代字" prop="status">
            <el-input
              v-model="queryParams.receiverAccount"
              placeholder="请输入机关代字"
              clearable
              size="small"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row class="bottom10">
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="small"
          @click="handleAdd"
          v-hasPermi="['system:info:add']"
          style="margin-right: 15px;"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
       <!-- <el-button
          type="danger"
          icon="el-icon-delete"
          size="small"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['system:info:remove']"
        >删除</el-button> -->
      </el-col>
    </el-row>
    <el-table border v-loading="loading" :data="infoList" @selection-change="">
      <el-table-column label="标题" align="center" prop="" width="300"/>
      <el-table-column label="机关代字" align="center" prop="" />
      <el-table-column label="文号" align="center" prop="" />
      <el-table-column label="起草正文" align="center" prop="" />
      <el-table-column label="缓急" align="center" prop="" />
      <el-table-column label="密级" align="center" prop="" />
      <el-table-column label="打印份数" align="center" prop="" />
      <el-table-column label="状态" align="center" prop="" />
      <el-table-column label="操作" width="200" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="small" type="text"
            icon="el-icon-document"
            @click="handleUpdate1(scope.row)"
          >详情</el-button>
          <el-button
            size="small" type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加或修改【请填写功能名称】对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="90px" 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.senderName" 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.urgency" placeholder="请选择">
                <el-option label="一般" value=""></el-option>
                <el-option label="平急" value=""></el-option>
                <el-option label="加急" value=""></el-option>
                <el-option label="特急" value=""></el-option>
                <el-option label="特提" value=""></el-option>
              </el-select>
            </el-form-item>
            </td>
            <td>
               <el-form-item label="密级" prop="encryption">
               <el-select v-model="form.encryption" placeholder="请选择">
                    <el-option label="一般" value=""></el-option>
                    <el-option label="秘密" value=""></el-option>
                    <el-option label="机密" value=""></el-option>
                    <el-option label="绝密" value=""></el-option>
                  </el-select>
            </el-form-item>
            </td>
          </tr>
          <tr>
            <td>
              <el-form-item label="部门会签：" prop="mailTheme">
                <el-input v-model="form.mailTheme" type="textarea" placeholder="" />
              </el-form-item>
        </td>
            <td>
              <el-form-item label="领导会签：" prop="mailContent">
                <el-input v-model="form.mailContent" type="textarea" placeholder="" />
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td>
               <el-form-item label="拟稿人" prop="">
                    <el-input placeholder="请选择" >
                        <el-button slot="append"  @click="dialogTableVisible = true">选择</el-button>
                    </el-input>
                     <!--选择人员-->
               <el-dialog title="选择人员" :visible.sync="dialogTableVisible">
                          <el-container>
                             <el-aside width="200px">
                               <el-tree :data="data" :props="defaultProps"></el-tree>
                             </el-aside>
                             <el-main>
                               <el-table :data="gridData" border>
                              <el-table-column property="date" label="日期" width="150"></el-table-column>
                              <el-table-column property="name" label="姓名" width="200"></el-table-column>
                              <el-table-column property="address" label="地址"></el-table-column>
                              </el-table>
                             </el-main>
                          </el-container>
                            <div slot="footer" class="dialog-footer">
                              <el-button @click="dialogFormVisible = false">取 消</el-button>
                              <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
                            </div>
                        </el-dialog>
                    </el-form-item>
            </td>
            <td>
              <el-form-item label="拟稿部门" prop="">
                <el-input placeholder="请选择">
                   <el-button slot="append">选择</el-button>
               </el-input>
                </el-form-item>
            </td>
          </tr>
          <tr>
            <td  colspan="2">
              <el-form-item label="拟稿人意见：" prop="">
                <el-input  type="textarea" placeholder="" />
              </el-form-item>
            </td>
          </tr>
           <tr>
             <td  colspan="2">
               <el-form-item label="办公室核稿意见：" prop="">
                  <el-input  type="textarea" placeholder="" />
                </el-form-item>
                </td>
           </tr>
            <tr>
              <td  colspan="2">
                 <el-form-item label="办公室领导核稿意见：" prop="">
                  <el-input  type="textarea" placeholder="" />
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td  colspan="2">
                <el-form-item label="主办单位审核：" prop="">
                  <el-input  type="textarea" placeholder="" />
                </el-form-item>
              </td>
            </tr>
             <tr>
               <td  colspan="2">
                 <el-form-item label="秘书审核：" prop="">
                   <el-input  type="textarea" placeholder="" />
                 </el-form-item>
               </td>
             </tr>
              <tr>
                <td colspan="2">
                  <el-form-item label="校对意见:" prop="">
           <el-input  type="textarea" placeholder="" />
         </el-form-item>
                </td>
              </tr>
              <tr >
                <td  colspan="2">
                   <el-form-item label="打印份数" prop="">
           <el-input  type="text" placeholder="" />
         </el-form-item>
                </td>
              </tr>
              <tr>
                <td  colspan="2">
                    <el-form-item label="标题：" prop="">
           <el-input  type="text" placeholder="" />
         </el-form-item>
                </td>
              </tr>
              <tr>
                <td  colspan="2">
                   <el-form-item label="主送：" :disabled="true" prop="">
          <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="">
            <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="">
            <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-change="handleChange"
            :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>
      </table>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button type="primary" @click="submitForm">保存草稿</el-button>
        <el-button type="primary" @click="submitForm">起草正文</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 详情对话框 -->
    <el-dialog title="公文详情" :visible.sync="open1" width="800px" append-to-body>
     <el-form ref="form" :model="form" :rules="rules" label-width="80px">
       <el-row>
         <el-col :span="12">
           <el-form-item label="机关待字" prop="senderName">
            <el-select v-model="form.senderName" placeholder="请选择">
                 <el-option label="001" value=""></el-option>
                 <el-option label="002" value=""></el-option>
               </el-select>
         </el-form-item>
         </el-col>
          <el-col :span="12">
            <el-form-item label="文号" prop="number">
             <el-input v-model="form.number" placeholder="请输入发件人-账号" />
           </el-form-item>
          </el-col>
       </el-row>
       <el-row>
         <el-col :span="12">
           <el-form-item label="缓急" prop="urgency" >
            <el-select v-model="form.urgency" placeholder="请选择">
             <el-option label="一般" value=""></el-option>
             <el-option label="平急" value=""></el-option>
             <el-option label="加急" value=""></el-option>
             <el-option label="特急" value=""></el-option>
             <el-option label="特提" value=""></el-option>
           </el-select>
         </el-form-item>
         </el-col>
         <el-col :span="12">
            <el-form-item label="密级" prop="encryption">
            <el-select v-model="form.encryption" placeholder="请选择">
                 <el-option label="一般" value=""></el-option>
                 <el-option label="秘密" value=""></el-option>
                 <el-option label="机密" value=""></el-option>
                 <el-option label="绝密" value=""></el-option>
               </el-select>
         </el-form-item>
         </el-col>
       </el-row>
       <el-form-item label="部门会签：" prop="mailTheme">
         <el-input v-model="form.mailTheme" type="textarea" placeholder="" />
       </el-form-item>
       <el-form-item label="领导会签：" prop="mailContent">
         <el-input v-model="form.mailContent" type="textarea" placeholder="" />
       </el-form-item><el-form-item label="领导会签：" prop="mailContent">
         <el-input v-model="form.mailContent" type="textarea" placeholder="" />
       </el-form-item>
       <el-form-item label="拟稿人" prop="">
       <el-input placeholder="xx" >
       </el-input>
       </el-form-item>
       <el-form-item label="拟稿部门" prop="">
      <el-input placeholder="xx" prefix-icon="el-icon-search">
      </el-input>
       </el-form-item>
      <!-- <el-form-item label="拟稿人意见：" prop="">
         <el-input  type="textarea" placeholder="" />
       </el-form-item>
       <el-form-item label="办公室核稿意见：" prop="">
         <el-input  type="textarea" placeholder="" />
       </el-form-item>
       <el-form-item label="办公室领导核稿意见：" prop="">
         <el-input  type="textarea" placeholder="" />
       </el-form-item>
       <el-form-item label="主办单位审核：" prop="">
         <el-input  type="textarea" placeholder="" />
       </el-form-item>
        <el-form-item label="秘书审核：" prop="">
          <el-input  type="textarea" placeholder="" />
        </el-form-item>
        <el-form-item label="校对意见:" prop="">
          <el-input  type="textarea" placeholder="" />
        </el-form-item>
        <el-form-item label="打印份数" prop="">
          <el-input  type="text" placeholder="" />
        </el-form-item>-->
        <el-form-item label="标题：" prop="">
          <el-input  type="text" placeholder="" />
        </el-form-item>
        <el-form-item label="主送：" :disabled="true" prop="">
         <el-input placeholder="xx" :disabled="true">
         </el-input>
        </el-form-item>
         <el-form-item label=" 抄送：" :disabled="true" prop="">
           <el-input placeholder="xx" :disabled="true">
           </el-input>
         </el-form-item>
         <el-form-item label="上传：" prop="">
           <el-upload
           class="upload-demo"
           action="https://jsonplaceholder.typicode.com/posts/"
           :on-change="handleChange"
           :file-list="fileList3">
           <div slot="tip" class="el-upload__tip">1.gggggggggg</div>
         </el-upload>
         </el-form-item>
     </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="openda">关 闭</el-button>
        <el-button @click="openda">取 消</el-button>
      </div>
    </el-dialog>
    <!--选择人员-->
    <el-dialog title="选择人员" :visible.sync="dialogTableVisible">
      <el-container>
         <el-aside width="200px">
           <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
         </el-aside>
         <el-main>
           <el-table :data="gridData" border>
          <el-table-column property="date" label="日期" width="150"></el-table-column>
          <el-table-column property="name" label="姓名" width="200"></el-table-column>
          <el-table-column property="address" label="地址"></el-table-column>
          </el-table>
         </el-main>
      </el-container>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
        </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
         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: '组件交互文档'
                  }]
                  }],
                  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 弄'
                          }],
                                  data: [{
                                    label: '一级 1',
                                    children: [{
                                      label: '二级 1-1',
                                      children: [{
                                        label: '三级 1-1-1'
                                      }]
                                    }]
                                  }, {
                                    label: '一级 2',
                                    children: [{
                                      label: '二级 2-1',
                                      children: [{
                                        label: '三级 2-1-1'
                                      }]
                                    }, {
                                      label: '二级 2-2',
                                      children: [{
                                        label: '三级 2-2-1'
                                      }]
                                    }]
                                  }, {
                                    label: '一级 3',
                                    children: [{
                                      label: '二级 3-1',
                                      children: [{
                                        label: '三级 3-1-1'
                                      }]
                                    }, {
                                      label: '二级 3-2',
                                      children: [{
                                        label: '三级 3-2-1'
                                      }]
                                    }]
                                  }],
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 总条数
        total: 0,
        // 【请填写功能名称】表格数据
        infoList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
          open1: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          status: undefined,
          deleteTime: undefined
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {
        }
      };
    },
    created() {
      this.getList();
    },
    methods: {

        openda(){
            this.open1 = false;
        },
      /** 查询【请填写功能名称】列表 */

      // 取消按钮
      cancel() {
        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.mailGuid)
        this.single = selection.length!=1
        this.multiple = !selection.length
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.open = true;
        this.title = "公文发文";
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        const mailGuid = row.mailGuid || this.ids
        getInfo(mailGuid).then(response => {
          this.form = response.data;
          this.open = true;
          this.title = "公文发文";
        });
      },
        handleUpdate1(row) {
            this.reset();
            const mailGuid = row.mailGuid || this.ids
            getInfo(mailGuid).then(response => {
                this.form = response.data;
                this.open1 = true;
                this.title = "公文发文";
            });
        },
      /** 提交按钮 */
      submitForm: function() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.mailGuid != undefined) {
              updateInfo(this.form).then(response => {
                if (response.code === 200) {
                  this.msgSuccess("修改成功");
                  this.open = false;
                  this.getList();
                }
              });
            } else {
              addInfo(this.form).then(response => {
                if (response.code === 200) {
                  this.msgSuccess("新增成功");
                  this.open = false;
                  this.getList();
                }
              });
            }
          }
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const mailGuids = row.mailGuid || this.ids;
        this.$confirm('是否确认删除这一封邮件?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return delInfo(mailGuids);
        }).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;
  }
.bottom10{margin-bottom:20px;}
.el-dialog__title{
  text-align: center;
  font-weight: bold;
}
table{ border-collapse: collapse;}
.title{font-size: 30px;text-align: center; margin-top: 30px;}
.el-form-item{margin-bottom: 10px !important;margin-top: 10px;}
</style>
