<template>
  <div>
    <el-form ref="form" :model="form" :rules="rules" label-width="140px" label-position="left">
      <el-form-item label="分享标题" prop="title">
        <el-input
          v-model="form.title"
          style="width: 500px"
          placeholder="例如：邀请1人可得，双方各得10元优惠券"
        ></el-input>
      </el-form-item>
      <el-form-item label="分享封面" prop="shareImg">
        <div class="img_list">
          <single-image-upload
            style="width: 80px; height: 80px"
            v-model="form.shareImg"
          ></single-image-upload>
        </div>
        <div class="tips">建议尺寸：630*504</div>
      </el-form-item>
      <el-form-item label="演示">
        <div class="preview_wrap">
          <div class="message_wrap">
            <div class="msg">
              <div class="content">
                <div class="name">
                  <img class="logo" :src="shopInfo.logo" />
                  <span class="t">{{ shopInfo.name }}</span>
                </div>
                <div class="title">{{ form.title }}</div>
                <el-image :src="form.shareImg" style="width: 100%; height: 110px" fit="cover">
                  <template #error>
                    <div class="image-slot">
                      <i class="el-icon-folder-delete"></i>
                    </div>
                  </template>
                </el-image>
                <div class="btm">
                  <i class="icon el-icon-link"></i>
                  小程序
                </div>
              </div>
              <img class="avatar" src="@/assets/images/avatar.png" />
            </div>
          </div>
          <div class="footer">
            <i class="icon el-icon-microphone"></i>
            <div class="ipt"></div>
            <i class="icon el-icon-picture-outline-round"></i>
            <i class="icon el-icon-circle-plus-outline"></i>
          </div>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :loading="loading" @click="onSubmitHandle">保存</el-button>
      </el-form-item>
    </el-form>
    <AddCoupon ref="AddCoupon" @success="addCouponSuccess" />
  </div>
</template>

<script>
import shopShareApi from "@/api/account/shopShare";
import AddCoupon from "./addCoupon.vue";
import { useUserStore } from "@/store/modules/user";
import { ElMessage } from "element-plus";

const shopUser = useUserStore();
export default {
  components: { AddCoupon },
  data() {
    const imgValidate1 = (rule, value, callback) => {
      if (!this.form.shareImg) {
        callback(new Error("请上传分享封面图"));
      } else {
        callback();
      }
    };
    const imgValidate2 = (rule, value, callback) => {
      if (!this.form.invitedImg) {
        callback(new Error("请上传邀请顶部图"));
      } else {
        callback();
      }
    };
    const imgValidate3 = (rule, value, callback) => {
      if (!this.form.beInvitedImg) {
        callback(new Error("请上传被邀顶部图"));
      } else {
        callback();
      }
    };
    const startTimeValidate = (rule, value, callback) => {
      if (!this.form.startTime) {
        callback(new Error("请选择活动日期"));
      } else {
        callback();
      }
    };
    const newCouponsValidate = (rule, value, callback) => {
      if (!this.form.newCoupons.length) {
        callback(new Error("请添加新用户获得券"));
      } else {
        callback();
      }
    };
    const rewardCouponsValidate = (rule, value, callback) => {
      if (!this.form.rewardCoupons.length) {
        callback(new Error("请添加奖励券"));
      } else {
        callback();
      }
    };
    return {
      loading: false,
      createdAt: [],
      formImgKey: "",
      couponKey: "",
      tableType: "1", // 1添加 2编辑
      tableEditorIndex: 0, // 编辑时的index
      shopInfo: {
        name: "",
        logo: "",
      },
      form: {
        status: 1,
        title: "",
        shareImg: "",
        invitedImg: "",
        beInvitedImg: "",
        startTime: "",
        endTime: "",
        newCoupons: [],
        invitedNum: "1",
        rewardCoupons: [],
        getMethod: "get",
      },
      rules: {
        title: [
          {
            required: true,
            message: "请输入标题",
            trigger: "blur",
          },
        ],
        shareImg: [
          {
            required: true,
            validator: imgValidate1,
            trigger: "change",
          },
        ],
        invitedImg: [
          {
            required: true,
            validator: imgValidate2,
            trigger: "change",
          },
        ],
        beInvitedImg: [
          {
            required: true,
            validator: imgValidate3,
            trigger: "change",
          },
        ],
        startTime: [
          {
            required: true,
            validator: startTimeValidate,
            trigger: "change",
          },
        ],
        newCoupons: [
          {
            required: true,
            validator: newCouponsValidate,
            trigger: "change",
          },
        ],
        invitedNum: [
          {
            required: true,
            message: "请输入邀请人数",
            trigger: "blur",
          },
        ],
        rewardCoupons: [
          {
            required: true,
            validator: rewardCouponsValidate,
            trigger: "change",
          },
        ],
      },
      urlList: [],
    };
  },
  mounted() {
    this.byShopId();
    this.shopInfo = shopUser.userInfo;
  },
  methods: {
    // 添加完成优惠券
    addCouponSuccess(e) {
      if (this.tableType == 1) {
        this.form[this.couponKey].push({ ...e });
      } else {
        // this.form[this.couponKey][this.tableEditorIndex] = { ...e }
        this.$set(this.form[this.couponKey], this.tableEditorIndex, { ...e });
      }
    },
    // 添加奖励券
    addRewardHandle(key, type = 1, row = {}, index = 0) {
      this.tableEditorIndex = index;
      this.tableType = type;
      this.couponKey = key;
      if (key == "rewardCoupons" && !this.form.invitedNum) {
        this.$refs.form.validateField("invitedNum");
        return;
      }
      this.$refs.AddCoupon.show(row);
    },
    // 日期回调
    timeChange(e) {
      this.form.startTime = e[0];
      this.form.endTime = e[1];
    },
    // 过滤input只能输入整数
    inputFilterInt(e, key) {
      if (!e) return;
      setTimeout(() => {
        this.form[key] = e.replace(/[^\d]/g, "");
      }, 50);
    },
    // 提交
    onSubmitHandle() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          try {
            this.loading = true;
            this.form.shopId = localStorage.getItem("shopId");
            await shopShareApi.update(this.form);
            this.loading = false;
            ElMessage({
              title: "成功",
              message: `保存成功`,
              type: "success",
            });
          } catch (error) {
            this.loading = false;
            console.log(error);
          }
        }
      });
    },
    // 获取店铺设置
    async byShopId() {
      try {
        const res = await shopShareApi.get();
        if (res.id) {
          this.form = res;
          this.createdAt = [res.startTime, res.endTime];
          this.urlList = [res.shareImg, res.invitedImg, res.beInvitedImg];
        }
      } catch (error) {
        console.log(error);
      }
    },
  },
};
</script>

