<template>
  <div>
    <xy-dialog ref="dialog" :is-show.sync="isShow" :title="type === 'add' ? '新增福利包' : '编辑福利包'" type="form" :form="form" :rules="rules" @submit="submit">
      <template v-slot:name>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>名称：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.name" placeholder="请输入名称" clearable style="width: 300px;"></el-input>
          </div>
        </div>
      </template>
      <template v-slot:price>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>价格：
          </div>
          <div class="xy-table-item-content">
            <el-input-number :precision="2" :controls="false" v-model="form.price" placeholder="请输入价格" clearable style="width: 300px;"></el-input-number>
          </div>
        </div>
      </template>
      <template v-slot:phone>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>客服电话：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.phone" placeholder="请输入客服电话" clearable style="width: 300px;"></el-input>
          </div>
        </div>
      </template>
      <template v-slot:wechat>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>客服微信：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.wechat" placeholder="请输入客服微信" clearable style="width: 300px;"></el-input>
          </div>
        </div>
      </template>
      <template v-slot:poster>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            海报图：
          </div>
          <div class="xy-table-item-content">
            <div v-if="form.poster" style="position: relative;">
              <img :src="form.poster" class="avatar">
              <Button
                shape="circle"
                icon="md-close"
                type="error"
                size="small"
                class="img__delete"
                @click="form.poster = ''"></Button>
            </div>
            <el-upload
              v-else
              accept="picture"
              :limit="1"
              class="avatar-uploader"
              list-type="picture-card"
              :action="action"
              :show-file-list="true"
              :on-error="uploadFail"
              :on-success="uploadSuccess"
              :before-upload="uploadBefore">
              <i  class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
        </div>
      </template>
      <template v-slot:content>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            内容:
          </div>
          <div class="xy-table-item-content" style="width:680px">
			  <xyTinymce v-if="isShow" v-model="form.content"></xyTinymce>
			  
<!--            <tinymce ref="tinymce" :height="200" v-model="form.content" id='tinymce'></tinymce>
 -->          </div>
        </div>
      </template>
    </xy-dialog>
  </div>
</template>

<script>
import {store,save} from '@/api/package'
import { Message } from 'element-ui'

// import tinymce from "@/components/Tinymce"
  import xyTinymce from "@/components/XyTinymce/index.vue";
  import {replaceAll} from "@/utils/index"
  
export default {
  components:{
    // tinymce
	xyTinymce
  },
  data() {
    return {
      isShow:false,
      type:'',
      id:'',
      detail:'',//深拷贝row对象
      action:`${process.env.VUE_APP_BASE_API}api/admin/upload-file`,

      form:{
        name:"",
        price:0,
        phone:"",
        wechat:"",
        poster:"",
        content:""
      },
      rules:{
        name:[
          {required:true,message:'请输入名称'}
        ],
        price:[
          {required:true,message:'请输入价格'}
        ],
        phone:[
          {required:true,message:'请输入客服手机号'},
          {pattern:/^[1][3-9][\d]{9}/,message:'手机格式错误'}
        ],
        wechat:[
          {required:true,message:'请输入客服微信号'}
        ]
      }
    }
  },
  methods: {
    //上传
    uploadFail(err){
      console.log(err)
    },
    uploadSuccess(response){
      console.log(response)
      this.form.poster = response.url
    },
    uploadBefore(file){
      if((file.size/1000) > 2048){
        Message({
          type:'warning',
          message:'上传图片大小超过2M！'
        })
        return false
      }
    },

    async getDetail(){
      this.form = {
        name:this.detail.name,
        price:this.detail.price,
        phone:this.detail.phone,
        wechat:this.detail.wechat,
        poster:this.detail.poster,
        content:this.detail.content
      }
      // this.$refs['tinymce'].setContent(this.form.content)
    },

    submit(){
      if(this.type === 'add'){
        store({
          poster:this.form.poster,
          name:this.form.name,
          price:this.form.price,
          phone:this.form.phone,
          wechat:this.form.wechat,
          // content:this.form.content
		  content: replaceAll(this.form.content,'../storage/files',`${process.env.VUE_APP_BASE_API}storage/files`)
		  
        }).then(res => {
          Message({
            type:'success',
            message:'新增福利包成功'
          })
          this.isShow = false
          this.$emit('refresh')
        })
        return
      }
      if(this.type === 'editor'){
        save({
          id:this.id,
          poster:this.form.poster,
          name:this.form.name,
          price:this.form.price,
          phone:this.form.phone,
          wechat:this.form.wechat,
          // content:this.form.content
		  content: replaceAll(this.form.content,'../storage/files',`${process.env.VUE_APP_BASE_API}storage/files`)
		  
        }).then(res => {
          Message({
            type:'success',
            message:'编辑福利包成功'
          })
          this.isShow = false
          this.$emit('refresh')
        })
      }
    }
  },
  watch:{
    isShow(newVal){
      if(newVal){
        if(this.type === 'editor'){
          this.getDetail()
        }
      }else{
        this.id = ''
        this.type = ''
        this.$refs['dialog'].reset()
        // this.$refs['tinymce'].setContent(' ')
      }
    }
  }

}
</script>

<style scoped lang="scss">
::v-deep .el-input-number.is-without-controls .el-input__inner{
  text-align: left !important;
}
</style>
