<template>
  <div class="page">
    <topBar
      v-if="topList.length > 0"
      :topList="topList"
      :moren="moren"
    ></topBar>
    <div v-if="topList[0].changed == true">
      <div class="main">
        <el-form ref="typeFrom" :model="typeFrom" label-width="100px">
          <el-form-item :label="'操作类型'">
            <el-select clearable :placeholder="'请选择'" v-model="typeFrom.czlx">
              <el-option
                v-for="item in cztypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>

        <!-- 单笔/批量 -->
        <singleCz v-if="typeFrom.czlx==1"></singleCz>
        <!-- 批量充值 -->
        <doubleCz v-if="typeFrom.czlx==2"></doubleCz>
      </div>
    </div>
  </div>
</template>

<script>
import topBar from "@/components/topBarRole";
import { mapGetters } from "vuex";
import { getRouters } from "@/api/settle";
import { getRechargeOperationType } from "@/api/financial";
import singleCz from "@/views/financial/recharge/singleCz.vue";
import doubleCz from '@/views/financial/recharge/doubleCz.vue'
export default {
  name: "Chongzhi",
  components: {
    topBar,
    singleCz,
    doubleCz
  },
  computed: {
    ...mapGetters(["getUser"]),
  },
  data() {
    return {
      moren: "chongzhi",
      topList: [
        {
          name: '充值',
          path: "chongzhi",
          url: "Chongzhi",
          changed: false,
        },
        {
          name: '冻结',
          path: "dongjie",
          url: "Dongjie",
          changed: false,
        },
      ],
      typeFrom: {
        czlx:1
      },
      cztypeList: [],
    };
  },
  created() {
    this.getUserRoute();
    this.getRechargeOperationType();
  },
  methods: {
    getUserRoute() {
      getRouters().then((res) => {
        res.data.forEach((item) => {
          this.topList.forEach((items) => {
            if (item.routeName == items.url) {
              items.changed = true;
            }
          });
        });
      });
    },
    getRechargeOperationType() {
      getRechargeOperationType().then((res) => {
        this.cztypeList = res.data;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-table thead {
  color: #000000;
}
::v-deep .el-table .warning-row {
  background: #f9f9f9;
}

.page {
  padding: 20px;
  background: #f9f9f9;
  font-size: 14px;
  overflow: auto;
  .mainbtn {
    margin-bottom: 20px;
    .thebtn1 {
      background: rgba(255, 103, 35, 1);
      color: #ffffff;
    }
    .thebtn2 {
      background: rgba(0, 155, 88, 1);
      color: #ffffff;
    }
  }
  .main {
    padding: 10px 0;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0px 2px 20px 0px rgba(238, 238, 238, 0.5);
    .tableBox {
      border-radius: 8px;
      border: 1px solid rgba(204, 204, 204, 1);
      padding: 20px 0;
    }
  }
  .footer {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 0;
    .thebtn {
      width: 120px;
      height: 38px;
    }
  }
}
</style>
