<template>
  <div id="monitor">
    <el-card style="position: relative;">
            <el-form label-width="100px">
        <el-row :gutter="10">
          <el-col :span="1.5">
              <el-form-item label="单据标题">
                <el-input
                  v-model.trim="queryParams.docSubject"
                  size="mini"
                  clearable
                  style="width: 200px"
                />
              </el-form-item>
            </el-col>

          <el-col :span="1.5">
              <el-form-item label="单据类型">
                <el-select multiple v-model="queryParams.typeList" size="mini" style="width: 200px" clearable>
                  <el-option v-for="dict in dict.type.oa_templete_id" :key="dict.value" :label="dict.label" :value="dict.label">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
        </el-row>
      </el-form>

      <div style="position: absolute;top: 18px;right: 10px;">
        <el-button type="primary" size="mini" @click="searchList">搜索</el-button>
        <el-button size="mini" plain @click="resetList">重置</el-button>
      </div>

      <el-table
        v-loading="loading"
        :data="tableList" 
        fit
        :cell-style="{ borderColor: '#c0c0c0' }"
        :header-cell-style="{ borderColor: '#c0c0c0' }"
        class="exporttable"
        max-height="410"
        border
        highlight-current-row
        style="font-size: 12px;"
        @selection-change="handleSelectionChange"
        @row-click="rowSelect"
        @row-dblclick="doubleClick"
        ref="tables"
      >
        <!-- <el-table-column type="selection" width="55" /> -->
        <el-table-column label="序号" type="index" align="center" width="50px"/>
        <el-table-column show-overflow-tooltip label="标题" align="center" prop="docSubject"/>
        <el-table-column show-overflow-tooltip label="创建人" align="center" prop="docCreate" width="100px"/>
        <!-- <el-table-column
          fixed="right"
          label="操作"
          align="center"
          width="180"
          >
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="check(scope.row)">查看</el-button>
            <el-button type="text" size="mini" @click="audit(scope.row)">审批</el-button>
          </template>
        </el-table-column> -->
      </el-table>

      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryParams.pageNum"
        :page-sizes="[10, 20, 50, 100, 200, 500]"
        :page-size="20"
        layout="total, sizes, prev, pager, next, jumper"
        :total=total>
      </el-pagination>
    
    </el-card>
  </div>
</template>

<script>
import { getMonitorList, wlSubmit, cgSubmit } from '@/api/purchase/workMonitor.js'
export default {
  name: 'monitor',
  dicts: ['oa_templete_id'],
  data() {
    return {
      queryParams: {
        typeList:[],
        docSubject: '',
        pageNum: 1,
        pageSize: 20
      },
      loading: false,
      tableList: [],
      total: 0,
      ids: []
    }
  },
  created() {
    this.getList(this.queryParams)
  },
  methods: {
    searchList() {
      this.getList(this.queryParams)
    },
    resetList() {
      this.queryParams = {
        typeList:[],
        docSubject: '',
        pageNum: 1,
        pageSize: 20
      }
      this.searchList()
    },
    getList(params) {
      getMonitorList(params).then(res => {
        if (res.code === 200) {
          this.tableList = res.rows
          this.total = res.total
        }
      }).then(() => {
        this.loading = false
      }).catch(err => {
        this.loading = false
      })
    },
    handleSelectionChange(selection) {
      console.log('选中', selection)
      this.ids = selection
      // console.log('选中数组', this.ids.join())
    },
    doubleClick(row) {
      // this.$refs.tables.toggleRowSelection(row);
      this.rowSelect(row)
    },
    rowSelect(row, column, event) {},
    check(row) {},
    audit(row) {
      this.$modal.loading("审批中...");
      if (row.type == '物料申请单' || row.type == '物料变更单') {
        wlSubmit(row).then(res => {
          if(res.code === 200) {
            this.$modal.closeLoading();
            this.$modal.notifySuccess("审批成功");
            this.searchList()
          }
        }).catch(() => {
          this.$modal.closeLoading();
          this.searchList()
        })
      } else {
        cgSubmit(row).then(res => {
          if(res.code === 200) {
            this.$modal.closeLoading();
            this.$modal.notifySuccess("审批成功");
            this.searchList()
          }
        }).catch(() => {
          this.$modal.closeLoading();
          this.searchList()
        })
      }
    },
    handleSizeChange(val) {
      this.queryParams.pageSize = val
      this.getList(this.queryParams)
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val
      this.getList(this.queryParams)
    },
  }
}
</script>

<style lang="scss" scoped>
#monitor {
  padding: 12px;
  box-sizing: border-box;
  overflow-y: scroll;
}
.btn_grooup {
  margin-bottom: 10px;
  display: flex;
  justify-content: flex-end;
}
.el-pagination {
  margin-top: 10px;
  text-align: right;
}
</style>