<template>
  <div>
    <el-form ref="form" :rules="rules"  :model="form" label-width="120px">
      <el-form-item
          label="广告位名称："
      >
        {{ form.p_name }}
      </el-form-item>
      <el-form-item
          label="广告类型："
      >
        {{ form.type_name }}
      </el-form-item>
      <el-form-item
          label="广告名称："
          prop="name"
      >
        <el-input v-model="form.name"  maxlength="50" placeholder="请输入广告名称"></el-input>
      </el-form-item>
      <el-form-item
          label="广告介绍："
          prop="introduce"
      >
        <el-input type="textarea" v-model="form.introduce"  maxlength="200" placeholder="请输入广告介绍"></el-input>
      </el-form-item>

      <el-form-item
          label="链接文字："
          prop="text_name"
          v-if="form.typeid ==1"
      >
        <el-input  v-model="form.text_name"  maxlength="200" placeholder="请输入链接文字"></el-input>
      </el-form-item>
      <el-form-item
          label="链接地址："
          prop="text_url"
          v-if="form.typeid ==1"
      >
        <el-input  v-model="form.text_url"  maxlength="200" placeholder="请输入链接地址"></el-input>
      </el-form-item>
      <el-form-item
          label="Title提示："
          prop="text_title"
          v-if="form.typeid ==1"
      >
        <el-input  v-model="form.text_title"  maxlength="200" placeholder="请输入Title提示"></el-input>
      </el-form-item>

      <el-form-item  prop="image_src" v-if="form.typeid ==2" >
          <template v-slot:label >
            <span  style="display: inline-block">图片地址：</span>
          
          </template>
          <input
              type="file"
              class="inputIcon"
              ref="upfile"
              required
              @change="beforeAvatarUpload"
          />
          <div class="uploadImg" @click="uploadSildeShowClick">
              <div v-if="!form.image_src" class="uploadImg_warp">
                <div class="uploadImg_img"><img src="@/assets/default_avatar.png"></div>
                <span>点击上传</span>
              </div>
            <div v-else style="width: 100%; height: 100%;"><img :src="form.image_src" style="width: 100%;height: 100%;"></div>
          </div>
        </el-form-item>
        <el-form-item
          label="链接地址："
          prop="image_url"
          v-if="form.typeid ==2"
      >
        <el-input  v-model="form.image_url"  maxlength="200" placeholder="请输入链接地址"></el-input>
      </el-form-item>
      <el-form-item
          label="图片ALT："
          prop="image_alt"
          v-if="form.typeid ==2"
      >
        <el-input  v-model="form.image_alt"  maxlength="200" placeholder="请输入图片ALT"></el-input>
      </el-form-item>
        <el-form-item
          label="投放开始时间："
          prop="f_t_date"
      >
              <el-date-picker
              v-model="form.f_t_date"
              type="datetimerange"
              range-separator="至"
              value-format="YYYY-MM-DD HH:mm:ss"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
              
            </el-date-picker>
      </el-form-item>

        <el-form-item
          label="备注："
          prop="remark"
      >
        <el-input  v-model="form.remark"  maxlength="200" placeholder="请输入备注"></el-input>
      </el-form-item>
      <!---1通过，2待审-->
      <el-form-item
          label="状态："
          prop="status"
      >
      <el-radio-group v-model="form.status">
          <el-radio :label="1">通过</el-radio>
          <el-radio :label="2">待审核</el-radio>
      </el-radio-group>
      </el-form-item>

      <el-form-item>
        <div style="text-align: center">
          <el-button type="primary" @click="onSubmit" :disabled="Isdisabled" :loAding="isloAding">保存</el-button>
          <el-button style="color: #5075FC " @click="closeDlg">取消</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import Editor from "../../../components/editor/Editor";
