<template>
  <div class='onlyReturnMoneyOrder'>
    <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>
                        <Upload
                          v-if='!isEditPage'
                          ref="upload"
                          type="drag"
                          accept='.mp3'
                          name='files'
                          action="/p/cs/batchUpload"
                          :on-success='changeSuccessAttch'>
                          <div>
                              <span style='color: var(--primary-color)'>点击上传</span>
                              <Icon type="ios-cloud-upload" size="26" style="color: var(--primary-color)"></Icon>
                          </div>
                        </Upload>
                        <span v-else @click='clickSound'><Icon type="md-arrow-dropright-circle" style='font-size: 26px;'/></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: '', //字段值
                clearable:true,
                tableName:'',//表名
                currentIndex:0,//当前页码
                dataEmptyMessage: '数据加载中...', // 无数据的提示
                columns:['name','value'],// 展现的组
                AutoData:[],//模糊搜索
                defaultSelected:[],//默认数据
                shopData:{},
                standard:true,//标准输入框长度
              },
              {
                SKEY: 'attch_url',
                title: '音效文件',
                VALUE: '',
                defaultvalue: '',
                company: '',
                tips: '',
                disabled:false,
                standard:true,//标准输入框长度
                flag: true, // 控制必填校验样式展示
                explain: true,
                explainContent: '仅支持MP3文件',
              },
            ]
          },
        ],
        attchUrlList: [], //音效文件上传列表
        isEditPage: false, //是否是编辑页面
        pageMsgId: '',
        urlsacnOk: '',
      }
    },
    created(){
      this.pageMsgId = this.$route.params.customizedModuleId
      if(this.pageMsgId !== 'New'){ // 编辑页面
        this.isEditPage = true;
        this.getData(); // 获取数据
      }else {
        this.isEditPage = false;
      }
    },
    methods: {
      getData() {
        let virtual={
            table: 'T_OMSSOUND',
            objid: this.pageMsgId,
        }
        network.post('/p/cs/object/query',virtual).then((res) => {
            this.tabList[0].list[0].VALUE = res.data.SOUND_NAME
            if(res.data.ISDEFAULT == '0'){
              this.tabList[0].list[0].disabled = true;
            }
            this.attchUrlList = [
              {
                Name: res.data.FILE_NAME,
                Url: res.data.URL
              }
            ]
            this.urlsacnOk = res.data.URL;
        })
      },
      // 关闭当前页面
      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_OMSSOUND',
            tableId:'11545',
            back:true
          });
        },0)
      },
      //上传音效文件成功
      changeSuccessAttch(e) {
        this.attchUrlList = e.data;
      },
      clickSound(){ // 编辑时点击播放音效
        let audio = '';
        audio = document.getElementById('audiosacn');
        // 从头播放
        audio.currentTime = 0;
        audio.load()
        audio.play();
      },
      // 保存音效
      saveAll(){
        if(this.tabList[0].list[0].VALUE == ''){
          return this.$Message.error('音效名称为空，不能保存');
        }
        if(this.attchUrlList.length == 0 || (!this.attchUrlList[0].Name && !this.attchUrlList[0].Url)){
          return this.$Message.error('音效文件为空，不能保存');
        }
        let virtual={
          table: "T_OMSSOUND",
          objId: -1,
          fixedData:{
            T_OMSSOUND: {
              SOUND_NAME: this.tabList[0].list[0].VALUE,
              FILE_NAME: this.attchUrlList[0].Name,
              URL: this.attchUrlList[0].Url,
            }, 
          }
        }
        if(this.pageMsgId !== 'New'){
          virtual.objId = this.pageMsgId
        }
        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_OMSSOUND',
                tableId:'11545',
                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;
    }
}
.onlyReturnMoneyOrder .ark-upload-drag {
  border: none;
}
.ivu-upload-list {
  display: none !important;
}
// .ark-upload {
//   display: inline-block;
// }

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

