<template>
  <el-container>
    <el-header>
      <div class="left-panel">
        <el-button
          type="primary"
          icon="el-icon-refresh"
          @click="syncData"
          :loading="syncLoading"
          >同步</el-button
        >
      </div>
      <div class="right-panel">
        <el-input
          v-model="query.search"
          placeholder="编号"
          clearable
          @keyup.enter="handleQuery"
        ></el-input>
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="handleQuery"
        ></el-button>
      </div>
    </el-header>
    <el-main class="nopadding">
      <scTable
        ref="table"
        :apiObj="apiObj"
        row-key="id"
		:pageStr="pageStr"
		:pageSizeStr="pageSizeStr"
		:orderStr="orderStr"
		:parseData="parseData"
        @selection-change="selectionChange"
        stripe
        @resetQuery="resetQuery"
      >
        <el-table-column label="序号" type="index" width="50"></el-table-column>
        <el-table-column
          label="设备编号"
          prop="deviceCode"
          min-width="100"
        ></el-table-column>
         <el-table-column
          label="通道编号"
          prop="channelCode"
          min-width="150"
        ></el-table-column>
        <el-table-column
          label="通道名称"
          prop="channelName"
          min-width="250"
        ></el-table-column>
        <el-table-column label="通道状态" prop="stat" min-width="80">
          <template #default="scope">
            <span v-if="scope.row.stat === 0" style="color:red">未启用</span>
            <span v-else>启用</span>
          </template>
        </el-table-column>
        <el-table-column label="是否在线" prop="isOnline" min-width="180">
          <template #default="scope">
            <span v-if="scope.row.isOnline === 0"><el-tag type="warning">离线</el-tag></span>
            <span v-else><el-tag type="success">在线</el-tag></span>
          </template>
        </el-table-column>
        <el-table-column
          label="创建时间"
          prop="createTime"
          width="160"
        ></el-table-column>
      </scTable>
    </el-main>
  </el-container>
</template>
<script>
import videoChannelView from "./vchannel_view";
export default {
  name: "monitor",
  components: {
    videoChannelView,
  },
  data() {
    return {
      syncLoading: false,
      apiObj: this.$API.am.tdevice.dchannel,
	  pageStr: "pageNum",
	  pageSizeStr: "pageSize",
	  orderStr: "sort",
	  parseData: (res)=>{
		return {
			data: res,				//分析无分页的数据字段结构
			rows: res.pageData,		//分析行数据字段结构
			total: res.totalRows,		//分析总数字段结构
		}
	  },
      dialogSave: false,
      limitedVisible: false,
      query: {},
      selection: [],
      search: {
        keyword: null,
      },
      channelId: "",
    };
  },
  methods: {
    handlePosition(row) {
      this.channelCode = row.channelCode;
      this.channelName = row.channelName;
      this.dialogSave = true;
    },
    //删除区域
    async handleDel(row) {
      await this.$API.am.area.delete.req(row.id).then((res) => {
        if (res.err_msg) {
          this.$message.error(res.err_msg);
        } else {
          this.$refs.table.refresh();
          this.$message.success("删除成功");
        }
      });
    },

    //批量删除区域
    async batch_del() {
      this.$confirm(
        `确定删除选中的 ${this.selection.length} 项吗？如果删除项中含有子集将会被一并删除`,
        "提示",
        {
          type: "warning",
        }
      )
        .then(() => {
          const loading = this.$loading();
          let params = { pk: { pks: this.selection } };
          this.$API.am.area.deletes.req(params).then((res) => {
            loading.close();
            if (res.err_msg) {
              this.$message.error(res.err_msg);
            } else {
              this.$refs.table.refresh();
              this.$message.success("删除成功");
            }
          });
        })
        .catch(() => {});
    },
    //表格选择后回调事件
    selectionChange(selection) {
      this.selection = selection;
    },

    //搜索
    handleQuery() {
      this.$refs.table.queryData(this.query)
    },

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