<template>
  <div>
    <h2>序列码导出</h2>
    <hr>
    <p>
      准备导出序列码批次
    </p>
    <p>
      ID: {{ id }},
      序列码数量：
      <span v-if="batch">{{ batch.code__count }}</span>
      <CSpinner v-else />
    </p>
    <p>请选择导出方式：</p>
    <CFormCheck v-for="(opt, idx) in pattern_types" type="radio" name="pattern_type_radio" :id="'pattern_type_radio_' + idx" :key="idx" :label="opt.label" :checked="gen_type==opt.name" @click="gen_type = opt.name"/>
    <div class="alert alert-secondary" v-if="gen_type == 'mini_program'">
      选择小程序:
      <select class="form-control w-50" v-model="mpid">
        <option v-for="(mp, idx) in mini_programs" :key="idx" :value="mp.id">{{ mp.name }}</option>
      </select>
      <router-link to="/mini-programs">
        管理自定义小程序入口
      </router-link>
    </div>
    <div class="alert alert-secondary" v-if="gen_type == 'pattern'">
      输入字符串格式，其中:
      <ul>
        <li>
          <code>{code}</code>会被自动替换为序列码
        </li>
        <li>
          <code>{seq}</code>会被自动替换为流水号
        </li>
      </ul>
      <input class="form-control w-50" v-model="custom_pattern" />
    </div>
    <div class="my-2">
      <button class="btn btn-primary" @click="do_export" id="export-btn">导出</button>
      <button class="btn btn-secondary mx-2" @click="$router.go(-1)" id="return-btn">返回</button>
    </div>
  </div>
  <JobModal ref="jobmodal" />
</template>

<script>
import JobModal from '../components/job-modal';

export default {
  name: 'CodeBatchExport',
  props: ['id'],
  components: {
    JobModal,
  },
  data: function () {
    return {
      batch: null,
      mpid: null,
      mini_programs: [],
      gen_type: 'code',
      custom_pattern: '',
      pattern_types: [
        {
          name: 'code',
          label: '仅序列码',
        },
        {
          name: 'seq_and_code',
          label: '流水号和序列码',
        },
        {
          name: 'emblem',
          label: '徽象小程序入口',
        },
        {
          name: 'mini_program',
          label: '自定义小程序入口',
        },
        {
          name: 'pattern',
          label: '自定义格式',
        },
      ],
    };
  },
  computed: {
    server_domain: function() {
      var a = window.location.href;
      var fs = a.split('/');
      return fs[2];
    },
    pattern: function() {
      switch (this.gen_type) {
        case 'code':
          return '{code}';
        case 'seq_and_code':
          return '{seq},{code}';
        case 'emblem':
          return 'https://' + this.server_domain + '/api/mini-prog-entry/?code={code}';
        case 'mini_program':
          return 'https://' + this.server_domain + '/api/mini-prog-entry/?mp=' + this.mpid + '&code={code}';
        case 'pattern':
          return this.custom_pattern;
      }
      return '{code}';
    },
  },
  methods: {
    reload: async function() {
      var r = await this.$root.api_get('/api/v1/code-batch/' + this.id + '/');
      this.batch = r.data;
      this.mini_programs = await this.$root.api_get_all('/api/v1/mini-program/');
    },
    do_export: async function() {
      var r = await this.$root.api_post('/api/v1/export-batch/', {
        id: this.id,
        pattern: this.pattern,
      });
      var job = r.data.job;
      this.$refs.jobmodal.show(job);
    },
  },
  mounted() {
    this.reload();
  },
}
</script>

<style scoped>
</style>

