<template>
  <div class="containerSty">
    <el-row>
      <el-col :span="24">
        <el-form  :model="repairForm" label-width="73px" ref="repairForm"
                  class="demo-form-inline">
          <div style="display: flex;">
            <el-form-item label="问题小类:">
              <el-select v-model="repairForm.wtxl" style="width: calc(100vw  / 4.5);" 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="报修类型:">
              <el-select v-model="repairForm.bxlx" style="width: calc(100vw  / 4.5);" 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="问题类型:">
            <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>
              <span class="el-upload__text">选择照片</span>
              <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-col>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>
    </el-row>
  </div>
</template>

<script>
import req from '@/utils/request.js'
import { fileUrl } from '@/api/portal'
export default {
  name: "bxd",
  data(){
    return {
      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
      };
    },
    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
      }
    },
    onSubmit(){
      console.log('打印是否触发这个事件')
    },
    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{

}

</style>
