<template>
  <view class="setPsd">
    <ul
      class="_password"
      @click="inFocus"
    >
      <li
        v-for="(item, index) in Psdlist"
        :key="index"
        :class="item.class"
      ></li>
    </ul>
    <view>
      <view
        class="confirmBtn"
        @click="changePsd"
      >确认</view>
    </view>
    <!-- 键盘 -->
    <keyboard-module
      :show="keyShow"
      @comfirm="hideKeyFn"
      @clickKey="clickKeyFn"
      :type="type"
      @del="delFn"
      :maskShow="false"
    />
  </view>
</template>

<script>
import keyboardModule from './components/keyboard';
import { postWxCode } from '@/api/mini';
import { adminSetPayPassword } from '@/api/admin/index';
export default {
  components: {
    keyboardModule,
  },
  data () {
    return {
      Psdlist: [{ class: '' }, { class: '' }, { class: '' }, { class: '' }, { class: '' }, { class: '' }],
      keyShow: true,
      type: '2',
      keyContent: ''
    }
  },
  methods: {
    inFocus () {
      this.keyContent = ''
      this.Psdlist = [{ class: '' }, { class: '' }, { class: '' }, { class: '' }, { class: '' }, { class: '' }];
    },
    hideKeyFn () {
      this.keyShow = false
    },
    clickKeyFn (val) {
      console.log(val)
      this.keyContent = val
      let num = 6
      for (let i = 0; i < num; i++) {
        if (this.keyContent[i]) {
          this.Psdlist[i].class = 'active'
        } else {
          this.Psdlist[i].class = ''
        }
      }
    },
    delFn () {
      this.keyContent = this.keyContent.substr(0, this.keyContent.length - 1);
      this.Psdlist[this.keyContent.length].class = ''
      console.log('点击了删除按钮', this.keyContent)
    },
    // 修改密码
    changePsd () {
      console.log(this.keyContent.length)
      if (this.keyContent.length === 6) {
        adminSetPayPassword({ password: this.keyContent }).then(psdRes => {
          this.$store.commit('setPassWord', psdRes.data.payPassword)
          this.$msg(psdRes.msg)
          uni.navigateBack({})
        }).catch(err => { 
          this.$msg(err.msg)
          uni.navigateBack({}) 
          })
      } else {
        this.$msg('请输入6位数密码')
      }

    }
  }
}
</script>

<style lang="scss" scoped>
.setPsd {
  ._password {
    margin-top: 20%;
    height: 140upx;
    width: 100vw;
    // background: pink;
    padding: 20upx;
    display: flex;
    box-sizing: border-box;
    & > li {
      flex: 1;
      height: 100%;
      border: 1px solid #ddd;
      border-right: none;
    }
    & > li:last-child {
      border-right: 1px solid #ddd;
    }
    & > .active {
      position: relative;
      &::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        border-radius: 20upx;
        transform: translate(-50%, -50%);
        height: 40upx;
        width: 40upx;
        background: #666;
      }
    }
  }
  .confirmBtn {
    height: 88upx;
    width: 140upx;
    background: #3385ff;
    text-align: center;
    line-height: 88upx;
    margin: 10% auto;
    border-radius: 8px;
    font-size: 32upx;
    color: #ffffff;
  }
}
</style>