<template>
  <el-container>
    <el-aside width="40%">
      <el-container>
        <el-header>
          <div class="left-panel">
            <!-- <el-button type="danger" plain icon="el-icon-delete" :disabled="selection.length==0" @click="batch_del"></el-button> -->
          </div>
        </el-header>
        <el-main class="nopadding">
          <scTable
            ref="table"
            :apiObj = "apiObj1"
            :params = "params1"
            row-key="id"
            stripe
            highlightCurrentRow
            @row-click="rowClick"
            :hidePagination="true"
          >
            <el-table-column
              label="#"
              type="index"
              width="50"
            ></el-table-column>
            <el-table-column
              label="名称"
              prop="name"
              width="120"
            ></el-table-column>
            <el-table-column
              label="标识"
              prop="code"
              width="120"
            ></el-table-column>
            <el-table-column label="触发" prop="trigger" width="80">
              <template #default="scope">
                <span v-if="scope.row.trigger == 10">监控</span>
                <span v-if="scope.row.trigger == 20">定位</span>
              </template>
            </el-table-column>
            <el-table-column label="喇叭" prop="speaker_on" width="50">
              <template #default="scope">
                <el-switch
                  v-model="scope.row.speaker_on"
                  :disabled="true"
                ></el-switch>
              </template>
            </el-table-column>
            <el-table-column label="喇叭开启区域" prop="name" width="120">
              <template #default="scope">
                <el-space v-if="scope.row.filter_area_level">{{
                  filter_area_[scope.row.filter_area_level]
                }}</el-space></template
              >
            </el-table-column>
            <el-table-column label="操作" fixed="right" align="right">
              <template #default="scope">
                <el-button
                  type="primary"
                  link
                  size="small"
                   v-auth="'notify_setting.update'"
                  @click="adds_edit(scope.row)"
                  >批量布设</el-button
                >
              </template>
            </el-table-column>
          </scTable>
        </el-main>
      </el-container>
    </el-aside>
    <el-container>
      <el-header>
        <div class="left-panel">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            v-auth="'notify_setting.update'"
            @click="add"
          ></el-button>
        </div>
      </el-header>
      <el-main class="nopadding">
        <scTable
          ref="table2"
          :apiObj="apiObj2"
          row-key="id"
          stripe
          :hidePagination="true"
        >
          <el-table-column label="#" type="index" width="50"></el-table-column>
          <el-table-column
            label="算法名称"
            prop="algo_.name"
          ></el-table-column>
          <el-table-column
            label="视频编号"
            prop="vchannel_.code"
          ></el-table-column>
          <el-table-column label="实时开启" prop="always_on">
              <template #default="scope">
                <el-switch
                  v-model="scope.row.always_on"
                  :disabled="true"
                ></el-switch>
              </template>
            </el-table-column>
          <el-table-column
            label="视频名称"
            prop="vchannel_.name"
          ></el-table-column>
          <el-table-column label="操作" fixed="right" align="right">
            <template #default="scope">
              <el-popconfirm
                title="确定删除吗？"
                @confirm="table_del(scope.row, scope.$index)"
              >
                <template #reference>
                  <el-button text type="danger" size="small"  v-auth="'notify_setting.delete'">删除</el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </scTable>
      </el-main>
    </el-container>
  </el-container>
  <save-dialog
    v-model="dialog.save"
    ref="saveDialog"
    @success="handleSaveSuccessss"
    @closed="dialog.save = false"
  ></save-dialog>
  <algo-dialog
    v-model="dialog.algos"
    ref="algoDialog"
    @success="handleSaveSuccessss"
    @closed="dialog.algos = false"
  ></algo-dialog>
</template>

<script>
import saveDialog from "./algo_form.vue";
import algoDialog from "./algos_form.vue";
import { CircleCheckFilled, CircleCloseFilled } from "@element-plus/icons-vue";
export default {
  name: "algo",
  components: {
    saveDialog,
    algoDialog,
    CircleCheckFilled,
    CircleCloseFilled,
  },
  data() {
    return {
      dialog: {
        save: false,
        algos: false,
      },
      filter_area_: {
        10: "办公生活区以上",
        20: "生产一般区以上",
        30: "生产重点区以上",
      },
      selection: [],
      chosen_cate: "",
      apiObj1: this.$API.ecm.event_cate.list,
      params1: { trigger: 10 },
      apiObj2: null,
    };
  },
  mounted() {
  },
  methods: {
    //左边列表点击，右边显示
    rowClick(row) {
      this.apiObj2 = this.$API.ecm.algo_vchannel.list
      this.$refs.table2.queryData({algo: row.id})
      
     
      this.chosen_cate = row.id;
    
    },

    //批量布设添加
    adds_edit() {
      this.dialog.algos = true;
      this.$nextTick(() => {
        this.$refs.algoDialog.open();
      });
    },

    //窗口新增
    add() {
      this.dialog.save = true;
      this.$nextTick(() => {
        this.$refs.saveDialog.open();
      });
    },

    //窗口编辑
    table_edit(row) {
      this.dialog.save = true;
      this.$nextTick(() => {
        this.$refs.saveDialog.open("edit").setData(row);
      });
    },
    table_del(row) {
      this.$API.ecm.algo_vchannel.delete
        .req(row.id)
        .then((res) => {
          this.$message.success("删除成功");
          this.$refs.table2.refresh();
          return res;
        })
        .catch((err) => {
          return err;
        });
    },
    //本地更新数据
    handleSaveSuccess() {
      
      this.$refs.table.refresh();
    },
    //本地更新数据
    handleSaveSuccessss() {
      this.dialog.algos = false
      this.$refs.table2.refresh();
    },
  },
};
</script>

<style>
</style>
