<template>
  <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
    <el-form ref="dataForm" :model="dataForm" label-well-code="right" label-width="110px">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="区域名称">
            <el-input v-model="dataForm.name" disabled type="text"/>
            <!--<span>{{ dataForm.name }}</span>-->
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="防卫状态">
            <el-input v-model="dataForm.areaStatusName" disabled type="text"/>
            <!--<span>{{ dataForm.areaStatusName }}</span>-->
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="区域类别">
            <el-input v-model="dataForm.areaTypeName" disabled type="text"/>
            <!--<span>{{ dataForm.areaTypeName }}</span>-->
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="区域位置">
            <el-input v-model="dataForm.position" disabled type="text"/>
            <!--<span>{{ dataForm.position }}</span>-->
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="设备绑定">
            <el-button v-for="item in dataForm.deviceList" :key="item.id" type="primary" plain @click="detailDevice(item.id)">{{ item.deviceTypeName }} - {{ item.devcode }}</el-button>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row v-show="isFence" :gutter="20">
        <el-col :span="12">
          <el-form-item label="电子围栏">
            <el-input v-model="dataForm.deviceStatusName" disabled type="text"/>
            <!--<span>{{ dataForm.deviceStatusName }}</span>-->
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="备注" prop="remark">
            <el-input v-model="dataForm.remark" disabled type="text"/>
            <!--<span>{{ dataForm.remark }}</span>-->
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>

<script>

export default {
  name: 'DefenceDetail',
  data() {
    return {
      dialogFormVisible: false, // 对话框是否显示
      dialogStatus: '', // 对话框类型：create,update,detail
      dataForm: {
        id: '', // id
        name: '', // 防区名
        areaStatusName: '', // 区域防卫状态
        areaTypeName: '', // 区域类别名称
        deviceList: [], // 设备绑定列表
        position: '', // 位置
        remark: '' // 备注
      }, // 表单
      textMap: {
        detail: '详情'
      }, // 表头显示标题
      isDetailMode: false, // 是否详情模式
      isFence: false
    }
  },
  methods: {
    // 初始化对话框
    initDialog: function(dialogStatus, dialogFormVisible, row = null) {
      this.dialogStatus = dialogStatus
      this.dialogFormVisible = dialogFormVisible

      if (dialogStatus === 'detail') {
        this.isDetailMode = true

        this.isFence = row.type === '2'

        this.dataForm = {
          id: row.id,
          name: row.name,
          areaStatusName: row.areaStatusName,
          areaTypeName: row.areaTypeName,
          position: row.position,
          remark: row.remark,
          deviceList: row.deviceList
        }

        // 查找电子围栏设备以获取开启状态
        if (this.dataForm.deviceList !== '' && this.dataForm.deviceList.length > 0) {
          const fence = this.dataForm.deviceList.filter(dev => {
            return dev.deviceTypeName.indexOf('电子围栏') >= 0
          })

          if (fence.length > 0) {
            this.dataForm.deviceStatusName = fence[0].deviceStatusName
          }
        }
      }
    },
    // 清除数据
    resetForm() {
      this.dataForm = {
        id: '' // id
      }
    },
    detailDevice(deviceId) {
      this.$emit('detailDevice', deviceId)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .el-select{
    width: 100%;
  }
  .el-date-editor{
    width: 100%;
  }
  .dialog-footer {
    margin-top: -20px;
    text-align: center;
  }
</style>