<template>
  <Modal v-model="showPopup" width="380" @on-visible-change="change" class-name='basic-form'>
    <Form @submit.native.prevent ref="formCustom" :model="formCustom" :rules="ruleCustom" :label-width="80" label-position="left">
      <FormItem label="页面名称" prop="pageName">
        <Input v-model="formCustom.pageName" placeholder="请输入页面名称"></Input>
      </FormItem>
      <FormItem label="页面描述" prop="pageDescribe">
        <Input v-model="formCustom.pageDescribe" type="textarea" placeholder="请输入页面描述" :rows="3"></Input>
      </FormItem>
      <FormItem label="页面关键字" prop="pageKeywords">
        <Input v-model="formCustom.pageKeywords" type="textarea" placeholder="请输入页面关键字" :rows="3"></Input>
      </FormItem>
      <FormItem label="页面缩略图" prop="shareCoverImage">
        <Upload v-model="formCustom.shareCoverImage" :show-input="false" />
        <p class="basic-form__tip">可选，默认使用页面缩略图，建议图片比例1:1，图片格式jpg、png</p>
      </FormItem>
      <FormItem label="分享打开方式" prop="shareOpenMethod" v-if="cartAndShareBtn">
        <RadioGroup v-model="formCustom.shareOpenMethod">
          <Radio :label="1" :disabled="!enableShare">小程序</Radio>
          <Radio :label="2" :disabled="!enableShare">APP</Radio>
        </RadioGroup>
        <p class="basic-form__tip">在H5中打开哪一个终端，当分享功能未启用时，此处不可选</p>
      </FormItem>
      <FormItem label="是否发布" prop="isPublish">
        <i-switch v-model="formCustom.isPublish"></i-switch>
      </FormItem>
      <FormItem label="导流url" prop="diversion">
        <Input v-model="formCustom.diversion"  placeholder="可选，具体url请联系对应导流项目的产品或开发" :rows="3"></Input>
      </FormItem>
      <FormItem label="设为模板" prop="isTemplate" v-if="formCustom.isPublish">
        <i-switch v-model="formCustom.isTemplate"></i-switch>
      </FormItem>
    </Form>
    <div slot="footer">
      <Button type="success" :loading="loadingSave" @click="handleSubmit('save')">保存</Button>
      <Button type="info" :loading="loadingPreview" @click="handleSubmit('preview')">保存并预览</Button>
    </div>
  </Modal>
</template>
<script lang="ts" src="./index.ts"></script>
<style lang="less">
  .basic-form {
    &-cover {
      display: flex;
      align-items: flex-start;
      img {
        margin-left: 15px;
        width: 75px;
        height: 133.4px;
        border: 1px dashed;
        object-fit: contain;
      }
    }
    &__tip {
      color: #666;
      line-height: 16px;
    }
  }
</style>