<template>
  <div class="main-content m20">
    <!--头部-查询-->
    <div class="content-header">
      <div class="body search-body">
        <el-row class="mb10">
          <el-col :span="12">
            <el-row>
              <label class="label-name_2">用户账号：</label>
              <div class="search-input-box_2">
                <el-input v-model="searchForm.userName" clearable type="text" class="search-input" placeholder="请输入用户账号（精确）" @keyup.enter.native="search"/>
              </div>
            </el-row>
          </el-col>
        </el-row>
        <el-col :span="6" :offset="1">
          <div class="btn-box" style="font-size: 14px">
            <el-button size="mini" type="primary" @click="search" :loading="loading">查询</el-button>
            <el-button size="mini" @click="searchForm.userName = ''">
              重置
            </el-button>
          </div>
        </el-col>
      </div>
    </div>
    <!--body-查询结果-->
    <div class="content-body">
      <div class="body">
        <el-table
          ref="multipleTable"
          v-loading="loading"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 95%;margin:0 auto"
          :fit="true"
          :row-class-name="tableRowClassName"
          :header-cell-style="{background:'#8cc3fb',color:'#fff'}"
          @selection-change="handleSelectionChange"
        >
          <el-table-column prop="index" label="序号" min-width="30" align="center" />
          <el-table-column prop="acceptno" label="受理编号" min-width="90" align="left" />
          <el-table-column
            prop="busname"
            :show-overflow-tooltip="true"
            label="业务名称"
            min-width="120"
            align="left"
          />
          <el-table-column
            prop="busTypeName"
            :show-overflow-tooltip="true"
            label="业务类型"
            min-width="80"
            align="left"
          />
          <el-table-column
            prop="busStatusName"
            :show-overflow-tooltip="true"
            label="业务状态"
            min-width="80"
            align="left"
          />
          <el-table-column
            prop="createTime"
            label="创建日期"
            min-width="60"
            align="left"
            :formatter="dateFormat"
          />
          <el-table-column
            prop="sendertime"
            label="接收日期"
            min-width="100"
            align="left"
            :formatter="dateFormat"
          />
          <el-table-column label="操作" min-width="120" align="left">
            <template slot-scope="scope">
              <el-select
                v-if="scope.row.showSelect && scope.row.options.length"
                v-model="scope.row.reviewerId"
                placeholder="请选择转办人"
                filterable
                @change="handleChange(scope.$index, scope.row)"
              >
                <el-option
                  v-for="item in scope.row.options"
                  :key="item.primaryKey"
                  :label="item.name"
                  :value="item.primaryKey"
                />
              </el-select>
              <el-button type="primary" size="mini" @click="toggleSelect(scope.$index, scope.row)">转办</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="page-box">
          <el-pagination
            :disabled="loading"
            :page-size="pageParam.pageSize"
            :total="pageParam.total"
            :current-page="pageParam.curPage"
            :page-sizes="[10, 20, 30, 40,50,100,200]"
            layout="slot,total, sizes, prev, pager, next, jumper"
            @size-change="pageSizeChange"
            @current-change="pageIndexChange"
          >
            <span>
              第 {{ pageParam.curPage }} 页 /
              共 {{ (pageParam.total !== 0 ? parseInt((pageParam.total + pageParam.pageSize - 1) / pageParam.pageSize) : 1) }} 页
            </span>
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { batchRevokeForwardTask, batchRevokeForward, getBatchRevokeForwardUsers } from '@/api/revoke'

