<template>
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    switchFullscreen
    @ok="handleOk"
    :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <a-row>
      <a-col :span="12">
        <a-card>
          <h5 style="font-size: 16px; font-weight: 600">说明</h5>
          <p>1、在【会员等级】中配置需要导入的会员等级</p>
          <p>2、下载会员导入模板Excel文件</p>
          <p>
            3、根据模板内容填写，确保模板内填写等级与【会员等级】上等级名称一致
          </p>
          <p>
            4、上传并导入会员信息。[系统会自动跳过手机号、证件类型、证件号、会员卡号有任一重复的记录]
          </p>
          <p>为保障导入成功，建议每次最多导入500条会员信息</p>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-row>
          <a-col :span="12" style="text-align: center; margin-top: 50px">
            <img
              @click="downloadFile"
              style="cursor: pointer; margin-bottom: 10px"
              src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGgAAABoCAIAAACSfiL2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkZDQ0UyMEMzMTQyNzExRTc4NUMzRTU4QTJGM0RBREY5IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkZDQ0UyMEM0MTQyNzExRTc4NUMzRTU4QTJGM0RBREY5Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RkNDRTIwQzExNDI3MTFFNzg1QzNFNThBMkYzREFERjkiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RkNDRTIwQzIxNDI3MTFFNzg1QzNFNThBMkYzREFERjkiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7l+YaPAAAFhUlEQVR42uycbWhbVRjHz7kvzU276Lp2plXbrs662nbgvsjUvcBU5kRlug8OmThRBGVqi4iC6Ce/yvwwRVF0IqIyJiji3IuOMTa3qlR0FlyydKvVtrPt1qRNcnNfjs+9aXNv0ljvSu5dbvb8ubRJenMSfvc8z/mf555TenJU2XlKnZAZQTnTkgDt6RLo1u9SSG0B7IQstf2bgojDoTbuM7oahyAWJgSH4BAcgkNwKASH4BAcgkNwKASH4BAcgkNwKASH4BAcgkMhOASH4PwnoTy/FiNkJMmicf1MXI/EGfz8bIOE4IpIZWRwCjAZjLK8kir2uGKSNQJ0ziRmYA0kdEXHUC2mKYVB0MWM0DM61NA00/28ZMVFcOOy0ZWgQ0UmDVIjqYpa2lNicEdHtFw6v1DRi6BKDO71voyrX/flXhkGDXsyhMwoayw/JxD784zGMuYbSrsiS/DXde4bL5cRBA0wgkNwCA7nqmWjd9cEAjyVeCJypFqg/Rf1F07IrSHunTWBuSdPq+yhg2kEZ2hZiMNQxRxXrnK1auBuqC6/itt1e4CjM09hVr/zt8yBv7SC057uEDe3WN/k85j6wR9K0QZfPCmnNKLqJK0x4AJZDF4cSOgb96UqqsfBjPXrQauuBgS3tYk8zTunsZre12xRO59in0aV/2rw1wk9MmnUoIaTbCzNUmrlhupHEXUyY80dw0F653W8/YRtN4qCDeVb/UpKwxxnluHez4+7h28Qc8HbVEM3XGtxPDaqnTjvB2ze2JGDQ9q9TfrNi2cu0vU1dH0Df3jYAPRomwUR4u7tfmX+pt5bK4GDEzgSNGmDj3v1p0xXLffGaq99nBejKgTqrt8Ve71363IjOsG4rmvgbUGtQNqav6nmRRRy4lKJLhKNo/LtSDSuf/Onavexq8P8Y20CpdYJX55TiX/knY/78HTeKPHEChHY5WzKm6eUBd+CSKqEFXtv2s1s6enNGnBnPSurcsNC7k9fDapgMpw08tRROWMCnlaMOrBqPo4l9Hu+9drHeTpX3T+kPdCigysuALr7tOKwhXNTV2QFGAZQaxCdVRVPawRK/CZPwW1pFWBYLATHkWc6RN+B8y5UIamBa7NPra4JzkC8I8zfFuZ/GP3/ZL57vRSabQPsSO8/Gvi4y1KP86jHge2AYaGKs8a7l3rl7BQ9qx0dYtDBRQQTl3Vwl9fEeQduc4vQWWt91t4B9e8k2xOzjFu9RB+/yU8B6wW4hiDdboNyQWZ7Boxh9Iuz6rjtbv/9zcKKq31TH3Q9x0FEda+skmwFkU+iarYcJGvk44ja3SXmxtznu8RnjxfcmM/T9iNpYrtXnzXNFViPA21qElbVWZ8yNM3sc68DQ+rglMUJLN6Dy+a7lsNJBkdCYVPmIWsVGqqQuZ5szwMBkwd7h4LHBe4XRt5w0Ae2zl1wz3WKdnPbN64fn+M5jo1qv9hWhEBQ7+j0wSjhbo577WdHi5fAmjhscO9d1kpguCQ/js3n42DkeeR7vK86a3qdnyzxlTLlqiRVMjhX1xj7LFSzPi47aVN0oplszib0LYeK5DLFTXI+Awcmbu6LzCzqYahijkNwKN/nOIfiKQm6XI4vMbhXbqkytrAlWHRSv5gpfcIun/8eW2Jw6xp5OLKPx9IsltCjcQMibkm6BNVLtF7ib1068zS3Cc7cs4Sb4C5lmrmqjuZqc7JmFCBzG7/AxGZw26UTBXjSvphrn13CpJkbfaO40XcB42BriGsNkbvNZYe5reXGls2EQRPBORI17wQ2VvNrG/jy/IZogBEcgkNwCA6F4BAcgkNwCA6F4BAcgkNwCA6F4BAcgkNwKASH4BAcgrtiJCwJ0AmZeb8XyteqDVCuu1OAX8jCueok2tMp/CvAAO1Pe1MBQlrNAAAAAElFTkSuQmCC"
            />
            <p>下载模板</p>
          </a-col>
          <a-col :span="12" style="text-align: center; margin-top: 50px">
            <a-upload
              name="file"
              :showUploadList="false"
              :multiple="false"
              :headers="tokenHeader"
              :action="importExcelUrl"
              @change="handleImportExcel"
            >
              <img
                style="cursor: pointer; margin-bottom: 10px"
                src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGgAAABoCAIAAACSfiL2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjE5MDFEOENCMTQyOTExRTdCMDg4QUM3ODREREJENzZGIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjE5MDFEOENDMTQyOTExRTdCMDg4QUM3ODREREJENzZGIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTkwMUQ4QzkxNDI5MTFFN0IwODhBQzc4NEREQkQ3NkYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTkwMUQ4Q0ExNDI5MTFFN0IwODhBQzc4NEREQkQ3NkYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5EH5yoAAAEF0lEQVR42uzcT2wMURwH8Hnzd9uiutuWUpEGVbYaq1Vx8OekeiJx6YEEkeAgSBBFgvibHkgkDoSbREQcxEGEnpy0EaUVe1DiP6GbotruzuyMX+2f2VS0s6szO+1+v9lsMsns7JvPvjfvvXnTio++qOe7tFDY4BBr8Spsb7XImloHoJaBnRhTu9eYBw6Labg7VNV4QGQWwAEOcIADHAI4wAEOcIBDAAc4wAEOcAjgAAc4wCGAAxzgAJczEbP79Re61NaP2mA07Q+WF7CrKz25C/fgoxaOZvLB97+MnG6qmamhqZpZMJVf5B39Vwz26s9COuDM1Hj5rfOlUXe78UpzCRx6VcABDnCAQwAHOMABDnAI4AAHOMABDgEc4AAHOARw4x2uTzXXRgtlZuUjYspe3yNGLsKR2vVuLbk5I98S3KxJ5m6XgmoqvcOxZXnwh2rseBjusfw/EqZILFAsWNlzsU/wKSx25NYPUXqNsHNZPmupV0rz2LipcTLP+qNp1IVtVZJHsHhkbpdfsijxqd+w70kJW+BIYXuVZLGu7auRG8oF6wdfPk04WitTvRt1z6Y54pJifjw1VUrjLPHboHHtpZbacFZMF1J7g5kFjJpenpD2wZeXCrWrhY6e6Ls+ozfRRXSG9Be95iL/utnilkqJsy02PgKxad5QuZN21HCmymxDhThGVwOuvkSoL4lvdvTot9+YPxJV4Z0LbVSzvVclu41zTanLQfXWa23MvyXYqx97HE4++LSqTNhTLTOOG8dwDth1/9APtUcGomYrPlBDndOEGMfZZ/e2z2huj/zS4pe5gI8/HJBFR8amDg2A7bCji2Zzezg5f/AX8cdrFcmpEb1zM4extaMum9ToPbY5r5A/UScrgmNn4+yUa6zsqJYdbAtTjYttVkzmT9XJBSJz8lycnqv+vx1d0Q62Rd4lpgQ0yT29VC6UmcMnkoVJ/v/YUe9Jfeirn/GBbomHtSxTvApz/iyyc3ckMzsaqR19HA4mpgdFypAa2eXWbaV07TSdO/kk8rRHT87YziyVLd6MmlBwadnpBnf2aaTta3yYS/3AyTqZ+oQsFj7Lt86t2FEvcK4z8vBzXI3GHDTyqCzMcsmzv+Ywsh2pXXyu3k/csKRZAY1yaayb9WK7YrFmBLurQfXOWy2pdiQg07zKDWV2y1/WDLsHRXb0PhjlbiYEad6+v0amObxLCuwWuH/ZxUJ95+5qeXWZ4J7SumtddVibTWbHQmltueCqorpuQfpvu82V0vrZotvK6boCxeym5fNX/jTVrfNdV9fcC0dZM1OgF+fi4NkRwAEOcIBDAAc4wAEOcAjgAAc4wAEOARzgAAc4BHCAAxzgciaiV2GhsNFwdwAW1lOkMH6PXyxSGCysx+dhe/3ibwEGAEPHby4FHMCEAAAAAElFTkSuQmCC"
              />
            </a-upload>
            <p>导入会员列表</p>
          </a-col>
        </a-row>
      </a-col>
    </a-row>
  </j-modal>
