<template>
  <base-list>
    <template slot="n_header">
      <el-form v-model="pagerDto" inline>
        <el-form-item label="客户名称">
          <el-select
            v-model="pagerDto._Eq_CustomerId"
            placeholder="客户名称"
            clearable
            filterable
          >
            <el-option
              v-for="item in customers"
              :key="item.Id"
              :label="item.CompanyName"
              :value="item.Id"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="pagerDto._Eq_SalesmanUserId"
            placeholder="业务员"
            clearable
            filterable
          >
            <el-option
              v-for="item in salesmanUser"
              :key="item.Id"
              :label="item.NickName"
              :value="item.Id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="帐期">
          <el-select
            v-model="pagerDto._Eq_BillingCycle"
            placeholder="选择帐期"
            clearable
            filterable
          >
            <el-option
              v-for="item in billingCycle"
              :key="item.Name"
              :label="item.Name"
              :value="item.Value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="pagerDto._Eq_IsActive"
            placeholder="是否激活"
            clearable
            filterable
          >
            <el-option value="True" label="是" />
            <el-option value="False" label="否" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="pagerSerach(1)"> 搜索 </el-button>
        </el-form-item>
      </el-form>
    </template>
    <template slot="n_option" />
    <template>
      <el-table
        v-loading="dataLoading"
        :data="data"
        :highlight-current-row="true"
        :select-on-indeterminate="true"
        width="100%"
        border
      >
        <el-table-column label="客户名">
          <template slot-scope="r">
            <el-button type="text" @click="showEdit(r.row)">{{
              r.row.CustomerAccountName
            }}</el-button>
          </template>
        </el-table-column>
        <el-table-column label="业务员">
          <template slot-scope="r">
            {{ r.row.SealsmanUserName }}
          </template>
        </el-table-column>
        <el-table-column label="帐户余额">
          <template slot-scope="r">
            {{ r.row.Balance }}
          </template>
        </el-table-column>
        <el-table-column label="授信">
          <template slot-scope="r">
            <el-input
              v-show="r.row.UpdateQuota"
              :ref="'uq_' + r.$index"
              v-model="r.row.Quota"
              @blur="
                r.row.UpdateQuota = false;
                updateRow(r.row, r.index);
              "
            />
            <el-button
              v-show="!r.row.UpdateQuota"
              type="text"
              @click="chagneEditQ(r)"
            >{{ r.row.Quota }}</el-button>
          </template>
        </el-table-column>
        <el-table-column label="可用余额">
          <template slot-scope="r">
            {{ r.row.Balance + r.row.Quota }}
          </template>
        </el-table-column>
        <el-table-column label="币种">
          <template slot-scope="r">
            <el-input
              v-show="r.row.UpdateCurrency"
              :ref="'ur_' + r.$index"
              v-model="r.row.Currency"
              @blur="
                r.row.UpdateCurrency = false;
                updateRow(r.row, r.index);
              "
            />
            <el-button
              v-show="!r.row.UpdateCurrency"
              type="text"
              @click="chagneEditCU(r)"
            >{{ r.row.Currency }}</el-button>
          </template>
        </el-table-column>
        <el-table-column label="逾期收款比例">
          <template slot-scope="r">
            <el-input
              v-show="r.row.UpdateOverdueRatio"
              :ref="'ur_' + r.$index"
              v-model="r.row.OverdueRatio"
              @blur="
                r.row.UpdateOverdueRatio = false;
                updateRow(r.row, r.index);
              "
            />
            <el-button
              v-show="!r.row.UpdateOverdueRatio"
              type="text"
              @click="chagneEditOR(r)"
            >{{ r.row.OverdueRatio }}</el-button>
          </template>
        </el-table-column>
        <el-table-column label="付款期限天数">
          <template slot-scope="r">
            <el-input
              v-show="r.row.UpdateRepaymentTermDay"
              :ref="'ut_' + r.$index"
              v-model="r.row.RepaymentTermDay"
              @blur="
                r.row.UpdateRepaymentTermDay = false;
                updateRow(r.row, r.index);
              "
            />
            <el-button
              v-show="!r.row.UpdateRepaymentTermDay"
              type="text"
              @click="chagneEditRT(r)"
            >{{ r.row.RepaymentTermDay }}</el-button>
          </template>
        </el-table-column>
        <el-table-column label="当前逾期天数" prop="CurrentOverdueDays" />
      </el-table>
      <el-pagination
        :page-sizes="[10, 20, 40, 100, 400]"
        :current-page="pagerDto.PageIndex"
        :page-size.sync="pagerDto.PageSize"
        background
        layout="prev, pager, next ,total ,jumper,sizes,slot "
        :total="pagerDto.total"
        @size-change="changePager"
        @current-change="pagerSerach"
      />
    </template>
    <el-dialog :visible.sync="dialogVisible" :title="row.CustomerAccountName">
      <el-tabs>
        <el-tab-pane label="修改历史">
          <el-table :data="logs">
            <el-table-column label="修改人" prop="UpdateUserName" />
            <el-table-column label="修改时间" prop="UpdateTime" />
            <el-table-column label="修改项" prop="FieldDesc" />
            <el-table-column label="值" prop="NewValue" />
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </base-list>
</template>
<script>
import BaseList from '@/components/Xyy/baselist'
import { GetPager, Update, GetLogs } from '@/api/customerAccount/api'
import { _getSalesmanUsers } from '@/api/customer'
import { _getBillingCycle, _getCustomers } from '@/api/baseInfo'
export default {
  name: 'CusetomerAccount',
  components: { 'base-list': BaseList },
  data() {
    return {
      customers: [],
      salesmanUser: [],
      dialogVisible: false,
      data: [],
      dataLoading: false,
      pagerDto: {
        PageIndex: 0,
        PageSize: 10,
        total: 0,
        QuerySort: [{ Field: 'updatetime', IsDesc: true }],
        _Eq_IsActive: 'True'
      },
      billingCycle: [],
      cacheRow: null,
      row: {},
      logs: []
    }
  },
  mounted() {
    _getBillingCycle().then((response) => {
      this.billingCycle = response
    })
    _getCustomers().then(response => {
      this.customers = response
    })
    _getSalesmanUsers().then(response => {
      this.salesmanUser = response
    })
    this.pagerSerach(1)
  },
  methods: {
    showEdit(r) {
      this.dialogVisible = true
      this.row = r
      GetLogs(r.Id).then((res) => {
        this.logs = res
      })
    },
    updateRow(r, index, type) {
      Update(r).catch((r) => {
        this.$set(this.data, index, this.cacheRow)
      })
    },
    chagneEditOR(r) {
      r.row.UpdateOverdueRatio = true
      this.cacheRow = JSON.parse(JSON.stringify(r.row))
      setTimeout(() => {
        this.$refs['ur_' + r.$index].focus()
      }, 100)
    },
    chagneEditCU(r) {
      r.row.UpdateCurrency = true
      this.cacheRow = JSON.parse(JSON.stringify(r.row))
      setTimeout(() => {
        this.$refs['cu_' + r.$index].focus()
      }, 100)
    },
    chagneEditQ(r) {
      r.row.UpdateQuota = true
      this.cacheRow = JSON.parse(JSON.stringify(r.row))
      setTimeout(() => {
        this.$refs['uq_' + r.$index].focus()
      }, 100)
    },
    chagneEditRT(r) {
      r.row.UpdateRepaymentTermDay = true
      this.cacheRow = JSON.parse(JSON.stringify(r.row))
      setTimeout(() => {
        this.$refs['ut_' + r.$index].focus()
      }, 100)
    },
    pagerSerach(index) {
      this.dataLoading = true
      if (index) {
        this.pagerDto.PageIndex = index
      }
      GetPager(this.pagerDto)
        .then((res) => {
          this.data = res.Result
          this.pagerDto.total = res.TotalCount
        })
        .finally((res) => {
          this.dataLoading = false
        })
    },
    changePager(v) {
      this.PageSize = v
      this.pagerSerach(1)
    }
  }
}
</script>

