<template>
  <el-container>
    <el-aside width="50%">
      <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="vchannelObj"
            :params="vchannelParams"
            row-key="id"
            stripe
            highlightCurrentRow
            @row-click="rowClick"
          >
            <el-table-column
              label="#"
              type="index"
            ></el-table-column>
            <el-table-column
              label="名称"
              prop="name"
            ></el-table-column>
            <el-table-column
              label="标识"
              prop="code"
            ></el-table-column>
            <el-table-column label="操作" fixed="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="tablevchannel"
          :data="vchannelList"
          row-key="id"
          stripe
          :hidePagination="true"
        >
          <el-table-column label="#" type="index" width="50"></el-table-column>
          <el-table-column
            label="算法名称"
            prop="algo_.name"
            width="150"
          ></el-table-column>
          <el-table-column
            label="视频名称"
            prop="vchannel_.name"
            width="150"
          ></el-table-column>
          <el-table-column label="常开" prop="always_on" width="150">
            <template #default="scope">
              <el-switch
                v-model="scope.row.always_on"
                :disabled="true"
              ></el-switch>
            </template>
          </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-if="dialog.save"
    ref="saveDialog"
    @success="handleSaveSuccess"
    @closed="dialog.save = false"
  ></save-dialog>
  <algo-dialog
    v-if="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: "",
      eventcateList: [],
      vchannelObj: this.$API.third.tdevice.list,
      vchannelParams: {'type': 60}
    };
  },
  mounted() {
    // this.getEventCate();
    // this.getVchannel();
  },
  methods: {
    //事件总类列表
    getEventCate() {
      this.$API.ecm.event_cate.list
        .req({ self_algo: true, page: 0 })
        .then((res) => {
          this.eventcateList = res;
        });
    },
    //左边列表点击，右边显示
    rowClick(row) {
      this.$API.ecm.vchannel.list.req({ algo: row.id, page: 0 }).then((res) => {
        this.vchannelList = res;
      });
      
     
      this.chosen_cate = row.id;
    
    },

    //算法列表
    getVchannel() {
      this.$API.ecm.vchannel.list.req({ page: 0 }).then((res) => {
        this.vchannelList = res;
      });
    },

    //批量布设添加
    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.vchannel.delete
        .req(row.id)
        .then((res) => {
          this.$message.success("删除成功");
          this.getVchannel();
          return res;
        })
        .catch((err) => {
          return err;
        });
    },
    //本地更新数据
    handleSaveSuccess() {
      this.$refs.tablevchannel.refresh();
    },
    //本地更新数据
    handleSaveSuccessss() {
      this.$refs.tablevchannel.refresh();
    },
  },
};
</script>

<style>
</style>
