<template>
  <div class="activity_code">
    <Row class="search-row"
         :gutter="10">
      <i-col span="24"
             class="search-col">
        <Form ref="formValidate"
              :model="formValidate"
              :label-width="80">
          <Row class="row-style">
            <i-col span="16"
                   class="search-col">
              <i-input placeholder="请输入店铺名称或编码"
                       style="width: 200px !important"
                       class="search-select"
                       v-model="formValidate.store" />
              <span class="search-span">零售公司</span>
              <Select v-model="formValidate.orgId"
                      filterable
                      class="search-select"
                      placeholder="全部"
                      clearable>
                <Option v-for="(item, index) in companyList"
                        :key="index"
                        :value="item.value">{{ item.label }}</Option>
              </Select>
              <Button type="primary"
                      @click="search"
                      class="search-btn">查询</Button></i-col>
            <i-col span="8"
                   class="search-col">
              <Button type="primary"
                      @click="downloadCode(2)"
                      style="margin-left: 20px;">批量下载门店码</Button>
              <Button type="primary"
                      @click="downloadCode(1)"
                      style="margin-left: 20px;">批量下载导购码</Button>
            </i-col>
          </Row>
        </Form>
      </i-col>
    </Row>
    <Table :loading="loading"
           border
           :columns="columns"
           :data="data">
      <template slot-scope="{row}"
                slot="qrCodeAction">
        <div class="qrCodeBox"
             @mouseover="showQrcode(row)"
             @mouseout="hideQrcode(row)">
          <img :src="require('../../../static/img/qrCode-init.png')"
               class="table-img-qr-code" />
          <div class="toggleQrCode"
               v-show="rowData.id == row.id">
            <div slot="header">
              <p></p>
            </div>
            <p>{{showStoreName}}</p>
            <img :src="qrCodeImage"
                 style="width:200px;height:200px;" />
            <div style="text-align: center;">
              <Button ghost
                      type="primary"
                      @click="download(rowData)">下载</Button>
            </div>
          </div>
        </div>
      </template>
      <router-link slot-scope="{row}"
                   slot="action"
                   :to="{path:'/activity/plan/GuideCode',query:{instanceId:row.instanceId, storeId: row.store.id}}">
        <Button class="router-btn"> 查看导购码</Button>
      </router-link>
    </Table>
    <Page :total="totalSize"
          :current="pageNum"
          :page-size="pageSize"
          show-elevator
          show-total
          placement="top"
          @on-change="handlePage"
          class-name="ks-page"></Page>
  </div>
</template>

