<template>
  <GenericManager
    :uri="resource_uri"
    object_name="序列码批次"
    no_details=1
    show_search=1
    :list_fields="['id', 'name', 'datetime', 'code_prefix', 'tenant__username', 'is_active', 'code__count']"
    :visible_fields="visible_fields"
    :editable_fields="editable_fields"
    :actions="actions"
    ref="gm"
    />
  <Modal ref="active_modal" title="确认修改" :body="modal_message">
  </Modal>
  <Modal ref="bind_modal" title="绑定租户">
    修改绑定：
    <select class="form-control" v-if="tenants" v-model="bind_tenant_username" id="bind-tenant-select">
      <option :value="null" :selected="!bind_tenant_username">[无绑定]</option>
      <option v-for="p, i in tenants" :key="i" :value="p.username" :selected="p.username === bind_tenant_username">
        {{ p.username }}
      </option>
    </select>
  </Modal>
  <JobModal ref="jobmodal" />
</template>

<script>
import JobModal from '../components/job-modal'
export default {
  name: 'CodeBatch',
  props: [],
  components: {
    JobModal,
  },
  data: function () {
    return {
      resource_uri: "/api/v1/code-batch/",
      tenants: null,
      bind_tenant_username: null,
      actions: [
        {
          get_name: (row) => {
            return row.is_active ? '冻结' : '激活';
          },
          handler: this.handle_toggle_active,
        },
        {
          name: '绑定租户',
          handler: this.handle_bind_tenant,
        },
        {
          name: '生成序列码',
          handler: this.handle_gen_code,
        },
        {
          name: '导入',
          handler: this.handle_import,
        },
        {
          name: '导出',
          handler: this.handle_export,
        },
      ],
      modal_message: null,
    };
  },
  computed: {
    editable_fields: function() {
      return [
        'qr_angle',
        'name',
        'qr_angle_allowed_error',
        'code_prefix',
        'description',
        'is_active',
        'feature_comparison_threshold',
        'scan_redirect_url',
        'enable_auto_torch',
        'camera_sensitivity',
        'mini_prog_entry_path',
        'mini_prog_entry_env_version',
      ];
    },
    visible_fields: function() {
      return [
        'id',
        'name',
        'description',
        'qr_angle',
        'qr_angle_allowed_error',
        'datetime',
        'code_prefix',
        'is_active',
        'code__count',
        'scan_redirect_url',
        'enable_auto_torch',
        'mini_prog_entry_path',
        'mini_prog_entry_env_version',
      ];
    },
  },
  methods: {
    handle_gen_code: function(item) {
      this.$router.push({ name: 'GenCode', query: { batch_id: item.id }});
    },
    load_tenants: async function() {
      var r = await this.$root.api_get_all('/api/v1/tenant/');
      this.tenants = r;
    },
    handle_bind_tenant: function(item) {
      this.bind_tenant_username = item.tenant__username;
      this.load_tenants();
      this.$refs.bind_modal.show(async (ok) => {
        if (!ok) return;
        var data = {
          'batch_id': item.id,
          'tenant_username': this.bind_tenant_username,
        };
        var r = await this.$root.api_post('/api/v1/bind-batch/', data);
        this.$refs.jobmodal.show(r.data.job);
        this.$refs.gm.reload();
      });
    },
    handle_toggle_active: function(item) {
      if (item.is_active) {
        this.modal_message = '确定要冻结批次吗？';
      } else {
        this.modal_message = '确定要激活批次吗？';
      }
      this.$refs.active_modal.show(async (ok) => {
        if (ok) {
          await this.$root.api_patch('/api/v1/code-batch/' + item.id + '/', {
            id: item.id,
            is_active: !item.is_active,
          });
        }
        this.$refs.gm.reload();
      });

    },
    handle_import: function(item) {
      this.$router.push({ name: 'CodeBatchImport', params: { id: item.id }});
    },
    handle_export: async function(item) {
      this.$router.push({ name: 'CodeBatchExport', params: { id: item.id }});
    },
  },
  mounted() {
  },
}
</script>

<style scoped>
</style>

