<template>
  <div class='editOmsSoundSet'>
    <div class="quickOperation">
      快捷操作：
      <Button
        type="fcdefault"
        style="margin-right:8px"
        @click="saveAll"
      >
        保存
      </Button>
      <Button type="fcdefault"
      @click="closePage"
      >
        返回
      </Button>
    </div>
    <div class="content">
      <div
        v-for="(item,tabId) in tabList"
        :key="tabId"
        class="block"
      >
        <foldPanel
          v-model="item.blockShow"
          :title="item.tabtext"
          :explain="item.explainText"
        >
          <div
            slot="content"
            class="block"
          >
            <div class="item">
              <Row>
              <div
                v-for="(i,cindex) in tabList[tabId].list"
                :key="cindex"
                class="form"
              >
                <Col span="8" v-if="i.standard" >
                    <div
                      v-if="i.title"
                      :class="{'title':true,'order-setting-input-error':i.required}"
                    >{{ i.title }}
                     <Tooltip
                      max-width="200"
                      :content="i.explainContent"
                      placement="bottom"
                    >
                      <img
                      v-if="i.explain"
                      class="img-framelanflag"
                      src="../../assets/icon/help.png"
                      >
                    </Tooltip>
                    </div>
                    <div v-if='i.SKEY=="attch_url"' style='display: flex;align-items: center;'>
                        <!-- <span class='fileName' v-for='(item,index) in attchUrlList' :key='index'>{{item.Name}}</span> -->
                        <Select v-model="i.VALUE" class="input_box" @on-change="checkInput(i)">
                            <Option v-for="d in i.optionList" :value="d.value" :key="d.value">{{ d.label }}</Option>
                        </Select>
                        <span @click='clickSound'><Icon type="md-arrow-dropright-circle" style='font-size: 26px;margin-left:10px;'/></span>
                      <!-- <span style='display: inline-block;color:#999;margin-top:10px;'>仅支持MP3文件</span> -->
                    </div>
                  <Input
                    v-else-if="
                    (i.SKEY=='sound_name')
                    "
                    class="input_box"
                    v-model="i.VALUE"
                    placeholder="请输入音效名称"
                    :regx='i.regx'
                    :disabled="i.disabled"
                  />
                </Col>
              </div>
              </Row>
            </div>
          </div>
        </foldpanel>
      </div>
    </div>
    <audio
      id="audiosacn"
      preload="auto"
    >
      <source :src="urlsacnOk">
    </audio>
  </div>
