<template>
  <div class="app-container">
    <el-row type="flex" :gutter="10">
      <el-col :span="8">
        <el-card
          shadow="hover"
          :body-style="{ padding: '20px', height: 'calc(100vh - 200px)' }"
        >
          <p slot="header"><b>报警弹窗及语音提醒</b></p>
          <div>
            <p>
              选择开启提醒的算法 共
              {{ selectedAlarmList.length }} 个算法开启提醒
            </p>
            <el-select
              v-model="selectedAlarmList"
              multiple
              style="width: 100%"
              placeholder="请选择"
            >
              <el-option
                v-for="item in alarmOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <p>提醒方式</p>
            <p>
              <span>系统报警语音</span>
              <el-switch
                v-model="systemAlarmAudio"
                active-color="#13ce66"
                inactive-color="#ff4949"
              >
              </el-switch>
            </p>
            <p>
              <span>系统报警弹窗</span>
              <el-switch
                v-model="systemAlarmWidow"
                active-color="#13ce66"
                inactive-color="#ff4949"
              >
              </el-switch>
            </p>
            <p>显示方式</p>
          </div>
        </el-card>
      </el-col>
      <el-col :span="16">
        <el-card
          shadow="hover"
          :body-style="{ padding: '20px', height: 'calc(100vh - 200px)' }"
        >
          <p slot="header"><b>提醒语音管理</b></p>
          <el-table
            :data="tableData"
            style="width: 100%"
            :row-style="{ textAlign: 'center' }"
          >
            <el-table-column prop="id" label="算法ID"></el-table-column>
            <el-table-column
              prop="algorithmName"
              label="算法名称"
            ></el-table-column>
            <el-table-column label="算法等级">
              <template slot-scope="scope">
                <dict-tag
                  :options="dict.type.algorithm_level"
                  :value="scope.row.algorithmLevel"
                />
              </template>
            </el-table-column>
            <el-table-column
              prop="alarmAudio"
              label="报警语音"
            ></el-table-column>
            <el-table-column label="操作" width="200">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  @click="handleEdit(scope.row)"
                >
                  <i class="el-icon-video-play"></i>
                  试听
                </el-button>
                <el-button
                  size="mini"
                  type="text"
                  @click="handleUpload(scope.row)"
                >
                  <i class="el-icon-upload"></i>
                  替换/上传
                </el-button>
                <el-button
                  size="mini"
                  type="text"
                  @click="handleDelete(scope.row)"
                >
                  <i class="el-icon-delete"></i>
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  dicts: ["algorithm_level"],
  name: "Alarmreminder",
  props: {},
  components: {},
  data() {
    return {
      tableData: [
        {
          id: "1",
          algorithmName: "算法1",
          algorithmLevel: 1,
          alarmAudio: "audio1.mp3",
        },
      ],
      total: 0, // 总记录数
      queryParams: {
        pageNum: 1, // 当前页码
        pageSize: 10, // 每页显示的记录数
      },
      selectedAlarmList: [], // 选中的报警算法列表
      alarmOptions: [
        { value: "1", label: "算法1" },
        { value: "2", label: "算法2" },
        { value: "3", label: "算法3" },
      ],
      systemAlarmAudio: false, // 系统报警语音
      systemAlarmWidow: false, // 系统报警弹窗
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    //获取数据列表
    getList() {},
    //编辑
    handleEdit(row) {
      console.log("编辑：", row);
    },
    //删除
    handleDelete(row) {
      console.log("删除：", row);
    },
    //上传
    handleUpload(row) {
      console.log("上传：", row);
    },
  },
};
</script>

<style scoped lang="scss"></style>
