<template>
  <div class="app-container">
    <div class="level-title">
      <h1>{{ this.$parent.DEVICE_ID == '' ? "新增" : "修改" }}</h1>
    </div>
    <div>
      <el-form v-loading="dialogFormVisible" ref="form" :model="form" :rules="rules" label-width="150px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="设备名称：" prop="DEVICE_NAME">
              <el-input v-model="form.DEVICE_NAME" placeholder="闸机名称"/>
            </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 typeList" :key="item.VALUE" :label="item.NAME" :value="item.VALUE" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="绑定设备：" prop="DOCK_DEVICE_ID">
              <el-select v-model="form.DOCK_DEVICE_ID" filterable clearable style="width: 100%;" @change="getDockDeviceInfo">
                <el-option v-for="item in deviceList" :key="item.DOCK_DEVICE_ID" :value="item.DOCK_DEVICE_ID" :label="item.DEVICE_NAME"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-button v-if="!form.DOCK_DEVICE_ID" style="position: relative; left: 10%" type="danger" icon="el-icon-price-tag" size="mini">请进行设备绑定</el-button>
            <el-button v-else-if="form.DOCK_DEVICE_ID" style="position: relative; left: 10%" type="success" icon="el-icon-price-tag" size="mini" @click="handleOpen()">查看绑定数据信息</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="状态：" prop="STATUS">
              <el-select v-model="form.STATUS" style="width: 100%;">
                <el-option v-for="item in statusList" :key="item.VALUE" :label="item.NAME" :value="item.VALUE" />
              </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>
    <!-- 设备 -->
    <el-dialog v-if="dialogDoor" :visible.sync="dialogDoor" title="设备信息" width="600px">
      <el-form v-loading="dialogFormVisible" label-width="150px">
        <el-row>
          <el-col :span="20">
            <el-form-item label="设备名称：" prop="DEVICE_NAME">
              <el-input v-model="dockDeviceForm.DEVICE_NAME" disabled placeholder="设备名称"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="20">
            <el-form-item label="所属口门名称：" prop="DOOR_NAME">
              <el-input v-model="dockDeviceForm.DOOR_NAME" disabled placeholder="所属口门名称"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="20">
            <el-form-item label="所属通道名称：" prop="PATH_NAME">
              <el-input v-model="dockDeviceForm.PATH_NAME" disabled placeholder="所属通道名称"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="20">
            <el-form-item label="设备类型：" prop="DEVICE_TYPE">
              <el-input v-model="dockDeviceForm.DEVICE_TYPE" disabled placeholder="设备类型"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <div style="position: relative; top: 10px">
          <el-button @click="dialogDoor = false">取 消</el-button>
        </div>
      </div>
    </el-dialog>
  </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' // waves directive
