/*账户管理*/
<template>
  <div class="account">
    <div class="header">
      <div>
        <span>当前子账户数 {{ currentNum }}/{{ maxNum }}</span>
      </div>

      <img class="add" :src="add" alt="add" @click="addAccount" />
    </div>
    <div class="content-list">
      <div v-if="paginationConfig.total == 0" class="tips">暂无数据</div>
      <div
        v-for="(item, index) in listData"
        :key="index"
        :class="['list', item.userstate == 0 ? 'invalid' : '']"
      >
        <div class="desc">
          <p>{{ item.name }}</p>
          <span>创建时间：{{ formatTime(item.createTime) }}</span>
        </div>
        <div class="operation">
          <span
            v-if="item.userstate == 1"
            :class="[item.userstate == 0 ? '' : 'able']"
            @click="Reset(index)"
            >重置密码</span
          >
          <span
            :class="[item.userstate == 0 ? '' : 'able']"
            @click="Ivalid(index)"
            >{{ item.userstate == 0 ? '已失效' : '失效' }}</span
          >
        </div>
      </div>
    </div>

    <div class="pagination">
      <Pagination
        :pagination-config="paginationConfig"
        @putPagination="getPagination"
      ></Pagination>
      <el-button
        type="danger"
        size="mini"
        plain
        round
        @click.native.prevent="addLimit"
        >增加子账户上限</el-button
      >
    </div>

    <Toast :toast-config="toastConfig" @putToast="getToast" />
    <Add :add-config="addConfig" @putAdd="getAdd" />
    <Limit :limit-config="limitConfig" @putLimit="getLimit" />
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import Toast from '@/components/Toast'
import Add from './components/Add'
import Limit from './components/Limit'
import add from '@/assets/img/add.png'
import { request } from '@/utils/request'
import { parseTime } from '@/utils/index'
export default {
  name: 'Account',
  components: { Pagination, Toast, Add, Limit },
  data() {
    return {
      add: add,
      paginationConfig: {
        hideSinglePage: false,
        page: 1,
        size: 15,
        sizeList: [10, 15, 30, 50],
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
      },
      toastConfig: {
        isShow: false,
        showCancel: false,
        center: false,
        message: '',
      },
      addConfig: {
        isShow: false,
      },
      limitConfig: {
        isShow: false,
        num: '',
        intergal: '',
        selectGoodsCode: '',
        numList: [],
        point: '0',
      },
      currentIndex: '',
      currentNum: '0', // 当前子账户数
      maxNum: '0', // 子账户上限数
      point: '0', // 剩余积分
      loading: false, // 是显示加载
      listData: [], // 数据列表
    }
  },
  created() {
    this.getData() // 获取子账户列表
    this.getAccount() // 获取账户信息
  },
  inject: ['getCount'],
  methods: {
    // 获取账户信息
    getAccount() {
      const params = {
        transCode: 'C00001',
      }
      request(params)
        .then((res) => {
          this.currentNum = res.subAccount
          this.maxNum = res.maxSubAccount
          this.point = res.point
        })
        .catch((err) => {})
    },
    // 获取子账户列表
    getData() {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      })
      setTimeout(() => {
        const params = {
          transCode: 'C00002',
          page: this.paginationConfig.page,
          count: this.paginationConfig.size,
        }
        request(params)
          .then((res) => {
            loading.close()
            this.listData = res.rows
            this.paginationConfig.total = res.total
          })
          .catch((err) => {
            loading.close()
          })
      }, 1500)
    },
    // 新增子账户
    addAccount() {
      if (this.currentNum === this.maxNum)
        return this.$message.warning('子账户数已达上限，请先增加子账户上限！')
      this.addConfig.isShow = true
    },
    // 增加子账户上限
    addLimit() {
      //获取商品列表
      const params = {
        transCode: 'C00022',
        type: '2', //1-充值，2-增加子账户上限
      }
      request(params)
        .then((res) => {
          this.limitConfig = {
            isShow: true,
            intergal: res.rows.filter((tmp) => tmp.saleUnit == 0)[0].salePrice,
            num: res.rows.filter((tmp) => tmp.saleUnit == 0)[0].returnGoods,
            numList: res.rows.filter((tmp) => tmp.saleUnit == 0),
            selectGoodsCode: res.rows.filter((tmp) => tmp.saleUnit == 0)[0]
              .goodsCode,
            point: this.point,
          }
        })
        .catch((err) => {})
    },
    // 重置密码
    Reset(index) {
      this.currentIndex = index
      const account = this.listData[index].name
      this.toastConfig = {
        isShow: true,
        showCancel: true,
        center: false,
        message: `重置密码后密码将改为'12345678'，您确定要重置子账户：${account} 的密码吗？`,
      }
    },
    // 失效
    Ivalid(index) {
      this.currentIndex = index
      const account = this.listData[index].name
      this.toastConfig = {
        isShow: true,
        showCancel: true,
        center: false,
        message: `该操作不可恢复，失效子账户将不占用子账户数，您确定要让子账户：${account} 的失效吗？`,
      }
    },
    // 执行操作
    getOperation(id, type, account) {
      const params = {
        transCode: 'C00019',
        id: id,
        type: type,
      }
      request(params)
        .then((res) => {
          if (type === '1') {
            this.getCount()
            this.getAccount()
            this.getData()
          }
          this.$message.success(
            type === '1'
              ? `子账户：${account} 已失效！`
              : `成功重置子账户：${account} 的密码！`
          )
          this.toastConfig = {
            isShow: true,
            showCancel: false,
            center: type === '1',
            message:
              type === '1'
                ? `子账户：${account} 已失效！`
                : `成功重置子账户：${account} 的密码！`,
          }
        })
        .catch((err) => {})
    },
    // 获取分页操作
    getPagination(data) {
      this.paginationConfig = data
      this.getData()
    },
    // 获取Toast操作
    getToast(data) {
      const index = this.currentIndex
      const account = this.listData[index].name
      this.toastConfig.isShow = false
      if (
        data &&
        this.toastConfig.message ===
          `重置密码后密码将改为'12345678'，您确定要重置子账户：${account} 的密码吗？`
      ) {
        this.getOperation(this.listData[index].userId, '0', account)
      } else if (
        data &&
        this.toastConfig.message ===
          `该操作不可恢复，失效子账户将不占用子账户数，您确定要让子账户：${account} 的失效吗？`
      ) {
        this.getOperation(this.listData[index].userId, '1', account)
      }
    },
    // 获取add操作
    getAdd(data) {
      this.addConfig.isShow = false
      if (data) {
        this.getCount()
        this.getAccount()
        this.getData()
      }
    },
    // 获取limit操作
    getLimit(data) {
      this.limitConfig.isShow = false
      if (data) {
        this.getAccount()
      }
    },
    formatTime(time) {
      return parseTime(time)
    },
  },
}
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';
@import '@/styles/mixin.scss';
.account {
  @include w_h(100%, 100%);
  font-size: 13px;
  color: $color_3;
  background: $color_f;
  .header {
    @include flex();
    @include w_h(100%, 40px);
    padding: 10px 30px 0;
    font-size: 18px;
    font-weight: 700;
    .el-image {
      width: 20px;
      &:hover {
        cursor: pointer;
        opacity: 0.8;
      }
    }
  }
  .content-list {
    @include w_h(100%, 80%);
    padding: 5px 30px;
    border-bottom: 1px solid #ebeef5;
    overflow-y: auto;
    .tips {
      @include w_h(100%, 100%);
      line-height: 400px;
      font-size: 12px;
      text-align: center;
      color: #909399;
    }
    .list {
      @include flex();
      padding: 8px 0;
      line-height: 16px;
      border-bottom: 1px solid $color_f5;
      .desc {
        font-size: 14px;
        span {
          font-size: 12px;
          color: $color_9;
        }
      }
      .operation {
        span {
          margin-left: 25px;
          &.able:hover {
            color: #2cae00;
            cursor: pointer;
          }
        }
      }
    }
    .invalid,
    .invalid .desc span {
      color: $color_d;
    }
  }

  .pagination {
    @include flex();
    padding: 20px;
    font-size: 12px;
    color: $color_9;
  }
}
</style>

