<template>
  <div style="padding: 10px">
    <el-row :gutter="10">
      <el-col :span="8">
        <el-card>
          <div slot="header" class="clearfix">
            <span>新增审批</span>
          </div>
          <el-form ref="form" :model="form">
            <el-form-item label="审批标题" prop="title">
              <el-input v-model="form.title" placeholder="请输入审批标题"/>
            </el-form-item>
            <el-form-item label="附件上传" prop="fileList">
              <el-upload
                class="upload-demo"
                :action="uploadImgUrl"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :on-success="handleUploadSuccess"
                :before-remove="beforeRemove"
                :headers="headers"
                :limit="1"
                drag
                :file-list="form.fileList">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <!--          <el-button size="small" type="primary">点击上传</el-button>-->
                <!--    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
              </el-upload>
            </el-form-item>
            <el-form-item label="上传图片" prop="imgList">
              <el-upload
                :action="uploadImgUrl"
                list-type="picture-card"
                :on-exceed="handleExceed"
                :on-success="handleImgUploadSuccess"
                :file-list="form.imgList"
                :headers="headers">
                <i slot="default" class="el-icon-plus"></i>
                <div slot="file" slot-scope="{file}">
                  <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                  <span class="el-upload-list__item-actions">
                    <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                      <i class="el-icon-zoom-in"></i>
                    </span>
                    <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
                      <i class="el-icon-download"></i>
                    </span>
                    <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                      <i class="el-icon-delete"></i>
                    </span>
                  </span>
                </div>
              </el-upload>
            </el-form-item>
            <el-form-item label="级联选择" prop="">
              <el-cascader v-model="form.field103" @change="handleChange"
                           :style="{width: '100%'}" placeholder="请选择级联选择" clearable></el-cascader>
            </el-form-item>
            <div>
              <div style="text-align: center">
                <el-button type="primary" @click="submitForm">提交审批</el-button>
              </div>
            </div>
          </el-form>
        </el-card>
      </el-col>
      <el-col :span="16">
        <el-card>
          <div slot="header" class="clearfix">
            <span>已提交审批</span>
          </div>
          <el-table v-loading="loading" :data="accessoryList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center"/>
            <el-table-column label="审批标题" align="center" prop="title"/>
            <el-table-column label="附件列表" align="center" prop="fileList"/>
            <el-table-column label="图片列表" align="center" prop="imgList"/>
            <el-table-column label="申请人" align="center" prop="applyUserName"/>
            <el-table-column label="结束时间" align="center" prop="endTime" width="180">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.endTime, '{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click="handleUpdate(scope.row)"
                  v-hasPermi="['flow:accessory:edit']"
                >修改
                </el-button>
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  @click="handleDelete(scope.row)"
                  v-hasPermi="['flow:accessory:remove']"
                >删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import {getToken} from "@/utils/auth";
import {listAccessory, addAccessory} from "@/api/flow/accessory";

export default {
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 选中数组
      ids: [],
      // 总条数
      total: 0,
      accessoryList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        title: null,
        fileList: null,
        imgList: null,
        applyUserId: null,
        applyUserName: null,
        endTime: null,
      },
      form: {
        title: null,
        fileList: [],
        imgList: []
      },
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.loading = true;
      listAccessory(this.queryParams).then(response => {
        this.accessoryList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        title: null,
        fileList: null,
        imgList: null,
        applyUserId: null,
        applyUserName: null,
        endTime: null,
        isDelete: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null
      };
      this.resetForm("form");
    },
    // 多选框选中数据
    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 = "添加文件审批业务";
    },
    // 上传成功回调
    handleUploadSuccess(res, file) {
      this.$message.success("上传成功");
      this.form.fileList.push({url: res.url});
    },
    handleImgUploadSuccess(res, file) {
      this.$message.success("上传成功");
      this.form.imgList.push({url: res.url});
    },
    /** 提交按钮 */
    submitForm() {
      if (this.form.imgList) {
        this.form.imgList = JSON.stringify(this.form.imgList)
      } else {
        this.$modal.msgError("表单不完整");
        return
      }
      if (this.form.fileList) {
        this.form.fileList = JSON.stringify(this.form.fileList)
      } else {
        this.$modal.msgError("表单不完整");
        return
      }
      this.$refs["form"].validate(valid => {
        addAccessory(this.form).then(() => {
          this.$modal.msgSuccess("新增成功");
          this.open = false;
          this.getList();
        });
      });
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$modal.msgWarning(`当前最多选择 4 个图片`);
    },
    beforeRemove(file, fileList) {
      return this.$modal.confirm(`确定移除 ${file.name}？`);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log(file);
    },
    handleChange(value) {
      console.log(value);
    }
  }
}
</script>
