<template>
  <div class="manage-container">
    <div class="vab-base">
      <div class="vab-left-base">
        <div class="vab-input-base">
          <el-select
            v-model="queryForm.deviceCode"
            size="medium"
            filterable
            :placeholder="$t('defalult.qxz')"
            @change="getDeviceCode"
          >
            <el-option
              v-for="item in deviceData"
              :key="item.code"
              size="medium"
              :label="item.name"
              :value="item.code"
            ></el-option>
          </el-select>
          <el-button type="primary" size="medium" @click="search">
            {{ $t('defalult.ss') }}
          </el-button>
        </div>
      </div>
    </div>
    <div class="vab-map-base">
      <div class="site-top-base">
        <div class="map-left-base">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane :label="$t('siteDetails.zddp')" name="first">
              <site-index ref="site" :deviceCode="queryForm.id"></site-index>
            </el-tab-pane>
            <!--
 <el-tab-pane :label="$t('siteDetails.zdzt')" name="second">
              <technology-index
                ref="technology"
                :deviceCode="[queryForm.deviceCode, queryForm.screenView]"
              ></technology-index>
            </el-tab-pane>

         -->
            <el-tab-pane :label="$t('siteDetails.jksp')" name="third">
              <video-index
                ref="video"
                :deviceCode="queryForm.deviceCode"
              ></video-index>
            </el-tab-pane>
            <el-tab-pane :label="$t('siteDetails.szdbl')" name="fourth">
              <water-index
                ref="water"
                :deviceCode="queryForm.deviceCode"
              ></water-index>
            </el-tab-pane>
            <el-tab-pane :label="$t('siteDetails.zptp')" name="five">
              <image-index
                ref="image"
                :deviceCode="queryForm.deviceCode"
              ></image-index>
            </el-tab-pane>
          </el-tabs>
        </div>
        <div class="map-right-base">
          <div class="head-right-base" style="margin-bottom: 42px">
            <text class="h1-head-base">{{ $t('siteDetails.zdxx') }}</text>
          </div>
          <div class="item-right-base">
            <span>{{ $t('siteDetails.zdbh') }}：{{ deviceInfo.code }}</span>
          </div>
          <div class="item-right-base">
            <span>{{ $t('siteDetails.xlh') }}：{{ deviceInfo.serial }}</span>
          </div>
          <div class="item-right-base">
            <span>{{ $t('siteDetails.wlwk') }}：{{ deviceInfo.sim }}</span>
          </div>
          <div class="item-right-base">
            <span>{{ $t('siteDetails.yxzt') }}：</span>
            <el-tag v-if="deviceInfo.status == 1" type="success">
              {{ $t('siteDetails.zx') }}
            </el-tag>
            <el-tag v-else type="danger">{{ $t('siteDetails.lx') }}</el-tag>
            <span>{{ deviceInfo.statusRemark }}</span>
          </div>
          <div class="item-right-base">
            <span>
              {{ $t('siteDetails.sbgg') }}：{{ deviceInfo.specifications }}
            </span>
          </div>
          <div class="item-right-base">
            <span>
              {{ $t('siteDetails.csbz') }}：{{ deviceInfo.outStandard }}
            </span>
          </div>
          <div class="item-right-base">
            <span>{{ $t('siteDetails.ffhs') }}：{{ deviceInfo.userNum }}</span>
          </div>
          <div class="item-right-base">
            <span>{{ $t('siteDetails.ywry') }}：{{ deviceInfo.leader }}</span>
          </div>
          <div class="item-right-base">
            <span>{{ $t('siteDetails.lxfs') }}：{{ deviceInfo.contact }}</span>
          </div>
        </div>
      </div>
      <div class="site-bottom-base">
        <div class="record-right-base">
          <text class="h1-head-base">{{ $t('siteDetails.yckz') }}</text>
        </div>
        <div class="list-right-base">
          <el-tabs v-model="activeDataName" @tab-click="handleDataClick">
            <el-tab-pane :label="$t('siteDetails.kd')" name="data-first">
              <readable-index
                ref="readable"
                :deviceCode="queryForm.deviceCode"
              ></readable-index>
            </el-tab-pane>
            <el-tab-pane :label="$t('siteDetails.zx')" name="data-second">
              <only-index
                ref="only"
                :deviceCode="queryForm.deviceCode"
              ></only-index>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getDeviceList, getDeviceInfos, deviceCode } from '@/api/monitor';
