<template>
  <div class="app-container">
    <!-- 标签页 -->
    <el-tabs
      value="first"
      type="border-card"
      @tab-click="handleClick"
      v-loading="loading"
    >
      <el-tab-pane label="基本信息" name="first">
        <el-row type="flex" justify="space-between">
          <!-- 左侧内容 -->
          <el-col :span="5">
            <!-- 充电设备 -->
            <div class="advContent">
              <el-card class="box-card" shadow="hover">
                <div slot="header" class="clearfix">
                  <span
                    >充电设备(<span style="color: #bf1c1c">{{ status }}</span
                    >)</span
                  >
                </div>
                <!--二维码-->
                <div class="hello">
                  <vue-qr
                    ref="Qrcode"
                    :text="pileDetail.qrCodeURL"
                    :callback="test + ''"
                    qid="testQrId"
                    :width="150"
                    style="margin-left: 25%"
                  />
                </div>

                <!-- 表格 -->
                <div style="margin-bottom: 10px">
                  <el-descriptions :column="1" border>
                    <el-descriptions-item
                      label="SN"
                      labelStyle="width: 80px"
                      contentStyle="width: 150px"
                      >{{ pileDetail.pileSn }}</el-descriptions-item
                    >
                    <el-descriptions-item label="运营商">{{
                      pileDetail.merchantName
                    }}</el-descriptions-item>
                    <el-descriptions-item label="站点">{{
                      pileDetail.stationName
                    }}</el-descriptions-item>
                    <!--<el-descriptions-item label="厂商">
                      <el-tag size="small">举视</el-tag>
                    </el-descriptions-item>-->
                    <!--                    <el-descriptions-item label="使用车辆类型">{{
                      pileDetail.matchCars
                    }}</el-descriptions-item>-->
                    <el-descriptions-item label="额定功率(kW)">{{
                      pileDetail.ratedPower
                    }}</el-descriptions-item>
                    <!--<el-descriptions-item label="额定电压(V)">{{pileDetail.sn}}</el-descriptions-item>-->
                    <el-descriptions-item label="额定电流(A)">{{
                      pileDetail.ratedCurrent
                    }}</el-descriptions-item>

                    <el-descriptions-item label="iccid">{{
                      pileDetail.iccid
                    }}</el-descriptions-item>

                    <el-descriptions-item label="sim卡商">
                      <dict-tag
                        :options="dict.type.sim_supplier"
                        :value="pileDetail.simSupplier"
                      />
                    </el-descriptions-item>

                    <el-descriptions-item label="卡运营商">
                      <dict-tag
                        :options="dict.type.sim_operator"
                        :value="pileDetail.operator"
                      />
                    </el-descriptions-item>

                    <!--                    <el-descriptions-item label="桩类型">-->
                    <!--                      桩类型 数据-->
                    <!--                    </el-descriptions-item>-->
                    <el-descriptions-item label="故障原因">
                    </el-descriptions-item>
                    <el-descriptions-item label="故障时间">
                    </el-descriptions-item>
                  </el-descriptions>
                </div>
                <!-- <div ></div> -->
              </el-card>
            </div>
          </el-col>
          <!-- 右侧内容 -->
          <el-col :span="19" style="margin-left: 15px">
            <el-card class="box-card" shadow="hover">
              <div style="margin: 12px 0">接口列表</div>
              <div style="margin-top: 20px">
                <!-- 刷新按钮 -->
                <el-button
                  size="medium"
                  type="primary"
                  @click="refreshPileConnectorList"
                >
                  刷新
                </el-button>
              </div>
              <div class="sideNav" id="app">
                <!-- 接口列表表单 -->
                <el-table
                  :data="connectorList"
                  style="width: 100%"
                  v-loading="Loading"
                >
                  <el-table-column
                    prop="pileConnectorCode"
                    label="枪口编号"
                    width="180px"
                    align="center"
                  />
                  <el-table-column
                    prop="connectorQrCodeUrl"
                    label="充电二维码"
                    width="180px"
                    align="center"
                  >
                    <template slot-scope="scope">
                      <!--                      <el-link @click="qrcodeClick(scope.row)" v-if="scope.row.connectorQrCodeUrl == 0">-->
                      <!--                        <vue-qr ref="Qrcode"-->
                      <!--                                :text="scope.row.connectorQrCodeUrl"-->
                      <!--                                :callback="test" qid="scope.row.connectorId"-->
                      <!--                                :width="qrWidth"-->

                      <!--                        />-->
                      <!--                      </el-link>-->
                      <el-link @click="qrcodeClick(scope.row)">
                        <vue-qr
                          ref="Qrcode"
                          :text="scope.row.connectorQrCodeUrl"
                          :callback="test + ''"
                          qid="scope.row.connectorId"
                          :width="qrWidth"
                        />
                      </el-link>
                    </template>
                  </el-table-column>
                  <el-table-column
                    width="118px"
                    align="center"
                    prop="status"
                    label="状态"
                  >
                    <template slot-scope="scope">
                      <dict-tag
                        :options="dict.type.connector_status"
                        :value="scope.row.status"
                      />
                    </template>
                  </el-table-column>
                  <el-table-column
                    width="80px"
                    align="center"
                    prop="type"
                    label="类型"
                  >
                    <template slot-scope="scope">
                      <dict-tag
                        :options="dict.type.connector_type"
                        :value="scope.row.type"
                      />
                    </template>
                  </el-table-column>
                  <el-table-column
                    width="118px"
                    align="center"
                    prop="instantPower"
                    label="即时功率（kW）"
                  />
                  <el-table-column prop="soc" label="SOC(°C)" align="center" />
                  <el-table-column
                    prop="equipmentOrderNum"
                    label="设备订单号"
                    align="center"
                    width="200"
                  />
                  <el-table-column
                    prop="orderCode"
                    label="平台订单"
                    align="center"
                    width="200"
                  />
                  <!--                  <el-table-column prop="businessType" label="桩类型" align="center" >-->
                  <!--                    <template slot-scope="scope">-->
                  <!--                      <span>{{scope.row.businessType === '1' ? '运营桩':'个人桩'}}</span>-->
                  <!--                    </template>-->
                  <!--                  </el-table-column>-->
                </el-table>
              </div>
            </el-card>
            <el-card style="margin-top: 20px">
              <div style="margin: 12px 0">充电桩通信日志</div>
              <el-table :data="feedList" stripe style="width: 100%">
                <el-table-column
                  prop="createTime"
                  label="触发时间"
                  align="center"
                  width="200"
                >
                </el-table-column>
                <el-table-column
                  prop="description"
                  label="描述"
                  align="center"
                  width="200"
                >
                </el-table-column>
                <el-table-column
                  prop="originalMsg"
                  label="原始报文"
                  align="center"
                >
                </el-table-column>
              </el-table>
              <!--分页-->
              <pagination
                v-show="total > 0"
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getFeedList"
                style="margin-bottom: 20px"
              />
            </el-card>
          </el-col>
        </el-row>
      </el-tab-pane>

      <!-- 右侧配置管理页面目前不管 -->
      <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {
  getPileDetailById,
  getPileFeedList,
  listBasic,
} from "@/api/pile/basic";
import { queryConnectorListByParams } from "@/api/pile/connector";
// 二维码组件
import VueQr from "vue-qr";

