<!-- 供应商信息列表 -->
<template>
  <div class="app-container">
    <el-card>
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" @submit.native.prevent>
        <div class="filter-box">
          <div class="filter-lf">
            <el-form-item label="合同编号">
              <el-input v-model="queryParams.roleName" placeholder="请输入合同编号" clearable @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="审批状态">
              <el-select v-model="queryParams.roleName" @change="handleQuery">
                <el-option label="普通流转路径" value="normal" />
                <el-option label="默认流转路径" value="default" />
                <el-option label="条件流转路径" value="condition" />
              </el-select>
            </el-form-item>
            <el-form-item label="供应商名称">
              <el-input v-model="queryParams.roleName" placeholder="请输入供应商名称" clearable @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
              <el-button type="primary" size="mini" v-hasPermi="['procurement:payApply:export']" @click="handleExport">导出</el-button>
            </el-form-item>
          </div>
          <div class="filter-rt">
            <el-form-item>
              <el-button type="primary" size="mini" v-hasPermi="['procurement:payApply:apply']" @click="handleAdd">付款申请审批单</el-button>
            </el-form-item>
          </div>
        </div>

      </el-form>
      <el-table stripe border v-loading="loading" :data="tableList" @filter-change="handleFilter" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column label="合同编号" prop="roleName" />
        <el-table-column label="合同名称" prop="roleName" />
        <el-table-column label="供应商名称" prop="roleName" />
        <el-table-column label="合同总金额" prop="roleName" />
        <el-table-column label="付款金额" prop="roleName" />
        <el-table-column label="付款状态" prop="roleName" />
        <el-table-column label="审批状态" prop="roleName" :filters="states" :filter-multiple="false" column-key="states" />
        <el-table-column label="付款确认时间" prop="roleName" />
        <el-table-column label="操作" align="center" width="200">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-view" v-hasPermi="['procurement:payApply:show']" @click="handleShow(scope.row,1)">查看
            </el-button>
            <el-button size="mini" type="text" icon="el-icon-check" v-hasPermi="['procurement:payApply:confirm']" @click="handleCommon(scope.row.id,1)">付款确认
            </el-button>
            <el-button size="mini" type="text" icon="el-icon-close" v-hasPermi="['procurement:payApply:cancel']" @click="handleCommon(scope.row.id,2)">取消确认
            </el-button>
            <el-button size="mini" type="text" icon="el-icon-upload2" v-hasPermi="['procurement:payApply:upload']" @click="handleUpload(scope.row.id)">上传凭证
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getTableList" />

    </el-card>
    <Upload :isOpen="uploadShow" @onConfirm="uploadShow=false" @onCancel="uploadShow=false" />
  </div>
</template>

<script>
import { payPlanListApi, delPayPlanApi, lookPayPlanApi } from '@/api/procurement/payPlan'
export default {
  name: 'payApply',
  props: {},
  components: {
    Upload: () => import('./components/upload')
  },
  computed: {},
  data() {
    return {
      uploadShow: false,
      selectArr: [],
      states: [
        {
          value: 1,
          text: '已付款'
        },
        {
          value: 2,
          text: '未付款'
        },
      ],
      disabled: false,
      id: null,
      isOpen: false,
      total: 0,
      loading: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        roleName: undefined,
      },
      tableList: [
        { roleName: 'roleName' }
      ]
    }
  },
  created() {
    this.getTableList()
  },
  methods: {
    handleUpload() {
      this.uploadShow = true
    },
    handleCommon() {

    },
    handleSelectionChange(val) {
      this.selectArr = val
    },
    handleFilter(obj) {
      console.log('obj..', obj);
    },
    handleEnterPort() {

    },
    handleExport() {
      if (!this.selectArr.length) {
        this.$fm('请选择要导出的数据！')
      }
    },
    handleShow(row, type) {
      this.$router.push({ path: "/payApply/show", query: { id: 1 } });
    },
    handleSave() {
      this.isOpen = false
    },
    handleCancel() {
      this.isOpen = false
    },
    handleAdd() {
      this.$router.push({ path: "/payApply/add", query: { id: 1 } });
    },
    handleUpdate() {

    },
    handleDelete(id) {
      this.$confirm('您确定要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$sm('删除成功！')
        this.getTableList()
      })
    },
    getTableList() {

    },
    resetQuery() {

    },
    handleQuery() {

    },
    handleSelectionChange() {

    },
  },



}

</script>
<style lang='scss' scoped>
@import '@/assets/styles/header/index.scss';
@import '@/assets/styles/common/index.scss';
</style>