<script>
import { activityCodeList, getCompany } from "../../services/ActivityManager/ActivityManager";
import http from '../../services/store/IncreaseStoreManager';
import doHttp from '../../services/CommonHttp'
export default {
  name: "ActivityCode",
  data () {
    let _this = this;
    return {
      loading: false,
      totalSize: 0,
      pageNum: 1,
      pageSize: 10,
      data: [],
      instanceId: 0,
      isShow: false,
      showStoreName: "",
      qrCodeImage: "",
      companyList: [],
      rowData: {},
      formValidate: {
        orgId: null,
        store: null,
      },
      columns: [
        {
          width: 80,
          align: "center",
          title: "序号",
          render (h, params) {
            let num = parseInt(params.index) + 1;
            if (_this.pageSize > 1) {
              num += (_this.pageNum - 1) * _this.pageSize;
            }
            return h("span", num);
          }
        },
        {
          title: "所属零售公司",
          key: "organizational.name",
          render (h, params) {
            return h("span", params.row["organizational"]["name"]);
          },
        },
        {
          title: "零售公司编号",
          key: "organizational.code",
          render (h, params) {
            return h("span", params.row["organizational"]["code"]);
          },
        },
        {
          title: "店铺名称",
          key: "store.name",
          render (h, params) {
            return h("span", params.row["store"]["name"]);
          },
        },
        {
          title: "店铺编号",
          key: "store.code",
          render (h, params) {
            return h("span", params.row["store"]["code"]);
          },
        },
        {
          title: "推广码",
          slot: 'qrCodeAction',
          className: 'table-width-80',
          // render(h, params) {
          //   return h(
          //     "div",
          //     {
          //       class: "qrcode",
          //     },
          //     [
          //       h(
          //         "Button",
          //         {
          //           props: { type: "primary", size: "small" },
          //           style: { marginRight: "8px" },
          //           on: {
          //             "mouseover.native": () => _this.showQrcode(params.row),
          //           },
          //         },
          //         "二维码"
          //       ),
          //       h(
          //         "div",
          //         {
          //           class: "qrcodeBox",
          //           style: { display: "none" },
          //         },
          //         [h("img", { attrs: { src: params.row.qrCode } })]
          //       ),
          //     ]
          //   );
          // },
        },
        {
          title: '操作',
          slot: 'action',
          // key: "action",
          // width: 200,
          // render(h, p) {
          //   return h("div", [
          //     h(
          //       "Button",
          //       {
          //         props: { type: "primary", size: "small" },
          //         style: { marginRight: "8px" },
          //         on: {
          //           click: () => _this.guideCode(p.row),
          //         },
          //       },
          //       "查看导购码"
          //     ),
          //   ]);
          // },
        },
      ],
    };
  },
  created () {
    this.instanceId = this.$route.query.instanceId;
    this.load();
    this.getCompanyInfo();
  },
  methods: {
    search () {
      console.log(this.formValidate)
      this.load()
    },
    ok: function () {
      this.isShow = false;
    },
    getCompanyInfo () {
      let that = this;
      let data = {
        userId: JSON.parse(sessionStorage.getItem("loginInfo")).userId
      };
      getCompany(data, function (data) {
        that.companyList = [];
        data.data.results.forEach(element => {
          that.companyList.push({
            label: element.name,
            value: element.id
          });
        });
      });
    },
    cancel: function () {
      this.isShow = false;
    },
    handlePage (value) {
      this.pageNum = value;
      this.load();
    },
    showQrcode (row) {
      console.log(row);
      this.isShow = true;
      this.showStoreName = row.store.name;
      this.qrCodeImage = row.qrCode;
      this.rowData = row;
    },
    hideQrcode (row) {
      this.showStoreName = "";
      this.qrCodeImage = "";
      this.rowData = {};
    },
    download: function (row) {
      let fileName = row.store.name + "-活动码";
      http.downloadImg({
        url: row.qrCode
      }, fileName, function (/*data*/) {

      })
    },
    load (params = {}) {
      let _this = this;
      this.loading = true;
      params.pageSize = this.pageSize;
      params.pageNum = this.pageNum;
      params.instanceId = this.instanceId;
      params = { ...params, ...this.formValidate }
      activityCodeList(params, (res) => {
        _this.data = res.data.results.this.records;
        _this.totalSize = res.data.results.this.total;
        _this.loading = false;
      });
    },
    downloadCode (type) {
      this.loading = true;
      let that = this;
      doHttp
        .downloadZip("/activity/instance/download?type=" + type + "&instanceId=" + this.instanceId, type == 2 ? '门店码' : "门店导购码", { type: type, instanceId: this.instanceId })
        .then(res => {
          that.loading = false;
        })
    }
  },
};
</script>

<style>
.search-btn {
  margin-left: 40px;
}
.table-width-80 {
  width: 80px !important;
}
.table-img-qr-code {
  margin-left: 5px;
  margin-top: 5px;
  width: 30px;
  height: 30px;
}
.qrCodeBox {
}
.toggleQrCode {
  position: absolute;
  background: #fff;
  z-index: 9999;
  padding: 10px;
  border: 1px solid #dfdfdf;
}
.ivu-table-wrapper {
  overflow: inherit !important;
}
</style>
