
<!--
  @description: 对账人管理列表
  @Modifier：wxy
  @routerPath:/shopmall/reconCiliationPerson
  @date：2020-07-29 13:15:07
-->
<template>
  <div>
    <div class="shopmall-page-title">
      对账人管理
    </div>
    <div class="search-content clearfix">
      <section class="fl">
        <el-form ref="orderFrom" :inline="true">
          <el-form-item label="对账人" prop="billingName">
            <el-input v-model.trim="fromList.billingName" placeholder="对账人" />
          </el-form-item>
          <el-form-item label="经办公司" prop="date">
            <el-input v-model.trim="fromList.departName" placeholder="经办公司" />
          </el-form-item>
        </el-form>
      </section>
      <div class="fr">
        <el-button type="purple" @click="searchList">
          搜索
        </el-button>
        <el-button type="gray" @click="resetList">
          重置
        </el-button>
      </div>
    </div>
    <div class="shopmall-page-add">
      <el-button type="purple" @click="addnew">
        新增对账人
      </el-button>
    </div>
    <div class="shopmall-view">
      <el-table
        :data="tableData"
        style="font-size: 12px;font-family:'MicrosoftYaHei'"
        :stripe="false"
        :border="false"
      >
        <el-table-column label="序号" width="60" type="index" />
        <el-table-column prop="userName" label="账户名称" width="190" />
        <el-table-column prop="billingName" label="对账人名称" width="190" />
        <el-table-column prop="departName" label="经办公司名称" />
        <el-table-column prop="jdAccount" label="京东VOP账户" width="190" />
        <el-table-column label="操作" align="center" width="150">
          <template slot-scope="scope">
            <el-link
              type="primary"
              @click="edit(scope.row)"
            >
              [编辑]
            </el-link>
            <el-link
              type="primary"
              @click="deletefn(scope.row)"
            >
              [删除]
            </el-link>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-row class="pagination shopmall-pagination p16" style="clear:both;margin:20px 0">
      <div class="page-number fl">
        共{{ Math.ceil(total /fromList.pageSize) }}页
        {{ total }}条
      </div>
      <el-pagination
        :current-page="current"
        :total="total"
        :page-sizes="[12,24,48]"
        class="fr"
        background
        layout="prev, pager, next, sizes"
        @current-change="pickHandle"
        @size-change="handleSizeChange"
      />
    </el-row>
    <reconCiliation :dialog="dialog" :add-data="reconCiliationList" :status="status" :title="title" @callback="callback" />
    <reconCiliationEdit v-if="dialogData.dialogFormVisible" :dialog-data="dialogData" @callback="callback" />
  </div>
</template>

<script>
import { quaryBilingAccounts, deleteBilingAccountInfo } from '@/api/shoppingmall/order'
import reconCiliation from './reconCiliationPerson-dialog' // 对账弹框
import reconCiliationEdit from './reconCiliationEdit-dialog' // 对账弹框
export default {
  components: {
    reconCiliationEdit,
    reconCiliation // 对账弹框
  },
  data() {
    return {
      current: 1,
      total: 0, // 总共页数
      fromList: { // 搜索条件
        billingName: '', // 对账人名称
        departName: '', // 经办公司名称
        pageNo: 1,
        pageSize: 12
      },
      tableData: [], // 列表数据
      dialog: {
        dialogFormVisible: false // 对账人弹框
      },
      dialogData: {
        dialogFormVisible: false // 对账人弹框
      },
      addData: {
        billingName: '', // 对账人名称
        departName: '', // 经办公司名称
        userName: '', // 账户名称
        jdAccount: '', // 京东VOP账户
        id: ''
      },
      status: '', // 01 新增  02 编辑
      title: '',
      reconCiliationList: {} // 弹框数据
    }
  },
  created() {
    // 初始化数据
    this.initData()
  },
  methods: {
    callback() {
      this.initData()
    },
    // 初始化数据
    initData() {
      quaryBilingAccounts(this.fromList).then(res => {
        this.tableData = res.data.records
        this.total = res.data.total
        this.current = res.data.current
      }).catch(() => {})
    },
    // 搜索
    searchList() {
      this.fromList.pageNo = 1
      this.fromList.pageSize = 12
      this.initData()
    },
    // 重置
    resetList() {
      this.fromList.pageNo = 1
      this.fromList.pageSize = 12
      this.fromList.billingName = ''
      this.fromList.departName = ''
      this.initData()
    },
    pickHandle(val) {
      this.fromList.pageNo = val
      this.initData()
    },
    handleSizeChange(val) {
      this.fromList.pageNo = 1
      this.fromList.pageSize = val
      this.initData()
    },
    // 添加对账人信息
    addnew() {
      this.status = '01'
      this.title = '新增对账人'
      this.dialog.dialogFormVisible = true
      this.reconCiliationList = this.addData
    },
    // 编辑对账人信息
    edit(item) {
      this.dialogData.dialogFormVisible = true
      this.dialogData.account = item
    },
    // 删除对账人信息
    deletefn(item) {
      this.$confirm('确定要删除该对账人吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        confirmButtonClass: 'confirmBtn',
        cancelButtonClass: 'cancelBtn'
      }).then(() => {
        deleteBilingAccountInfo(item.id).then(res => {
          this.$message({
            message: '删除成功！',
            type: 'success'
          })
          this.initData()
        })
      }).catch(() => {})
    }
  }
}
</script>

<style scoped lang='less'>
.shopmall-page-add {
  width: 100%;
  margin-top:  12px;
  padding-left: 12px;
  display: flex;
  align-items: center;
}
</style>
