<template>
  <div class="form_content">
    <div class="left">
      <div class="new_preview">
        <div class="header">{{ shopInfo.shopName }}</div>
        <div class="content">
          <div class="title">{{ form.title }}</div>
          <div class="img_wrap">
            <div class="img">
              <el-image :src="form.groupUrl" style="width: 100%;height: 100%;border-radius: 4px;"></el-image>
            </div>
          </div>
          <div class="intro">
            {{ form.content }}
          </div>
          <div class="foot">
            {{ defaultNote }}
          </div>
        </div>
      </div>
    </div>
    <div class="form">
      <el-form ref="formRef" :model="form" :rules="rules" label-position="right" label-width="120px">
        <el-form-item label="群二维码" prop="groupUrl">
          <single-image-upload style="width: 120px; height: 120px" v-model="form.groupUrl"></single-image-upload>
        </el-form-item>
        <el-form-item label="模块标题" prop="title">
          <el-input :placeholder="defaultTitle" :maxlength="15" v-model.trim="form.title"
            style="width: 300px;"></el-input>
        </el-form-item>
        <el-form-item label="模块内容">
          <el-input type="textarea" :rows="4" :maxlength="20" show-word-limit placeholder="请输入内容"
            v-model.trim="form.content" style="width: 300px;"></el-input>
        </el-form-item>
        <el-form-item label="模块提示语">
          <div class="tips">{{ defaultNote }}</div>
        </el-form-item>
        <el-form-item label="启用状态">
          <el-switch v-model="form.isEnable" :active-value="1" :inactive-value="0"></el-switch>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :loading="loading" @click="submitHandle">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElNotification } from 'element-plus'
import { disGroupGet, disGroupPost } from '@/api/coupon/index'

const defaultTitle = ref('扫码进群，优惠多多')
const defaultNote = ref('如果长按不能识别，可截图或保存二维码图片至相册，通过微信扫码入群')
const defaultContent = ref('长按识别上方企微好友码，添加【福利官】')
const shopInfo = ref('')

const form = ref({
  id: '',
  groupUrl: '',
  title: defaultTitle.value,
  content: defaultContent.value,
  isEnable: 1,
})

const rules = reactive({
  groupUrl: [
    {
      required: true,
      message: '请上传群二维码',
      triiger: 'change'
    }
  ],
  title: [
    {
      required: true,
      message: '请输入模块标题',
      triiger: 'change'
    }
  ],
  content: [
    {
      required: true,
      message: '请输入内容',
      triiger: 'change'
    }
  ]
})

// 开始提交
const formRef = ref(null)
const emits = defineEmits(["success"]);
const loading = ref(false);
function submitHandle() {
  formRef.value.validate(async (valid) => {
    try {
      if (valid) {
        loading.value = true;

        let data = { ...form.value }

        if (data.title == '') {
          data.title = defaultTitle.value
        }

        if (data.content == '') {
          data.content = defaultContent.value
        }

        await disGroupPost(data);
        ElNotification({
          title: '注意',
          message: '保存成功',
          type: 'success'
        })
      }
    } catch (err) {
      console.log(err);
    }
    loading.value = false;
  });
}

// 获取配置信息
async function drainageConfigGetAjax() {
  try {
    const res = await disGroupGet()
    form.value = res
    if (form.value.title == '') {
      form.value.title = defaultTitle.value
    }
    if (form.value.content == '') {
      form.value.content = defaultContent.value
    }
  } catch (error) {
    console.log(error);
  }
}

onMounted(() => {
  shopInfo.value = JSON.parse(localStorage.getItem('userInfo'))
  drainageConfigGetAjax()
})
</script>

<style scoped lang="scss">
.form_content {
  padding: 14px 0 0;
  display: flex;

  .left {
    width: 374px;
    height: 720px;
    position: relative;
    background: url('https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/3/7da616a1c56a409dbdea8bf2f41cf14b.png') no-repeat center center / 100% 100%;

    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.3);
    }

    .preview {
      width: 350px;
      height: 130px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: #fff;
      border-radius: 6px;
      display: flex;
      align-items: center;
      padding: 14px;

      .info {
        flex: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 5px 0;

        .top {
          flex: 1;

          .title {
            font-size: 16px;
            color: #333;
            font-weight: bold;
          }

          .content {
            font-size: 12px;
            color: #666;
          }
        }

        .btm {
          font-size: 14px;
          color: #999;
        }
      }

      .img_wrap {
        width: 100px;
        height: 100px;

        .img {
          width: 100%;
          height: 100%;
        }
      }
    }

    .new_preview {
      --bg: #3F3B37;
      --color: #F6DFC4;
      --borderColor: #f6dfc45b;
      width: 90%;
      background-color: var(--bg);
      border-radius: 4px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);

      .header {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        color: var(--color);
        height: 50px;
        border-bottom: 1px dashed var(--borderColor);
      }

      .content {
        padding-bottom: 14px;

        .title {
          font-size: 14px;
          color: var(--color);
          height: 50px;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .img_wrap {
          display: flex;
          justify-content: center;

          .img {
            --size: 220px;
            width: var(--size);
            height: var(--size);
          }
        }

        .intro {
          height: 40px;
          font-size: 14px;
          color: var(--color);
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 0 14px;
        }

        .foot {
          height: 40px;
          color: var(--borderColor);
          font-size: 14px;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 0 14px;
          text-align: center;
        }
      }
    }
  }
}
</style>