export default {

  components: { Pagination, SelectTree },
  directives: { waves },
  data() {
    return {
      DEVICE_NAMES: '',
      deviceListQuery: {
        page: 1,
        limit: 20
      },
      DOOR_TYPE: '',
      doorTotal: 0,
      deviceList: [],
      doorFilterText: '',
      dialogDoor: false,
      dialogFormVisible: false,
      dialogTableVisible: false,
      PERSON_CHARGE: '',
      DEPARTMENT_ID_OLD: '',
      DEVICE_ID: '',
      form: {
        DOCK_DEVICE_ID: '',
        DEVICE_NAME: '',
        DEVICE_TYPE: '',
        PATH_ID: '',
        DOOR_ID: '',
        STATUS: ''
      },
      dockDeviceForm: {
        DOCK_DEVICE_ID: '',
        DEVICE_NAME: '',
        DOOR_NAME: '',
        PATH_NAME: '',
        DEVICE_TYPE: ''
      },
      typeList: [
        { NAME: '闸机', VALUE: 0 }
      ],
      statusList: [
        { NAME: '正常', VALUE: 0 },
        { NAME: '停用', VALUE: 1 },
        { NAME: '暂时关闭', VALUE: 2 }
      ],
      riskForm: {},
      KEYWORDS: '',
      rules: {
        DOCK_DEVICE_ID: [{ required: true, message: '请选择绑定设备', trigger: 'blur' }],
        DEVICE_NAME: [{ required: true, message: '闸机名称不为空', trigger: 'blur' }],
        DEVICE_TYPE: [{ required: true, message: '闸机类型不为空', trigger: 'blur' }],
        STATUS: [{ required: true, message: '闸机类别不为空', trigger: 'blur' }]
      },
      formLabelWidth: '120px',
      fullscreenLoading: false,
      total: 0,
      listQuery: {
        page: 1,
        limit: 20
      },
      multipleSelection: [],
      accidentList: [],
      categoryList: [
        { ID: '1', NAME: '人员' },
        { ID: '2', NAME: '车辆' }
      ],
      leaveList: [
        { ID: '1', NAME: '入' },
        { ID: '2', NAME: '出' }
      ],
      IsAdjacentList: [
        { ID: '0', NAME: '否' },
        { ID: '1', NAME: '是' }
      ]
    }
  },
  watch: {
  },
  async created() {
    this.form.PATH_ID = this.$parent.PATH_ID
    this.form.DOOR_ID = this.$parent.DOOR_ID
    this.DEVICE_ID = this.$parent.DEVICE_ID
    if (this.DEVICE_ID) {
      this.getDataByID()
    }
    this.DOOR_TYPE = this.$parent.DOOR_TYPE
    this.getDeviceList()
  },
  methods: {
    async handleOpen() {
      requestFN(
        '/mkmjDockDevice/findById',
        {
          DOCK_DEVICE_ID: this.form.DOCK_DEVICE_ID
        }
      ).then((data) => {
        this.listLoading = false
        this.dockDeviceForm = data.pd
        this.dialogDoor = true
      }).catch((e) => {
        this.listLoading = false
        console.log(e)
      })
    },
    getDockDeviceInfo() {
      const deviceList = this.deviceList
      for (let i = 0; i < deviceList.length; i++) {
        if (deviceList[i].DOCK_DEVICE_ID == this.form.DOCK_DEVICE_ID) {
          this.dockDeviceForm.DOCK_DEVICE_ID = deviceList[i].DOCK_DEVICE_ID
          this.dockDeviceForm.DEVICE_NAME = deviceList[i].DEVICE_NAME
          this.dockDeviceForm.DOOR_NAME = deviceList[i].DOOR_NAME
          this.dockDeviceForm.PATH_NAME = deviceList[i].PATH_NAME
          this.dockDeviceForm.DEVICE_TYPE = deviceList[i].DEVICE_TYPE == '0' ? '人行闸机' : '车行闸机'
        }
      }
      console.log(this.dockDeviceForm)
    },
    getDeviceList() {
      this.listLoading = true
      return new Promise(resolve => {
        requestFN(
          '/mkmjDockDevice/listAll',
          {
            KEYWORDS: this.doorFilterText,
            DOOR_TYPE: this.DOOR_TYPE
          }
        ).then((data) => {
          this.listLoading = false
          this.deviceList = data.varList
          this.doorTotal = data.page.totalResult
          resolve()
        }).catch((e) => {
          this.listLoading = false
          console.log(e)
        })
      })
    },
    confirm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          if (!this.DEVICE_ID) {
            this.handleAdd()
          } else {
            if (valid) {
              this.listLoading = true
              requestFN(
                '/mkmjDevice/edit',
                this.form
              ).then((data) => {
                this.$message.success(data.msg)
                this.listLoading = false
                this.dialogFormEdit = false
                this.$parent.activeName = 'ListDevice'
              }).catch((e) => {
                this.listLoading = false
              })
            }
          }
        }
      })
    },
    handleAdd() {
      requestFN(
        '/mkmjDevice/add',
        {
          ...this.form,
          CORPINFO_ID: this.$parent.CORPINFO_ID
        }
      ).then((data) => {
        if (data.msg === '保存成功') {
          this.$message.success(data.msg)
          this.goBack()
        } else {
          this.$message.warning(data.msg)
        }
      }).catch((e) => {
      })
    },
    getDataByID() {
      this.listLoading = true
      this.dialogFormVisible = true
      requestFN(
        '/mkmjDevice/goEdit',
        { DEVICE_ID: this.DEVICE_ID }
      ).then((data) => {
        this.form = data.pd
        this.dialogFormVisible = false
      }).catch((e) => {
        this.dialogFormVisible = false
        this.listLoading = false
      })
    },
    // 返回列表
    goBack() {
      this.$parent.activeName = 'ListDevice'
    }
  }
}
</script>

<style>
</style>
