<template>
    <div class="fullHeight enterpriseInfo">
        <div class="enterpriseInfoContent">
        <vue-scroll style="height: 800px;width:100%">
        <div class="form_title">
           <!-- 基本信息 -->
           {{$t('message.projectInfo.baseInfo')}}
        </div>
        <el-form
            style="width:100%"
            size="medium"
            :model="form"
            ref="form"
            :rules="rules"
            label-width="160px"
        >
        <!-- 华为短信URL -->
            <el-form-item class="w-33" :label="$t('message.projectInfo.url')" prop="url">
                <el-input v-model="form.url"
                style="width: 280px"
                            :placeholder="$t('message.companyDiagram.PleaseEnter')"></el-input>
            </el-form-item>
            <!-- 通道号 -->
            <el-form-item class="w-33" :label="$t('message.projectInfo.channelNum')" prop="channelNum">
                <el-input v-model="form.channelNum"
                style="width: 280px"
                            :placeholder="$t('message.companyDiagram.PleaseEnter')"></el-input>
            </el-form-item>
            <el-form-item class="w-33" :label="'AppKey'" prop="appKey">
                <el-input v-model="form.appKey"
                style="width: 280px"
                            :placeholder="$t('message.companyDiagram.PleaseEnter')"></el-input>
            </el-form-item>
            <el-form-item class="w-33" :label="'AppSecret'" prop="appSecret">
                <el-input v-model="form.appSecret"
                style="width: 280px"
                            :placeholder="$t('message.companyDiagram.PleaseEnter')"></el-input>
            </el-form-item>
            <!-- 消息提示音配置 -->
            <el-form-item class="w-33" :label="$t('message.projectInfo.messageTipConfig')" >
              <!-- 请选择报警类型 -->
              <div v-for="(item,index) in MP4FileList" :key="index" class="personItem2">
                  <el-select v-model="item.type" :placeholder="$t('message.projectInfo.chooseAlarmType')">
                   
                    <el-option
                      v-for="(item,index) in options2"
                      :key="index"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                  
                  <div class="file-box" v-if="item.fileUrl">
                    <audio controls>
                      <source :src="$store.state.FILEURL+item.fileUrl" type="audio/mpeg">
                    </audio>
                    <div class="close-btn" @click="handleDelete(item)">
                        <i class="el-icon-error"></i>
                    </div>
                  </div>
                  <el-upload
                    v-else
                    :action="$store.state.UPLOADURL"
                    name="files"
                    :limit="1"
                    :show-file-list="false"
                    :on-success="(res,file)=>handleFileSuccess(res,file,item)"
                    :file-list="item.fileList"
                    >
                    <el-button slot="trigger" size="small" type="primary">
                      <!-- 选取文件 -->
                      {{$t('message.projectInfo.chooseFile')}}
                    </el-button>
                  </el-upload>
                  <el-radio-group class="radio-wrap" v-model="item.playType">
                    <el-radio :label="1">
                      <!-- 播放一次 -->
                      {{$t('message.projectInfo.playOne')}}
                    </el-radio>
                    <el-radio :label="2">
                      <!-- 循环播放 -->
                      {{$t('message.projectInfo.loopPlay')}}
                    </el-radio>
                  </el-radio-group>
                <!-- <el-input v-model="item.name" :placeholder="'请输入姓名'" class="name"></el-input> -->
                  <el-button plain type="primary" size="small" style="margin: 0 10px" @click="saveFile(item)">
                    <!-- 保存 -->
                    {{$t('message.projectInfo.save')}}
                  </el-button>
                  <i class="redText el-icon-remove" style="margin-left: 10px" @click="addMp4Item(false,index)"></i>
              </div>

              <el-button plain type="primary" size="mini" style="margin: 10px 0" @click="addMp4Item(true)">
                <!-- 新增 -->
                {{$t('message.projectInfo.add')}}
              </el-button>
          
            </el-form-item>
            <div class="form_title">
              <!-- 扬尘推送配置 -->
              {{$t('message.projectInfo.RaiseDustConfig')}}
            </div>
            <!-- 是否开启发送短信 -->
            <el-form-item class="w-33" :label="$t('message.projectInfo.isOpenSendMessage')">
               <el-radio-group @change="(val)=>changeRadio(val,1)" v-model="form.openraise">
                  <el-radio :label="2"><!-- 是 -->{{$t('message.projectInfo.is')}}</el-radio>
                  <el-radio :label="1"><!-- 否 -->{{$t('message.projectInfo.isNot')}}</el-radio>
                </el-radio-group>
            </el-form-item>
            <div v-if="form.openraise == 2">
              <!-- 短信推送模板ID -->
            <el-form-item class="w-33" :label="$t('message.projectInfo.raiseTemplateId')" prop="raiseTemplateId">
                <el-input v-model="form.raiseTemplateId"
                style="width: 280px"
                            :placeholder="$t('message.companyDiagram.PleaseEnter')"></el-input>
            </el-form-item>
            <!-- 短信推送模板内容 -->
            <el-form-item class="w-33" :label="$t('message.projectInfo.raiseTemplateContent')" prop="raiseTemplateContent">
                <el-input v-model="form.raiseTemplateContent"
                style="width: 280px"
                            :placeholder="$t('message.companyDiagram.PleaseEnter')"></el-input>
            </el-form-item>
            <!-- 注意事项： -->
            <el-form-item :label="$t('message.projectInfo.attentionMatter')+':'">
              <div style="margin-bottom: 10px;font-size: 14px;">
                <!-- 短信推送模板只支持两个变量第一个变量是设备名称第二个变量是报警时间。时间格式必须为“其他”固定格式的文本。 -->
                 {{$t('message.projectInfo.attentionMatterMessage')+'。'}}                
              </div>
            </el-form-item>
            <!-- 短信推送人 -->
            <el-form-item :label="$t('message.projectInfo.messagePushPeople')" >
              <div v-for="(item,index) in form.raisePeopleList" :key="index" class="personItem">
                                <el-input v-model="item.phone" :placeholder="$t('message.projectInfo.placeholder')+$t('message.projectInfo.phoneNo')" class="phone"></el-input>
                                <el-input v-model="item.name" :placeholder="$t('message.projectInfo.placeholder')+$t('message.projectInfo.name')" class="name"></el-input>
                                <i class="redText el-icon-remove" style="margin-left: 10px" @click="operateAddPerson(1,false,index)"></i>
              </div>
              <el-button plain type="primary" size="mini" style="margin: 10px 0" @click="operateAddPerson(1,true)">
                <!-- 新增人员 -->
                {{$t('message.projectInfo.addPeople')}}
              </el-button>
          
            </el-form-item>
            </div>


            <div class="form_title">
              <!-- 陌生车辆推送配置 -->
              {{$t('message.projectInfo.strangeCarsPreventConfig')}}
            </div>
            <el-form-item class="w-33" :label="$t('message.projectInfo.isOpenSendMessage')">
               <el-radio-group @change="(val)=>changeRadio(val,2)" v-model="form.openstrangeCars">
                  <el-radio :label="2"><!-- 是 -->{{$t('message.projectInfo.is')}}</el-radio>
                  <el-radio :label="1"><!-- 否 -->{{$t('message.projectInfo.isNot')}}</el-radio>
                </el-radio-group>
            </el-form-item>
            <div v-if="form.openstrangeCars == 2">
            <el-form-item class="w-33" :label="$t('message.projectInfo.raiseTemplateId')">
                <el-input v-model="form.strangeCarsTemplateId"
                style="width: 280px"
                            :placeholder="$t('message.companyDiagram.PleaseEnter')"></el-input>
            </el-form-item>
            <el-form-item class="w-33" :label="$t('message.projectInfo.raiseTemplateContent')">
                <el-input v-model="form.strangeCarsTemplateContent"
                style="width: 280px"
                            :placeholder="$t('message.companyDiagram.PleaseEnter')"></el-input>
            </el-form-item>
            <el-form-item :label="$t('message.projectInfo.attentionMatter')">
              <div style="margin-bottom: 10px;font-size: 14px;">
                <!-- 短信推送模板只支持两个变量第一个变量是车牌号第二个变量是进场时间。时间格式必须为“其他”固定格式的文本。 -->
                {{$t('message.projectInfo.attentionMatterMessage2')}}
              </div>
            </el-form-item>
            <el-form-item :label="$t('message.projectInfo.messagePushPeople')" >
              <div v-for="(item,index) in form.strangeCarsPeopleList" :key="index" class="personItem">
                                <el-input v-model="item.phone" :placeholder="$t('message.projectInfo.placeholder')+$t('message.projectInfo.phoneNo')" class="phone"></el-input>
                                <el-input v-model="item.name" :placeholder="$t('message.projectInfo.placeholder')+$t('message.projectInfo.name')" class="name"></el-input>
                                <i class="redText el-icon-remove" style="margin-left: 10px" @click="operateAddPerson(2,false,index)"></i>
              </div>
              <el-button plain type="primary" size="mini" style="margin: 10px 0" @click="operateAddPerson(2,true)">
                <!-- 新增人员 -->
              {{$t('message.projectInfo.addPeople')}}
              </el-button>
          
            </el-form-item>
            </div>
            <div class="form_title">
              <!-- 红黄码车辆推送配置 -->
              {{$t('message.projectInfo.redAndYellowCodeVehiclePushConfiguration')}}
            </div>
            <el-form-item class="w-33" :label="$t('message.projectInfo.isOpenSendMessage')" >
               <el-radio-group @change="(val)=>changeRadio(val,3)" v-model="form.openryCars">
                  <el-radio :label="2"><!-- 是 -->{{$t('message.projectInfo.is')}}</el-radio>
                  <el-radio :label="1"><!-- 否 -->{{$t('message.projectInfo.isNot')}}</el-radio>
                </el-radio-group>
            </el-form-item>
            <div v-if="form.openryCars == 2">
            <el-form-item class="w-33" :label="$t('message.projectInfo.raiseTemplateId')" >
                <el-input v-model="form.ryCarsTemplateId"
                style="width: 280px"
                            :placeholder="$t('message.companyDiagram.PleaseEnter')"></el-input>
            </el-form-item>
            <el-form-item class="w-33" :label="$t('message.projectInfo.raiseTemplateContent')" >
                <el-input v-model="form.ryCarsTemplateContent"
                style="width: 280px"
                            :placeholder="$t('message.companyDiagram.PleaseEnter')"></el-input>
            </el-form-item>
            <el-form-item :label="$t('message.projectInfo.attentionMatter')">
              <div style="margin-bottom: 10px;font-size: 14px;">
                <!-- 短信推送模板只支持三个变量第一个变量是车牌号第三个变量是姓名第三个变量是健康码状态。 -->
                {{$t('message.projectInfo.attentionMatterMessage3')+'。'}}
              </div>
            </el-form-item>
            <el-form-item :label="$t('message.projectInfo.messagePushPeople')" >
              <div v-for="(item,index) in form.ryCarsPeopleList" :key="index" class="personItem">
                                <el-input v-model="item.phone" :placeholder="$t('message.projectInfo.placeholder')+$t('message.projectInfo.phoneNo')" class="phone"></el-input>
                                <el-input v-model="item.name" :placeholder="$t('message.projectInfo.placeholder')+$t('message.projectInfo.name')" class="name"></el-input>
                                <i class="redText el-icon-remove" style="margin-left: 10px" @click="operateAddPerson(3,false,index)"></i>
              </div>
              <el-button plain type="primary" size="mini" style="margin: 10px 0" @click="operateAddPerson(3,true)">
              {{$t('message.projectInfo.addPeople')}}
                <!-- 新增人员 -->
              </el-button>
            </el-form-item>
            </div>

            <div class="form_title">
              <!-- 红黄码人员推送配置 -->
              {{$t('message.projectInfo.redAndYellowCodePeoplePushConfiguration')}}
            </div>
            <el-form-item class="w-33" :label="$t('message.projectInfo.isOpenSendMessage')" >
               <el-radio-group @change="(val)=>changeRadio(val,4)" v-model="form.openryPeople">
                  <el-radio :label="2"><!-- 是 -->{{$t('message.projectInfo.is')}}</el-radio>
                  <el-radio :label="1"><!-- 否 -->{{$t('message.projectInfo.isNot')}}</el-radio>
                </el-radio-group>
            </el-form-item>
            <div v-if="form.openryPeople == 2">
            <el-form-item class="w-33" :label="$t('message.projectInfo.raiseTemplateId')" >
                <el-input v-model="form.ryPeopleTemplateId"
                style="width: 280px"
                            :placeholder="$t('message.companyDiagram.PleaseEnter')"></el-input>
            </el-form-item>
            <el-form-item class="w-33" :label="$t('message.projectInfo.raiseTemplateContent')" >
                <el-input v-model="form.ryPeopleTemplateContent"
                style="width: 280px"
                            :placeholder="$t('message.companyDiagram.PleaseEnter')"></el-input>
            </el-form-item>
            <el-form-item :label="$t('message.projectInfo.attentionMatter')">
              <div style="margin-bottom: 10px;font-size: 14px;">
                <!-- 短信推送模板只支持两个变量第一个变量是姓名第二个变量是健康码状态。 -->
                 {{$t('message.projectInfo.attentionMatterMessage4')+'。'}}
                
              </div>
            </el-form-item>
            <el-form-item :label="$t('message.projectInfo.messagePushPeople')" >
              <div v-for="(item,index) in form.ryPeoplePeopleList" :key="index" class="personItem">
                                <el-input v-model="item.phone" :placeholder="$t('message.projectInfo.placeholder')+$t('message.projectInfo.phoneNo')" class="phone"></el-input>
                                <el-input v-model="item.name" :placeholder="$t('message.projectInfo.placeholder')+$t('message.projectInfo.name')" class="name"></el-input>
                                <i class="redText el-icon-remove" style="margin-left: 10px" @click="operateAddPerson(4,false,index)"></i>
              </div>
              <el-button plain type="primary" size="mini" style="margin: 10px 0" @click="operateAddPerson(4,true)">
              {{$t('message.projectInfo.addPeople')}}
                <!-- 新增人员 -->
              </el-button>
          
            </el-form-item>
            </div>
        </el-form>
       
          <el-button type="primary" style="width: 200px;display:block;margin: 50px auto" @click="submitData">
          {{$t('message.projectInfo.save')}}
            <!-- 保存 -->
          </el-button>
        </vue-scroll>

        </div>
        
    </div>
