<template>
  <el-dialog :visible.sync="dialogFormVisible" class="editDialog" title="新增背负式设备信息" append-to-body @close="cancel">
    <el-scrollbar :native="false">
      <el-form ref="dataForm" :rules="rules" :model="backpackInfoForm" size="small" label-position="right" label-width="120px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="背负式编号" porp="backpackCode">
              <el-input v-model.trim="backpackInfoForm.backpackCode" :disabled="dialogStatus=='detail'" :placeholder="dialogStatus=='detail'?'':'必填'" type="text"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="背负式设备描述" prop="description">
              <el-input v-model.trim="backpackInfoForm.description" :disabled="dialogStatus=='detail'" :placeholder="dialogStatus=='detail'?'':'必填'" type="text"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="使用单位" prop="deptId">
              <dept-select v-show="dialogStatus!='detail'" v-model="backpackInfoForm.deptId" :disabled="dialogStatus=='detail'" :dept-show="deptShow" :placeholder="dialogStatus=='detail'?'':'必填'" style="width: 100%" value=""/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="品牌型号" prop="brandModel">
              <el-input v-model.trim="backpackInfoForm.brandModel" :disabled="dialogStatus=='detail'" :placeholder="dialogStatus=='detail'?'':'必填'" type="text"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="使用人" prop="userPerson">
              <el-input v-model.trim="backpackInfoForm.userPerson" :disabled="dialogStatus=='detail'" :placeholder="dialogStatus=='detail'?'':'必填'" type="text" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="使用人电话" prop="userPhone">
              <el-input v-model.trim="backpackInfoForm.userPhone" :disabled="dialogStatus=='detail'" :placeholder="dialogStatus=='detail'?'':'必填'" type="text"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="责任人" prop="chargePerson">
              <el-input v-model.trim="backpackInfoForm.chargePerson" :disabled="dialogStatus=='detail'" :placeholder="dialogStatus=='detail'?'':'必填'" type="text" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="责任人电话" prop="chargePhone">
              <el-input v-model.trim="backpackInfoForm.chargePhone" :disabled="dialogStatus=='detail'" :placeholder="dialogStatus=='detail'?'':'必填'" type="text"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="购入日期" prop="purchaseDate">
              <el-date-picker
                :placeholder="dialogStatus=='detail'?'':'必填'"
                v-model="backpackInfoForm.purchaseDate"
                :disabled="dialogStatus=='detail'"
                style="width: 100%"
                type="date"
                value-format="yyyy-MM-dd"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="登记日期" prop="registerDate">
              <el-date-picker
                v-model="backpackInfoForm.registerDate"
                :placeholder="dialogStatus=='detail'?'': '必填'"
                :disabled="dialogStatus=='detail'"
                style="width: 100%"
                type="date"
                value-format="yyyy-MM-dd"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input v-model.trim="backpackInfoForm.remarks" :disabled="dialogStatus=='detail'" :placeholder="dialogStatus=='detail'?'': '备注'" type="textarea" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="设备id（gps定位）" prop="deviceId">
              <el-input v-model.trim="backpackInfoForm.deviceId" :disabled="dialogStatus=='detail'" :placeholder="dialogStatus=='detail'?'':'必填'" type="text"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="液位检测设备编号" prop="liquidCode">
              <el-input v-model.trim="backpackInfoForm.liquidCode" :disabled="dialogStatus=='detail'" :placeholder="dialogStatus=='detail'?'':'必填'" type="text" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="电量检测设备编号">
              <el-input v-model.trim="backpackInfoForm.electricCode" :disabled="dialogStatus=='detail'" :placeholder="dialogStatus=='detail'?'':'电量检测设备编号'" type="text"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-scrollbar>
  </el-dialog>
</template>

<script>
import { toTreeList } from '@/utils/structure'
import SelectTree from '@/components/SelectTree/singleSelect'
import { getDeptTreeList } from '@/api/dept'
import { getAreaList, getAreaByDept } from '@/api/area'
import { getBackpackList, addBackpack } from '@/api/backpack'
import { Uploadimg } from '@/api/common'
import DeptSelect from '@/components/DeptSelect'

