<template>
  <div class="app-container">
    <el-card
      shadow="hover"
      :body-style="{ padding: '20px', height: 'calc(100vh - 200px)' }"
    >
      <p slot="header"><b>提醒语音管理</b></p>
      <el-button
        type="primary"
        :disabled="selectedAlarmList.length === 0"
        size="small"
        plain
        @click="batchBut('isSelect')"
        >算法批量开启提醒</el-button
      >
      <el-button
        type="primary"
        size="small"
        :disabled="selectedAlarmList.length === 0"
        plain
        @click="batchBut('isSound')"
        >报警语音开启</el-button
      >
      <el-button
        type="primary"
        size="small"
        :disabled="selectedAlarmList.length === 0"
        @click="batchBut('isPopup')"
        plain
        >报警弹窗开启</el-button
      >

      <el-table
        :data="tableData"
        style="width: 100%; margin-top: 10px"
        :row-style="{ textAlign: 'center' }"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column
          prop="algorithmId"
          label="算法ID"
          align="center"
          width="80"
        ></el-table-column>
        <el-table-column
          prop="algorithmName"
          label="算法名称"
        ></el-table-column>
        <el-table-column label="算法等级" align="center">
          <template slot-scope="scope">
            <dict-tag
              :options="dict.type.algorithm_level"
              :value="scope.row.algorithmLevel"
            />
          </template>
        </el-table-column>
        <el-table-column label="是否开启" align="center">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.isSelect"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="0"
              @change="handleChange(scope.row)"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="是否开启弹窗" align="center">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.isPopup"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="0"
              @change="handleChange(scope.row)"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="是否开启语音" align="center">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.isSound"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="0"
              @change="handleChange(scope.row)"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="alarmSoundName" label="报警语音" align="center">
          <template slot-scope="scope">
            {{ scope.row.alarmSoundName | SoundNamefilter }}
          </template>
        </el-table-column>

        <el-table-column label="操作" width="200" align="center">
          <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>
  </div>
</template>

<script>
import {
  getAlgorithmList,
  updateAlgorithm,
  changeAlgorithmStatus,
} from "@/api/business/algorithmconfig.js";
import { getToken } from "@/utils/auth";
export default {
  dicts: ["algorithm_level"],
  name: "Alarmreminder",
  props: {},
  components: {},
  data() {
    return {
      tableData: [],
      total: 0, // 总记录数
      queryParams: {
        pageNum: 1, // 当前页码
        pageSize: 10, // 每页显示的记录数
      },
      baseUrl: process.env.VUE_APP_BASE_API,
      uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的文件服务器地址
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      currentRow: null, // 新增当前操作行数据
      selectedAlarmList: [], // 选中的报警列表
    };
  },
  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.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);
          }
        });
      }
    },
    // 处理开关状态变化
    handleChange(data) {
      updateAlgorithm(data).then((res) => {
        if (res.code !== 200) {
          return;
        }
        this.$message.success("修改成功");
        this.getList();
      });
    },
    handleSelectionChange(selection) {
      this.selectedAlarmList = selection.map((item) => item.algorithmId);
    },
    batchBut(type) {
      changeAlgorithmStatus({
        list: this.selectedAlarmList,
        type: type, // 假设status是要修改的状态值
      }).then((res) => {
        if (res.code !== 200) {
          return;
        }
        this.$message.success("修改成功");
        this.getList(); // 刷新列表数据
      });
    },
  },
  filters: {
    SoundNamefilter(value) {
      if (!value) return ""; // 如果值为空，返回空字符串
      return value.split("_")[0]; // 返回文件名部分
    },
  },
};
</script>

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