<template>
  <div id="index">
    <admin-frame topType="2" @back="back" :usePage="false" :rightArrow="false" :useNav="false">
      <template v-slot:info>
        <van-col span="24" class="one">
          <van-button type="info" size="small" @click="daownload()">下载导入模板</van-button>
        </van-col>
        <van-col span="24" class="two">
          <van-form @submit="onSubmit">
            <van-field v-model="form.code" name="code" label="机构code" style="display: none" />
            <van-field
              readonly
              clickable
              :value="form.mech_name"
              name="mech_name"
              label="选择机构"
              placeholder="点击选择"
              @click="oneShow = true"
              :rules="[{ required: false, message: '请选择' }]"
            />
            <van-popup v-model="oneShow" position="bottom">
              <van-picker show-toolbar :columns="mechList" value-key="name" @confirm="oneCom" @cancel="oneShow = false" />
            </van-popup>
            <van-field name="uri" label="文件">
              <template #input>
                <van-uploader
                  :fileList="form.uri"
                  :max-count="1"
                  :after-read="(file) => toUpload(file, 'uri')"
                  @delete="(file) => toDelete(file, 'uri')"
                  accept="file"
                />
              </template>
            </van-field>
            <div style="margin: 16px; text-align: center">
              <van-button :loading="loading" type="info" native-type="submit" loading-text="加载中...">确认导入</van-button>
            </div>
          </van-form>
        </van-col>
        <van-col span="24" class="thr">
          <van-col span="24" class="list" v-for="(item, index) in list" :key="index">
            提示信息：<span>{{ item }}</span>
          </van-col>
        </van-col>
      </template>
    </admin-frame>
  </div>
</template>

<script>
import adminFrame from '@frame/src/components/mobile-frame/mobile-main.vue';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: adminLogin } = createNamespacedHelpers('adminLogin');
const { mapActions: patentinfo } = createNamespacedHelpers('patentinfo');
const { mapActions: upload } = createNamespacedHelpers('upload');
export default {
  name: 'index',
  props: {},
  components: {
    adminFrame,
  },
  data: function () {
    return {
      form: {},
      loading: false,
      list: [],
      // 机构
      mechList: [],
      oneShow: false,
    };
  },
  created() {
    this.searchOther();
  },
  methods: {
    ...upload(['upload']),
    ...patentinfo(['toImport']),
    ...adminLogin({ adminQuery: 'query' }),
    // 提交导入
    async onSubmit(values) {
      let data = values;
      data.uri = data.uri ? data.uri[0].uri : '';
      this.loading = true;
      let res = await this.toImport(data);
      if (this.$checkRes(res)) {
        this.$set(this, `list`, res.data);
        this.$toast({ type: `success`, message: `导入成功` });
        this.loading = false;
      } else {
        this.$toast({ type: `success`, message: `${res.errmsg}` });
      }
    },
    // 下载模板
    daownload() {
      window.location.href = `${process.env.VUE_APP_HOST}/${process.env.VUE_APP_ROUTER}/专利数据模板.xlsx`;
    },

    // 返回
    back() {
      this.$router.push({ path: '/patent/admin/patent/info' });
    },

    async toUpload({ file }, model) {
      // 上传,赋值
      const res = await this.upload({ file, dir: 'patent' });
      if (this.$checkRes(res)) {
        this.$set(this.form, model, [{ name: res.name, uri: res.uri }]);
      }
    },
    toDelete(file, model) {
      const index = this.form[model].findIndex((f) => _.isEqual(f, file));
      this.form[model].splice(index, 1);
    },
    // 查詢机构信息
    async searchOther() {
      let res = await this.adminQuery({ pid: this.user.id });
      if (this.$checkRes(res)) {
        this.$set(this, `mechList`, res.data);
      }
    },
    // 确认选择
    oneCom(value) {
      this.$set(this.form, `code`, value.code);
      this.$set(this.form, `mech_name`, value.name);
      this.oneShow = false;
    },
  },
  computed: {
    ...mapState(['user']),
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="less" scoped>
.one {
  text-align: center;
  margin: 8px 0;
  .van-button {
    margin: 0 5px;
  }
}
.thr {
  .list {
    padding: 10px;
    background-color: #fff;
    margin: 0 0 10px 0;
    font-size: 15px;
    color: #666;
    span {
      color: #000;
    }
  }
}
</style>
