<template>
  <ContainerTit>
    <Container></Container>
    <div slot="headr">
      <el-button type="primary" :loading="loading" @click="setSubmit">
        提交保存
      </el-button>
    </div>
    <div style="padding: 10px; background-color: #fff">
      <el-table :data="audioSet">
        <el-table-column
          prop="name"
          label="名称"
          min-width="80"
        ></el-table-column>
        <el-table-column prop="name" label="语音提示" min-width="180">
          <template slot-scope="scope">
            <el-radio-group v-model="scope.row.voice_radio">
              <el-radio :label="1">提示1次</el-radio>
              <el-radio :label="2">提示3次</el-radio>
              <el-radio :label="3">循环提示</el-radio>
              <el-radio :label="4">不提示</el-radio>
            </el-radio-group>
          </template>
        </el-table-column>
        <el-table-column label="类型" min-width="140">
          <template slot-scope="scope">
            <el-select
              v-model="scope.row.voice_type"
              disabled
              placeholder="请选择"
              size="small"
            >
              <el-option
                v-for="item in voice_type_list"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="80">
          <template slot-scope="scope">
            <audio :id="'neworder' + scope.row.type" controls hidden>
              <source
                :src="scope.row.type === 1 ? neworder : outStock"
                type="audio/mpeg"
              />
            </audio>
            <el-button type="text" size="mini" @click="playPause(scope.row)">
              试听
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </ContainerTit>
</template>

<script>
  import { NoticeSetting, NoticeSettingSet } from "@/api/System";
  import { mapActions } from "vuex";
  import neworder from "@/assets/mp3/neworder.mp3";
  import outStock from "@/assets/mp3/out_stock.mp3";
  export default {
    name: "VoiceSet",
    data() {
      return {
        audioSetData: {},
        loading: false,
        neworder: neworder,
        outStock: outStock,
        audioSet: [
          {
            name: "新订单",
            type: 1,
            voice_radio: 1,
            voice_type: 1,
          },
          {
            name: "出库单",
            type: 2,
            voice_radio: 1,
            voice_type: 1,
          },
        ],
        voice_type_list: [
          {
            value: 1,
            label: "经典女生版",
          },
        ],
      };
    },
    async created() {
      this.NoticeSetting();
    },
    activated() {
      if (this.$_isInit()) return;
      this.NoticeSetting();
    },
    methods: {
      ...mapActions({
        changeAudioSet: "MUser/changeAudioSet",
      }),
      // 控制播放
      playPause(row) {
        const audio = document.getElementById("neworder" + row.type);
        if (audio !== null) {
          audio.play();
        }
      },
      //  获取详情
      async NoticeSetting() {
        const { data } = await NoticeSetting();
        this.audioSetData = data;
        this.audioSet = data.content;
        this.changeAudioSet(this.audioSet);
      },
      //  提交
      async setSubmit() {
        this.loading = true;
        const data = await NoticeSettingSet({
          ...this.audioSetData,
          content: this.audioSet,
        });
        this.loading = false;
        this.$message({
          message: "提交成功",
          type: "success",
        });
        this.NoticeSetting();
      },
    },
  };
</script>

<style scoped></style>