<style scoped lang="scss">
.img_list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;

  .item {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f5f7fa;
    position: relative;
    overflow: hidden;

    &.upload {
      border: 1px dashed #ddd;
    }

    &:hover {
      cursor: pointer;

      .del {
        transform: translateY(0);
      }
    }

    .del {
      width: 100%;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      left: 0;
      bottom: 0;
      background-color: rgba(255, 0, 0, 0.6);
      backdrop-filter: blur(3px);
      color: #fff;
      font-size: 12px;
      transform: translateY(100%);
      transition: all 0.2s ease-in-out;
    }

    .img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
    }

    .icon {
      font-size: 20px;
      color: #ddd;
    }
  }
}

.preview_wrap {
  width: 300px;
  height: 368px;
  background-color: #ededed;
  position: relative;
  padding: 20px 10px;

  .message_wrap {
    display: flex;
    justify-content: flex-end;

    .msg {
      display: flex;

      .content {
        width: 180px;
        background-color: #fff;
        border-radius: 4px;
        padding: 10px 10px 6px;
        position: relative;

        &::before {
          $size: 8px;
          content: "";
          width: $size;
          height: $size;
          border-radius: 1px;
          background-color: #fff;
          position: absolute;
          top: 10px;
          right: calc(-1 * ($size / 2));
          transform: rotate(-45deg);
        }

        .name {
          display: flex;
          align-items: center;
          line-height: 10px;

          .logo {
            width: 20px;
            height: 20px;
            border-radius: 50%;
          }

          .t {
            font-size: 10px;
            color: #999;
            margin-left: 6px;
          }
        }

        .title {
          font-size: 12px;
          line-height: 16px;
          padding: 6px 0;
        }

        .btm {
          font-size: 10px;
          color: #999;
          line-height: 10px;
          display: flex;
          align-items: center;
          border-top: 1px solid #ececec;
          padding-top: 6px;

          .icon {
            font-size: 14px;
            color: rgb(87, 87, 253);
            margin-right: 6px;
          }
        }
      }

      .avatar {
        width: 30px;
        height: 30px;
        margin-left: 10px;
      }
    }
  }

  .footer {
    background-color: #f6f6f6;
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    padding: 0 10px;
    gap: 10px;
    padding-top: 10px;
    padding-bottom: 40px;

    &::after {
      content: "";
      width: 100px;
      height: 4px;
      border-radius: 4px;
      position: absolute;
      bottom: 10px;
      left: 50%;
      margin-left: -50px;
      background-color: #333;
    }

    .ipt {
      flex: 1;
      height: 30px;
      background-color: #fff;
      border-radius: 4px;
    }

    .icon {
      font-size: 22px;
      color: #333;
    }
  }
}
</style>