<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="search.keyWord" placeholder="关键字" style="width: 200px;" class="filter-item" @keyup.enter.native="searchData"/>
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="searchData">
        搜索
      </el-button>
      <el-checkbox v-if="isChoose" v-model="search.filterZeroBalance" :true-label="1" :false-label="0" @change="searchData">是否存余额</el-checkbox>
      <div class="top-right-btn">
        <el-tooltip class="item" effect="dark" content="刷新" placement="top">
          <el-button size="mini" circle icon="el-icon-refresh" @click="getTableInfo"/>
        </el-tooltip>
      </div>
    </div>
    <el-table
      :data="tableData"
      v-loading="listLoading"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      :size="!webType || isChoose ? 'mini':''"
      border
      default-expand-all>
      <el-table-column label="操作" align="center" width="80" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <template v-if="webType">
            <template v-if="!isChoose">
              <el-button
                @click="recharge(row.id)"
                type="primary"
                size="mini">
                充值
              </el-button>

            </template>
            <template v-else>
              <el-button @click="chooseThis(row)" type="primary" size="mini">
                选择
              </el-button>
            </template>
          </template>
          <template v-else>
            <el-button @click="ERPChoose(row)" type="primary" size="mini">
              选择
            </el-button>
          </template>
        </template>
      </el-table-column>
      <el-table-column
        width="100px"
        prop="clientCode"
        label="客户编号">
      </el-table-column>
      <el-table-column
        prop="clientName"
        label="客户名称">
      </el-table-column>
      <template v-if="!isChoose|| !webType">
      <el-table-column
        prop="industryName"
        label="所属行业">
      </el-table-column>
      <el-table-column
        prop="levelName"
        label="客户级别">
      </el-table-column>
      <el-table-column
        prop="payMode"
        label="付款方式">
      </el-table-column>
      <el-table-column
        prop="contactMan"
        label="联系人">
      </el-table-column>
      <el-table-column
        width="150"
        prop="contactPhone"
        label="联系电话">
      </el-table-column>
      <el-table-column
        align="left"
        class-name="status-col"
        width="280"
        label="联系地址">
        <template slot-scope="{row}">
          <span>{{ row.province + row.city + row.area + row.address }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="left"
        class-name="status-col"
        width="280"
        label="欠款额度(元)">
        <template slot-scope="{row}">
          <span>{{ row.overdraftQuota * 0.01 }}</span>
        </template>
      </el-table-column>
      </template>
      <el-table-column
        prop="balanceMoney"
        label="余额">
      </el-table-column>
    </el-table>
    <pagination
      v-show="listData.total>0"
      :total="listData.total"
      :page.sync="listData.page"
      :limit.sync="listData.pageSize"
      @pagination="getTableInfo"/>
    <el-dialog title="充值" :close-on-click-modal="false" :visible.sync="rechargeDialog" width="800px">
      <el-form label-width="70px" size="mini">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="会计科目" label-width="70px">
              <el-select
                v-model="form.idAccount"
                style="width: 230px">
                <el-option
                  v-for=" item in accountInfo"
                  :key="item.id"
                  :value="item.id"
                  :label="item.accountName">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="充值金额" label-width="70px">
              <el-input
                type="number"
                v-model="form.saveMoney"
                style="width: 210px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="充值方式">
              <el-radio-group  v-model="form.borrowFlag">
                <el-radio :label="1">充值</el-radio>
                <el-radio :label="-1">扣减</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="凭证号">
              <el-input
                v-model="form.voucherCode"
                style="width: 210px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="充值说明">
              <el-input
                v-model="form.saveMemo"
              type="textarea"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="rechargeDialog = false">取 消</el-button>
        <el-button :disabled="rechargeDisable" type="primary" @click="rechargeSure">确 定</el-button>
      </div>
    </el-dialog>
    <cancledialog @tableRefresh="tableRefresh" ref="confirmDialog"></cancledialog>
  </div>
</template>

<script>
import {
  getClientInfoList,
  saveClientMoney
} from '@/api/orderCharge/clientMoney'
import { getAccountInfoList } from '@/api/orderCharge/orderCollection'
import Cancledialog from '@/components/Dialog/Cancledialog.vue'
import Pagination from '@/components/Pagination'

var form = {
  idClient: '',
  saveMoney: '',
  borrowFlag: 1,
  idAccount: '',
  voucherCode: '',
  saveMemo: ''
}
export default {
  name: 'ClientMoney',
  components: {
    Cancledialog, Pagination
  },
  props: {
    isChoose: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      rechargeDisable:false,
      selectedOptions: [],
      webType: true,
      byId: '',
      dialogStatus: 1, // 1增加，2修改
      dialogTitle: '',
      rechargeDialog: false,
      search: {
        keyWord: '',
        filterZeroBalance: 0
      },
      ruleForm: {},
      paytypeList: [],
      industryList: [],
      levelList: [],
      listData: {
        total: 0,
        page: 1,
        pageSize: 10
      },
      confirmdialog: false,
      listLoading: false,
      tableData: [],
      accountInfo: [],
      form: Object.assign({}, form)
    }
  },
  mounted() {
    this.getTableInfo()
    this.getAccountInfo()
    if (this.$route.query.type === undefined) {
      this.webType = true
    } else {
      this.webType = false
    }
  },
  methods: {
    // 获取列表
    getTableInfo() {
      const _that = this
      _that.listLoading = true
      var params = _that.search
      var page = {
        pageIndex: _that.listData.page,
        pageSize: _that.listData.pageSize
      }
      // if (_that.search.keyWord) {
        var data = {
          'params': JSON.stringify(params),
          'page': JSON.stringify(page)
        }
      // } else {
      //   var data = {
      //     'params': {},
      //     'page': JSON.stringify(page)
      //   }
      // }

      // console.log(data);
      getClientInfoList(data).then(response => {
        // console.log("tableData",response)
        const data = response.data
        // //  组合表单数据
        _that.tableData = data
        _that.listData.total = response.total
        // console.log(_that.tableData)
        _that.listLoading = false
      }).catch(err => {
        _that.listLoading = false
      })
    },

    // 获取科目
    getAccountInfo() {
      var _that = this
      var data = {}
      getAccountInfoList(data).then(response => {
        console.log(response)
        _that.accountInfo = response.data
      }).catch(err => {
        _that.$message.error(err)
      })
    },
    // 唤起修改
    recharge(id) {
      const _that = this
      _that.dialogTitle = '充值'
      _that.rechargeDialog = true;
      _that.rechargeDisable = false;
      _that.form = Object.assign({}, form)
      _that.form.idClient = id
    },
    // 修改档案
    rechargeSure() {
      const _that = this;
      _that.rechargeDisable = true;
      _that.rechargeDialog = false;
      var info = JSON.stringify(_that.form)
      var data = {
        'clientMoney': info
      }
      saveClientMoney(data).then(res => {
        // console.log(res);
        if (res.httpCode == 200) {
          _that.rechargeDisable = false;
          _that.$message({
            message: '充值成功',
            type: 'success'
          })
          _that.tableRefresh()
        } else {
          _that.rechargeDisable = false;
          _that.$message.error(res.msg)
        }
      }).catch(err => {
        _that.$message.error(err)
        _that.rechargeDisable = false;
      })
    },

    // 刷新表格
    tableRefresh() {
      // 刷新变革
      this.getTableInfo()
    },

    // 搜索
    searchData() {
      this.listData.page = 1
      this.getTableInfo()
    },

    // 弹窗内选择操作
    chooseThis(row) {
      // console.log('点击选择');
      this.$emit('chooseClient', row)
    },
    ERPChoose(row) {
      // this.$message.error(row)
      dyERP.sendJson(JSON.stringify(row))
    }
  }
}
</script>
<style>
.area-select .area-selected-trigger {
  padding: 0px 20px 7px 12px !important;
}

.area-select {
  height: 40px !important;
}
</style>

<style lang="scss" scoped>
.area-select {
  height: 40px;
}

.filter-container {
  margin-bottom: 15px;
}

::v-deep input::-webkit-outer-spin-button,::v-deep input::-webkit-inner-spin-button{
  -webkit-appearance: none !important;
}
::v-deep input[type = 'number']{
  -moz-appearance: textfield !important;
}
</style>
