<!-- 私域引流 -->
<template>
  <div class="gyq_container">
    <div class="gyq_content">
      <headerCard icon="syyl" name="私域引流" intro="可设置用户下单成功后的群二维码" showSwitch v-model:isOpen="form.isEnable" />
      <div class="form_content">
        <div class="left">
          <div class="preview">
            <div class="info">
              <div class="top">
                <div class="title">{{ form.title || defaultTitle }}</div>
                <div class="content">{{ form.content || '请输入模块内容' }}</div>
              </div>
              <div class="btm">{{ form.note || defaultNote }}</div>
            </div>
            <div class="img_wrap">
              <el-image :src="form.qrCode" style="width: 100%;height: 100%;"></el-image>
            </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="useType">
              <el-checkbox-group v-model="form.useType">
                <el-checkbox value="dine-in" label="堂食" />
                <el-checkbox value="take-out" label="外带" />
                <el-checkbox value="take-away" label="外卖" />
                <el-checkbox value="post" label="配送" />
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="群二维码" prop="qrCode">
              <single-image-upload style="width: 120px; height: 120px" v-model="form.qrCode"></single-image-upload>
            </el-form-item>
            <el-form-item label="模块标题" prop="title">
              <el-input :placeholder="defaultTitle" :maxlength="20" v-model.trim="form.title"></el-input>
            </el-form-item>
            <el-form-item label="模块内容">
              <div class="textarea">
                <el-input type="textarea" :rows="4" :maxlength="50" placeholder="请输入内容"
                  v-model.trim="form.content"></el-input>
                <span class="num">{{ form.content.length }}/50</span>
              </div>
            </el-form-item>
            <el-form-item label="模块提示语">
              <el-input :placeholder="defaultNote" :maxlength="20" v-model.trim="form.note"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" :loading="loading" @click="submitHandle">保存</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

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

const defaultTitle = ref('扫码进群，优惠多多')
const defaultNote = ref('长按识别，微信内扫一扫加好友')

const form = ref({
  id: '',
  useType: ['dine-in'],
  qrCode: '',
  title: defaultTitle.value,
  content: '',
  note: '长按识别，微信内扫一扫加好友',
  isEnable: '',
  mainShopId: '',
  shopId: ''
})

const rules = reactive({
  useType: [
    {
      required: true,
      validator: (rule, value, callback) => {
        if (form.value.useType.length <= 0) {
          callback(new Error('请选择可使用类型'))
        } else {
          callback()
        }
      },
      triiger: 'change'
    }
  ],
  qrCode: [
    {
      required: true,
      message: '请上传群二维码',
      triiger: 'change'
    }
  ],
  title: [
    {
      required: true,
      message: '请输入模块标题',
      triiger: 'change'
    }
  ],
  content: [
    {
      required: true,
      message: '请输入内容',
      triiger: 'change'
    }
  ],
  note: [
    {
      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.note == '') {
          data.note = defaultNote.value
        }

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

// 获取配置信息
async function drainageConfigGetAjax() {
  try {
    const res = await drainageConfigGet()
    if (res.useType == null) {
      res.useType = []
    }
    form.value = res

    if (form.value.title == '') {
      form.value.title = defaultTitle.value
    }
    if (form.value.note == '') {
      form.value.note = defaultNote.value
    }
  } catch (error) {
    console.log(error);
  }
}

onMounted(() => {
  drainageConfigGetAjax()
})
</script>

<style scoped lang="scss">
.gyq_container {
  padding: 14px;

  .gyq_content {
    padding: 14px;
    background-color: #fff;
    border-radius: 8px;
  }
}

.column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;

  .item {
    flex: 1;
  }
}

.center {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tips {
  color: #666;
}

.footer {
  display: flex;
  justify-content: center;
}

.textarea-num {
  color: #999;
  display: flex;
  justify-content: flex-end;
}

.row {
  padding-top: 14px;
}

.form_content {
  padding: 14px 0 0;
  display: flex;

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

    .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%;
        }
      }
    }
  }
}

.textarea {
  width: 300px;
  position: relative;

  .num {
    font-size: 12px;
    color: #666;
    position: absolute;
    right: 10px;
    bottom: 0;
  }
}
</style>