<template>
  <el-main class="basic-config">
    <el-form ref="formRef" :model="form.model" :rules="form.rules" label-width="122px">
      <el-form-item label="Logo" prop="logo">
        <sa-uploader v-model="form.model.logo" fileType="image"></sa-uploader>
      </el-form-item>
      <el-form-item label="商城名称" prop="name">
        <el-input v-model="form.model.name" placeholder="请输入商城名称"></el-input>
      </el-form-item>
      <el-form-item label="商城域名" prop="domain">
        <div class="sa-flex sa-w-360">
          <el-input v-model="form.model.domain" placeholder="请输入商城域名"></el-input>
          <el-popover :width="240" trigger="click">
            <template #reference>
              <div class="icon-warning">
                <img src="/static/images/shop/category/warning.png" />
              </div>
            </template>
            <div>
              1.此地址用于您的店铺装修预览、H5分享链接等场景<br />
              2.请完整输入您的H5商城入口链接，如 http://m.shopro.top/<br />
              3.开启SSL并使用hash部署方式，则填写如 https://m.shopro.top/#/
            </div>
          </el-popover>
        </div>
      </el-form-item>
      <el-form-item label="用户协议" prop="user_protocol" v-if="form.model.user_protocol">
        <el-input v-model="form.model.user_protocol.title" placeholder="请选择">
          <template #append>
            <div class="cursor-pointer" @click="selectUser">选择富文本</div>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="隐私协议" prop="privacy_protocol" v-if="form.model.privacy_protocol">
        <el-input v-model="form.model.privacy_protocol.title" placeholder="请选择">
          <template #append>
            <div class="cursor-pointer" @click="selectRrivacy">选择富文本</div>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="关于我们" prop="about_us" v-if="form.model.about_us">
        <el-input v-model="form.model.about_us.title" placeholder="请选择">
          <template #append>
            <div class="cursor-pointer" @click="selectAbout">选择富文本</div>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="版本号" prop="version">
        <el-input v-model="form.model.version" placeholder="请输入版本号"></el-input>
      </el-form-item>

      <el-form-item label="版权信息">
        <div class="sa-flex-col sa-w-360">
          <el-input
            v-model="form.model.copyright"
            placeholder="请输入版权信息"
            class="sa-m-b-12"
          ></el-input>
          <el-input v-model="form.model.copytime" placeholder="请输入版权信息"></el-input>
        </div>
      </el-form-item>
    </el-form>
  </el-main>
  <el-footer class="sa-footer--submit">
    <el-button @click="getConfig">重置</el-button>
    <el-button type="primary" @click="onSave">保存</el-button>
  </el-footer>
</template>
<script setup>
  import { reactive, ref, onMounted, unref } from 'vue';
  import { api } from '../config.service';
  import { api as dataApi } from '@/app/shop/admin/data/data.service';
  import { useModal } from '@/sheep/hooks';
  import { isObject } from '@/sheep/utils/index.js';
  import RichtextEdit from '../../data/richtext/edit.vue';
  import RichtextSelect from '../../data/richtext/select.vue';
  const formRef = ref();
  const form = reactive({
    model: {
      logo: '',
      name: '',
      domain: '',
      user_protocol: {
        id: '',
        title: '',
      },
      privacy_protocol: { id: '', title: '' },
      about_us: { id: '', title: '' },
      version: '',
      copyright: '',
      copytime: '',
    },
  });
  const richtext = reactive({
    select: [],
  });
  async function getRichtextSelect() {
    ({ data: richtext.select } = await dataApi.richtext.select());
  }
  function createRichtext() {
    useModal(
      RichtextEdit,
      { title: '新建', type: 'add' },
      {
        confirm: () => {
          getRichtextSelect();
        },
      },
    );
  }
  function selectUser() {
    useModal(
      RichtextSelect,
      {
        title: '选择富文本',
      },
      {
        confirm: (res) => {
          form.model.user_protocol.title = res.data.title;
          form.model.user_protocol.id = res.data.id;
        },
      },
    );
  }
  function selectRrivacy() {
    useModal(
      RichtextSelect,
      {
        title: '选择富文本',
      },
      {
        confirm: (res) => {
          form.model.privacy_protocol.title = res.data.title;
          form.model.privacy_protocol.id = res.data.id;
        },
      },
    );
  }
  function selectAbout() {
    useModal(
      RichtextSelect,
      {
        title: '选择富文本',
      },
      {
        confirm: (res) => {
          form.model.about_us.title = res.data.title;
          form.model.about_us.id = res.data.id;
        },
      },
    );
  }
  async function getConfig() {
    const { data } = await api.basic();
    form.model = data;
    form.model.privacy_protocol = isObject(form.model.privacy_protocol)
      ? form.model.privacy_protocol
      : {};
    form.model.user_protocol = isObject(form.model.user_protocol) ? form.model.user_protocol : {};
    form.model.about_us = isObject(form.model.about_us) ? form.model.about_us : {};
  }
  function onSave() {
    unref(formRef) &&
      unref(formRef).validate(async (valid) => {
        if (valid) {
          await api.basic(form.model);
        }
      });
  }
  onMounted(() => {
    getRichtextSelect();
    getConfig();
  });
</script>
<style lang="scss" scoped>
  //警告图标
  .icon-warning {
    width: 14px;
    height: 14px;
    display: flex;
    margin-left: 8px;
  }
  img {
    width: 100%;
    height: 100%;
  }
  :deep() {
    .el-popper {
      font-size: 12px !important;
    }
  }
</style>
