<template>
  <div class="app-container">
    <el-form ref="form" :model="caseForm" label-width="auto">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="事件编号">
            <el-input :value="caseForm.caseId" size="small"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="来电时间">
            <el-input :value="caseForm.callTime" size="small"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="联系人">
            <el-input :value="caseForm.reporterName" size="small"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="联系电话">
            <el-input :value="caseForm.reporterPhone" size="small"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="事件来源">
            <el-input :value="caseForm.sourceName" size="small"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="事件分类">
            <el-input :value="caseForm.eorcName + '/' + caseForm.caseTypeName" size="small"/>
            <!--<el-input :value="caseForm.eorcName + '/' + caseForm.caseTypeName + '/' + caseForm.caseDetailTypeName" size="small"/>-->
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="紧急程度">
            <el-input :value="caseForm.caseLevelName" size="small"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="限办日期">
            <el-input :value="caseForm.limitedTime" size="small"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="事件地址">
            <!--<el-input :value="caseForm.areaName + '-' + caseForm.streetName + '-' + caseForm.communityName + '-' + caseForm.fieldintro" size="small"/>-->
            <el-input :value="address" size="small"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="事件辖区">
            <el-input :value="caseForm.areaName" size="small"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="典型案例">
            <el-input :value="caseForm.isTypical === '1' ? '是' : '否'" size="small"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="要情">
            <el-input :value="caseForm.isImportant === '1' ? '是' : '否'" size="small"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="当前事件状态">
            <el-input :value="caseForm.stateName" size="small"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="当前处理方式">
            <el-input :value="caseForm.caseStateName" size="small"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="需要回访">
            <el-input :value="caseForm.isReturnVisit === '1' ? '是' : '否'" size="small"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="受理录音">
            <el-input :value="caseForm.sound" size="small"/>
          </el-form-item>
        </el-col>
        <el-button type="text" @click="playSound(caseForm.sound)">播放录音</el-button>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="回访录音">
            <el-input :value="caseForm.satisfactionSound" size="small"/>
          </el-form-item>
        </el-col>
        <el-button type="text" @click="playSound(caseForm.satisfactionSound)">播放录音</el-button>
        <el-button v-if="caseForm.caseState === 5" type="text" @click="revisit">回访拨号</el-button>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="事件标题">
            <el-input :value="caseForm.title" size="small"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="事件内容">
            <el-input :value="caseForm.description" size="small"/>
          </el-form-item>
        </el-col>
      </el-row>
      <!--<el-row>-->
      <!--<el-col :span="24">-->
      <!--<el-form-item label="备注信息">-->
      <!--<el-input :value="caseForm.remarks" size="small"/>-->
      <!--</el-form-item>-->
      <!--</el-col>-->
      <!--</el-row>-->
    </el-form>
    <!--播放音频弹窗-->
    <el-dialog
      :visible.sync="soundShow"
      title="播放录音"
      width="600px"
      append-to-body
      custom-class="sound-dialog"
      @close="closeSound">
      <audio-player ref="adplayer" :the-url="sound.url" :the-control-ist="sound.controlList"/>
    </el-dialog>
  </div>
</template>

<script>
// import { caseDetail } from '@/api/callCase'
import { getSoundName } from '@/api/sound'
import AudioPlayer from '@/components/AudioPlayer/AudioPlayer'

export default {
  name: 'CaseFormProcess',
  components: { AudioPlayer },
  props: {
    id: {
      type: String,
      default: ''
    }, // 事件id（主键id）
    caseForm: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      sound: {
        url: '',
        controlList: 'noDownload noSpeed onlyOnePlaying'
      },
      soundShow: false // 显示音频弹窗
    }
  },
  computed: {
    address() {
      const address_ori = [this.caseForm.areaName, this.caseForm.streetName, this.caseForm.communityName, this.caseForm.fieldintro]
      const address = address_ori.filter(item => item && item.length > 0)
      return address.join('-')
    }
  },
  methods: {
    // 播放录音
    playSound(sound) {
      if (sound) {
        getSoundName(sound).then(res => {
          const recordName = res.data
          if (recordName) {
            this.sound.url = recordName
            this.soundShow = true
          } else {
            this.$message.warning('无录音')
          }
        })
      } else {
        this.$message.warning('无录音')
      }
    },
    // 关闭播放弹窗
    closeSound() {
      this.$refs.adplayer.pausePlay()
    },
    // 拨打回访电话
    revisit() {
      const tel = '9' + this.caseForm.reporterPhone
      this.$store.dispatch('dial', tel)
    }
  }
}
</script>