<template>
<!--  收文-->
    <div class="app-container">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="来文标题 : ">
          <el-input v-model="form.fwtitle"></el-input>
        </el-form-item>
        <el-form-item label="来文单位 : ">
          <el-input v-model="form.fwdept"></el-input>
        </el-form-item>
        <el-form-item label="来文日期 : ">
          <el-input v-model="form.createTime"></el-input>
        </el-form-item>
        <el-form-item label="流水号 : ">
          <el-input ></el-input>
        </el-form-item>
        <el-form-item label="文件字号 : ">
          <el-input ></el-input>
        </el-form-item>
        <el-form-item label="紧急程度 : ">
          <el-select  placeholder="请选择紧急程度">
            <el-option label="急" value="ji"></el-option>
            <el-option label="很急" value="henji"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="添加附件 : " prop="fj">
          <el-upload
            class="upload-demo"
            action="bbb"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            :before-upload="fjBeforeUpload"
            :show-file-list="true"
            :http-request="fileRequest"
            :file-list="fileList">
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>

        <el-form-item label="收文原件 : " prop="yj">
          <el-upload
            class="upload-demo"
            action="ccc"
            :on-preview="handlePreview1"
            :on-remove="handleRemove1"
            :before-remove="beforeRemove1"
            :before-upload="fjBeforeUpload1"
            :show-file-list="true"
            :http-request="fileRequest1"
            :file-list="fileList1">
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="发文对象 : ">
          <el-col :span="24">
            <el-form-item label="收件主体" prop="deptflg" >
              <el-radio-group v-model="formData.deptflg" size="medium" @change="agreeChange">
                <el-radio v-for="(item, index) in deptflgOptions" :key="index" :label="item.value"
                          :disabled="item.disabled">{{item.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="showsjr">
            <el-form-item label="收件人" prop="RecvPerson">
              <el-input v-model="formData.RecvPerson" placeholder="请选择收件人" clearable="true":disabled="true">
                <template slot="append">
                  <el-button
                    type="primary"
                    icon="el-icon-plus"
                    size="mini"
                    @click="handleSelect">
                    选择人员
                  </el-button>
                </template>
              </el-input>
              <el-input v-model="formData.RecvAccount" v-show="false"/>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="showdw">
            <el-form-item label="收件单位" prop="deptId">
              <el-input v-model="formData.RecvPerson" placeholder="请选择单位" clearable="true":disabled="true">
                <template slot="append">
                  <el-button
                    type="primary"
                    icon="el-icon-plus"
                    size="mini"
                    @click="handledept">
                    选择单位
                  </el-button>
                </template>
              </el-input>
              <el-input v-model="formData.RecvAccount" v-show="false"/>
            </el-form-item>
          </el-col>

        </el-form-item>
        <el-form-item>
          <el-button  type="primary" @click="submitForm">提 交</el-button>
          <el-button type="info" @click="reset">重 置</el-button>
        </el-form-item>
      </el-form>
    </div>
</template>

<script>

  import SelectRen from '@/components/SelectRen';
  export default {
    name: 'swToDraft',
    components: {
      SelectRen,
    },
    data() {
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        flgs: [],
        names:[],
        // 非单个禁用
        single: true,
        single1: true,
        // 非多个禁用
        multiple: true,
        multiple1: true,
        // 总条数
        total: 0,
        // 【请填写功能名称】表格数据
        detailList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
        },
        // 表单参数
        form: {},
        fjfileList: [],
        fileList:[],
        yjfileList: [],
        fileList1:[],
        // 表单校验
        rules: {
          mailTheme: [
            { required: true, message: "标题不能为空", trigger: "blur" }
          ]
        },
        depname:[],
        deptflgOptions: [{
          "label": "个人",
          "value": 0
        }, {
          "label": "单位",
          "value": 1
        }],

        showsjr:true,
        showdw:false,
      };
    },
    created() {

    },
    methods: {

      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();

      },
      // 表单重置
      reset() {
        this.form = {
          mailDetailGuid: undefined,
          mailGuid: undefined,
          receiverName: undefined,
          receiverAccount: undefined,
          readFlag: undefined,
          readTime: undefined,
          status: "0",
          deleteTime: undefined
        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList1();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        // this.handleQuery();
        this.getList();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.mailDetailGuid)
        this.flgs = selection.map(item => item.flg)
        this.names = selection.map(item => item.senderName)
        this.single = selection.length!=1
        this.single1 = selection.length!=1
        this.multiple = !selection.length
        this.multiple1 = !selection.length
      },

      /** 提交按钮 */
      submitForm: function() {
        this.$refs["form"].validate(valid => {
          if (valid) {
              addDetail(this.form).then(response => {
                if (response.code === 200) {
                  this.msgSuccess("新增成功");
                  this.open = false;
                  this.getList();
                }
              });
          }
        });
      },
      /** ---------------附件----------------- */
      fjBeforeUpload(file) {
        let isRightSize = file.size / 1024 / 1024 < 2
        if (!isRightSize) {
          this.$message.error('文件大小超过 2MB')
        }
        return isRightSize
      },
      handlePreview(file) {
        // 预览,一些文件因为格式问题无法预览。推荐使用a标签，src为文件的下载地址，点击即可下载,参照录音
        window.open(file.filePath);
      },
      handleSuccess(file, fileInfo) {
        console.log(fileInfo);
        this.fileList.push({
          name: fileInfo.name,
          uuid: fileInfo.uid,
          filePath: fileInfo.url
        });
      },
      handleRemove(file) {
        // 移除
        this.fjfileList.forEach((item, index) => {
          console.log(item);
          if (item.uid === file.uid) {
            this.fjfileList.splice(index, 1);
            //删除
          }
        });
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      },
      fileRequest(item) {
        let uploadData = new FormData()
        uploadData.append('file',item.file)
        uploadfj(uploadData).then(response => {
          if (response.code === 200) {
            this.formData.fileName += response.data.fileName+',';
            this.formData.filePath += response.data.filePath+',';
            this.fjfileList.push({
              name: response.data.fileName,
              filePath: process.env.VUE_APP_BASE_API+response.data.filePath
            });
            this.msgSuccess("上传成功");
          }
        }).catch(function(e) {
          console.log('catch:', e);})
      },
      /** ---------------附件end----------------- */
      /** ---------------原件----------------- */
      fjBeforeUpload1(file) {
        let isRightSize = file.size / 1024 / 1024 < 2
        if (!isRightSize) {
          this.$message.error('文件大小超过 2MB')
        }
        return isRightSize
      },
      handlePreview1(file) {
        // 预览,一些文件因为格式问题无法预览。推荐使用a标签，src为文件的下载地址，点击即可下载,参照录音
        window.open(file.filePath);
      },
      handleSuccess1(file, fileInfo) {
        console.log(fileInfo);

        this.fileList.push({
          name: fileInfo.name,
          uuid: fileInfo.uid,
          filePath: fileInfo.url
        });
      },
      handleRemove1(file) {
        // 移除
        this.fjfileList.forEach((item, index) => {
          debugger;
          console.log(item);
          if (item.uid === file.uid) {
            this.fjfileList.splice(index, 1);
            //删除
          }
        });
      },
      beforeRemove1(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      },
      fileRequest1(item) {
        let uploadData = new FormData()
        uploadData.append('file',item.file)
        uploadfj(uploadData).then(response => {
          if (response.code === 200) {
            this.formData.fileName += response.data.fileName+',';
            this.formData.filePath += response.data.filePath+',';
            this.yjfileList.push({
              name: response.data.fileName,
              filePath: process.env.VUE_APP_BASE_API+response.data.filePath
            });
            this.msgSuccess("上传成功");
          }
        }).catch(function(e) {
          console.log('catch:', e);})
      },
      /** ---------------附件end----------------- */

    }
  }
</script>

<style scoped>

</style>
