<template>
  <!-- 请假对话框 -->
  <t-modal :visibled.sync="visibled" :mask-closable="false" width="600px" height="560px">
    <template slot="header">
      <div class="device-modal-title">{{ isEdit?'设备编辑':'设备新增' }}</div>
    </template>
    <template slot="close">
      <i @click="resetModalData">
        <t-icon icon="close"></t-icon>
      </i>
    </template>
    <t-form ref="addDeviceModalForm" :model="addDeviceModalForm" :rules="addDeviceModalFormRules" :label-span="2" label-position="right">
      <t-form-item label="设备编号：" prop="deviceId">
        <t-input v-model="addDeviceModalForm.deviceId" placeholder="请输入设备编号"></t-input>
      </t-form-item>
      <t-form-item label="设备名称：" prop="deviceName">
        <t-input v-model="addDeviceModalForm.deviceName" placeholder="请输入设备名称"></t-input>
      </t-form-item>
      <t-form-item label="设备类型：" prop="deviceTypeId">
        <t-select v-model="addDeviceModalForm.deviceTypeId" placeholder="请选择设备类型">
          <t-option v-for="item in types" :value="item.id" :key="item.id">{{ item.name }}</t-option>
        </t-select>
      </t-form-item>
      <t-form-item label="视频地址：" prop="videoUrl">
        <t-input v-model="addDeviceModalForm.videoUrl" placeholder="请输入视频地址"></t-input>
      </t-form-item>
      <t-form-item label="图片上传：">
        <div style="display:flex;flex-direction:row">
          <t-upload ref="uploader" :format="['jpg','jpeg','png']" :show-uploaded="false" :before-upload="$_onUploadBeforeUpload" :action="action" :data="{pictureUrl:addDeviceModalForm.pictureUrl}" multiple type="drag" style="width:180px;height:180px" @success="$_onUploadSuccess" @remove-file="$_onUploadRemoveFile" @error="$_onUploadError" @file-ext-error="$_onUploadFormatError" @file-exceeded-size="$_onUploadExceededSize">
            <div style="width: 180px;height:180px;line-height: 180px">
              <t-icon icon="plus-outline" size="40"></t-icon>
            </div>
          </t-upload>
          <img v-show="imgUrl?true:false" :src="imgUrl" style="margin-left:20px;width: 180px;height:180px;">
        </div>
      </t-form-item>
    </t-form>
    <template slot="footer">
      <t-button @click="resetModalData">取消</t-button>
      <t-button v-if="isEdit" :loading="loadingSubmit" color="primary" @click="submitModalData">修改</t-button>
      <t-button v-else :loading="loadingSubmit" color="primary" @click="submitModalData">提交</t-button>
    </template>
  </t-modal>
</template>