</template>

<script>
import Vue from 'vue'
import axios from "axios";
import { ACCESS_TOKEN, TENANT_ID } from "@/store/mutation-types";
const hotelInfo = JSON.parse(localStorage.getItem("storeInfo"));
export default {
  name: "BusMemberCardModal",
  components: {},
  data() {
    return {
      title: "",
      width: 800,
      visible: false,
      disableSubmit: false,
      url: {
        list:
          hotelInfo && hotelInfo.id
            ? "/business/busMemberCard/list?hotelId=" + hotelInfo.id
            : "/business/busMemberCard/list",
        delete: "/business/busMemberCard/delete",
        deleteBatch: "/business/busMemberCard/deleteBatch",
        exportXlsUrl: "/business/busMemberCard/exportXls",
        importExcelUrl:
          "business/busMemberCard/importExcel?hotelId=" + hotelInfo.id,
      },
    };
  },
  computed: {
    //token header
    tokenHeader() {
      let head = { "X-Access-Token": Vue.ls.get(ACCESS_TOKEN) };
      let tenantid = Vue.ls.get(TENANT_ID);
      if (tenantid) {
        head["tenant-id"] = tenantid;
      }
      return head;
    },
    importExcelUrl: function () {
      return `${window._CONFIG["domianURL"]}/${this.url.importExcelUrl}`;
    },
  },
  methods: {
    /* 导入 */
    handleImportExcel(info) {
      this.loading = true;
      if (info.file.status !== "uploading") {
        console.log(info.file, info.fileList);
      }
      if (info.file.status === "done") {
        this.loading = false;
        if (info.file.response.success) {
          // this.$message.success(`${info.file.name} 文件上传成功`);
          if (info.file.response.code === 201) {
            let {
              message,
              result: { msg, fileUrl, fileName },
            } = info.file.response;
            let href = window._CONFIG["domianURL"] + fileUrl;
            this.$warning({
              title: message,
              content: (
                <div>
                  <span>{msg}</span>
                  <br />
                  <span>
                    具体详情请{" "}
                    <a href={href} target="_blank" download={fileName}>
                      点击下载
                    </a>{" "}
                  </span>
                </div>
              ),
            });
          } else {
            this.$message.success(
              info.file.response.message || `${info.file.name} 文件上传成功`
            );
          }
          this.$emit("ok");
          this.visible = false;
        } else {
          this.$message.error(
            `${info.file.name} ${info.file.response.message}.`
          );
        }
      } else if (info.file.status === "error") {
        this.loading = false;
        if (info.file.response.status === 500) {
          let data = info.file.response;
          const token = Vue.ls.get(ACCESS_TOKEN);
          if (token && data.message.includes("Token失效")) {
            this.$error({
              title: "登录已过期",
              content: "很抱歉，登录已过期，请重新登录",
              okText: "重新登录",
              mask: false,
              onOk: () => {
                store.dispatch("Logout").then(() => {
                  Vue.ls.remove(ACCESS_TOKEN);
                  window.location.reload();
                });
              },
            });
          }
        } else {
          this.$message.error(`文件上传失败: ${info.file.msg} `);
        }
      }
    },
    /* 文件下载 */
    downloadFile() {
      axios
        .get("/importexcel/membercard.xls", {
          responseType: "blob",
        })
        .then((response) => {
          const url = window.URL.createObjectURL(new Blob([response.data]));
          const link = document.createElement("a");
          let fname = "会员模板.xls";
          link.href = url;
          link.setAttribute("download", fname);
          document.body.appendChild(link);
          link.click();
        })
        .catch((error) => {
          console.log("error:" + JSON.stringify(error));
        });
    },
    add() {
      this.visible = true;
    },
    edit(record) {
      this.visible = true;
      this.$nextTick(() => {
        this.$refs.realForm.edit(record);
      });
    },
    close() {
      this.$emit("close");
      this.visible = false;
    },
    handleOk() {
      this.$refs.realForm.submitForm();
    },
    submitCallback() {
      this.$emit("ok");
      this.visible = false;
    },
    handleCancel() {
      this.close();
    },
  },
};
</script>