<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"
        :loading="loading">
        <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="title"
      >
        <el-input v-model="form.title"  maxlength="50" placeholder="请输入网站名称"></el-input>
      </el-form-item>
      <el-form-item
          label="网站地址："
          prop="url"
      >
        <el-input v-model="form.url"  maxlength="50" placeholder="请输入网站地址"></el-input>
      </el-form-item>
      <el-form-item  prop="image_url"  >
          <template v-slot:label >
            <span  style="display: inline-block">网站LOGO：</span>
            <el-tooltip
                class="box-item"
                effect="dark"
                content="建议大小：90px*30px  支持格式：jpg、gif、png"
                placement="top"
            >
              <i class="el-icon-warning"></i>
            </el-tooltip>
            <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.logo_url" 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.logo_url" style="width: 100%;height: 100%;"></div>
          </div>
        </el-form-item>
      <el-form-item
          label="网站介绍："
          prop="describe"
      >
        <el-input type="textarea" v-model="form.describe"  maxlength="50" placeholder="请输入网站介绍"></el-input>
      </el-form-item>
      <!---1通过，2待审核，3待发 4,拒绝 5删除-->
      <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: {
    LinkDataForm: {
      type: Object,
      default: () => {}
    },
    isloading:{
      type:Boolean,
      default: true
    },
    closeDlg:{
      type:Function
    }
  },
  data() {
    return {
      form: {
        website_id:'',//站点ID
        title:'',//标题
        url:'',//地址
        logo_url:'', //图片地址
        status:1,//状态
        describe:'', //备注信息
      },
      categoryList: [],
      Isdisabled: false,
      rules: {
        website_id: [
          { required: true, message: '请选择所属站点' },
        ],
        title: [
          {  required: true, message: '网站名称不能为空' },
        ],
        url: [
          {  required: true, message: '网站地址不能为空' },
        ],
        status: [
          {  required: true, message: '请选择状态' },
        ],
      },
      pageSize:20,
      page:1,
      keyWord:'',
      websiteList:[]
    }
  },
  mounted() {
    if(this.LinkDataForm) {
      this.form = Object.assign({} , this.LinkDataForm)
    }
    this.remoteMethod()
  },
  methods: {
    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("查询失败")
                }
            })
    },
    isLinkOk(o){
        console.log(o)
        if(o==true){
            this.isLink = true
        }else{
          this.isLink = 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('LinkSubmitClick', 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.logo_url = 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);
    },
    addTag() {
      if (this.tagInput.trim()) {
        this.tags.push(this.tagInput.trim());
        
        this.tagInput = '';
      }
    },
    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>