export default {
  name: 'AddBackpack',
  components: { SelectTree, DeptSelect },
  data() {
    const validateDeep = (rule, value, callback) => {
      if (value !== '') {
        if ((/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/).test(value) === false) {
          callback(new Error('请填写大于0的数字'))
        } else {
          const deep = parseFloat(value)
          if (deep > 10 || deep < 0) { callback(new Error('请填写0到10数值')) } else { callback() }
        }
      } else {
        callback()
      }
    }
    const validateLng = (rule, value, callback) => {
      if (value !== '') {
        if ((/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/).test(value) === false) {
          callback(new Error('请填写大于0的数字'))
        } else {
          callback()
        }
      } else {
        callback(new Error('经度不能为空'))
      }
    }
    const validateLat = (rule, value, callback) => {
      if (value !== '') {
        if ((/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/).test(value) === false) {
          callback(new Error('请填写大于0的数字'))
        } else {
          callback()
        }
      } else {
        callback(new Error('纬度不能为空'))
      }
    }
    return {
      dialogFormVisible: true, // 对话框是否显示
      dialogStatus: 'create', // 对话框类型：create,update
      backpackInfoForm: {
        id: '',
        backpackCode: '',
        description: '',
        deptId: '',
        brandModel: '',
        userPerson: '',
        userPhone: '',
        chargePerson: '',
        chargePhone: '',
        purchaseDate: '',
        registerDate: '',
        remarks: '',
        deviceId: '',
        liquidCode: '',
        electricCode: ''
      }, // 表单
      deptProps: {
        parent: 'pid',
        value: 'id',
        label: 'name',
        children: 'children'
      },
      hideUpload: false,
      fileList: [],
      imageList: [],
      deptTreeList: null, // 组织树列表数据
      secondDeptTreeList: null, // 二级组织树列表
      backpackCodeList: null,
      quList: null,
      jiedaoList: null,
      textMap: {
        update: '编辑',
        create: '新增'
      }, // 表头显示标题
      rules: {
        backpackCode: [{ required: true, message: '背负式设备编号不能为空', trigger: ['blur', 'change'] }],
        description: [{ required: true, message: '背负式设备描述不能为空', trigger: ['blur', 'change'] }],
        deptId: [{ required: true, message: '使用单位必选', trigger: ['blur', 'change'] }],
        brandModel: [{ required: true, message: '品牌型号不能为空', trigger: ['blur', 'change'] }],
        userPerson: [{ required: true, message: '使用人不能为空', trigger: ['blur', 'change'] }],
        chargePerson: [{ required: true, message: '负责人不能为空', trigger: ['blur', 'change'] }],
        liquidCode: [{ required: true, message: '液位检测设备编号不能为空', trigger: ['blur', 'change'] }],
        purchaseDate: [{ required: true, message: '购入日期必选', trigger: ['blur', 'change'] }],
        registerDate: [{ required: true, message: '安登记日期必选', trigger: ['blur', 'change'] }]
      },
      uploadPath: process.env.BASE_API + '/imageUpload', // 图片上传路径
      dialogImageUrl: '',
      dialogVisible: true,
      labelPosition: 'right',
      responseAssignShow: false,
      deptShowTop: false, // 权属单位下拉是否显示顶级
      deptShow: true
    }
  },
  computed: {
    showResponseDept() {
      if (this.backpackForm.deptId === '') {
        return true
      } else {
        if (this.secondDeptTreeList && this.secondDeptTreeList.length >= 1) {
          return false
        } else {
          return true
        }
      }
    },
    showArea() {
      if (this.backpackForm.deptId === '') {
        return true
      } else {
        return false
      }
    },
    firstDept() { // 获取权属单位
      return this.backpackForm.deptId
    },
    qu() { // 获取区
      return this.backpackForm.qu
    }
  },
  watch: {
    firstDept(val) { // 监控权属单位变化
      if (val !== '') {
        this.backpackForm.qu = ''
        this.backpackForm.area = ''
        this.backpackForm.responsibleDept = ''
        this.fetchSecondDeptTree()
        this.fetchArea1()
      }
    },
    qu(val) { // 监控区变化
      if (val !== '') {
        this.backpackForm.area = ''
        this.fetchArea2()
      }
    }
  },
  created: function() {
    this.fetchBackpackList()
    this.imageList = []
    this.fileList = []
  },
  methods: {
    // 加载组织机构树形下拉菜单
    fetchSecondDeptTree: function() {
      const listQuery = {
        pid: this.backpackForm.deptId,
        deptType: '04'
      }
      getDeptTreeList(listQuery).then(response => {
        console.log(response.data)
        if (response.data.list) {
          this.secondDeptTreeList = toTreeList(response.data.list, this.backpackForm.deptId)
        }
      })
    },
    // 获取井类型
    fetchBackpackList() {
      getBackpackList().then(response => {
        this.backpackList = []
        const backpackCodes = this.$store.getters.backpackCodes
        for (const backpackCodes of response.data) {
          if (backpackCodes.indexOf(backpackCode.value) !== -1) {
            this.backpackCodeList.push(backpackCode)
          }
        }
        if (this.backpackCodeList.length <= 1) {
          this.showBackpackCode = false
        }
      })
    },
    // 获取区域1
    fetchArea1() {
      getAreaByDept(this.backpackForm.deptId).then(response => {
        if (response.code === 200) {
          const pid = response.data.area
          getAreaList(pid).then(response => {
            this.quList = response.data
          })
        }
      })
    },
    // 获取区域2
    fetchArea2() {
      getAreaList(this.qu).then(response => {
        this.jiedaoList = response.data
      })
    },
    // 取消
    cancel() {
      this.dialogFormVisible = false
      this.fileList = []
      // 清除验证
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    // 重置表单
    resetForm() {
      this.backpackForm = {
        // backpackCode: '', // 井编号
        // backpackName: '', // 井名称
        // backpackType: '', // 井类型
        // deptid: '', // 权属单位
        // deep: '', // 井深，
        // position: '', // 位置描述
        // coordinateX: '', // 经度
        // coordinateY: '', // 纬度
        // photos: '', // 照片路径
        // notes: '', // 备注,
        // qu: '',
        // area: '', // 街道
        // responsibleDept: '' // 维护人员部门
        id: '',
        backpackCode: '',
        description: '',
        deptId: '',
        brandModel: '',
        userPerson: '',
        userPhone: '',
        chargePerson: '',
        chargePhone: '',
        purchaseDate: '',
        registerDate: '',
        remarks: '',
        deviceId: '',
        liquidCode: '',
        electricCode: ''
      }
      // 清空上传图片
      this.$refs.upload.clearFiles()
      this.fileList = []
      this.imageList = []
      this.hideUpload = this.fileList.length >= 4
      // 清除验证
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    // 保存数据
    saveData: function() {
      this.backpackForm.photos = ''
      const count = this.fileList.length < 4 ? this.fileList.length : 4
      for (let i = 0; i < count; i++) {
        const image = this.fileList[i]
        this.backpackForm.photos += image.url + ';'
      }
      // 如果责任部门不选，则用权属作为责任部门
      if (this.backpackForm.responsibleDept === '') {
        if (this.secondDeptTreeList && this.secondDeptTreeList.length > 0) {
          this.$message.warning('必须选择维护机构')
          return
        } else {
          this.backpackForm.responsibleDept = this.backpackForm.deptId
        }
      }
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          addBackpack(this.backpackForm).then(response => {
            console.log('新增背负式设备')
            if (response.code === 200) {
              this.$message.success('新增成功!')
              this.resetForm()
            }
          })
        }
      })
    },
    // 图片上传
    uploadFile(file) {
      console.log('uploadFile:' + file.file.name)
      // const base_url = process.env.BASE_API + '/static/'
      Uploadimg(file).then(res => {
        if (res.code === 200) {
          this.fileList.push({ name: file.file.name, url: res.data })
        }
      })
    },
    // 上传前判断文件格式及大小
    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.fileList) {
        if (this.fileList[i].name === file.name) {
          this.fileList.splice(i, 1)
          this.hideUpload = this.fileList.length >= 4
          return
        }
      }
      this.handleChange()
    },
    // 限制提示
    handleExceed(files, fileList) {
      console.log('handleExceed')
      this.$message.warning(`限制选择 4 张图片，本次选择了 ${files.length} 张图片，共选择了 ${files.length + fileList.length} 张图片`)
    },
    // 点击文件列表中已上传的文件时的钩子
    handlePictureCardPreview(file) {
      console.log('handlePictureCardPreview')
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleChange(file, fileList) {
      console.log('handleChange')
      if (fileList) {
        this.hideUpload = fileList.length >= 4
      } else {
        this.hideUpload = false
      }
    },
    handleSuccess(response, file, fileList) {
      console.log('handleSuccess')
      const base_url = process.env.BASE_API + '/static/'
      if (response.code === 200) {
        this.fileList.push({ name: file.file.name, url: base_url + response.data })
        this.handleChange()
      } else {
        this.$message.warning(response.message)
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" >
  //.hide .el-upload--picture-card {
  //  display: none;
  //}
  //.main-form{
  //  margin: 20px 30px;
  //  padding: 10px;
  //}
  //.el-dialog{
  //  width:700px
  //}
  //.el-select{
  //  width: 100%;
  //}
  //.line{
  //  width: 50px;
  //  margin-left: 5px;
  //}
  //.hide .el-upload-–picture-card{
  //  display: none;
  //}
  //.imgBox{
  //  width: 100%;
  //  text-align: center;
  //}
  .hide .el-upload--picture-card {
    display: none;
  }
  .editDialog{
    .el-dialog {
      width: 900px;
      margin-top: 10vh !important;
      .el-dialog__body{
      }
      .el-scrollbar {
        height: 410px;
        width: 100%;
      }
      .el-scrollbar__wrap {
        /*overflow: scroll;*/
        overflow-x: auto;
        overflow-y: auto;
      }
      .el-scrollbar__view{
        width: 98%;
      }
    }
  }
  .el-select{
    width: 100%;
  }
  .line{
    width: 50px;
    margin-left: 5px;
  }
  .hide .el-upload-–picture-card{
    display: none;
  }
  .imgBox{
    width: 100%;
    text-align: center;
  }
  .watch-div {
    margin: 15px;
    .table-title {
      margin-top: 10px;
      .title-header {
        height: 40px;
        padding: 10px;
        /*border-radius: 4px;*/
        /*border: solid 1px #F3F3F3;*/
        /*background-color: #F5F7FA;*/
        color: #606266;
      }
    }
  }
</style>