<template>
  <div>
    <el-form ref="form" :rules="rules"  :model="form" label-width="120px">
      <el-form-item
          label="所属站点："
          prop="website_id"
      >
      <el-select
        v-model="form.website_id"
        :multiple=false
        :clearable="true"
        filterable
        remote
        reserve-keyword
        placeholder="请输入关键词"
        :remote-method="remoteMethod"
        :loAdPlaceing="loAdPlaceing">
        <el-option
          v-for="item in websiteList"
          :key="item.id"
          :label="item.website_name"
          :value="item.id">
        </el-option>
      </el-select>
    
      </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  prop="thumb"  >
          <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.thumb" 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.thumb" style="width: 100%;height: 100%;"></div>
          </div>
        </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="typeid"
      >
      <el-radio-group v-model="form.typeid" @change="onclickType">
          <el-radio :label="1">文字</el-radio>
          <el-radio :label="2">图文</el-radio>
      </el-radio-group>
      </el-form-item>
      <el-form-item
          v-if="form.typeid==2"
          label="广告位大小："
          prop="size"
          ref="size"
      >
        <el-input v-model.number="form.width" style="width:150px;" maxlength="50" placeholder="宽"></el-input> X <el-input v-model.number="form.height" style="width:150px;" maxlength="50" placeholder="高"></el-input>[宽 X 高 px]
      </el-form-item>
      <el-form-item
          label="价格："
          prop="price"
      >
        <el-input v-model.number="form.price"  maxlength="50" placeholder="0表示面议"></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" :loAdPlaceing="isloAdPlaceing">保存</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: {
    AdPlaceDataForm: {
      type: Object,
      default: () => {}
    },
    isloAdPlaceing:{
      type:Boolean,
      default: true
    },
    closeDlg:{
      type:Function
    }
  },
  data() {
    return {
      isShow:'',
      form: {
        website_id:'',//站点ID
        name:'',//标题
        thumb:'',//示意图
        typeid:'', //广告类型
        status:'',//状态
        introduce:'', //备注信息
        width:0,
        height:0,
        size:''

      },
      categoryList: [],
      Isdisabled: false,
      rules: {
        website_id: [
          { required: true, message: '请选择所属站点' },
        ],
        name: [
          {  required: true, message: '广告位名称不能为空' },
        ],
        size: [
          {  required: true, message: '宽高不能为空' },
        ],
        status: [
          {  required: true, message: '请选择状态' },
        ],
        typeid: [
          {  required: true, message: '请选择广告类型' },
        ],
        price:[
          {pattern: /^(([0-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/,message:'您的价格填写有误'}
        ]
      },
      pageSize:20,
      page:1,
      keyWord:'',
      websiteList:[]
    }
  },
  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.AdPlaceDataForm) {
      this.form = Object.assign({} , this.AdPlaceDataForm)
    }
    this.remoteMethod()
  },
  methods: {
    onclickType(val){
      console.log(val)
      if(val==1){
          this.isShow = false
      }else{
        this.isShow = true
      }
    },
    remoteMethod(keyWord){
      let _t= this
      let parames = {
        'page':this.currentPage,
        'pageSize':this.pageSize,
        'keyWord':keyWord
      }
      this.$api.website.getWebsiteList(parames).then(res=>{
                if(res.code==200){
                  _t.websiteList = res.data.rows
                }else{
                    this.$message.error("查询失败")
                }
            })
    },
    isAdPlaceOk(o){
        console.log(o)
        if(o==true){
            this.isAdPlace = true
        }else{
          this.isAdPlace = 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('AdPlaceSubmitClick', 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.thumb = 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>


