<template>
  <el-dialog :visible.sync="dialogFormVisible" :title="bridgeForm.name" :close-on-click-modal="false" width="75%" append-to-body @close="cancel">
    <el-scrollbar :native="false">
      <div class="info-block">
        <div class="block-body">
          <el-form ref="dataForm" :model="bridgeForm" :rules="rules" label-position="right" label-width="120px">
            <el-row>
              <el-col :span="10">
                <el-form-item label="高度（m）" prop="high">
                  <el-input v-model="bridgeForm.high" type="text" placeholder="必填" clearable />
                </el-form-item>
              </el-col>
              <el-col :span="10" :offset="1">
                <el-form-item label="长度（m）" prop="length">
                  <el-input v-model="bridgeForm.length" type="text" placeholder="必填" clearable />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="10">
                <el-form-item label="建设时间" prop="buildTime">
                  <el-date-picker v-model="bridgeForm.buildTimeStr" value-format="yyyy-MM-dd" type="date" placeholder="选择日期" />
                </el-form-item>
              </el-col>
              <el-col :span="10" :offset="1">
                <el-form-item label="通车时间" prop="openTime">
                  <el-date-picker v-model="bridgeForm.openTimeStr" value-format="yyyy-MM-dd" type="date" placeholder="选择日期" />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="21">
                <el-form-item label="简介" prop="description">
                  <el-input v-model="bridgeForm.description" type="textarea" autosize clearable placeholder="必填" />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="24">
                <el-form-item label="图片" prop="images">
                  <el-upload
                    ref="upload"
                    :before-upload="handleBeforeUpload"
                    :on-preview="handlePictureCardPreview"
                    :on-remove="handleRemove"
                    :on-exceed="handleExceed"
                    :on-change="handleChange"
                    :http-request="uploadFile"
                    :file-list="imageList"
                    :limit="4"
                    :class="{hide:hideUpload}"
                    multiple
                    action="string"
                    accept=".jpg,.jpeg,.png "
                    list-type="picture-card">
                    <i class="el-icon-plus"/>
                  </el-upload>
                  <el-dialog :visible.sync="dialogVisible" title="图片预览" append-to-body>
                    <div class="imgBox">
                      <img :src="dialogImageUrl" max-height="400px;" alt="" style="margin: 0 auto;">
                    </div>
                  </el-dialog>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="15" style="margin-left: 120px; margin-bottom: 40px;">
                <el-button size="medium" @click="cancel"> 取消</el-button>
                <el-button type="primary" size="medium" style="margin-left: 10px;" @click="saveData"> 保存</el-button>
              </el-col>
            </el-row>

          </el-form>
        </div>
      </div>
    </el-scrollbar>
  </el-dialog>
</template>
<script>
import { updateBridge } from '@/api/system/bridge'
import { Uploadimg } from '@/api/common'

const validateInt = (rule, value, callback) => {
  if (value !== '') {
    if ((/^\d+$/).test(value) === false) {
      callback(new Error('请填写大于0的整数'))
    } else {
      callback()
    }
  } else {
    callback(new Error('不能为空'))
  }
}