<script>
import sysapi from '@/api/system'
const defaultAddDeviceModalForm = {
  deviceId: '', // 设备id
  deviceName: '', // 设备名称
  deviceTypeId: '', // 设备类型id
  videoUrl: '', // 视频地址
  pictureUrl: '' // 图片标识
}
export default {
  props: {
    // 显示 / 隐藏新增设备对话框
    addDeviceModal: {
      type: Boolean,
      default: false
    },
    // 设备类型列表
    types: {
      type: Array,
      default: () => []
    },
    // 当前编辑的设备
    currentEditDevice: {
      type: Object,
      default: () => { }
    }
  },
  data () {
    return {
      // 新增设备对话框表单
      addDeviceModalForm: JSON.parse(JSON.stringify(defaultAddDeviceModalForm)),
      imgUrl: '',
      // 请假对话框表单验证规则
      addDeviceModalFormRules: {
        deviceId: [
          { required: true, message: '设备编号不能为空', trigger: 'blur' }
        ],
        deviceName: [
          { required: true, message: '设备名称不能为空', trigger: 'blur' }
        ],
        videoUrl: [
          { required: true, message: '视频地址不能为空', trigger: 'blur' }
        ],
        deviceTypeId: [
          { required: true, message: '设备类型不能为空' }
        ]
      },
      // 提交表单是否显示loading
      loadingSubmit: false,
      action: 'http://10.19.90.34:8018/sp/resourceTool/uploadResourceToolPicture',
      uploadList: () => []
    }
  },
  computed: {
    // 显示/隐藏对话框
    visibled: {
      set (val) {
        this.$emit('update:add-device-modal', val)
      },
      get () {
        return this.addDeviceModal
      }
    },
    // 是否为编辑状态
    isEdit: {
      get () {
        return this.addDeviceModalForm.resourceToolId != null
      }
    }
  },
  watch: {
    // 当前编辑设备
    currentEditDevice (val) {
      this.addDeviceModalForm = val
      this.imgUrl = val.imgUrl
    }
  },
  mounted () {
    this.uploadList = this.$refs.uploader.files
  },
  methods: {
    // 重置表单数据
    resetModalData () {
      this.addDeviceModalForm = JSON.parse(JSON.stringify(defaultAddDeviceModalForm))
      this.imgUrl = ''
      this.visibled = false
    },
    // 提交表单数据
    submitModalData () {
      this.loadingSubmit = true
      this.$refs['addDeviceModalForm'].validate((valid) => {
        if (valid) {
          if (this.isEdit) {
            this.editDeviceData()
          } else {
            this.addDeviceData()
          }
        } else {
          console.log('error--------->请输入完整的表单信息！')
          this.loadingSubmit = false
        }
      })
    },
    // 向服务器发送请求 添加设备数据
    async addDeviceData () {
      const res = await sysapi.addDeviceData(this.addDeviceModalForm)
      if (res.status === 200) {
        this.resetModalData()
        // 如果数据有误
        if (res.data.fail) {
          this.$Message.warning(res.data.fail)
        } else {
          this.$emit('refresh-data')
          this.$Message.success('提交成功！')
        }
      } else {
        this.$Message.danger('提交失败！')
      }
      this.loadingSubmit = false
    },
    // 向服务器发送请求 添加设备数据
    async editDeviceData () {
      const res = await sysapi.editDeviceData(this.addDeviceModalForm)
      if (res.status === 200) {
        this.resetModalData()
        // 如果数据有误
        if (res.data.fail) {
          this.$Message.warning(res.data.fail)
        } else {
          this.$emit('refresh-data')
          this.$Message.success('修改成功！')
        }
      } else {
        this.$Message.danger('修改失败！')
      }
      this.loadingSubmit = false
    },
    $_onDeleteIconClick (file) {
      this.$refs.uploader.removeFile(file)
    },
    $_onUploadRemoveFlie (file, fileList) {
      this.uploadList = fileList
    },
    $_onUploadPreviewFlie (file) {
      console.log(file)
    },
    $_onUploadProgress (e, file) {
      console.log(e)
      console.log(file)
    },
    $_onUploadSuccess (res, file) {
      this.imgUrl = res.data.toolPictureUrl
      this.addDeviceModalForm.pictureUrl = res.data.pictureUrl
      // 因为演示用的上传服务器返回数据格式的原因，这里模拟添加 url
      this.uploadList.push(file)
    },
    $_onUploadRemoveFile () { },
    $_onUploadExceededSize () { },
    $_onUploadError (errMsg, response, file) {
      console.log(file)
      console.log(errMsg.message)
      this.$Notice.warning({
        title: `文件${file.name}上传失败`,
        desc:
          '原因：' + errMsg
      })
    },
    $_onUploadFileExtError (file, files) {
      this.$Notice.warning({
        title: '文件格式不正确',
        desc:
          '文件 ' + file.name + ' 格式不正确，请上传 jpg 或 png 格式的图片。'
      })
      console.log(files)
    },
    $_onUploadFileExceededSize (file) {
      this.$Notice.warning({
        title: '超出文件大小限制',
        desc: '文件 ' + file.name + ' 太大，不能超过 2M。'
      })
    },
    $_onUploadFormatError () { },
    $_onUploadBeforeUpload () {
      const check = this.uploadList.length < 5
      if (!check) {
        this.$Notice.warning({
          title: '最多只能上传 5 张图片。'
        })
      }
      return check
    }
  }
}
</script>