export default {
  components: {
        Editor
    },
  props: {
    AdDataForm: {
      type: Object,
      default: () => {}
    },
    isloAding:{
      type:Boolean,
      default: true
    },
    closeDlg:{
      type:Function
    }
  },
  data() {
    return {
      isShow:'',
      form: {
        id:'',
        typeid:'',
        f_t_date:[],
        name:'',//广告标题
        thumb:'',//示意图
        typeid:'', //广告类型
        introduce:'', //广告介绍
        text_name:'',//文本内容
        text_url:'',//文本跳转地址
        text_title:'',//文本提示标题

        image_src:'',//图片地址
        image_url:'',//跳转地址
        image_alt:'',//图片提示
        status:'',//状态
        remark:'',//备注信息
        p_name:'',
      },
      categoryList: [],
      Isdisabled: false,
      rules: {
        website_id: [
          { required: true, message: '请选择所属站点' },
        ],
        name: [
          {  required: true, message: '广告位名称不能为空' },
        ],
        status: [
          {  required: true, message: '请选择状态' },
        ],
        text_name:[
          {  required: true, message: '链接文字不能为空' },
        ],
        text_url:[
          {  required: true, message: '链接地址不能为空' },
        ],
        text_title:[
          {  required: true, message: '链接提示不能为空' },
        ],
        f_t_date:[
          {  required: true, message: '投放时间不能为空' },
        ],
        image_src:[
          {  required: true, message: '图片地址不能为空' },
        ],
      },
      pageSize:20,
      page:1,
      keyWord:'',
    }
  },
  watch:{
    "form.width":{
      immediate:true, 
      handler: function(n,o){
        console.log("宽：",n)
        if(n>0 && this.form.height>0){
           setTimeout(() => {
            this.form.size = "1"
            this.$refs['size'].clearValidate()
           })
          
        }else{
           this.form.size = ""
        }
      }
    }
    , 
    "form.height":{
      immediate:true, 
      handler: function(n,o){
        console.log("高：",n)
        if(n>0 && this.form.width>0){
          setTimeout(() => {
            this.form.size = "1"
            this.$refs['size'].clearValidate()
           })
          
        }else{
           this.form.size = ""
        }
      }
    }
  },
  mounted() {
    if(this.AdDataForm) {
      this.form = Object.assign({} , this.AdDataForm)
      this.form.p_name =  this.form.name
      this.form.pid =  this.form.id
      this.form.name = ''
      this.form.introduce= ''

    }
 
  },
  methods: {
    onclickType(val){
      console.log(val)
      if(val==1){
          this.isShow = false
      }else{
        this.isShow = true
      }
    },
    isAdOk(o){
        console.log(o)
        if(o==true){
            this.isAd = true
        }else{
          this.isAd = false
        }
    },
    handelIncrease(step) {
          console.log("step====:",step)
          this.form.content = step
    },
    closeDlg() {
      console.log("edit提交")
      this.$emit('closeDlg',1)
    },
    onSubmit() {
      let that = this
      
      that.$refs['form'].validate((valid) => {
        if (valid) {
          this.form.tag = that.tags
          this.$emit('AdSubmitClick', this.form)
        }
      })
    },

    uploadSildeShowClick() {
      this.$refs.upfile.value = ''
      this.$refs.upfile.click()
    },
    beforeAvatarUpload(e) {
      let than = this
      let files = e.target.files[0]
      let suffixName = files.name.substring(files.name.lastIndexOf('.') + 1);   /* 得到文件后缀名 */
      if (suffixName !== 'jpg' && suffixName !== 'png' && suffixName !== 'jpeg' && suffixName !== 'gif' ) {
        this.$message.warning("上传文件只能是 jpg、png、jpeg、gif 格式!");
        // this.ishowFile = true
        return;
      }
      this.verificationPicFile(files, () => this.fileAdd(files))
    },
    fileAdd(files) {
      let formData = new FormData();
      // 组装post提交的数据
      formData.append("file", files);
      this.$api.publicApi.uploadFile(formData).then( res => {
        console.log(res)
        if( res.code == '200') {
          this.$message({
            type: 'success',
            message: '上传成功'
          })
          // this.avatarUrl =  res.data.imgUrl
          this.form.image_src = res.data.imgUrl
        }else{
          this.$message({
            type: 'error',
            message: '上传失败'
          })
        }
      })
    },
    verificationPicFile(file, callback) {
      const that = this
      //读取图片数据
      var filePic = file;
      var reader = new FileReader();
      reader.onload = function (e) {
        var data = e.target.result;
        //加载图片获取图片真实宽度和高度
        var image = new Image();
        image.onload=function(){
          var width = image.width;
          var height = image.height;
          if (width >= 100 && height >= 100){
            callback()
          } else {
            // that.ishowFile = true
            that.from.avatar = ''
            that.$message.error('上传图片建议200*200px！')
          }
        };
        image.src= data;
      };
      reader.readAsDataURL(filePic);
    },
   
    removeTag(index) {
      this.tags.splice(index, 1);
    }
  }
}
</script>
<style>
.el-cascader-node>.el-radio{
  margin-top:25px;
}
</style>

<style lang="less" scoped>

.uploadImg {
  width: 110px;
  height: 100px;
  border: 1px solid #F8F8F8;
  border-radius: 4px;
  cursor:pointer;
  position: absolute;
  top: 0;
}
.inputIcon {
  width: 110px;
  height: 100px;
  position: relative;
  opacity: 0;
}
.uploadImg_warp {
  width: 100%;
  height: 100%;
  display:flex ;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.uploadImg_img {
  height: 32px;
}
.footerBotton {
  text-align: center;
}
.avatar-uploader {
  width: 110px;
  height: 110px;
  border: 1px solid #F8F8F8;
  border-radius: 4px;
  position: relative;
}
.el-icon-plus {
  width: 110px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.el-icon-plus-icon {
  display: block;
  margin-bottom: 15px;
}
.el-icon-plus-up {
  color: #222222;
  font-size: 12px;
  line-height: 17px;
  font-weight: 400;
}
/deep/ .el-radio {
  line-height: 40px;
}
</style>


