<!--录库评审弹窗-->
<template>
  <el-dialog title="录库评审" width="975px" :visible.sync="isShowInfo" append-to-body @close="close">
    <div class="reviewDialog">
      <div class="Dialog-input">
        <div class="inputContent">
          <div class="inputBox">
            <red-star />
            <input-vue
              v-model="addInfo.supplierCode"
              title="供应商编号"
              disabled
              placeholder="请输入编号"
              class="inputWidth"
              width="200px"
            />
          </div>
          <div class="inputBox">
            <red-star />
            <input-vue title="录库评审结果" class="inputWidth">
              <el-select v-model="addInfo.inputReviewResult" clearable placeholder="请选择" style="width:200px">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </input-vue>
          </div>
          <div class="inputBox">
            <red-star />
            <input-vue title="录库评审日期" class="inputWidth">
              <el-input
                v-model="addInfo.inputReviewDate"
                placeholder="请选择日期"
                suffix-icon="el-icon-date"
                style="width:200px"
              />
            </input-vue>
          </div>
        </div>
        <div class="inputContent">
          <div class="inputBox">
            <red-star />
            <input-vue
              v-model="addInfo.supplierName"
              title="供应商名称"
              disabled
              placeholder="请输入供应商名称"
              class="inputWidth"
              width="200px"
            />
          </div>
          <div class="inputBox">
            <input-vue title="录库评审说明" class="inputWidth">
              <el-input
                v-model="addInfo.inputReviewIllustration"
                type="textarea"
                :rows="2"
                placeholder="请输入审核说明"
                style="width:200px"
              />
            </input-vue>
          </div>
        </div>
      </div>
      <div class="imgContent">
        <div class="img-box">
          <div class="img-item">
            <div v-if="fileName" class="title-box">
              <div class="img-title">
                {{ fileName }}
              </div>
              <div class="img-btn">
                <el-button type="text" class="btn">
                  下载
                </el-button>
              </div>
            </div>
            <el-upload
              class="avatar-uploader"
              :headers="myHeaders"
              action="http://111.198.10.15:21403/file/uploadFile"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
          </div>
          <div class="img-item">
            <div v-if="fileName2" class="title-box">
              <div class="img-title">
                {{ fileName2 }}
              </div>
              <div class="img-btn">
                <el-button type="text" class="btn">
                  下载
                </el-button>
              </div>
            </div>
            <el-upload
              class="avatar-uploader"
              :headers="myHeaders"
              action="http://111.198.10.15:21403/file/uploadFile"
              :show-file-list="false"
              :on-success="handleAvatarSuccess2"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="imageUrl2" :src="imageUrl2" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
          </div>
        </div>
        <div class="uploadbtn">
          <el-button type="primary">
            上传录库评审结果
          </el-button>
        </div>
      </div>
      <div class="btnBox">
        <el-button type="primary" class="save" @click="save">
          保存
        </el-button>
        <el-button type="info" class="close" @click="close">
          取消
        </el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import dialogHeader from './dialogHeader.vue'
import inputVue from '../input/inputVue.vue'
import RedStar from '../redStar.vue'

import { getToken } from '@/utils/auth'
import { Message } from 'element-ui'
import { reviewAdd } from '../../../api/supplier/supplier'
export default {
  components: { inputVue, dialogHeader, RedStar },
  props: {
    dataInfo: {
      type: Object,
      dataInfo: {}
    }
  },
  data() {
    return {
      fileName: '',
      imageUrl: '',
      imageUrl2: '',
      fileName2: '',
      myHeaders: { token: getToken() },
      isShowInfo: true,
      options: [
        { label: '预审通过', value: '预审通过' },
        { label: '预审不通过', value: '预审不通过' }
      ],
      addInfo: {
        supplierCode: '',
        supplierName: '',
        inputReviewResult: '',
        inputReviewIllustration: '',
        inputReviewDate: '',
        inputReviewFile: ''
      }
    }
  },
  watch: {
    dataInfo: {
      handler(val) {
        console.log(val)
        if (val != '') {
          const temp = { ...this.addInfo }
          this.addInfo = {
            supplierCode: val.supplierCode,
            supplierName: val.supplierName,
            inputReviewResult: temp.inputReviewResult,
            inputReviewIllustration: temp.inputReviewIllustration,
            inputReviewDate: temp.inputReviewDate,
            inputReviewFile: temp.inputReviewFile
          }
          console.log(this.addInfo)
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    close() {
      this.$emit('close')
    },
    // 照片上传
    handleAvatarSuccess(res, file) {
      this.fileName = res.data.fileName
      console.log(res, file)
      this.imageUrl = URL.createObjectURL(file.raw)
      console.log(this.addInfo.inputReviewFile, 'this.addInfo.inputReviewFile')
      if (this.addInfo.inputReviewFile == '') {
        console.log('1')
        this.addInfo.inputReviewFile = res.data.fileId
      } else {
        console.log('2')
        this.addInfo.inputReviewFile = this.addInfo.inputReviewFile + ',' + res.data.fileId
      }
      console.log(this.addInfo.inputReviewFile)
    },
    handleAvatarSuccess2(res, file) {
      this.fileName2 = res.data.fileName
      console.log(res, file)
      this.imageUrl2 = URL.createObjectURL(file.raw)
      if (this.addInfo.inputReviewFile == '') {
        console.log('3')
        this.addInfo.inputReviewFile = res.data.fileId
      } else {
        console.log('4')
        this.addInfo.inputReviewFile = this.addInfo.inputReviewFile + ',' + res.data.fileId
      }
      console.log(this.addInfo.inputReviewFile)
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    save() {
      reviewAdd(this.addInfo).then(res => {
        console.log(res)
        if (!res.code) {
          this.close()
          Message.success('保存成功')
        }
      })
    }
  }
}
</script>

<style lang='scss' scoped>
.reviewDialog {
  width: 975px;
  padding: 0 20px;
  box-sizing: border-box;

  .Dialog-input {
    padding: 10px 20px;
    display: flex;

    .inputContent {
      margin-right: 30px;
      display: flex;
      flex: 1;
      flex-direction: column;

      .inputBox {
        width: 350px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
  }

  .imgContent {
    margin: 20px;
    display: flex;

    .img-box {
      margin-right: 48px;
      width: 600px;
      height: 250px;
      display: flex;
      justify-content: space-between;
      padding: 10px 40px;
      border: 1px solid #000;

      .img-item {
        width: 178px;
        height: 200px;

        .title-box {
          display: flex;
          justify-content: space-between;

          .img-title {
            width: 150px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-right: 20px;
          }

          .img-btn {
            .btn {
              padding: 0;
            }
          }
        }
      }
    }
  }

  .btnBox {
    padding: 30px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-evenly;

    .save,
    .close {
      width: 100px;
    }

  }
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>