export default {
  name: 'EditBridge',
  data() {
    return {
      dialogFormVisible: false,
      bridgeForm: {
        id: '',
        name: '',
        type: '',
        typeName: '',
        bridgeCode: '',
        roadName: '',
        height: '',
        length: '',
        buildTime: '',
        openTime: '',
        position: '',
        description: '',
        status: '',
        statusName: '',
        photo: ''
      },
      hideUpload: false,
      imageList: [],
      dialogImageUrl: '',
      dialogVisible: false,
      rules: {
        high: [{ required: true, trigger: ['blur', 'change'], validator: validateInt }],
        length: [{ required: true, trigger: ['blur', 'change'], validator: validateInt }],
        description: [{ required: true, message: '请填写桥梁简介', trigger: ['blur', 'change'] }]
      },
      // baseUrl: process.env.BASE_API + '/static/', // 图片基础路径
      // token: '?token=' + this.$store.getters.token, // token,
      disabled: true,
      defaultPhoto: '' // require('../../../assets/global_images/photo.jpg') // 默认图片路径
    }
  },
  mounted() {
  },
  methods: {
    initDialog: function(dialogFormVisible, bridge = '') {
      this.dialogFormVisible = dialogFormVisible
      this.bridgeForm = bridge

      if (bridge.photo !== '') {
        const that = this
        this.imageList = []
        bridge.photo.split(';').forEach(pic => {
          // 将已有的图片添加到组件中
          that.imageList.push({
            name: pic.substring(pic.lastIndexOf('/') + 1, pic.lastIndexOf('.')),
            uid: pic.substring(pic.lastIndexOf('/') + 1, pic.lastIndexOf('.')),
            url: that.baseConfig.baseUrl + 'static/' + pic
          })
        })
      }
    },
    saveData() {
      const editForm = {
        id: this.bridgeForm.id,
        bridgeCode: this.bridgeForm.bridgeCode,
        name: this.bridgeForm.name
      }

      editForm.buildTime = this.bridgeForm.buildTimeStr
      editForm.description = this.bridgeForm.description
      editForm.high = this.bridgeForm.high
      editForm.length = this.bridgeForm.length
      editForm.openTime = this.bridgeForm.openTimeStr

      editForm.photo = ''
      // 照片不为空则对照片进行处理
      if (this.imageList.length > 0) {
        const base_url = this.baseConfig.baseUrl + 'static/'
        this.imageList.forEach(img => {
          const url = img.url
          if (url.indexOf(base_url) >= 0) {
            editForm.photo += url.substring(base_url.length, url.length) + ';'
          } else {
            editForm.photo += url + ';'
          }
        })
        editForm.photo = editForm.photo.substring(0, editForm.photo.length - 1)
      }

      console.log(editForm)

      updateBridge(editForm).then(res => {
        if (res.code === 200) {
          this.$message.success('编辑成功')
          this.dialogFormVisible = false
          this.$emit('watchChild')
        }
      })
    },
    cancel() {
      this.dialogFormVisible = false
    },
    uploadFile(file) {
      const base_url = this.baseConfig.baseUrl + 'static/'
      Uploadimg(file).then(res => {
        if (res.code === 200) {
          this.imageList.push({ name: file.file.name, url: base_url + res.data.replace('\\', '/') })
        }
      })
    },
    handleBeforeUpload(file) {
      const isJPG = (file.type === 'image/jpeg') || (file.type === 'image/png')
      let res = true
      const isLt2M = file.size / 1024 / 1024 < 5
      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG 或 PNG 格式!')
        res = false
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 5MB!')
        res = false
      }
      for (const i in this.fileList) {
        if (this.fileList[i].name === file.name) {
          this.$message.error('该图片已上传过，请选择其他图片')
          res = false
        }
      }
      return res
    },
    // 文件列表移除文件时的钩子
    handleRemove(file, fileList) {
      console.log('handleRemove')
      for (const i in this.imageList) {
        if (this.imageList[i].name === file.name) {
          this.imageList.splice(i, 1)
          this.hideUpload = this.imageList.length >= 4
          return
        }
      }
    },
    handleExceed(files, fileList) {
      this.$message.warning(`限制选择 4 张图片，本次选择了 ${files.length} 张图片，共选择了 ${files.length + fileList.length} 张图片`)
    },
    // 点击文件列表中已上传的文件时的钩子
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleChange(file, fileList) {
      if (fileList) {
        this.hideUpload = fileList.length >= 4
      } else {
        this.hideUpload = false
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  $left-width: 160px;
  .info-block {
    margin: 10px 20px;

    .block-title-div {
      font-size: 17px;
      color: #1f2d3d;
      font-weight: bold;

      .block-title{
        padding-left: 10px;
        margin-bottom: 10px;
      }
    }
    .block-body {
      background-color: #fffffb !important;
      margin-top: 20px;

      .table-container {
        border-top: none !important;
      }

      .table-title {
        margin-top: 10px;
        margin-bottom: 10px;
        .title-header {
          height: 40px;
          padding: 10px;
          color: #606266;
        }
      }

    }
  }
</style>