<template>
  <div>
    <el-dialog
      :before-close="handleClose"
      :title="this.title + '设备详情'"
      :visible.sync="dialogVisible"
      :width="isType ? '75%' : '20%'"
    >
      <div class="title">设备基础信息</div>
      <el-descriptions :column="3" border class="margin-top">
        <el-descriptions-item label="所属产品"
          >{{ parameters.productName }}
        </el-descriptions-item>
        <el-descriptions-item label="设备名称"
          >{{ parameters.name }}
        </el-descriptions-item>
        <el-descriptions-item label="设备标识"
          >{{ parameters.code }}
        </el-descriptions-item>
        <el-descriptions-item label="设备对接编号">
          {{ parameters.outCode }}
        </el-descriptions-item>
        <el-descriptions-item label="设备IP"
          >{{ parameters.ip }}
        </el-descriptions-item>
        <el-descriptions-item label="设备状态"
          >{{ parameters.status }}
        </el-descriptions-item>
        <el-descriptions-item label="设备供应商">
          <span
            class="hand"
            @click="toDialog(parameters.supplierCompanyId, '设备供应商')"
            >{{ parameters.companyName }}</span
          >
        </el-descriptions-item>
        <el-descriptions-item label="设备管理人员">
          <span
            class="hand"
            @click="toDialog(parameters.managerUserId, '设备管理人员')"
            >{{ parameters.managerUserName }}</span
          >
        </el-descriptions-item>
        <el-descriptions-item label="设备维护人员">
          <span
            class="hand"
            @click="toDialog(parameters.repairUserId, '设备维护人员')"
            >{{ this.repairUserName }}</span
          >
        </el-descriptions-item>
        <el-descriptions-item label="所属行政区划"
          >{{ this.addvcdName }}
        </el-descriptions-item>
        <el-descriptions-item label="所属区域"
          >{{ this.areaName }}
        </el-descriptions-item>
        <el-descriptions-item label="gis区域标识"
          >{{ parameters.gisArea }}
        </el-descriptions-item>
        <el-descriptions-item label="安装地点类型"
          >{{ parameters.addressType }}
        </el-descriptions-item>
        <el-descriptions-item label="安装楼层"
          >{{ parameters.floor }}
        </el-descriptions-item>
        <el-descriptions-item label=""></el-descriptions-item>
        <el-descriptions-item label="设备经度"
          >{{ parameters.lgtd }}
        </el-descriptions-item>
        <el-descriptions-item label="设备纬度"
          >{{ parameters.lttd }}
        </el-descriptions-item>
        <el-descriptions-item label=""></el-descriptions-item>
        <el-descriptions-item label="安装详细地址" span="3"
          >{{ parameters.address }}
        </el-descriptions-item>
        <el-descriptions-item label="备注"
          >{{ parameters.memo }}
        </el-descriptions-item>
      </el-descriptions>
      <div v-show="extendParams.length" class="title">设备扩展信息</div>
      <div>
        <el-descriptions
          v-if="extendParams"
          :column="3"
          border
          class="margin-top"
        >
          <el-descriptions-item
            v-for="item in extendParams"
            :key="item.id"
            :label="item.name"
          >
            {{ item.value }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <div v-show="productParams.length" class="title">产品扩展信息</div>
      <div>
        <el-descriptions
          v-if="productParams"
          :column="3"
          border
          class="margin-top"
        >
          <el-descriptions-item
            v-for="item in productParams"
            :key="item.id"
            :label="item.name"
          >
            {{ item.value }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <basisDialog ref="basisModal"></basisDialog>
    </el-dialog>
  </div>
</template>

<script>
import dictUtils from '@/components/dict/DictSelectUtils.js'
import realTimeDialog from '@/api/device/realTimeDialog.js'
import basisDialog from './modle/basisDialog.vue'

export default {
  components: {
    basisDialog
  },
  data() {
    return {
      dialogVisible: false,
      cId: null,
      title: null,
      isType: true,
      parameters: {},
      queryFilter: {
        pageBean: {
          page: 1,
          pageSize: 10,
          showTotal: true
        },
        params: {},
        querys: [
          {
            group: 'main',
            operation: 'LIKE',
            parentGroup: '',
            property: 'd.name_',
            relation: 'AND',
            value: ''
          }
        ]
      },
      addressTypeList: [],
      floorList: [],
      deviceStatus: [],
      repairUserName: null,
      areaName: null,
      addvcdName: null,
      extendParams: [],
      paramsValueList: [],
      productParams: []
    }
  },
  created() {
    this.addressTypeList = dictUtils.getDictItemsFromCache('azddlx')
    this.floorList = dictUtils.getDictItemsFromCache('azlc')
    this.deviceStatus = dictUtils.getDictItemsFromCache('sbzt')
  },
  methods: {
    add(title) {
      this.title = title
      this.dialogVisible = true
      this.getQuery()
    },
    handleClose() {
      this.parameters = []
      this.repairUserName = ''
      this.addvcdName = ''
      this.areaName = ''
      this.dialogVisible = false
    },

    getQuery() {
      this.queryFilter.querys[0].value = this.title
      realTimeDialog.query(this.queryFilter, res => {
        if (res.rows.length > 0) {
          this.parameters = res.rows[0]
          let data = {
            pageBean: {
              page: 1,
              pageSize: -1,
              showTotal: true
            }
          }
          realTimeDialog.userQuery(data, res => {
            let data = res.rows
            data.forEach(item => {
              if (this.parameters.repairUserId !== '') {
                if (item.id == this.parameters.repairUserId) {
                  this.repairUserName = item.name
                }
              } else {
                this.repairUserName = ''
              }
            })
          })
          this.deviceStatus.forEach(item => {
            if (this.parameters.status) {
              if (item.value == this.parameters.status) {
                this.parameters.status = item.name
              }
            } else {
              this.parameters.status = ''
            }
          })
          this.addressTypeList.forEach(item => {
            if (this.parameters.addressType) {
              if (item.value == this.parameters.addressType) {
                this.parameters.addressType = item.name
              }
            } else {
              this.parameters.addressType = ''
            }
          })
          this.floorList.forEach(item => {
            if (this.parameters.floor) {
              if (item.value == this.parameters.floor) {
                this.parameters.floor = item.name
              }
            } else {
              this.parameters.floor = ''
            }
          })
          realTimeDialog.loadArea(data, res => {
            this.areaOptions = res.rows
            this.areaOptions.forEach(item => {
              if (this.parameters.areaId) {
                if (item.id == this.parameters.areaId) {
                  this.areaName = item.name
                }
              } else {
                this.areaName = ''
              }
            })
          })
          realTimeDialog.loadAdminAreaTree({}, res => {
            if (this.parameters.addvcd) {
              this.addvcdName = res.value[0].name
            } else {
              this.addvcdName = ''
            }
          })
          this.getInfo()
        }
      })
      console.log(this.parameters)
    },
    getInfo() {
      this.extendParams = []
      this.productParams = []
      realTimeDialog.deviceDetails(this.parameters.id, res => {
        console.log(res)
        this.paramsValueList = res.paramsValueList
        realTimeDialog.getExtendParams(
          {
            deviceId: this.parameters.id
          },
          res => {
            this.extendParams = res
            this.extendParams.forEach(item => {
              this.paramsValueList.forEach(val => {
                if (item.id == val.confId) {
                  item['value'] = val.value
                }
              })
              if (item.ctlType == 'select' || item.ctlType == 'radio') {
                let arr = JSON.parse(item.json)
                arr.forEach(i => {
                  if (item.value == i.value) {
                    item.value = i.label
                  }
                })
              } else if (item.ctlType == 'checkbox') {
                let arr = JSON.parse(item.json)
                let arr1 = item.value.split(',')
                let itemArr = null
                let str = []
                arr.forEach(i => {
                  if (arr1.indexOf(i.value) !== -1) {
                    str.push(i.label)
                    itemArr = str.toString()
                  }
                })
                item.value = itemArr
              }
            })
          }
        )
        realTimeDialog.getProductParams(
          {
            productId: this.parameters.productId
          },
          res => {
            this.productParams = res
            this.productParams.forEach(item => {
              this.paramsValueList.forEach(val => {
                if (item.id == val.confId) {
                  item['value'] = val.value
                }
              })
              if (item.ctlType == 'select' || item.ctlType == 'radio') {
                let arr = JSON.parse(item.json)
                arr.forEach(i => {
                  if (item.value == i.value) {
                    item.value = i.label
                  }
                })
              } else if (item.ctlType == 'checkbox') {
                let arr = JSON.parse(item.json)
                let arr1 = item.value.split(',')
                let itemArr = null
                let str = []
                arr.forEach(i => {
                  if (arr1.indexOf(i.value) !== -1) {
                    str.push(i.label)
                    itemArr = str.toString()
                  }
                })
                item.value = itemArr
              }
            })
          }
        )
      })
    },
    toDialog(id, title) {
      this.$refs.basisModal.add(id, title)
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-descriptions .el-descriptions-item__cell {
  width: 17%;
}

.hand {
  color: #3399ff;
  cursor: pointer;
}

.title {
  font-weight: 600;
  margin-bottom: 10px;
}
</style>