</template>
<script>  
  // import R3 from '../../../static/r3/r3.publish/r3.min';
  const R3 = window.R3;
  const { network, urlSearchParams, store } = R3;
  export default {
    data() {
      return {
        tabList: [
          {
            tabId: '0',
            tabtext: '音效设置',
            blockShow: true,
            list: [
              {
                ID: '',
                SKEY:'sound_name', //字段
                title:'提示类型', //字段名称
                VALUE: '', //字段值
                company: '',
                tips: '',
                disabled:true,
                standard:true,//标准输入框长度
                flag: true, // 控制必填校验样式展示
                required: false, // 是否为必填项
              },
              {
                ID: 'T_OMSSOUND',
                SKEY: 'attch_url',
                title: '提示声音',
                VALUE: '',
                defaultvalue: '',
                company: '',
                tips: '',
                disabled:false,
                flag: false, // 控制必填校验样式展示
                required: false, // 是否为必填项
                standard:true,//标准输入框长度
                optionList:[]
              },
            ]
          },
        ],
        isEditPage: false, //是否是编辑页面
        pageMsgId: '',
        urlsacnOk: '',
        SOUNDList: [], // 获取到的音效列表
      }
    },
    created(){
      this.getQuery('T_OMSSOUND');// 初始查询音效表列表
      this.pageMsgId = this.$route.params.customizedModuleId
      this.getData(); // 获取数据
    },
    methods: {
      getData() {
        let virtual={
            table: 'T_OMSSOUNDSET',
            objid: this.pageMsgId,
        }
        network.post('/p/cs/object/query',virtual).then((res) => {
            this.tabList[0].list[0].VALUE = res.data.TYPE_NAME
            this.tabList[0].list[1].VALUE = String(res.data.SOUND_ID)
            this.urlsacnOk = res.data.URL;
        })
      },
      //初始查询标准下拉框数据
      getQuery(tableName,fixed){
        let virtual={
          range: 2000,
          startindex: 0,
          table: tableName,
          fkdrplist: {
            searchcols: ['FILE_NAME', 'ID', 'ISDEFAULT', 'SOUND_NAME', 'URL', 'ISACTIVE']
          },
          isdroplistsearch: true,
        }
        network.post('/p/cs/list/query', virtual).then((res) => {
          this.tabList[0].list.forEach(item=>{
            if(item.ID==tableName){
              if(tableName=='T_OMSSOUND'){
                this.SOUNDList = res.data.rows;
                item.optionList= res.data.rows.map(i=>{
                  return {
                    label:i.SOUND_NAME.val,
                    value:i.ID.val
                  }
                })
              }
            }
          })
          
        })
      },
      checkInput(i){
        this.SOUNDList.forEach(item => {
          if(i.VALUE == item.ID.val){
            this.urlsacnOk = item.URL.val;
          }
        })
        this.clickSound();
      },
      // 关闭当前页面
      closePage(){
        const { fullPath } = this.$route;
        const {
          keepAliveModuleName,tableName
        } = this.$store.state.global.activeTab;
        this.$store.commit('global/tabCloseAppoint', {
          tableName,
          routeFullPath: fullPath,
          keepAliveModuleName,
          stopRouterPush: true,
        });
        // 跳转
        setTimeout(()=>{
          R3.store.commit('global/tabOpen', {
            type: 'S',
            tableName:'T_OMSSOUNDSET',
            tableId:'11544',
            back:true
          });
        },0)
      },
      clickSound(){ // 编辑时点击播放音效
        let audio = '';
        audio = document.getElementById('audiosacn');
        // 从头播放
        audio.currentTime = 0;
        audio.load()
        audio.play();
      },
      // 保存音效
      saveAll(){
        let virtual={
          table: "T_OMSSOUNDSET",
          objId: this.pageMsgId,
          fixedData:{
            T_OMSSOUNDSET: {
              SOUND_ID: this.tabList[0].list[1].VALUE,
              URL: this.urlsacnOk,
            }
          }
        }
        network.post('/p/cs/objectSave',virtual).then(res=>{
          if(res.data.code==0){
            this.$Message.success(res.data.message);
            const { fullPath } = this.$route;
            const {
              keepAliveModuleName,tableName
            } = this.$store.state.global.activeTab;
            this.$store.commit('global/tabCloseAppoint', {
              tableName,
              routeFullPath: fullPath,
              keepAliveModuleName,
              stopRouterPush: true,
            });
            // 跳转
            setTimeout(()=>{
              R3.store.commit('global/tabOpen', {
                type: 'S',
                tableName:'T_OMSSOUNDSET',
                tableId:'11544',
                back:true
              });
            },0)
          }
        })
      }
    }
  };
</script>
<style lang="less">

.quickOperation{
  height: 64px;
  border-bottom: 1px solid #D8D8D8;
  display: flex;
  align-items: center;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
}
.content{
  .block{
    padding-top: 24px;
  }
  .ark-col{
    display: flex;
    align-items: center;
    // justify-content: flex-end;
    margin-bottom: 16px;
    .input_box{
      max-width: 400px;
      min-width: 180px;
    }
    
   .ark-input-wrapper /deep/ textarea{
      resize: none;
      min-height: 36px!important;
    }
    .title{
      min-width: 80px;
      display: flex;
      justify-content: flex-end;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;
      display: flex;
      align-items: center;
      margin-right: 8px;
      img{
        margin-left: 5px;
        width: 16px;
      }
    }
  }
 
}
.refund-content{
    margin:0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;

    .count-part{
        height: 60px;
        margin-bottom: 16px;
        border-bottom: 1px solid #D8D8D8;
        .item{
            display: flex;
            align-items: center;
            .text{
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #333333;
            }
        }
        .img-framelanflag{
            cursor: pointer;
            vertical-align: middle;
            margin-top: -3px;
            margin-left: 5px;
            width: 16px;
        }
        .input-money{
            width: 80px;margin:0 8px
        }
        .plus{
            margin: 0 16px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #979797;
        }
    }
    .total-part{
        display: flex;
        align-items: center;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
    }
}
.editOmsSoundSet .ark-upload-drag {
  border: none;
}
.ivu-upload-list {
  display: none !important;
}
.editOmsSoundSet .content .ark-col .input_box {
  max-width: 300px;
  min-width: 300px;
}
// .ark-upload {
//   display: inline-block;
// }

</style>
<style lang="less" scoped>
  .content /deep/ .ark-select-input[disabled]{
      color: #575757;
  }
  .fileName {
    margin-right: 16px;
  }
</style>