export default {
  data() {
    return {
      user: JSON.parse(sessionStorage.getItem('user')),
      currentData: [],
      reviewerId: '',
      showMore: false,
      busyTypes: [],
      searchForm: {
        userName: ''
      },
      loading: false,
      tableData: [],
      pageParam: {
        customParamMap: {},
        curPage: 1,
        total: 0,
        pageSize: 10
      }
    }
  },
  mounted() {
  },
  methods: {
    handleChange(index, row) {
      batchRevokeForward({
        tasklistid: row.tasklistid,
        userId: row.reviewerId
      }).then(res => {
        this.$message({
          message: '转办成功',
          type: 'success'
        })
        this.search()
      })
      // this.$set(this.tableData, index, {
      //   ...this.tableData[index],
      //   showSelect: false
      // })
    },
    // 加载审核人
    toggleSelect(index, row) {
      return getBatchRevokeForwardUsers(row.senderorgid).then(res => {
        if (res.code === 0) {
          this.$set(this.tableData, index, {
            ...this.tableData[index],
            showSelect: !this.tableData[index].showSelect,
            options: res.data
          })
        }
      })
    },
    showMoreCriteria() {
      this.showMore = !this.showMore
    },
    dateFormat(row) {
      if (this.$util.isEmpty(row.sendertime)) return ''
      return this.$util.formatDate.format(new Date(Date.parse(row.sendertime)), 'yyyy-MM-dd')
    },
    tableRowClassName({row, rowIndex}) {
      if (rowIndex % 2 === 1) {
        return 'warning-row'
      }
    },
    // 搜索
    search() {
      this.pageParam.customParamMap = this.searchForm
      // 判断是否填写了条件
      let flag = false
      // obj的遍历
      Object.keys(this.pageParam.customParamMap).forEach(key => {
        if (this.pageParam.customParamMap[key] !== '' && this.pageParam.customParamMap[key] !== null) {
          flag = true
        }
      })
      if (!flag) {
        this.$message({
          message: '请至少填写一个查询条件！',
          type: 'warning'
        })
        return
      }
      this.pageParam.curPage = 1
      this.loadPage()
    },
    // 分页多选插件回调
    removeCallback(index, row) {
      this.$refs.multipleTable.toggleRowSelection(row, false)
    },
    // 全选按钮事件
    selectAll() {
      const table = this.$refs.multipleTable
      for (const i in table.data) {
        const each = table.data[i]
        table.toggleRowSelection(each, true)
      }
    },
    // 选项变更事件
    handleSelectionChange(selectData) {
      const cancel = []
      if (selectData.length !== this.tableData.length) {
        // 找出没有选中的内容
        this.tableData.forEach(each => {
          for (const i in selectData) {
            const atom = selectData[i]
            if (atom.pripid === each.pripid) {
              return
            }
          }
          cancel.push(each)
        })
      }
      // 取消选中的内容
      for (const i in cancel) {
        const each = cancel[i]
        let index
        for (const j in this.selection) {
          const select = this.selection[j]
          if (select.pripid === each.pripid) {
            index = parseInt(j)
            break
          }
        }
        if (index !== undefined) {
          this.selection.splice(index, 1)
        }
      }
      // 增加选中内容
      for (const i in selectData) {
        const each = selectData[i]
        let exist = false
        for (const j in this.selection) {
          const select = this.selection[j]
          if (select.pripid === each.pripid) {
            exist = true
            break
          }
        }
        if (!exist) {
          this.selection.push(each)
        }
      }
    },
    // 当前分页改变
    pageIndexChange(curPage) {
      this.pageParam.curPage = curPage
      this.loadPage()
    },
    // 分页大小改变
    pageSizeChange(pageSize) {
      this.pageParam.pageSize = pageSize
      this.loadPage()
    },
    // 加载分页
    loadPage() {
      if (this.loading) return
      this.loading = true
      batchRevokeForwardTask(this.pageParam).then(res => {
        this.loading = false
        const list = []
        let i = 1
        const pageStart = (this.pageParam.curPage - 1) * this.pageParam.pageSize
        res.data.records.forEach(each => {
          each.index = pageStart + i++
          each.busTypeName = this.$util.getTaskBusinessTypeName(each.bustype)
          each.busStatusName = this.$util.getTaskNodeName(each.currentNodeOrBizStatus)
          list.push(each)
        })
        this.tableData = list
        this.pageParam.total = res.data.total
      })
    },
    // 查看详情跳转
    showInfo(row) {
    }
  }
}
</script>

<style lang="scss" scoped>
.main-content {
  background: #fff;
  padding: 10pt;

  .content-header {
    background: white;

    .label-name_1 {
      text-align: right;
      display: inline-block; //转成行内快，才可定义宽度
      width: 140px;
      font-size: $table-content-font-size;
    }

    .search-input-box_1 {
      display: inline-block;
      width: calc(100% - 230px);
    }

    .label-name_2 {
      text-align: right;
      display: inline-block; //转成行内快，才可定义宽度
      width: 140px;
      font-size: $table-content-font-size;
    }

    .search-input-box_2 {
      display: inline-block;
      width: calc(100% - 230px);
    }

    .label-name_3 {
      text-align: right;
      display: inline-block; //转成行内快，才可定义宽度
      width: 140px !important;
      font-size: $table-content-font-size;
    }

    .custom {
      width: calc(100% - 150px);
    }

    .search-input {
      cursor: pointer;
    }

    .body {
      padding: 20px 0;
      border-top: none;
      margin-bottom: 40PX;
    }
  }

  .content-body {
    background: white
  }

  .header {
    .title {
      font-weight: 600;
      font-size: 1.2rem;
    }
  }

  .page-box {
    margin: 10PX;
    text-align: right
  }

  .mb10 {
    margin-bottom: 10px;
  }

  .btn-box {
    display: inline-block;
    padding-left: 10px;
  }
}

/deep/ .el-input__inner {
  height: 28px;
}
</style>
