<template>
  <div id="index">
    <admin-frame topType="2" @back="back" :rightArrow="false" :usePage="false" :useNav="false">
      <template v-slot:info>
        <van-col span="24" class="one">
          <van-button type="info" size="small" @click="getTemplate()">数据模板下载</van-button>
          <importForm-1 :form="form" @onSubmit="onSubmit"></importForm-1>
        </van-col>
        <van-col span="24" class="two">
          <van-col span="24" class="list" v-for="(item, index) in list" :key="index">
            <van-col span="24" class="name">
              {{ item.errmsg || item.message }}
            </van-col>
          </van-col>
        </van-col>
      </template>
    </admin-frame>
  </div>
</template>

<script>
import importForm1 from './parts/importForm-1.vue';
import adminFrame from '@frame/src/components/mobile-frame/mobile-main.vue';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: personal } = createNamespacedHelpers('personal');
export default {
  name: 'index',
  props: {},
  components: {
    adminFrame,
    importForm1,
  },
  data: function () {
    return {
      // 详细信息
      form: {},
      // 数据提示
      list: [],
    };
  },
  async created() {},
  methods: {
    ...personal(['import']),
    async onSubmit(data) {
      var p1 = data.file.map((item) => ({ uri: item.url }))[0];
      let res = await this.import(p1);
      if (this.$checkRes(res)) {
        this.$toast({ type: `success`, message: `操作完成` });
        this.$set(this, `list`, res.data);
      } else {
        this.$toast({ type: `success`, message: `${res.errmsg}` });
      }
    },
    // 数据模板下载
    getTemplate() {
      window.location.href = `${process.env.VUE_APP_HOST}/${process.env.VUE_APP_ROUTER}/用户批量注册数据模板.xlsx`;
    },
    // 返回
    back() {
      this.$router.push({ path: `/account/users/index` });
    },
  },
  computed: {
    ...mapState(['user']),
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="less" scoped>
.one {
  background-color: #ffffff;
  text-align: center;
  padding: 10px 0;
  margin: 0 0 10px 0;
  .van-button {
    margin: 0 10px;
  }
}
.two {
  .list {
    background-color: #ffffff;
    margin: 0 0 10px 0;
    padding: 10px;
    .name {
      font-size: 16px;
    }
  }
}
</style>
