<template>
  <div>
    <div class="daily-set-content" v-loading="loading">
      <el-form label-width="100px" ref="form" :model="form" :rules="rules" class="form">
        <el-form-item label="模板名称" prop="pageName">
          <el-input show-word-limit placeholder="请输入模板名称" type="text" v-model="form.pageName" maxlength="20" class="w-340"></el-input>
        </el-form-item>
        <el-form-item label="页面标题" prop="pageTitle">
          <el-input show-word-limit placeholder="请输入页面标题" type="text" v-model="form.pageTitle" maxlength="10" class="w-340"></el-input>
        </el-form-item>
        <el-form-item label="商户名称" prop="merchantName">
          <el-input show-word-limit placeholder="请输入商户名称" type="text" v-model="form.merchantName" maxlength="20" class="w-340"></el-input>
        </el-form-item>
        <el-form-item label="商户电话" prop="merchantPhoneNumber">
          <el-input show-word-limit placeholder="请输入商户电话" type="text" v-model="form.merchantPhoneNumber" maxlength="20" class="w-340"></el-input>
        </el-form-item>
        <el-form-item label="商户LOGO">
          <single-upload uploadType="1" :showDel="true" :showTips="false" :imgSrc.sync="form.merchantLogo" :field="''" class="app-set" uploadLimit="200/KB" :imgType="['image/jpeg', 'image/jpg', 'image/png', 'image/gif']"> </single-upload>
          <p style="margin-top: 6px;font-size: 12px;color: #909399;line-height: 17px;">图片建议尺寸 240*240px，格式 jpg/jpep/png/gif，大小 200KB 以内。</p>
        </el-form-item>
        <el-form-item label="页面背景">
          <single-upload uploadType="1" :showDel="true" :showTips="false" :imgSrc.sync="form.pageBackgroundImg" :field="''" class="app-set" :imgType="['image/jpeg', 'image/jpg', 'image/png', 'image/gif']"> </single-upload>
          <p style="margin-top: 6px;font-size: 12px;color: #909399;line-height: 17px;">图片建议尺寸 750*1334px，格式 jpg/png/gif，大小 2M 以内。</p>
        </el-form-item>
        <el-form-item label="引导语" prop="guideComment">
          <el-input show-word-limit placeholder="请输入引导语" type="textarea" v-model="form.guideComment" maxlength="50" class="w-340" :autosize="{ minRows: 4, maxRows: 6 }"></el-input>
        </el-form-item>
      </el-form>
      <div class="rightContent">
        <p class="previewTitle">落地页预览</p>
        <previewPage :data="form" class="preview" />
        <p class="previewBottom">此二维码只是样式预览效果，请勿直接使用</p>
      </div>
    </div>
    <div class="footBtn">
      <el-button type="primary" @click="save" :loading="btnLoading">保存</el-button>
    </div>
  </div>
</template>
<script>
import singleUpload from '@/components/single-upload.vue';
import previewPage from '@/components/preview-page.vue';
import { guidePageDetail, guidePageEdit, guidePageSave, wxEnterpriseList } from '@/api/actCode';

export default {
  components: {
    previewPage,
    singleUpload
  },
  data() {
    const merchantPhoneNumberVal = (rules, value, callback) => {
      const reg = /^[0-9 \+\-]{0,20}$/;
      const reg1 = /^\s*$/;
      const reg2 = /^\+*$/;
      const reg3 = /^\-*$/;
      if (!value) {
        callback();
        return;
      }
      if (reg1.test(value) || reg2.test(value) || reg3.test(value)) {
        callback('请输入正确的手机号');
      }
      if (!reg.test(value)) {
        callback('仅支持输入数字，空格，-，+');
      }
      callback();
    };
    return {
      form: {
        pageName: '',
        pageTitle: '',
        merchantName: '',
        merchantPhoneNumber: '',
        merchantLogo: '',
        //https://pic01-10001430.image.myqcloud.com/b91f73af-43e4-4733-a4d3-0ab0bcb4ce7f
        pageBackgroundImg: '',
        guideComment: '长按保存图片并识别二维码添加您的专属导购'
      },
      wxEnterpriseId: sessionStorage.getItem('userInfos') ? JSON.parse(sessionStorage.getItem('userInfos')).wxEnterpriseId : '',
      logoImageList: [],
      isEdit: this.$route.meta.type == 'edit',
      isAdd: this.$route.meta.type == 'add',
      loading: false,
      btnLoading: false,
      rules: {
        merchantPhoneNumber: [{ validator: merchantPhoneNumberVal }],
        pageName: [{ required: true, message: '请输入模板名称' }]
      }
    };
  },
  mounted() {
    if (this.isEdit) {
      this.getDetail();
    } else {
      this.getEchoEnterpriseInfo();
    }
  },
  methods: {
    getDetail() {
      console.log(this.$route);
      this.loading = true;
      guidePageDetail({ pageId: this.$route.params.id })
        .then(res => {
          if (res.data.result) {
            const result = res.data.result;
            this.form = result;
          }
        })
        .finally(_ => {
          this.loading = false;
        });
    },
    getEchoEnterpriseInfo() {
      wxEnterpriseList({}).then(res => {
        let resData = res.data;
        if (!!resData.result && !!resData.result.length) {
          const { customerPhone, enterpriseLogo, enterpriseName } = resData.result.filter(item => item.wxEnterpriseId == this.wxEnterpriseId)[0];
          this.form.merchantLogo = enterpriseLogo;
          this.form.merchantPhoneNumber = customerPhone;
          this.form.merchantName = enterpriseName;
        }
      });
    },
    guidePageEdit() {
      this.btnLoading = true;
      guidePageEdit(this.form)
        .then(_ => {
          this.$router.push('/ladingPageList');
          this.$message.success('保存成功');
        })
        .finally(_ => {
          this.btnLoading = false;
        });
    },
    guidePageSave() {
      this.btnLoading = true;
      guidePageSave(this.form)
        .then(_ => {
          this.$router.push('/ladingPageList');
          this.$route.meta.refresh = true;
          this.$message.success('保存成功');
        })
        .finally(_ => {
          this.btnLoading = false;
        });
    },
    save() {
      this.$refs.form.validate(val => {
        if (!val) return;
        if (this.isEdit) {
          this.guidePageEdit();
        } else {
          this.guidePageSave();
        }
      });
    }
  }
};
</script>
<style type="text/scss" lang="scss" scoped>
.daily-set-content {
  padding: 20px;
}
.form {
  float: left;
}
.rightContent {
  margin-left: 734px;
  width: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.previewTitle {
  font-weight: 500;
  color: #303133;
  line-height: 20px;
  font-size: 14px;
  width: 70px;
  text-align: center;
  margin-bottom: 20px;
}
.footBtn {
  width: 100%;
  height: 56px;
  background: #ffffff;
  box-shadow: 1px -2px 8px 0px rgba(220, 223, 230, 0.6);
  position: fixed;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.previewBottom {
  font-size: 12px;
  text-align: center;
  width: 228px;
  color: #909399;
  line-height: 17px;
}
</style>
