<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.algorithmId"
                :label="item.algorithmName"
                :value="item.algorithmId"
              >
              </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="algorithmId"
              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="alarmSoundName" label="报警语音">
              <template slot-scope="scope">
                {{ scope.row.alarmSoundName | SoundNamefilter }}
              </template>
            </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-upload
                  class="upload-demo"
                  :action="uploadImgUrl"
                  :on-success="handleUploadSuccess"
                  :multiple="false"
                  :show-file-list="false"
                  :headers="headers"
                  :limit="1"
                >
                  <el-button
                    size="mini"
                    type="text"
                    @click="handleUpload(scope.row)"
                  >
                    <i class="el-icon-upload"></i>
                    替换/上传
                  </el-button>
                  <!-- <div slot="tip" class="el-upload__tip">
                    只能上传mp3/ACC/WAV/AMR文件，且不超过5MB
                  </div> -->
                </el-upload>

                <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>
import {
  getAlgorithmList,
  updateAlgorithm,
} from "@/api/business/algorithmconfig.js";
import { getToken } from "@/utils/auth";
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: [],
      systemAlarmAudio: false, // 系统报警语音
      systemAlarmWidow: false, // 系统报警弹窗
      baseUrl: process.env.VUE_APP_BASE_API,
      uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的文件服务器地址
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      currentRow: null, // 新增当前操作行数据
    };
  },
  computed: {},
  watch: {},
  created() {
    this.getList();
  },
  mounted() {},
  methods: {
    //获取数据列表
    getList() {
      getAlgorithmList(this.queryParams).then((res) => {
        if (res.code !== 200) {
          return;
        }
        this.tableData = res.rows; // 假设接口返回的数据列表在res.data.list中
        this.alarmOptions = res.rows;
        this.selectedAlarmList = res.rows.map((item) => {
          if (item.isSelect === 1) {
            return item.algorithmId;
          }
        });
        this.total = res.total; // 假设接口返回的总记录数在res.data.total中
      });
    },
    //试听
    handleEdit(row) {
      const audio = new Audio(row.alarmSoundUrl); // 假设alarmAudio是音频文件的路径
      audio.play(); // 播放音频
    },
    //删除
    handleDelete(row) {
      console.log("删除：", row);
    },
    //上传
    handleUpload(row) {
      this.currentRow = row; // 保存当前操作行
      this.showUpload = true; // 显示上传组件
    },
    handleUploadSuccess(res) {
      console.log(res, "上传成功");

      // 上传成功回调处理
      if (res.code === 200) {
        updateAlgorithm({
          algorithmId: this.currentRow.algorithmId, // 假设algorithmId是当前操作行的ID
          alarmSoundUrl: res.url, // 假设res.url是上传成功后的音频文件URL
          alarmSoundName: res.newFileName, // 假设res.fileName是上传成功后的音频文件名称
        }).then((res) => {
          if (res.code === 200) {
            this.$message.success("上传成功");
            this.showUpload = false; // 显示上传组件
            this.getList(); // 刷新列表数据
          } else {
            this.$message.error(res.msg);
          }
        });
      }
    },
  },
  filters: {
    SoundNamefilter(value) {
      if (!value) return ""; // 如果值为空，返回空字符串
      return value.split("_")[0]; // 返回文件名部分
    },
  },
};
</script>

<style scoped lang="scss">
.upload-demo {
  display: inline-block;
}
</style>
