<template>
  <div>
    <div style="margin-top: 25px; margin-left: 20px;">
      <el-form :inline="true" :model="searchForm">
        <el-form-item label="统一社会信用代码/注册号：">
          <el-input v-model="searchForm.paramMap.uniscid" size="mini" clearable type="text" placeholder="请输入统一社会信用代码/注册号" />
        </el-form-item>
        <el-form-item label="主体名称：">
          <el-input v-model="searchForm.paramMap.dsrmc" size="mini" clearable type="text" placeholder="请输入主体名称" />
        </el-form-item>
        <el-form-item label="决定机关名称：">
          <el-input v-model="searchForm.paramMap.cfdjjg" size="mini" clearable type="text" placeholder="请输入决定机关名称" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" @click="search">查询</el-button>
          <el-button size="mini" @click="resetSearchForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-row>
      <el-col :span="22" :offset="1">
        <el-table
          v-loading="loading"
          :data="tableData"
          tooltip-effect="dark"
          :fit="true"
          :row-class-name="tableRowClassName"
          :header-cell-style="{background:'#8cc3fb',color:'#fff'}"
          @sort-change="sortChange"
        >
          <el-table-column prop="index" label="序号" min-width="50" align="center" />
          <el-table-column prop="uniscid" label="统一社会信用代码/注册号" min-width="120" align="left" />
          <el-table-column prop="dsrmc" :show-overflow-tooltip="true" label="企业名称" min-width="130" align="left" />
          <el-table-column prop="sbookcode" :show-overflow-tooltip="true" label="决定文书编号" min-width="120" align="left" />
          <el-table-column prop="sgisttypename" :show-overflow-tooltip="true" label="违法行为类型" min-width="80" align="left" />
          <el-table-column prop="cfdjjg" :show-overflow-tooltip="true" label="决定机关名称" min-width="100" align="left" />
          <el-table-column prop="cfjdsj" :show-overflow-tooltip="true" :formatter="dateFormatter" label="处罚决定日期" min-width="100" align="left" />
          <el-table-column label="操作" min-width="80">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="submit(scope.row)">办理</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row>
          <el-col :offset="15">
            <el-pagination
              :disabled="loading"
              :page-size="pageParam.pageSize"
              :total="pageParam.total"
              :page-sizes="[10, 20, 30]"
              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>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { punishmentList, startTask } from '@/api/remPunish'

export default {
  data() {
    return {
      loading: false,
      user: JSON.parse(sessionStorage.getItem('user')),
      searchForm: {
        paramMap: {
          uniscid: '',
          dsrmc: '',
          cfdjjg: ''
        },
        likeParamMap: {},
        customParamMap: {}
      },
      tableData: [],
      pageParam: {
        curPage: 1,
        total: 0,
        pageSize: 10,
        orderField: 'id',
        orderingRule: ''
      }
    }
  },
  computed: {
  },
  mounted() {
    this.loadPage()
  },
  methods: {
    dateFormatter(row, column) {
      return this.$utils.parseTime(row.cfjdsj, '{yyyy}年{mm}月{dd}日')
    },
    submit(row) {
      this.$confirm('是否确认保存并开启待办？', '提示').then(() => {
        this.loading = true
        const data = {
          punishmentId: row.id
        }
        startTask(data).then(res => {
          if (res.code === 0) {
            // this.loadPage()
            this.$router.push({
              path: '/remPunish/accept',
              query: {
                taskId: res.data.taskId,
                bizSeq: res.data.bizSeq,
                workflowId: res.data.workflowId
              }
            })
          } else {
            this.$message.error(res.data.message)
          }
        }).finally(() => {
          this.loading = false
        })
      })
    },
    sortChange({ column, prop, order }) {
      this.pageParam.orderField = prop
      this.pageParam.orderingRule = order === 'ascending' ? 'asc' : 'desc'
      this.search()
    },
    // 搜索
    search() {
      // if (!this.searchForm.paramMap.uniscid && !this.searchForm.paramMap.dsrmc && !this.searchForm.paramMap.cfdjjg) {
      //   this.$message.warning('请输入统一社会信用代码/注册号、企业名称或者决定机关名称')
      //   return
      // }
      this.pageParam.paramMap = {}
      this.pageParam.curPage = 1
      this.loadPage()
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 === 1) {
        return 'warning-row'
      }
    },
    // 当前分页改变
    pageIndexChange(curPage) {
      this.pageParam.curPage = curPage
      this.loadPage()
    },
    // 分页大小改变
    pageSizeChange(pageSize) {
      this.pageParam.pageSize = pageSize
      this.loadPage()
    },
    // 加载分页
    loadPage() {
      const data = Object.assign({}, this.pageParam, this.searchForm)
      console.log(data)

      this.loading = true
      punishmentList(data).then(res => {
        const list = []
        let i = 1
        const pageStart = (this.pageParam.curPage - 1) * this.pageParam.pageSize
        res.data.records.forEach(each => {
          each.index = pageStart + i++
          each.uscc = each.uniScId || each.regno
          list.push(each)
        })
        this.tableData = list
        this.pageParam.total = res.data.total
      }).finally(() => {
        this.loading = false
      })
    },
    //重置搜索条件
    resetSearchForm(){
      Object.assign(this.$data.searchForm,this.$options.data().searchForm)
    }
  }
}
</script>
<style lang="scss" scoped>

</style>
