<!-- 私域引流 -->
<template>
  <div class="gyq_container">
    <div class="gyq_content">
      <headerCard icon="syyl" name="私域引流" intro="可设置用户下单成功后的群二维码" />
      <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 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.qrCode" style="width: 100%;height: 100%;border-radius: 4px;"></el-image>
                </div>
              </div>
              <div class="intro">
                {{ form.content }}
              </div>
              <div class="foot">
                {{ form.note }}
              </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="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"
                style="width: 300px;"></el-input>
            </el-form-item>
            <el-form-item label="模块内容">
              <div class="textarea">
                <el-input type="textarea" :rows="4" :maxlength="20" placeholder="请输入内容"
                  v-model.trim="form.content"></el-input>
                <span class="num">{{ form.content.length }}/20</span>
              </div>
            </el-form-item>
            <el-form-item label="模块提示语">
              <div class="tips">{{ defaultNote }}</div>
            </el-form-item>
            <el-form-item label="支付完成弹窗">
              <el-switch v-model="form.orderEnable" :active-value="1" :inactive-value="0"></el-switch>
            </el-form-item>
            <el-form-item label="可使用类型" prop="orderType">
              <el-checkbox-group v-model="form.orderType">
                <el-checkbox value="dine-in" label="堂食" :disabled="!form.orderEnable" />
                <el-checkbox value="take-out" label="外带" :disabled="!form.orderEnable" />
                <el-checkbox value="take-away" label="外卖" :disabled="!form.orderEnable" />
                <el-checkbox value="post" label="配送" :disabled="!form.orderEnable" />
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="首页弹窗">
              <div class="center">
                <el-switch v-model="form.homeEnable" :active-value="1" :inactive-value="0"></el-switch>
                <!-- <div class="tips">开启后至少勾选1个显示时机</div> -->
              </div>
            </el-form-item>
            <el-form-item label="显示时机" prop="homeType">
              <el-radio-group v-model="form.homeType">
                <el-radio value="only" label="仅显示1次" :disabled="!form.homeEnable"></el-radio>
                <el-radio value="day" label="每天显示1次" :disabled="!form.homeEnable"></el-radio>
                <el-radio value="every" label="每次进入小程序" :disabled="!form.homeEnable"></el-radio>
              </el-radio-group>
            </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 defaultContent = ref('长按识别上方企微好友码，添加【福利官】')
const shopInfo = ref('')

const form = ref({
  id: '',
  orderType: ['dine-in'],
  qrCode: '',
  title: defaultTitle.value,
  content: defaultContent.value,
  note: defaultNote.value,
  orderEnable: 1,
  homeEnable: 1,
  homeType: '',
  isEnable: '',
  mainShopId: '',
  shopId: ''
})

const rules = reactive({
  orderType: [
    {
      required: true,
      validator: (rule, value, callback) => {
        if (form.value.orderEnable && form.value.orderType.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'
    }
  ],
  homeType: [
    {
      validator: (rule, value, callback) => {
        if (form.value.homeEnable == 1 && form.value.homeType == '') {
          callback(new Error('请选择显示时机'))
        } else {
          callback()
        }
      },
      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
        }

        if (data.content == '') {
          data.note = defaultContent.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.orderType == null) {
      res.orderType = []
    }
    form.value = res

    if (form.value.homeType == null) {
      form.value.homeType = ''
    }

    if (form.value.title == '') {
      form.value.title = defaultTitle.value
    }
    if (form.value.note == '') {
      form.value.note = defaultNote.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">
.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%;
        }
      }
    }

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

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

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