<template>
  <div class="app-container">
    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
      <el-form-item label="审核路径名" label-width="85px" prop="pathName">
        <el-input v-model="dataForm.pathName"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="cyan" icon="el-icon-search" size="mini" @click="getDataList">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery_s">重置</el-button>
      </el-form-item>
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            icon="el-icon-plus"
            size="mini"
            @click="addOrUpdateHandle()"
          >新增
          </el-button>
        </el-col>
        <right-toolbar @queryTable="getDataList"></right-toolbar>
      </el-row>
    </el-form>
    <el-table :data="dataList" v-loading="dataListLoading" style="width: 100%;">
      <el-table-column
        header-align="center"
        align="center"
        type="index"
        width="80"
        label="序号">
      </el-table-column>
      <el-table-column
        prop="pathName"
        header-align="center"
        align="center"
        width="220"
        label="审核路径名称">
      </el-table-column>
      <el-table-column
        prop="opUserName"
        header-align="center"
        align="center"
        width="150"
        label="维护人">
      </el-table-column>
      <el-table-column
        prop="opDate"
        header-align="center"
        align="center"
        width="150"
        label="维护时间">
      </el-table-column>
      <el-table-column
        prop="status"
        header-align="center"
        align="center"
        width="90"
        label="状态">
        <template slot-scope="scope">
<!--          <span v-if="scope.row.status === 'N'">新建</span>-->
          <span v-if="scope.row.status === 'A'">有效</span>
          <span v-if="scope.row.status === 'S'">停用</span>
          <span v-if="scope.row.status === 'Z'">暂存</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="remarks"
        header-align="center"
        align="center"
        label="备注">
      </el-table-column>
      <el-table-column
        fixed="right"
        header-align="center"
        align="center"
        width="150"
        label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small"
                     @click="addOrUpdateHandle(scope.row.id)">修改
          </el-button>
          <el-button type="text" size="small"
                     @click="deleteHandle(scope.row.id)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="dataForm.pageNum"
      :limit.sync="dataForm.pageSize"
      @pagination="getDataList"
    />
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList" :dataForm="editModel"></add-or-update>
  </div>
</template>

<script>
import AddOrUpdate from './auditPaths-add-or-update'
import {addCharge,delCharge} from '@/api/system/toConfigure'

export default {
  data () {
    return {
      loginContractorId: null,
      dataForm: {
        pathId: null,
        pathName: null,
        opUserId: null,
        opUserName: null,
        opDate: null,
        status: 'A',
        remarks: null,
        pageNum: 1,
        pageSize: 10
      },
      total:0,
      editModel: {},
      dataList: [],
      totalPage: 0,
      dataListLoading: false,
      addOrUpdateVisible: false
    }
  },
  components: {
    AddOrUpdate
  },
  activated () {
    // this.$http({
    //   url: this.$http.adornUrl('/sys/user/getLoginContractorId'),
    //   method: 'post'
    // }).then(({data}) => {
    //   this.loginContractorId = data.loginContractorId
    // })

    this.getDataList()
  },
  methods: {
    resetQuery_s(){
      this.dataForm = {
        pathId: null,
          pathName: null,
          opUserId: null,
          opUserName: null,
          opDate: null,
          status: 'A',
          remarks: null,
          pageNum: 1,
          pageSize: 10
      }
    },
    // 获取数据列表
    getDataList () {
      this.dataListLoading = true
      addCharge(this.dataForm).then(data => {
        this.total = data.total
        console.log(data)
        if (typeof data.rows !== 'undefined' && data.rows !== null) {
          this.dataList = data.rows
          this.totalPage = data.rows.total
        } else {
          this.dataList = []
          this.totalPage = 0
        }
        this.dataListLoading = false
      })
    },
    resetSearch () {
      this.dataForm.pathName = null
      this.dataForm.opUserName = null
      this.dataForm.opDate = null
      this.dataForm.current = 1
      this.dataForm.size = 10
      this.getDataList()
    },
    // 每页数
    sizeChangeHandle (val) {
      this.dataForm.size = val
      this.dataForm.current = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle (val) {
      this.dataForm.current = val
      this.getDataList()
    },
    // 新增 / 修改
    addOrUpdateHandle (val) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(val)
      })
    },
    // 删除
    deleteHandle (id) {
      this.$confirm('是否确认删除财务数据主编号为"' + id + '"的数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        return delCharge(id)
      }).then((res) => {
        console.log(res)
        this.msgSuccess('删除成功')
        this.getDataList()
      })

      // this.$confirm(`确定进行删除操作?`, '提示', {
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      //   type: 'warning'
      // }).then(() => {
      //   this.$http({
      //     url: this.$http.adornUrl('/engineering/auditPaths/delete'),
      //     method: 'post',
      //     data: (id)
      //   }).then(({data}) => {
      //     if (data && data.code === 0) {
      //       this.$message({
      //         message: '操作成功',
      //         type: 'success',
      //         duration: 600,
      //         onClose: () => {
      //           this.getDataList()
      //         }
      //       })
      //     } else {
      //       this.$message.error(data.msg)
      //     }
      //   })
      // }).catch(() => {
      // })
    }
  }
}
</script>
