<template>
  <div class="app-container">
    <div class="level-title">
      <h1>{{ this.$parent.DOCK_DEVICE_ID == '' ? "新增" : "修改" }}</h1>
    </div>
    <div>
      <el-form ref="form" :model="form" :rules="rules" label-width="150px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="设备名称：" prop="DEVICEINDEXCODE">
              <el-select v-model="form.DEVICEINDEXCODE" style="width: 100%;" @change="handleDeviceNameChange">
                <el-option v-for="item in deviceList" :key="item.DEVICE_ID" :label="item.DEVICE_NAME" :value="item.DEVICE_ID" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="设备类型：" prop="DEVICE_TYPE">
              <el-select v-model="form.DEVICE_TYPE" style="width: 100%;">
                <el-option v-for="item in deviceTypeList" :key="item.VALUE" :label="item.NAME" :value="item.VALUE" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 查看展示所有二级口门（查询条件：口门类型，口门级别） -->
        <el-row>
          <el-col :span="12">
            <el-form-item label="所属口门名称：" prop="DOORINDEXCODE">
              <el-select v-model="form.DOORINDEXCODE" style="width: 100%;" @change="handleDoorNameChange">
                <el-option v-for="item in doorList" :key="item.DOOR_ID" :label="item.DOOR_NAME" :value="item.DOOR_ID" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 查询条件：口门名称、通道类型 -->
        <el-row>
          <el-col :span="12">
            <el-form-item label="所属通道名称：" prop="PATHINDEXCODE">
              <el-select v-model="form.PATHINDEXCODE" style="width: 100%;" @change="handlePathNameChange">
                <el-option v-for="item in pathList" :key="item.PATH_ID" :label="item.PATH_NAME" :value="item.PATH_ID" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="ui-foot">
      <el-button type="success" @click="confirm">保 存</el-button>
      <el-button plain type="info" @click="goBack">返 回</el-button>
    </div>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination' // 通过 el-pagination二次打包
import { requestFN } from '@/utils/request'
import SelectTree from '@/components/SelectTree'
import waves from '@/directive/waves'

export default {

  components: { Pagination, SelectTree },
  directives: { waves },
  data() {
    return {
      deviceList: [], // 设备列表
      doorList: [], // 口门列表
      pathList: [], // 通道列表
      form: {
        DEVICEINDEXCODE: '', // 设备id
        DEVICE_TYPE: '', // 设备类型
        DOORINDEXCODE: '', // 口门id
        PATHINDEXCODE: '', // 通道id
        DEVICE_NAME: '', // 设备名称
        DOOR_NAME: '', // 口门名称
        PATH_NAME: '', // 通道名称
        AREA_LEVEL: 2 // 口门级别:默认是二级口门
      },
      rules: {
        DEVICEINDEXCODE: [{ required: true, message: '设备名称不能为空', trigger: 'blur' }],
        DEVICE_TYPE: [{ required: true, message: '请选择设备类型', trigger: 'blur' }],
        DOORINDEXCODE: [{ required: true, message: '请选择所属口门名称', trigger: 'blur' }],
        PATHINDEXCODE: [{ required: true, message: '请选择所属通道名称', trigger: 'blur' }]
      },
      deviceTypeList: [ // 设备类型
        { NAME: '人', VALUE: 0 },
        { NAME: '车', VALUE: 1 }
      ],
      DOCK_DEVICE_ID: ''
    }
  },
  watch: {
  },
  created() {
    this.reSetForm()
    this.DOCK_DEVICE_ID = this.$parent.DOCK_DEVICE_ID
    this.handleDeviceList()
    this.handleDoorList()
    this.handlePathList()
    if (this.DOCK_DEVICE_ID !== '') {
      this.getDataByID()
    }
  },
  methods: {
    confirm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          if (this.DOCK_DEVICE_ID === '') {
            this.handleAdd()
          } else {
            this.handleEdit()
          }
        }
      })
    },
    reSetForm() {
      this.form.DEVICEINDEXCODE = ''
      this.form.DEVICE_TYPE = ''
      this.form.DOORINDEXCODE = ''
      this.form.PATHINDEXCODE = ''
      this.form.DEVICE_NAME = ''
      this.form.DOOR_NAME = ''
      this.form.DOOR_NAME = ''
    },
    handleEdit() {
      this.listLoading = true
      requestFN(
        '/dockDevice/edit',
        {
          DOCK_DEVICE_ID: this.DOCK_DEVICE_ID,
          ...this.form
        }
      ).then((data) => {
        this.goBack()
        this.listLoading = false
        this.dialogFormEdit = false
      }).catch((e) => {
        this.listLoading = false
      })
    },
    handleAdd() {
      requestFN(
        '/dockDevice/add',
        this.form
      ).then((data) => {
        if (data.result === 'success') {
          this.goBack()
        }
      }).catch((e) => {
      })
    },
    // 进入修改界面进行数据回显
    getDataByID() {
      this.listLoading = true
      this.dialogFormVisible = true
      requestFN(
        '/dockDevice/findById',
        { DOCK_DEVICE_ID: this.DOCK_DEVICE_ID }
      ).then((data) => {
        if (this.safeReturn(data.pd.DEVICEINDEXCODE) !== '') {
          this.form.DEVICEINDEXCODE = data.pd.DEVICEINDEXCODE // 设备id
        }
        this.form.DEVICE_NAME = data.pd.DEVICE_NAME // 设备名称
        this.form.DEVICE_TYPE = Number(data.pd.DEVICE_TYPE) // 设备类型
        if (this.safeReturn(data.pd.DOORINDEXCODE) !== '') {
          this.form.DOORINDEXCODE = data.pd.DOORINDEXCODE // 口门id
        }
        this.form.DOOR_NAME = data.pd.DOOR_NAME
        if (this.safeReturn(data.pd.PATHINDEXCODE) !== '') {
          this.form.PATHINDEXCODE = data.pd.PATHINDEXCODE // 通道id
        }
        this.form.PATH_NAME = data.pd.PATH_NAME // 通道名称
        this.form.AREA_LEVEL = data.pd.AREA_LEVEL // 口门级别
        this.dialogFormVisible = false
      }).catch((e) => {
        this.dialogFormVisible = false
        this.listLoading = false
      })
    },
  safeReturn(value) {
    if (value !== null && value !== undefined && value !== '') {
      return value;
    }
    return '';
  },
