<template>
  <div style="padding: 10px">
    <el-row :gutter="10">
      <el-col :span="14">
        <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="createTime"/>
            <!--            <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-download"
                  @click="openDownloadFile(scope.row)"
                >下载
                </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>

    <el-dialog title="文件下载" :visible.sync="open">
      <el-form>
        <el-form-item label="文件">
          <el-button type="warning" icon="el-icon-download" v-for="item in form.fileList" @click="doDownload(item.url)">
            {{
              item.name
            }}
          </el-button>
        </el-form-item>
        <el-form-item label="图片">
          <el-button type="warning" icon="el-icon-download" v-for="item in form.imgList" @click="doDownload(item.url)">
            {{ item.name }}
          </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import {getToken} from '@/utils/auth'
import {listAccessory, addAccessory, delAccessory} from '@/api/flow/accessory'
import {pcTreeList} from '@/api/system/postConfig'
import {delResult} from '@/api/yiqing/result'

export default {
  data() {
    return {
      baseUrl: 'https://hzl.willalp.com:3005',
      uploadImgUrl: 'https://hzl.willalp.com:3005/common/upload', // 上传的图片服务器地址
      // uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
      headers: {
        Authorization: 'Bearer ' + getToken()
      },
      open: false,
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 选中数组
      ids: [],
      // 总条数
      total: 0,
      accessoryList: [],
      pcTreeList: [],
      applyUserName: {},
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        title: null,
        fileList: null,
        imgList: null,
        applyUserId: null,
        applyUserName: null,
        endTime: null
      },
      form: {
        title: null,
        fileList: [],
        imgList: [],
        applyUserName: null
      },
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false
    }
  },
  created() {
    this.getList()
  },
  methods: {
    openDownloadFile(item) {
      item.fileList = JSON.parse(item.fileList)
      item.imgList = JSON.parse(item.imgList)
      this.form = item
      this.open = true
    },
    doDownload(url) {
      //使用 精确 url下载
      window.open(url, '_blank')
    },
    getList() {
      this.getPcTreeList()
      this.loading = true
      listAccessory(this.queryParams).then(response => {
        this.accessoryList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    getPcTreeList() {
      pcTreeList().then(req => {
        if (req.code === 200) {
          this.pcTreeList = req.data
        }
      })
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        title: null,
        fileList: [],
        imgList: [],
        applyUserId: null,
        applyUserName: null,
        endTime: null,
        isDelete: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null,
        pageNum: {}
      }
      this.applyUserName = ''
      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.$modal.success('上传成功')
      this.form.fileList.push({url: this.baseUrl + res.url, name: res.fileName})
    },
    handleImgUploadSuccess(res, file) {
      this.$modal.success('上传成功')
      this.form.imgList.push({url: this.baseUrl + res.url, name: res.fileName})
    },
    /** 提交按钮 */
    submitForm() {
      if (!this.form.title) {
        this.$modal.msgError('标题不能为空')
        return
      }
      if (!this.form.params) {
        this.$modal.msgError('请选择部门负责人审批')
        return
      }
      if (this.form.fileList.length === 0 && this.form.imgList.length === 0) {
        this.$modal.msgError('文件和图片请至少上传其中一个')
        return
      }
      // this.form.imgList = JSON.stringify(this.form.imgList)
      // this.form.fileList = JSON.stringify(this.form.fileList)
      this.$refs['form'].validate(valid => {
        addAccessory(this.form).then(() => {
          this.reset()
          this.$modal.msgSuccess('新增成功')
          this.open = false
          this.getList()
        })
      })
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids
      this.$modal.confirm('是否确认撤销该文件审批流程吗？').then(function () {
        return delAccessory(ids)
      }).then(() => {
        this.getList()
        this.$modal.msgSuccess('删除成功')
      }).catch(() => {
      })
    },
    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) {
      let node = this.$refs.taskId.getCheckedNodes()[0]
      this.form.params = {
        apUserName: node.label,
        candidate: node.value
      }
    }
  }
}
</script>
