<template>
  <div>
    <el-popover
      word-wrap
      trigger="click"
      placement="bottom-start"
      :title="titleStr"
      width="750"
      @show="findAssetInfo"
    >
      <el-button
        slot="reference"
        type="text"
      >{{ deviceName }}</el-button>
      <div>
        <div v-if="model1">
          <table class="innetTable">
            <thead>
              <tr>
                <th width="100px">责任人</th>
                <th width="100px">业务系统</th>
                <th width="100px">资产ip</th>
                <th width="100px">部门</th>
                <th width="100px">资产类型</th>
                <th width="100px">邮箱</th>
                <th width="100px">电话</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>{{ governorName }}</td>
                <td>{{ businessName }}</td>
                <td>{{ assetIp }}</td>
                <td>{{ departName }}</td>
                <td>{{ deviceTypeName }}</td>
                <td>{{ eMail }}</td>
                <td>{{ telPhone }}</td>
              </tr>
            </tbody>
          </table>
          <!-- <span style="color:#333;padding:5px">责任人:{{governorName}}</span>
          <span style="color:#333;padding:5px">业务系统:{{businessName}}</span>
          <span style="color:#333;padding:5px">资产名称:{{assetName}}</span>
          <span style="color:#333;padding:5px">部门:{{departName}}</span>
          <span style="color:#333;padding:5px">资产大类:{{deviceTypeName}}</span>
          <span style="color:#333;padding:5px">邮箱:{{eMail}}</span>
          <span style="color:#333;padding:5px">电话:{{telPhone}}</span> -->
        </div>
        <div v-else>
          <div style="color:#333;padding:5px;text-align:center">未知</div>
        </div>
      </div>

    </el-popover>
  </div>
</template>

<script>
import { queryAssetInfoById } from '../api/alarm-result'
export default {
  name: 'DeviceAssociate',
  components: {},
  props: {
    assetId: {
      default: function() {
        return ''
      }
    },
    deviceName: {
      default: function() {
        return ''
      }
    }
  },
  data() {
    return {
      model1: true,
      titleStr: null,
      content: null,
      governorName: '',
      businessName: '',
      departName: null,
      deviceTypeName: null,
      eMail: '',
      assetIp: '',
      telPhone: null
    }
  },
  computed: {},
  watch: {},
  mounted() { },
  methods: {
    routeToAsset() {

    },
    findAssetInfo() {
      // "/api/assetMgr/getAssetInfoByIp/"
      if (this.content == null) {
        const form = {
          'params': {
            'assetId': this.assetId
          }
        }

        queryAssetInfoById(form)
          .then(resp => {
            if (resp.data.returnCode == '0') {
              // this.content = "详情";
              // this.content =
              //   "责任人：" +
              //   resp.data.data.list.governorName +
              //   ",业务系统" +
              //   resp.data.data.list.businessName;
              if (resp.data.data.list) {
                this.model1 = true
                this.governorName = resp.data.data.list.governorName
                this.businessName = resp.data.data.list.businessName
                this.departName = resp.data.data.list.departName,
                this.deviceTypeName = resp.data.data.list.deviceTypeName,
                this.eMail = resp.data.data.list.eMail,
                this.assetIp = resp.data.data.list.assetIp,
                this.telPhone = resp.data.data.list.telPhone
              } else {
                this.model1 = false
              }
            } else {
              this.$message.error(resp.data.returnMsg)
            }
          })
          .catch(error => {
            this.model1 = false
          })
      }
    }
  }
}
</script>

<style scoped>
  .innetTable {
    width: 100%;
    border: 1px #cdd9e3 solid;
    word-break: break-all;
    table-layout: fixed;
  }

  .innetTable th {
    border: 1px #cdd9e3 solid;
    vertical-align: middle;
    text-align: center;
    line-height: 30px;
    background: rgb(238, 241, 246);
  }

  .innetTable td {
    border: 1px #cdd9e3 solid;
    vertical-align: middle;
    text-align: center;
    padding: 5px 5px;
    font-size: 12px;
    width: 100%;
    line-height: 30px;
  }

  .ScrollCtrl {
    margin-top: 50px;
    overflow: scroll;
    border-bottom: 1px #cdd9e3 solid;
  }
</style>
