<template>
  <div class="app-container" style="width: 520px; margin: 0 auto">
    <el-form ref="bannerForm" :model="form" label-width="130px">
      <el-row :gutter="24" class="box-row">
        <el-col :span="14">
          <el-form-item label="统计日期:" prop="startAddTime" style="width: 100%" :rules="rules.startAddTime">
            <el-date-picker v-model="form.startAddTime" type="date" placeholder="选择开始日期" style="width: 100%" />
          </el-form-item>
        </el-col>
        <el-col class="line" :span="1">-</el-col>
        <el-col :span="8">
          <el-form-item
            label-position="false"
            label-width="0px"
            prop="endAddTime"
            style="width: 100%"
            :rules="rules.endAddTime"
          >
            <el-date-picker v-model="form.endAddTime" type="date" placeholder="选择开始日期" style="width: 100%" />
          </el-form-item>
        </el-col>
      </el-row>
      <h1 style="font-size: 16px; font-weight: bold; line-height: 40px; padding-left: 20px">外部渠道阅读量</h1>
      <el-form-item label="公众号阅读量:" prop="weChat" :rules="rules.weChat">
        <el-input v-model="form.weChat" maxlength="15" style="width: 350px" />
      </el-form-item>
      <el-form-item label="小红书阅读量:" prop="redBook" :rules="rules.redBook">
        <el-input v-model="form.redBook" maxlength="15" style="width: 350px" />
      </el-form-item>
      <el-form-item label="微博阅读量:" prop="microBlog" :rules="rules.microBlog">
        <el-input v-model="form.microBlog" maxlength="15" style="width: 350px" />
      </el-form-item>
      <el-form-item label="其他渠道阅读量:" prop="other" :rules="rules.other">
        <el-input v-model="form.other" maxlength="15" style="width: 350px" />
      </el-form-item>
      <h1 style="font-size: 16px; font-weight: bold; line-height: 40px; padding-left: 20px">采美用户意向人数</h1>
      <el-form-item label="意向强烈:" prop="intense" :rules="rules.intense">
        <el-input v-model="form.intense" maxlength="15" style="width: 350px" />
      </el-form-item>
      <el-form-item label="意向普通:" prop="ordinary" :rules="rules.ordinary">
        <el-input v-model="form.ordinary" maxlength="15" style="width: 350px" />
      </el-form-item>
      <div class="el-dialog__footer" style="text-align: center">
        <el-button type="primary" @click="onSubmit('bannerForm')"> 保存 </el-button>
        <el-button plain @click="backToList"> 返回 </el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import { saveShopPopUp, getShopPopUp } from '@/api/user/customer/customer'

export default {
  name: 'CustomerPopupEdit',
  data() {
    const defaultForm = () => {
      return {
        id: '',
        shopId: this.$route.query.shopId,
        startAddTime: '', // 统计开始时间
        endAddTime: '', // 统计结束时间
        microBlog: '', // 微博
        weChat: '', // 公众号
        redBook: '', // 小红书
        other: '', // 其他
        intense: '', // 意向强烈
        ordinary: '' // 意向普通
      }
    }
    return {
      form: defaultForm(),
      loadImgLoading: false,
      rules: {
        startAddTime: [{ required: true, message: '请选择开始日期', trigger: 'blur' }],
        endAddTime: [{ required: true, message: '请选择结束日期', trigger: 'blur' }],
        weChat: [{ required: true, message: '请填写公众号阅读量', trigger: 'blur' }],
        redBook: [{ required: true, message: '请填写小红书阅读量', trigger: 'blur' }],
        microBlog: [{ required: true, message: '请填写微博阅读量', trigger: 'blur' }],
        other: [{ required: true, message: '请填写其他渠道阅读量', trigger: 'blur' }],
        intense: [{ required: true, message: '请填写意向强烈信息', trigger: 'blur' }],
        ordinary: [{ required: true, message: '请填写意向普通信息', trigger: 'blur' }]
      }
    }
  },
  computed: {
    getToken() {
      return {
        token: this.$store.getters.token
      }
    },
    actionUrl() {
      return process.env.VUE_APP_BASE_API + '/formData/MultiPictareaddData'
    }
  },
  created() {
    this.getShopPopUp({ shopId: this.$route.query.shopId })
  },
  methods: {
    // 获取供应商弹窗详情
    async getShopPopUp(params) {
      try {
        const res = await getShopPopUp(params)
        this.form = { ...this.form, ...res.data }
      } catch (error) {
        console.log('error', error)
      }
    },
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$confirm('是否提交保存信息', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            console.log('form', this.form)
            this.saveShopPopUp(this.form)
          })
        } else {
          return false
        }
      })
    },
    async saveShopPopUp(params) {
      // 保存
      await saveShopPopUp(params)
      this.$message.success('保存成功')
      setTimeout(() => {
        this.$router.push({ path: '/user/customer/list' })
      }, 1000)
    },
    // 上传图标事件
    handleSuccess(res, file) {
      this.loadImgLoading = true
      this.$nextTick(() => {
        setTimeout(() => {
          this.form.image = res.data
        }, 1000 * 2)
      })
    },
    // 对上传图片的大小、格式进行限制
    beforeUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isJPG2 = file.type === 'image/jpg'
      const isPNG = file.type === 'image/png'
      const isLt5M = file.size / 1024 / 1024 < 5
      if (!isJPG && !isJPG2 && !isPNG) {
        this.$message.error('只支持jpg或png格式图片')
      }
      if (!isLt5M) {
        this.$message.error('请上传5MB以内的图片!')
      }
      return (isJPG || isJPG2 || isPNG) && isLt5M
    },
    reloadImage() {
      this.loadImgLoading = true
      setTimeout(() => {
        this.temp.classifyImage = this.temp.classifyImage.split('?')[0] + '?r=' + Math.floor(Math.random() * 1000)
      }, 1000 * 2)
    },
    loadSucess() {
      this.loadImgLoading = false
    },
    backToList() {
      this.$store.dispatch('tagsView/delView', this.$route).then(() => {
        this.$nextTick(() => {
          this.$router.replace({ path: '/user/customer/list' })
        })
      })
    }
  }
}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  float: left;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 30px;
  color: #999999;
}
.el-form-item__label {
  text-align: right !important;
}
.el-upload__tip {
  line-height: 20px;
  color: red;
  text-align: left;
  position: absolute;
  right: -50%;
  bottom: 0;
}
.span_tip {
  font-size: 12px;
  color: red;
  margin-left: 5px;
}
.filter-item-temp {
  width: 100px;
}
</style>
