<template>
  <div class="containerSty">
    <el-form  :model="repairForm"  :rules="repairFormRules" label-width="82px" ref="repairForm">
      <div style="display: flex;">
        <el-form-item label="问题小类:" prop="wtxl">
          <el-select v-model="repairForm.wtxl" style="width: calc(100vw  / 5.2);" clearable placeholder="请选择问题小类">
            <el-option
              v-for="item in bxxlOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="报修类型:" label-width="100px" prop="bxlx">
          <el-select v-model="repairForm.bxlx" style="width: calc(100vw  / 5.8);" clearable placeholder="请选择报修类型">
            <el-option
              v-for="item in bxlxOptions"
              :key="item.label"
              :label="item.label"
              :value="item.label">
            </el-option>
          </el-select>
        </el-form-item>
      </div>
      <el-form-item label="问题类型:" prop="wtlx">
        <el-input v-model="repairForm.wtlx"  type="textarea" :rows="2"  clearable placeholder="请输入问题描述"></el-input>
      </el-form-item>
      <el-form-item label="图片:">
        <el-upload
          :action="action"
          accept=".jpg,.jpeg,.png"
          list-type="picture-card"
          :file-list="repairForm.fileList"
          class="labUrlClass"
          :on-success="handleImgSuccess"
          :before-upload="beforeAvatarUpload"
          :http-request="httpRequest"
          multiple
        >
          <i slot="default" class="el-icon-plus"></i>
          <div style="position: absolute;top: 30px;left: 45px" class="el-upload__text">选择照片</div>
          <div slot="file" slot-scope="{ file }">
            <img
              class="el-upload-list__item-thumbnail"
              :src="file.url"
              alt=""
            />
            <span class="el-upload-list__item-actions">
                  <span
                    class="el-upload-list__item-preview"
                    @click="handlePictureCardPreview(file)"
                  >
                    <i class="el-icon-zoom-in"></i>
                  </span>
                  <span
                    class="el-upload-list__item-delete"
                    @click="handlePictureCardRemove(file)"
                  >
                    <i class="el-icon-delete"></i>
                  </span>
                </span>
          </div>
        </el-upload>
      </el-form-item>
    </el-form>
    <el-dialog :visible.sync="dialogVisible" width="400px" title="预览图片">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
import req from '@/utils/request.js'
import { fileUrl } from '@/api/portal'
export default {
  name: "bxd",
  data(){
    return {
      repairFormRules:{
        wtxl:[
          {required:true,message:'请选择问题小类',trigger:'change'}
        ],
        bxlx:[
          {required:true,message:'请选择报修类型',trigger:'change'}
        ],
        wtlx:[
          {required:true,message:'请输入问题类型描述',trigger:'blur'}
        ]
      },
      bxlxOptions:[
        {
          value: '燃气泄漏',
          label:'燃气泄漏'
        },
        {
          value: '管道破裂',
          label:'管道破裂'
        },
        {
          value: '其他',
          label:'其他'
        }
      ],
      bxxlOptions:[
        {
          value: "灶具、热水器故障",
          label: "灶具、热水器故障"
        },
        {
          value: "表接头漏气",
          label: "表接头漏气"
        },
        {
          value: "表后阀漏气",
          label: "表后阀漏气"
        },
        {
          value: "表后管接头漏气",
          label: "表后管接头漏气"
        },
        {
          value: "户外立管活接漏气",
          label: "户外立管活接漏气"
        },
        {
          value: "外挂表后阀漏气",
          label: "外挂表后阀漏气"
        },
      ],
      repairForm:{
        bxlx:'',
        wtxl:'',
        wtlx:'',
        fileList:[]
      },
      limitCountImg: 5,
      showBtnDealImg: true,
      noneBtnImg: false,
      dialogImageUrl:false,
      dialogVisible: false,
      timer: null,
      action: '',
    }
  },
  created() {
    // 上传路径拼接
    this.action = `${window.context.portal}/system/file/v1/fileUpload`
  },
  methods:{
    resetForm(){
      this.repairForm={
        ...this.repairForm
      };
    },
    onSubmit(){
      let validFlag = false;
      this.$refs.repairForm.validate((valid) => {
        if (valid) {
          validFlag = true;
        } else {
          validFlag = false;
        }
      });
      return validFlag;
    },
    onReset(){
      this.$refs.repairForm.resetFields();
    },
    handlePictureCardRemove(file, fileList) {
      console.log(file, this.repairForm.fileList);
      const index = this.repairForm.fileList.findIndex((item) => {
        return item.uid === file.uid
      })
      this.repairForm.fileList.splice(index, 1)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleImgSuccess(val, e, el) {
      console.log('打印val',e,el);
      if (e.response.code != 0) {
        this.$message.error(e.response.msg);
        return false;
      }
      //文件上传成功，清空提示信息
      this.$refs.repairForm.clearValidate();
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.$message.success("上传成功");
      }, 200);
      this.repairForm.fileList = el;
      console.log(this.repairForm.fileList, "this.fileList");
    },
    // 自定义上传
    async httpRequest(val) {
      console.log('打印val',val);
      const formData = new FormData()
      formData.append('files', val.file);
      let response = await req.post(
        window.context.portal + '/system/file/v1/fileUpload',
        formData
      )
      if (response.success) {
        console.log('打印response',response);
        this.$message.success('上传成功');
        let imgUrl = response.fileId;
        if (response.fileId) {
          imgUrl = await this.$getPhotoUrl(response.fileId);
        }
        this.repairForm.fileList.push({
          fileId:response.fileId,
          url:imgUrl,
          fileObj: JSON.stringify(response)
        });
        // this.form.fileId = response.fileId;
        // this.form.userId = this.$store.state.user.userInfo.user.userId
      }
    },
    handleRemove(){

    },
    handleSuccess(response, file, fileList) {
      console.log('打印el',response,file,fileList);
      // if (e.response.code != 0) {
      //   this.$message.error(e.response.msg);
      //   return false;
      // }
      // //文件上传成功，清空提示信息
      // this.$refs.repairForm.clearValidate();
      // clearTimeout(this.timer);
      // this.timer = setTimeout(() => {
      //   this.$message.success("上传成功");
      // }, 200);
      // // this.fileList = el
      // this.repairForm.fileList = el;
      // console.log(this.repairForm.fileList, "this.fileList");
    },
    beforeAvatarUpload(file){
      console.log('打印beforeAvatarUpload===>file,file',file)
      let imgType = ["jpg", "jpeg", "png"];
      let judge = false; // 后缀
      let type = file.name.split(".")[file.name.split(".").length - 1];
      for (let k = 0; k < imgType.length; k++) {
        if (imgType[k].toUpperCase() === type.toUpperCase()) {
          judge = true;
          break;
        }
      }
      // 验证图片格式
      if (!judge) {
        this.$message.error("图片格式只支持：JPG、JPEG、PNG");
        return false;
      }
      const isLt1M = file.size / 1024 / 1024;
      if (isLt1M > 1) {
        this.$message.error("上传头像图片大小不能超过1MB");
        return false;
      }
      return true;
    },
  }
}
</script>

<style lang="scss" scoped>
.containerSty{
  height: 100%;
  width: 100%;
  ::v-deep.el-upload--picture-card{
    position: relative;
  }

}

</style>