<template>
  <div class="block">
    <div class="head">
      <div class="go-back" @click="goBack"><i class="el-icon-back"></i>返回上一页</div>
    </div>

    <div class="body">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-alert title="基础信息" type="info" :closable="false"></el-alert>

        <el-form-item label="产品名称" prop="name">
          <el-input v-model="ruleForm.name" placeholder="请输入产品名称"></el-input>
        </el-form-item>
        <el-form-item label="产品缩略图" prop="coverImage">
           <!-- 上传 -->
          <my-upload :value="ruleForm.coverImage" @input="(val) => getSrc('coverImage', val)"></my-upload>
        </el-form-item>
        <el-form-item label="上传源文件" :prop="'imageInfoRelationList.url' && 'imageInfoRelationList.price'">
          <!-- 上传 -->
          <my-upload :value="ruleForm.imageInfoRelationList.url" @input="(val) => getSrc('imageInfoRelationList', val)"></my-upload>
          <div v-if="ruleForm.imageInfoRelationList.fileWidth">尺寸大小：{{ruleForm.imageInfoRelationList.fileWidth}}</div>
          <el-input size="mini" v-model="ruleForm.imageInfoRelationList.price" placeholder="请输入价格"></el-input>
        </el-form-item>

        <el-alert title="产品参数" type="info" :closable="false"></el-alert>

        <el-form-item label="影像分类" prop="type">
          <el-select v-model="ruleForm.type" placeholder="请选择">
            <el-option
              v-for="(item, index) in imageTypes"
              :key="~~index"
              :label="item"
              :value="~~index">
            </el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="产品类型" prop="">
          <el-input v-model="ruleForm.type" placeholder="请输入产品类型"></el-input>
        </el-form-item> -->
        <el-form-item label="文件格式" prop="paramJson.fileType">
          <el-input v-model="ruleForm.paramJson.fileType" placeholder="请输入文件格式"></el-input>
        </el-form-item>
        <el-form-item label="卫星" prop="paramJson.satellite">
          <el-input v-model="ruleForm.paramJson.satellite" placeholder="请输入卫星型号"></el-input>
        </el-form-item>
        <el-form-item label="分辨率" prop="paramJson.resolution">
          <el-input v-model="ruleForm.paramJson.resolution" placeholder="请输入产品分辨率"></el-input>
        </el-form-item>
        <el-form-item label="拍摄地点" prop="paramJson.address">
          <el-input v-model="ruleForm.paramJson.address" placeholder="请输入拍摄地点"></el-input>
        </el-form-item>
        <el-form-item label="拍摄时间" prop="paramJson.shotTime">
          <el-date-picker
            v-model="ruleForm.paramJson.shotTime"
            type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="可否商用" prop="paramJson.commercial">
          <el-radio-group v-model="ruleForm.paramJson.commercial">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="2">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否水印" prop="paramJson.watermark">
          <el-radio-group v-model="ruleForm.paramJson.watermark">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="2">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- <el-form-item label="相似图片" prop="type">
          <el-input v-model="ruleForm.type"></el-input>
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" @click="onSubmit">确定</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import MyUpload from "@/components/Upload/singleImageX"//上传组件

// import { satelliteIntroduction } from "@/utils/formDatas.js"//表单数据
import { update } from "@/api/website/imageLibrary"

export default {
  components: {
    MyUpload
  },
  data() {
    return {
      //1--影像美图 2--专题图 3--遥感成果图
      imageTypes: {
        1: '影像美图',
        2: '专题图',
        3: '遥感成果图',
      },
      ruleForm: {
        name: '',
        coverImage: '',
        imageInfoRelationList: {
          url: '',
          price: ''
        },
        type: '',
        paramJson: {
          fileType: '',
          fileWidth: '',
          satellite: '',
          resolution: '',
          address: '',
          shotTime: '',
          commercial: '',
          watermark: '',
        }
      },
      rules: {
        name: [
          {required:  true, message: '请输入产品名称', trigger: 'blur'}
        ],
        coverImage: [
          {required:  true, message: '请上传缩略图', trigger: 'change'}
        ],
        'imageInfoRelationList.url': [
          {required:  true, message: '请上传源文件', trigger: 'change'}
        ],
        'imageInfoRelationList.price': [
          {required:  true, message: '请输入价格', trigger: 'blur'}
        ],
        type: [
          {required:  true, message: '请选择影像类型', trigger: 'change'}
        ],
        'paramJson.fileType': [
          {required:  true, message: '请输入文件类型', trigger: 'blur'}
        ],
        'paramJson.satellite': [
          {required:  true, message: '请输入卫星型号', trigger: 'blur'}
        ],
        'paramJson.resolution': [
          {required:  true, message: '请输入分辨率', trigger: 'blur'}
        ],
        'paramJson.address': [
          {required:  true, message: '请输入拍摄地点', trigger: 'blur'}
        ],
        'paramJson.shotTime': [
          {type: 'date', required:  true, message: '请选择拍摄时间', trigger: 'change'}
        ],
        'paramJson.commercial': [
          {required:  true, message: '请选择', trigger: 'change'}
        ],
        'paramJson.watermark': [
          {required:  true, message: '请选择', trigger: 'change'}
        ]
      }
    }
  },
  mounted() {
    this.$bus.$on('satelliteIntroduction-edit-renderData', this.renderData)
  },
  methods: {
    getSrc(key, val) {
      let rule = ['imageInfoRelationList'];
      if (rule.includes(key)) {
        this.ruleForm[key].url = val;
      } else {
        this.ruleForm[key] = val;
      }

    },
    renderData(val) {
      this.ruleForm = val
      console.log('bus end', this.ruleForm)
    },
    goBack() {
      this.$emit('change', 'list')
    },
    onSubmit() {
      console.log(this.ruleForm)
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });

    },
    // filterParams(obj) {
    //   let p = {}
    //   let b = ['isDel', 'status', 'updTime', 'crtTime']
    //   for (let key in obj) {
    //     if (!b.includes(key)) {
    //       p[key] = obj[key]
    //     }
    //   }
    //   return p;
    // },
    // //更新方法
    // updateFunc(params) {
    //   params.rank = ~~params.rank;
    //   let datas = this.filterParams(params);

    //   update(datas).then(res => {
    //     if (res.status ==  200) {
    //       //返回上一页，更新列表
    //       this.goBack();

    //     } else {
    //       this.$message.error(res.message);
    //     }
    //   })
    // }
  }
}
</script>

<style lang="scss" scoped>
.head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 20px;
  width: 100%;
  border-bottom: 1px solid #e6e6e6;
  .go-back {
    height: 30px;
    line-height: 30px;
    font-size: 16px;
    color: #1989fa;
    cursor: pointer;
    i {
      margin-right: 10px;
    }
  }
}
.body {
  padding: 20px 50px 40px
}
</style>