</template>
<script>
import {editSmsConfigApi,
  selectSmsPlatformConfigApi,
  addNoticeRemindSoundApi,
  editNoticeRemindSoundApi,
  selectNoticeRemindSoundApi,
  deleteNoticeRemindSoundApi
} from "@/assets/js/api/configManage"
export default {
    data(){
        return{
            MP4FileList:[
              {
                type: '',
                fileUrl: '',
                fileName: '',
                fileList: [],
                playType: 1
              }
            ],
            options:[],
            form:{
              id: '',
              url: '',
              channelNum: '',
              appKey: '',
              appSecret: '',
              raiseId: '',
              openraise: 1,
              raiseTemplateId: '',
              raiseTemplateContent: '',
              raisePeopleList: [{
                phone: '',
                name: ''
              }],
              strangeCarsId: '',
              openstrangeCars: 1,
              strangeCarsTemplateId:'',
              strangeCarsTemplateContent: "",
              strangeCarsPeopleList: [{
                phone: '',
                name: ''
              }],
              ryCarsId: '',
              openryCars: 1,
              ryCarsTemplateId:'',
              ryCarsTemplateContent: "",
              ryCarsPeopleList: [{
                phone: '',
                name: ''
              }],
              ryPeopleId: '',
              openryPeople: 1,
              ryPeopleTemplateId:'',
              ryPeopleTemplateContent: "",
              ryPeoplePeopleList: [{
                phone: '',
                name: ''
              }],
            },
            templateArr:["raise","strangeCars","ryCars","ryPeople"],
            rules: {
                
            },
            options2:this.$t('message.projectInfo.sysConfigOptions'),
        }
    },
    created(){
      this.selectNoticeRemindSound()
    },
    mounted(){
        this.selectSmsPlatformConfig()
    },
    methods:{
      selectNoticeRemindSound(){
        selectNoticeRemindSoundApi({projectSn: this.$store.state.projectSn}).then(res=>{
          console.log(res)
          if(res.code == 200){
            this.MP4FileList = res.result
            window.localStorage.setItem('soundList',JSON.parse(res.result))
          }
        })
      },
      saveFile(val){
        console.log(val)
        if(!val.type){
          this.$message.error(this.$t('message.projectInfo.chooseAlarmType')+'!')
          return
        }
        if(!val.fileUrl){
          this.$message.error(this.$t('message.projectInfo.pleaseChooseFile')+'!')
          return
        }
        let data = val
        data.projectSn = this.$store.state.projectSn
        if(val.id){
          editNoticeRemindSoundApi(data).then(res=>{
            console.log(res)
            if(res.code == 200){
              this.$message.success(this.$t('message.projectInfo.saveSuccess')+'!')
            }
            this.selectNoticeRemindSound()
          })
        } else {
          addNoticeRemindSoundApi(data).then(res=>{
            console.log(res)
            if(res.code == 200){
              this.$message.success(this.$t('message.projectInfo.saveSuccess')+'!')
              this.selectNoticeRemindSound()
            }
          })
        }
        
      },
      handleFileSuccess(res,file,val){
        console.log(res,file, val)
        if(res.status == "SUCCESS"){
          val.fileUrl = res.data[0].imageUrl
          val.fileName = file.name
          val.fileList.push({
            name: file.name,
            url: res.data[0].imageUrl
          })
          // this.$forceUpdate()
        }
      },
      handleDelete(val){
        val.fileUrl = ""
        val.fileName = ""
        val.fileList = []
      },
      addMp4Item(type, index){
        if(type){
          this.MP4FileList.push({
                type: '',
                fileUrl: '',
                fileName: '',
                fileList: [],
                playType: 1
          })
        } else {
          if(this.MP4FileList[index].id){
            this.$confirm(this.$t('message.projectInfo.confirmTipText')+'?', this.$t('message.projectInfo.tip'), {
              confirmButtonText:this.$t('message.energyManage.material.confirm'),
              cancelButtonText: this.$t('message.energyManage.material.cancel'),
              type: 'warning'
            }).then(() => {
              deleteNoticeRemindSoundApi({id: this.MP4FileList[index].id}).then(res=>{
                console.log(res)
                if(res.code == 200){
                  this.$message.success(this.$t('message.energyManage.material.deleteSuccess'))
                  this.selectNoticeRemindSound()
                }
              })
            }).catch(() => {
              this.$message({
                type: 'info',
                message: this.$t('message.energyManage.material.cancelDelete')
              });          
            });
          } else{
            this.MP4FileList.splice(index,1)
            // this.$message.success('删除成功')
          }
        }
      },
      selectSmsPlatformConfig(){
        selectSmsPlatformConfigApi({projectSn: this.$store.state.projectSn}).then(res=>{
          console.log(res.result)
          if(res.code = 200){
            this.form.id = res.result.id
            this.form.appKey = res.result.appKey
            this.form.url = res.result.url
            this.form.appSecret = res.result.appSecret
            this.form.channelNum = res.result.signChannel
            res.result.templateList.forEach(item=>{
              console.log(this.templateArr[item.smsTemplateType - 1])
              this.form[this.templateArr[item.smsTemplateType - 1]+'Id'] = item.id
              this.form['open'+this.templateArr[item.smsTemplateType - 1]] = item.smsIsOpen
              this.form[this.templateArr[item.smsTemplateType - 1]+'PeopleList'] = item.receiverList
              this.form[this.templateArr[item.smsTemplateType - 1]+'TemplateContent'] = item.smsTemplateContent
              this.form[this.templateArr[item.smsTemplateType - 1]+'TemplateId'] = item.smsTemplateId
            })
            console.log(this.form)
          }
        })
      },
      // 选择是否开启
      changeRadio(val,type){
        console.log(val,type)
        if(type == 1 && val == 2){
            this.form.raiseTemplateId=''
            this.form.raiseTemplateContent= ''
            this.form.raisePeopleList= [{
                phone: '',
                name: ''
              }]
        } else if(type == 2 && val == 2){
            this.form.strangeCarsTemplateId=''
            this.form.strangeCarsTemplateContent= ''
            this.form.strangeCarsPeopleList= [{
                phone: '',
                name: ''
              }]
        } else if(type == 3 && val == 2){
            this.form.ryCarsTemplateId=''
            this.form.ryCarsTemplateContent= ''
            this.form.ryCarsPeopleList= [{
                phone: '',
                name: ''
              }]
        } else if(type == 4 && val == 2){
            this.form.ryPeopleTemplateId=''
            this.form.ryPeopleTemplateContent= ''
            this.form.ryPeoplePeopleList= [{
                phone: '',
                name: ''
              }]
        }
      },
      //操作人员的添加和删除
      operateAddPerson(hour,isAdd,index){
                let json = {
                  name:'',
                  phone:''
                }
                if(isAdd){
                    switch (hour) {
                        case 1:
                            this.form.raisePeopleList.push(json)
                            break;
                        case 2:
                            this.form.strangeCarsPeopleList.push(json)
                            break;
                        case 3:
                            this.form.ryCarsPeopleList.push(json)
                            break;
                        case 4:
                            this.form.ryPeoplePeopleList.push(json)
                            break;
                    }
                }else{
                    switch (hour) {
                        case 1:
                            this.form.raisePeopleList.splice(index,1)
                            break;
                        case 2:
                            this.form.strangeCarsPeopleList.splice(index,1)
                            break;
                        case 3:
                            this.form.ryCarsPeopleList.splice(index,1)
                            break;
                        case 4:
                            this.form.ryPeoplePeopleList.splice(index,1)
                            break;
                    }
                }
                
            },
        getDetail(){
            
        },
        submitData(){
          let data = {
            id: this.form.id,
            appKey: this.form.appKey,
            url: this.form.url,
            appSecret: this.form.appSecret,
            projectSn: this.$store.state.projectSn,
            signChannel: this.form.channelNum
          }
          let arr = []
          for(let i = 0;i<this.templateArr.length;i++){
            arr.push({
              id: this.form[this.templateArr[i]+'Id'],
              smsIsOpen: this.form['open'+this.templateArr[i]],
              receiverList: this.form[this.templateArr[i]+'PeopleList'],
              smsTemplateContent:this.form[this.templateArr[i]+'TemplateContent'],
              smsTemplateId: this.form[this.templateArr[i]+'TemplateId'],
              smsTemplateType: i+1
            })
          }
          data.templateList = arr
          console.log(data,123)
          editSmsConfigApi(data).then(res=>{
            if(res.code == 200){
              this.$message.success(this.$t('message.projectInfo.saveSuccess'))
            }
          })
        },
    }
}
</script>
<style lang="less" scoped>
.enterpriseInfo{
    background-color: white;
}
.enterpriseInfoContent{
  padding: 20px 0;
    // padding: 20px 50px;
    // width: 50%;
    width: 100%;
    // max-width: 430px;
}
.el-upload__tip{
    line-height: 20px;
}
.form_title{
  padding-left: 50px;
  font-weight: bold;
  margin-bottom: 20px;
  position: relative;
}
.form_title:before{
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 40px;
  transform: translateY(-50%);
  width: 3px;
  height: 16px;
  background: #409EFF;
}

  .w-33{
    display: inline-block;
    width: 50%;
    margin-left: 20px;
  }
.personItem{
        margin-top: 10px;
        display: inline-block;
        margin-right: 40px;
        .phone{
            width: 150px!important;
            margin-right: 10px;
        }
        .name{
            width: 100px!important;
        }
    }
  .personItem2{
    display: flex;
    align-items: center;
    margin-bottom:  20px;
    .file-box{
      margin-right: 20px;
      position: relative;
      display: flex;
      align-items: center;
      .close-btn{
        position: absolute;
        top: -10px;
        right: 0;
        cursor: pointer;
        font-size: 18px;
        color: #F56C6C;
      }
    }
    /deep/.el-select{
      margin-right: 20px;
    }
  }
  .radio-wrap{
    display: flex;
    margin-right: 10px;
    margin-left: 10px;
  }
</style>