// 返回列表
    goBack() {
      this.$parent.activeName = 'List'
    },
    handleDeviceList() { // 获取设备列表
      this.formLoading = true
      requestFN(
        '/dockDevice/goDeviceList'
      ).then((data) => {
        if (data.result === 'success') {
          this.deviceList = data.varList
        } else {
          this.$message({
            message: '系统忙，请稍后重试',
            type: 'error'
          })
        }
        this.formLoading = false
      }).catch((e) => {
        this.formLoading = false
      })
    },
    handleDoorList(value) { // 获取口门列表(默认获取二级口门)
      this.formLoading = true
      requestFN(
        '/dockDevice/goDoorList',
        {
          'DOOR_TYPE': '',
          'AREA_LEVEL': 2
        }
      ).then((data) => {
        if (data.result === 'success') {
          this.doorList = data.varList
        } else {
          this.$message({
            message: '系统忙，请稍后重试',
            type: 'error'
          })
        }
        this.formLoading = false
      }).catch((e) => {
        this.formLoading = false
      })
    },
    handlePathList() { // 获取通道列表
      this.formLoading = true
      requestFN(
        '/dockDevice/goPathList',
        {'PATH_TYPE': ''}
      ).then((data) => {
        if (data.result === 'success') {
          this.pathList = data.varList
        } else {
          this.$message({
            message: '系统忙，请稍后重试',
            type: 'error'
          })
        }
        this.formLoading = false
      }).catch((e) => {
        this.formLoading = false
      })
    },
    handleDeviceNameChange(value) { // 获取设备名称
      const selectedDevice = this.deviceList.find(device => device.DEVICE_ID === value)
      if (selectedDevice) {
        this.form.DEVICE_NAME = selectedDevice.DEVICE_NAME
      } else {
        this.form.DEVICE_NAME = ''
      }
    },
    handleDoorNameChange(value) { // 获取口门名称
      const selectedDoor = this.doorList.find(door => door.DOOR_ID === value)
      if (selectedDoor) {
        this.form.DOOR_NAME = selectedDoor.DOOR_NAME
      } else {
        this.form.DOOR_NAME = ''
      }
    },
    handlePathNameChange(value) { // 获取通道名称
      const selectedPath = this.pathList.find(path => path.PATH_ID === value)
      if (selectedPath) {
        this.form.PATH_NAME = selectedPath.PATH_NAME
      } else {
        this.form.PATH_NAME = ''
      }
    },
  }
}
</script>
<style>
</style>