import technologyIndex from './technology';
import videoIndex from './video';
import waterIndex from './water';
import imageIndex from './image';
import readableIndex from './readable';
import onlyIndex from './only';
import siteIndex from './site';
export default {
  components: {
    technologyIndex,
    siteIndex,
    videoIndex,
    waterIndex,
    imageIndex,
    readableIndex,
    onlyIndex,
  },
  data() {
    return {
      activeName: 'first',
      activeDataName: 'data-first',
      listLoading: false,
      deviceData: [],
      deviceInfo: [],
      sensorData: [],
      form: {
        resource: '',
      },
      addFormVisible: false,
      editFormVisible: false,
      queryForm: {
        deviceCode: '',
        projectId: '',
        screenView: '',
        id: '',
      },
    };
  },
  created() {
    this.queryForm.projectId = sessionStorage.getItem('projectId');
    this.getDeviceData();
  },
  methods: {
    handleClick(tab, event) {
      const deviceCode = this.queryForm.deviceCode;
      if (tab.paneName == 'first') {
        this.$refs['site'].showData({ deviceCode: deviceCode });
      } else if (tab.paneName == 'second') {
        this.$refs['technology'].showData({ deviceCode: deviceCode });
      } else if (tab.paneName == 'third') {
        this.$refs['video'].showData({ deviceCode: deviceCode });
      } else if (tab.paneName == 'fourth') {
        this.$refs['water'].showData({ deviceCode: deviceCode });
      } else if (tab.paneName == 'five') {
        this.$refs['image'].showData({ deviceCode: deviceCode });
      }
    },
    getDeviceCode(e) {
      var obj = {};
      obj = this.deviceData.find(item => {
        return item.code === e;
      });
      this.queryForm.screenView = obj.screenView;
      this.queryForm.id = obj.id;
    },
    handleDataClick(tab, event) {
      const deviceCode = this.queryForm.deviceCode;
      if (tab.paneName == 'data-first') {
        this.$refs['readable'].showData({ deviceCode: deviceCode });
      } else if (tab.paneName == 'data-second') {
        this.$refs['only'].showData({ deviceCode: deviceCode });
      }
    },
    //获取站点列表
    async getDeviceData() {
      const { data } = await getDeviceList(this.queryForm);
      if (data) {
        this.queryForm.deviceCode = data[0].code;
        this.queryForm.screenView = data[0].screenView;
        this.queryForm.id = data[0].id;
      }
      this.deviceData = data;
      this.getDeviceDetail();
      this.$refs['readable'].showData({
        deviceCode: this.queryForm.deviceCode,
      });
    },
    //获取站点信息
    async getDeviceDetail() {
      const { data } = await getDeviceInfos(this.queryForm);
      this.deviceInfo = data;
    },
    //搜搜
    search() {
      this.getDeviceDetail();
      this.$refs['readable'].showData({
        deviceCode: this.queryForm.deviceCode,
      });
    },
  },
};
</script>

<style lang="scss">
.el-submenu__title:hover {
  background-color: rgba(#1890ff, 0.085) !important;
  color: hsla(208, 100%, 55%, 0.95) !important;
}
.vab-base {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;

  .vab-left-base {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .vab-input-base {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-right: 20px;

      .el-select {
        margin-right: 5px;
      }
    }
  }
  .vab-left-base {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
}
.site-top-base {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  .map-left-base {
    width: calc(100% - 380px);
    .map-head-base {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 15px;
      margin-bottom: 15px;
      padding-bottom: 15px;
      border-bottom: 1px solid #e3e3e3;
      .map-head-item {
        margin: 0 20px;
      }
    }
    .map-bg-base {
      margin: 30px;
      height: 600px;
      background: #e3e3e3;
    }
  }
  .map-right-base {
    width: 360px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;

    .head-right-base {
      margin-top: 15px;
      margin-bottom: 20px;
      margin-left: 20px;
      padding-left: 5px;
      border-left: 3px solid #3281fd;
      display: block;
      width: 100%;

      .text-head-base {
        font-size: 14px;
        font-weight: normal;
      }
    }
    .item-right-base {
      width: 100%;
      margin-left: 20px;
      height: 48px;
      line-height: 48px;
    }
    .button-right-base {
      margin: 15px 20px;
    }
    .record-right-base {
      width: 100%;
      padding: 15px 20px;
      margin: 15px 0 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #e3e3e3;
    }
    .list-right-base {
      width: calc(100% - 40px);
      margin: 20px 20px 0;
      .item-right-base {
        .title-item-base {
          font-size: 16px;
          color: #3281fd;
          margin-bottom: 10px;
        }
        .form-right-base {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .el-form-item {
            margin-bottom: 0 !important;
          }
        }
      }
    }
  }
}
.site-bottom-base {
  .h1-head-base {
    margin-top: 30px;
    margin-bottom: 20px;
    padding-left: 5px;
    border-left: 3px solid #3281fd;
    display: block;
    width: 100%;
  }
}
</style>
