<template>
  <GenericManager
    :uri="resource_uri"
    object_name="序列码"
    show_search=1
    :visible_fields="visible_fields"
    :editable_fields="['is_active']"
    :actions="actions"
  >
  <template v-if="!$root.is_admin">
    <div>
      修改一个或多个序列码所绑定的产品，冻结或者激活序列码：
      <a href="/code-batch-op" class="btn btn-sm btn-info">批量操作</a>
    </div>
    <div>
      查看序列码操作记录：
      <a href="/code-batch-op-record" class="btn btn-sm btn-secondary">查看</a>
    </div>
  </template>
  </GenericManager>
  <Modal
    title="二维码"
    close_only=1
    ref="qr_modal"
    >
    <div class="qr" v-if="qr_img_url">
      <img :src="qr_img_url" />
      <div>
        <a :href="qr_url" target="_blank">{{ qr_url }}</a>
      </div>
    </div>
  </Modal>
</template>

<script>
export default {
  name: 'Code',
  props: [],
  components: {
  },
  data: function () {
    return {
      resource_uri: "/api/v1/code/",
      qr_url: null,
      qr_img_url: null,
      actions: [
        {
          name: '',
          handler: this.handle_view_product_info,
          icon: 'info',
          title: '预览',
        },
      ],
    };
  },
  computed: {
    visible_fields: function() {
      var r = ['batch__name', 'seq_num', 'code', 'product__name', 'is_active'];
      return r;
    },
  },
  methods: {
    handle_view_product_info(item) {
      window.open(`/api/product-info/${item.code}/`);
    },
  },
  mounted() {
  },
}
</script>

<style scoped>
div.qr {
  width: 100%;
}
div.qr img {
  display: block;
  margin: 0 auto;
}
</style>

