<template>
  <el-container>
    <el-header>
      <div class="left-panel">
        <el-button type="primary" icon="el-icon-refresh" @click="syncData"
          >同步</el-button
        >
      </div>
      <div class="right-panel">
        <el-input
          v-model="search.keyword"
          placeholder="编号"
          clearable
          @click="upsearch"
        ></el-input>
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="upsearch"
        ></el-button>
      </div>
    </el-header>
    <el-main class="nopadding">
      <scTable
        ref="table"
        :apiObj="apiObj"
        row-key="id"
        @selection-change="selectionChange"
        stripe
        @resetQuery="resetQuery"
      >
        <el-table-column type="selection" width="50"></el-table-column>
        <el-table-column label="序号" type="index" width="50"></el-table-column>
        <el-table-column
          label="喇叭名称"
          prop="name"
          min-width="150"
        ></el-table-column>
        <el-table-column label="音量" prop="extra" min-width="100">
          <template #default="scope">
            <span v-if="scope.row.extra && scope.row.extra.player">{{
              scope.row.extra.player.EnvVolume
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="设备sn"
          prop="sn"
          min-width="90"
        ></el-table-column>
        <el-table-column label="ip" prop="extra" min-width="90">
          <template #default="scope">
            <span v-if="scope.row.extra">{{ scope.row.extra.ip }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" prop="extra" min-width="90">
          <template #default="scope">
            <span v-if="scope.row.extra">{{ scope.row.extra.online }}</span>
          </template>
        </el-table-column>
        <!--<el-table-column label="位置" prop="count_people" min-width="90"></el-table-column>-->
        <el-table-column
          label="所在区域"
          prop="create_time"
          min-width="180"
        ></el-table-column>
        <el-table-column
          label="覆盖区域"
          prop="create_time"
          width="160"
        ></el-table-column>
        <el-table-column label="操作" fixed="right" align="center" width="160">
          <template #default="scope">
            <el-button-group>
              <el-button
                text
                type="primary"
                size="small"
                @click="handlePosition(scope.row)"
                >标记位置</el-button
              >
            </el-button-group>
          </template>
        </el-table-column>
      </scTable>
    </el-main>
  </el-container>
  <channel-view
    v-if="dialogSave"
    ref="saveDialog"
    :channelType="50"
    :channelCode="channelCode"
    :channelName="channelName"
    @closed="dialogSave = false"
  ></channel-view>
</template>
<script>
import channelView from "./vchannel_view";
export default {
  name: "audioVue",
  components: {
    channelView,
  },
  data() {
    return {
      syncLoading: false,
      apiObj: this.$API.am.tdevice.speaker,
      dialogSave: false,
      limitedVisible: false,
      query: {},
      selection: [],
      search: {
        keyword: null,
      },
      channelCode: "",
      channelName: "",
    };
  },
  methods: {
    handlePosition(row) {
      this.channelCode = row.sn;
      this.channelName = row.name;
      this.dialogSave = true;
    },
    //表格选择后回调事件
    selectionChange(selection) {
      this.selection = selection;
    },

    //搜索
    upsearch() {},

    resetQuery() {
      this.query = {};
    },
    async syncData() {
      this.syncLoading = true;
      var res = await this.$API.third.tdevice.vchannelSync.req({});
      this.syncLoading = false;
    },
  },
};
</script>