export default {
  components: { VueQr },
  name: "pile-detail",
  dicts: ["connector_status", "connector_type", "sim_supplier", "sim_operator"],
  data() {
    return {
      Loading: false,
      pileId: this.$route.params.pileId,
      // 右侧数据数组
      connectorList: [],
      stationId: 1,
      // 充电桩详情 竖向 表格渲染的数据
      pileDetail: { url: "" },
      loading: false,
      qrWidth: 60,
      flag: true,
      // 充电桩通信日志
      feedList: [],
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
        pileSn: null,
        pageNum: 1,
        pageSize: 5,
      },
      pileSn: null,
    };
  },
  computed: {
    status() {
      const status = this.pileDetail.status;
      // 0-未知；1-在线；2-离线；3-故障
      let str = "";
      if (status === "1") {
        str = "在线";
      } else if (status === "2") {
        str = "离线";
      } else if (status === "3") {
        str = "故障";
      } else {
        str = "未知";
      }
      return str;
    },
  },
  created() {
    // 查询充电桩详情
    this.getPileDetail();
    // 查询充电桩接口列表
    this.queryPileConnectorList();
  },
  mounted() {
    setTimeout(() => {}, 300);
  },
  methods: {
    //点击二维码事件
    qrcodeClick(row) {
      if (this.flag) {
        this.flag = false;
        this.qrWidth = 150;
      } else {
        this.flag = true;
        this.qrWidth = 60;
      }
    },
    // 查询接口列表
    queryPileConnectorList() {
      const data = {
        pileIds: [this.pileId],
      };
      queryConnectorListByParams(data)
        .then((response) => {
          console.log("response", response);
          this.connectorList = response.rows;
          console.log("接口列表", this.connectorList);
        })
        .catch((error) => {
          console.log("错误日志", error);
        });
    },
    // test(dataUrl, id){
    //   console.log(dataUrl)
    //   console.log(id)
    // },
    test() {
      console.log("测试");
    },
    // 查询充电桩详情接口
    getPileDetail() {
      // console.log(this.pileId);
      const queryForm = {
        pileId: this.pileId,
      };
      getPileDetailById(queryForm).then((response) => {
        this.pileDetail = response.data;
        this.pileSn = this.pileDetail.pileSn;
        console.log("getPileDetailById结果：", this.pileDetail);
      });
    },
    handleClick() {
      console.log("handleClick");
    },
    // 刷新按钮重新获取数据
    refreshPileConnectorList() {
      this.Loading = true;
      setTimeout(() => {
        this.queryPileConnectorList();
        this.Loading = false;
      }, 1000);
    },
    /** 查询充电桩通信日志 */
    getFeedList() {
      this.loading = true;
      this.queryParams.pileSn = this.pileSn;
      getPileFeedList(this.queryParams).then((response) => {
        console.log("查询充电桩通信日志", response);
        this.feedList = response.data.list;
        this.total = response.data.total;
        this.loading = false;
      });
      // this.feedList = [
      //   {
      //     time: '2016-05-02',
      //     description: '设备上线'
      //   },
      //   {
      //     time: '2016-05-01',
      //     description: '设备离线'
      //   },
      //   {
      //     time: '2016-05-01',
      //     description: '设备离线'
      //   }
      // ];
      // this.total = 3;
      // this.loading = false;
    },
  },
  watch: {
    pileSn(newValue, oldValue) {
      if (newValue !== null) {
        this.getFeedList();
      }
    },
  },
};
</script>

<style scoped lang="scss">
.advContent {
  background: #fff;
  border-radius: 5px 5px 0px 0px;
}
.sideNav {
  padding: 30px 0 12px;
}
#qrcodeArea img {
  height: 80px;
  width: 80px;
}
</style>
