<template>
  <div class="app-container">
    <!-- 列表 -->
    <div class="mymain-container">
      <div class="table">
        <el-table
          v-loading="listLoading"
          :data="dataList"
          element-loading-text="Loading"
          border
          fit
          highlight-current-row
          stripe
        >
          <el-table-column
            align="left"
            type="index"
            label="序号"
            prop=""
            width="100"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="left"
            label="账户名称"
            prop="accountName"
            min-width="100"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="left"
            label="银行卡号"
            prop="bankCardId"
            min-width="100"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="left"
            label="开户行名称"
            prop="openBankName"
            min-width="100"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="left"
            label="余额(元)"
            prop="balanceAmount"
            min-width="100"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column align="center" label="操作" width="100">
            <template slot-scope="scope">
              <el-button
                :disabled="scope.row.openState"
                type="text"
                @click="lookAmountFn(scope.$index, scope.row.id)"
                >{{ scope.row.openState ? scope.row.time + 's' : '查看余额' }}</el-button
              >
              <!-- <el-button type="text" @click="lookAmountFn(scope.row.id)" :disabled="countDown != 60">{{
                          countDown == 60
                            ? '查看余额'
                            :  countDown + "s"
                        }}</el-button> -->
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="fr">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="listTotal"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 弹窗 -->
    <el-dialog
      title="查看余额"
      :visible.sync="dialogForm"
      width="30%"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <el-form ref="balanceForm" :rules="rules" :model="balanceForm" label-width="100px">
        <el-form-item label="手机号码" prop="mobile">
          <!-- <el-input placeholder="请输入"></el-input> -->
          <el-select class="selectStyle" v-model="balanceForm.mobile" placeholder="请选择" filterable>
            <!-- <el-option value="13800138000"></el-option>
            <el-option value="13927887984"></el-option>
            <el-option value="13452642451"></el-option> -->
            <el-option v-for="(v, i) in phoneList" :key="i" :label="v.dictValue" :value="v.dictValue"></el-option>
          </el-select>
        </el-form-item>
        <el-row :gutter="20">
          <el-col :xs="24" :sm="12" :lg="16">
            <el-form-item label="手机验证码" prop="code">
              <el-input v-model="balanceForm.code" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :lg="6">
            <!-- <el-button type="primary">验证码</el-button> -->
            <el-button @click="codeFn" :disabled="countDown != 60">{{
              countDown == 60 ? getCodeText : '重新获取(' + countDown + 's)'
            }}</el-button>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelFn">取 消</el-button>
        <el-button type="primary" @click="confirmFn">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getList, getCode, getAcount, getbyCode } from '@/api/dailySettlement/bankBalanceQuery'
export default {
  data() {
    return {
      dataList: [],
      rules: {},
      balanceForm: {
        mobile: '',
        code: ''
      },
      listLoading: false, // 列表加载loading
      dialogForm: false,
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页数量
      listTotal: 0, // 列表总数
      getCodeText: '获取验证码',
      countDown: 60,
      seeIndex: '',
      seeId: '',
      phoneList: ''
    }
  },
  created() {
    this.getDataList()

    // setInterval(() => {
    //   console.log(2);
    //   this.dataList.forEach((v) => {
    //     if (v.openState) {
    //       v.time--;
    //       if (v.time == 0) {
    //         v.time = 60;
    //         v.openState = false;
    //       }
    //     }
    //   });
    // }, 1000);
  },
  methods: {
    //获取手机号
    async getPhone() {
      let res = await getbyCode({
        code: 'SELECT'
      })
      this.phoneList = res.data
    },
    // 更改每页数量
    handleSizeChange(val) {
      this.pageSize = val
      this.currentPage = 1
      this.getDataList()
    },
    // 更改当前页
    handleCurrentChange(val) {
      this.currentPage = val
      this.getDataList()
    },

    //验证码
    async codeFn() {
      let params = {
        mobile: this.balanceForm.mobile
      }
      await getCode(params)
      this.$message.success('短信已发送')

      this.countDown--
      this.timer = setInterval(() => {
        this.countDown--
        if (this.countDown == 0) {
          this.countDown = 60
          this.getCodeText = '重新获取'
          clearInterval(this.timer)
        }
      }, 1000)
    },
    //查看余额
    lookAmountFn(i, id) {
      this.getPhone()
      this.seeIndex = i
      this.seeId = id
      this.dialogForm = true
    },
    //获取列表数据
    async getDataList() {
      let params = {
        pageSize: this.pageSize,
        pageNo: this.currentPage
      }
      let res = await getList(params)

      this.dataList = res.data.records
      this.dataList.forEach(v => {
        v.time = 60
        v.openState = false
        v.balanceAmount = '******'
      })
      this.listTotal = res.data.total
    },
    //取消
    async cancelFn() {
      await this.$refs.balanceForm.resetFields()
      clearInterval(this.timer)
      this.countDown = 60
      this.dialogForm = false
    },
    //确定
    async confirmFn() {
      let params = {
        id: this.seeId,
        ...this.balanceForm
      }
      let res = await getAcount(params)

      this.$message.success('查询成功')

      let index = this.seeIndex
      this.dataList.forEach(v => {
        if (v.id == this.seeId) {
          v.balanceAmount = res.data.balanceAmount
          // v.balanceAmount = 123;
          v.openState = true
          let a = 'aaa' + v.id

          a = setInterval(() => {
            v.time--
            this.$set(this.dataList, index, v)
            // Object.assign({}, this.dataList);
            if (v.time == 0) {
              v.time = 60
              v.openState = false
              v.balanceAmount = '******'
              this.$set(this.dataList, index, v)
              clearInterval(a)
            }
          }, 1000)
        }
      })

      this.cancelFn()
    }
  }
}
</script>

<style lang="scss" scoped>
.selectStyle {
  width: 100%;
}
::v-deep .el-dialog__body {
  overflow-y: auto;
}
</style>
