<template>
  <div class="accont_Page">
    <!-- 卡片栏 -->
    <el-card class="box-card">
      <div v-if="show">
        <div slot="header" class>
          <span>绑定账户</span>
        </div>
        <div class="text_item">
          <!-- 银行卡图片 -->
          <div class="leftImg">
            <img :src="defaultBank" alt>
          </div>
          <!-- 银行图片 -->
          <div class="bankName">
            <div class="bankNumber">
              <div class="bankNumber_1" v-html="err" />
              <div v-if="Number(privacyTime) === 0" class="bankNumber_2">{{ hidden(bankArr.cardNumber, 3, 4) }}</div>
              <div v-else class="bankNumber_2">{{ bankArr.cardNumber }}</div>
            </div>
            <div class="bankNumber">
              <div class="bankNumber_1">持卡人：</div>
              <div class="bankNumber_1">{{ bankArr.cardName }}</div>
            </div>
          </div>
          <!-- 按钮 -->
          <div class="btnList">
            <div class="cutBank" @click="$refs.UnBindBank && $refs.UnBindBank.handleOpen(bankArr)">解绑</div>
            <div class="changeBank" @click="$refs.EditModal && $refs.EditModal.handleOpen({ ...bankArr, id: bankArr.shopId })">更换</div>
          </div>
        </div>
      </div>
      <div v-else>
        <div slot="header" class>
          <span>绑定账户</span>
        </div>
        <div class="text_item">
          <!-- 银行卡图片 -->
          <div class="leftImg">
            <img :src="defaultBank" alt>
          </div>
          <!-- 银行图片 -->
          <div class="bankName">
            <div class="bankNumber">
              <div class="bankNumber_2">尚未绑定账户</div>
            </div>
          </div>
          <!-- 按钮 -->
          <div class="btnList">
            <div class="changeBank" @click="$refs.EditModal && $refs.EditModal.handleOpen({ id: '' })">立即绑定</div>
          </div>
        </div>
      </div>
    </el-card>

    <!-- 新增编辑 -->
    <EditModal ref="EditModal" @success="getList" />
    <!-- 解绑银行卡 -->
    <UnBindBank ref="UnBindBank" @success="getList" />
  </div>
</template>

<script>
import EditModal from './components/EditModal'
import UnBindBank from './components/UnBindBank'
import { accountGetById } from '@/api/account'
import defaultBank from '@/assets/images/bank/default_bank_3x.png'

export default {
  name: 'Account',
  components: {
    EditModal,
    UnBindBank
  },
  data() {
    return {
      err: '账&#12288;号：',
      bankArr: {},
      show: true,
      privacyTime: 0,
      defaultBank
    }
  },
  created() {
    this.getList()
    this.privacyTime = localStorage.getItem('privacyTime')
  },
  methods: {
    // 查询账户
    async getList() {
      const res = await accountGetById({})
      if (res.code === '') {
        console.log(JSON.stringify(res.data))
        if (JSON.stringify(res.data) === '{}') {
          this.show = false
        } else {
          this.bankArr = res.data
          this.show = true
        }
        console.log(this.show)
      }
    },
    // 中间部分
    hidden(str, frontLen, endLen) {
      if (str && frontLen && endLen) {
        let endLenData = 0
        if (str.length !== 2) {
          endLenData = endLen
        }
        const len = str.length - frontLen - endLenData
        let xing = ''
        for (let i = 0; i < len; i++) {
          xing += '*'
        }
        return (
          str.substring(0, frontLen) + xing + str.substring(str.length - endLenData)
        )
      }
    }
  }
}
</script>

<style scoped lang='scss'>
@import url("../../../styles/elDialog.scss");

.text_item {
	padding: 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;

	.leftImg {
		width: 260px;
		height: 68px;
		overflow: hidden;

		img {
			width: 260px;
			height: 68px;
		}
	}

	.bankName {
		font-size: 18px;
		color: #333333;

		.bankNumber {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			line-height: 30px;

			.bankNumber_1 {
				font-size: 18px;
			}

			.bankNumber_2 {
				font-size: 22px;
			}
		}

		.bankPeople {
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.btnList {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 15px;
		cursor: pointer;

		.cutBank {
			background: rgba(58, 104, 242, 0.2);
			border: 1px solid #3a68f2;
			opacity: 0.5;
			border-radius: 4px;
			font-size: 16px;
			color: #3a68f2;
			width: 100px;
			height: 48px;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 30px;
		}

		.changeBank {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100px;
			height: 48px;
			background: #3a68f2;
			border-radius: 4px;
			color: #ffffff;
		}
	}
}

.dialog-footer {
	text-align: center;

	.el-button {
		padding: 15px 30px;

		&:nth-child(1) {
			margin-right: 40px;
		}
	}
}

.unbind {
	height: 40px;
	line-height: 40px;

	span {
		display: inline-block;
		font-size: 14px;
		color: #606266;

		&:nth-child(1) {
			width: 120px;
			text-align: right;
			padding-right: 12px;
			font-weight: 600;
		}

		&:nth-child(2) {
			margin-right: 50px;
		}
	}

	.el-button {
		padding: 6px 20px;
	}
}

.card {
	font-size: 18px;
	color: #84878d;
	// font-weight: 600;
}

.el-form {
	.el-form-item {
		label {
			font-weight: 400 !important;
		}
	}
}

.sendCode {
	margin-left: 20px;
}
</style>
