<template>
  <div id="hairmess">
    <admin-frame topType="2" @back="back" :rightArrow="false" :usePage="false" :useNav="false">
      <template v-slot:info>
        <van-form label-width="4em">
          <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>
          <van-col span="24" class="btn">
            <van-button type="danger" size="small" @click="back">取消发送</van-button>
            <van-button type="info" size="small" @click="onSubmit">确认发送</van-button>
          </van-col>
        </van-form>
        <van-col span="24" class="one">
          <van-col span="24" class="list" v-for="(item, index) in list" :key="index">
            <van-col span="24" class="title">{{ item.key }}</van-col>
            <van-col span="24" class="other">
              说明：<span>{{ item.word }}</span>
            </van-col>
          </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: upload } = createNamespacedHelpers('upload');
const { mapActions: patentwarning } = createNamespacedHelpers('patentwarning');

export default {
  name: 'hairmess',
  props: {},
  components: {
    adminFrame,
  },
  data: function () {
    return {
      form: {},
      uri: '',
      list: [],
    };
  },
  async created() {},
  methods: {
    ...upload(['upload']),
    ...patentwarning(['import']),
    // 提交
    async onSubmit() {
      let data = { uri: this.uri };
      let res = await this.import(data);
      if (this.$checkRes(res)) {
        if (typeof res.data != 'string') this.$set(this, `list`, res.data);
        this.$toast({ type: `success`, message: `操作成功` });
      } else {
        this.$toast({ type: `success`, message: `${res.errmsg}` });
      }
    },
    async toUpload({ file }, model) {
      // 上传,赋值
      const res = await this.upload({ file, dir: 'warning' });
      if (this.$checkRes(res)) {
        this.$set(this.form, model, [{ name: res.name, url: res.uri }]);
        this.$set(this, `uri`, res.uri);
      }
    },
    toDelete(file, model) {
      const index = this.form[model].findIndex((f) => _.isEqual(f, file));
      this.form[model].splice(index, 1);
      this.$set(this, `uri`, '');
    },
    // 返回
    back() {
      this.$router.push({ path: '/patent/admin/examine/hairmess' });
    },
  },
  computed: {
    ...mapState(['user']),
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="less" scoped>
.btn {
  text-align: center;
  .van-button {
    margin: 10px;
  }
}
.one {
  .list {
    background-color: #fff;
    margin: 0 0 8px 0;
    padding: 8px;
    border-radius: 5px;
    .title {
      font-size: 16px;
      font-weight: bold;
      margin: 0 0 5px 0;
    }
    .other {
      margin: 0 0 5px 0;
      .otherInfo {
        font-size: 14px;
        color: #666;
        margin: 0 0 5px 0;
        span {
          color: #000;
        }
      }
    }
  }
}
</style>
