<template>
  <div>
    <obj-modal
      ref="modal"
      labelWidth="150px"
      :modalCols="modalCols"
      :modalConfig="modalConfig"
      :modalData="modalData"
      :modalHandles="modalHandles"
    >
      <template slot="dialog__after">
        <el-form
          label-width="150px"
          :rules="rules"
          :model="modalData"
          ref="modalForm"
        >
          <el-form-item prop="packageId" label="选择套餐:">
            <div class="card">
              <div v-for="item in PackageList" :key="item.id">
                <el-card class="box-card">
                  <div style="font-size: 20px; font-weight: 600">
                    {{ item.packageName }}
                  </div>
                  <div style="margin-top: 20px; font-size: 16px">
                    ￥<span style="font-size: 20px; font-weight: 600">{{
                      item.packagePrice
                    }}</span
                    >/{{ item.packageEffectiveTimeQuantity
                    }}{{ item.packageEffectiveTimeUnit == 1 ? "年" : "月" }}
                  </div>
                </el-card>
                <el-radio
                  @change="changePackage"
                  style="margin-bottom: 20px"
                  v-model="modalData.packageId"
                  :label="item.id"
                  border
                  >请选择</el-radio
                >
              </div>
            </div>
          </el-form-item>
          <el-form-item prop="packageQuantity" label="购买数量:">
            <el-input-number
              style="width: 200px"
              controls-position="right"
              :precision="0"
              v-model="modalData.packageQuantity"
              :min="0"
              label="请输入"
            ></el-input-number>
          </el-form-item>
        </el-form>
        <el-dialog
          title="请扫描二维码"
          :visible.sync="dialogVisible"
          width="500px"
          append-to-body
          :before-close="handleClose"
        >
          <div v-if="isShow" class="qrcodeName">
            <div class="qrcode" ref="qrCodeUrl"></div>
            <div style="margin-top: 20px">请使用支付宝扫一扫，完成支付</div>
          </div>
        </el-dialog>
      </template>
    </obj-modal>
  </div>
</template>
<script>
import QRCode from "qrcodejs2";
import { debounce, cloneDeep } from "lodash";
import { Divider } from "element-ui";
export default {
  components: {},
  data() {
    return {
      isAdd: true,
      dialogVisible: false,
      isShow: false,
      //表格属性
      modalConfig: {
        title: "添加优惠卷",
        show: false,
        width: "60%",
        fullscreen: true,
      },
      modalData: {},
      PackageList: [],
      rules: {
        packageId: [
          {
            required: true,
            message: "请选择套餐",
            trigger: ["blur", "change"],
          },
        ],
        packageQuantity: [
          {
            required: true,
            message: "请输入购买数量",
            trigger: ["blur", "change"],
          },
        ],
      },
      userData: {},
      qrcode: "",
    };
  },
  watch: {
    "modalConfig.show"(newVal) {
      if (!newVal) {
        //关闭弹窗清空校验
        setTimeout(() => {
          this.$refs.modalForm.resetFields();
          this.$emit("getList");
        });
      }
    },
  },
  methods: {
    queryTableData(pageNo, pageSize) {},
    toggle(e) {
      if (this.modalConfig.show == false) {
        this.modalConfig.show = true;
        this.$api.marketing
          .memberPackageList({ packageEnable: true })
          .then((res) => {
            console.log(res);
            this.PackageList = res.data.data;
            // this.modalData = res.data.data;
          });
      } else {
        this.modalConfig.show = false;
      }
      if (e) {
        this.init(cloneDeep(e));
      }
      return {
        add: (row) => {
          this.userData = {
            marketId: row.marketId,
            shopId: row.shopId,
            unitType: row.unitType,
            userId: JSON.parse(sessionStorage.getItem("userInfo")).userId,
          };
          this.modalData = {
            packageId: "",
            packageQuantity: "1",
          };
          this.modalConfig.title = "会员营销工具套餐";
          this.isAdd = true;
        },
        update: () => {
          this.isAdd = false;
        },
      };
    },
    init(row) {},
    changePackage() {
      this.$refs.modalForm.validate();
      // console.log(this.modalData.packageId);
    },
    creatQrCode(data) {
      this.$nextTick(() => {
        this.qrcode = new QRCode(this.$refs.qrCodeUrl, {
          text: data.qr_pay_url, // 转换为二维码的内容
          width: 300,
          height: 300,
          colorDark: "#000000",
          colorLight: "#ffffff",
          correctLevel: QRCode.CorrectLevel.H,
        });
      });
    },
    handleClose(done) {
      done();
      this.isShow = false;
      this.qrcode.clear();
      console.log("123");
    },
  },

  computed: {
    modalCols() {
      return [];
    },
    modalHandles() {
      return [
        {
          label: "取消",
          handle: () => {
            this.toggle();
          },
        },
        {
          label: "确定购买",
          type: "primary",
          loading: this.isLoading,
          submit: true,
          handle: () => {
            console.log(this.modalData, this.userData);
            this.$refs.modalForm.validate((valid) => {
              if (valid) {
                this.$api.marketing
                  .placeOrder({ ...this.userData, ...this.modalData })
                  .then((res) => {
                    console.log(res);
                    this.dialogVisible = true;
                    this.isShow = true;
                    this.creatQrCode(res.data.data);
                  });
              }
            });
          },
        },
      ];
    },
  },
  asyncComputed: {},
};
</script>
<style lang="scss" scoped>
.card {
  width: 100%;
  display: flex;
  text-align: center;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
.box-card {
  margin-bottom: 20px;
  width: 300px;
  text-align: center;
}
.qrcodeName {
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
</style>