<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" size="small" />
            <!-- <el-input :value="caseForm.sourceType" size="small" /> -->
          </el-form-item>
        </el-col>
        <el-col :span="6" v-if="caseForm.eorcName == '精细化管理事件'">
          <el-form-item label="精细化平台事件编号">
            <!-- <el-input :value="caseForm.sourceNumber" size="small" /> -->
            <!-- <el-input :value="caseForm.createDept" size="small" /> -->
            <el-input :value="caseForm.caseNumber" size="small" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="事件分类">
            <el-input :value="caseForm.caseDetailTypeName" size="small" />
            <!--<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.limitedTime" size="small" />
          </el-form-item>
        </el-col>
        <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-form-item label="事件状态">
            <el-input :value="caseForm.caseLevelName" size="small" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-collapse v-model="activeName" accordion>
        <el-collapse-item name="1">
          <template slot="title">
            <span class="collapse-title">更多信息</span>
          </template>
          <el-row :gutter="20">
            <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-col
              :span="6"
              v-if="
                caseForm.eorcName == '精细化管理事件' &&
                 caseForm.caseStateName == '协同申请' || caseForm.caseStateName == '处理/回访完成' 
              "
            >
              <el-form-item label="统一编码">
                <el-input :value="caseForm.externalEventId" size="small" />
              </el-form-item>
            </el-col>
            <!-- 运维事件有流程的显示统一编码 -->
            <el-col :span="6" v-if="caseForm.eorcName == '运维事件' && process">
              <el-form-item label="统一编码">
                <el-input :value="caseForm.externalEventId" 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-popover
              v-if="caseForm.caseState === 5"
              placement="top"
              width="180"
              v-model="popoverVisible"
            >
              <div style="text-align: center; margin: 0">
                <el-button size="mini" @click="revisit('')">本地号码</el-button>
                <el-button type="primary" size="mini" @click="revisit('0')"
                  >外地号码</el-button
                >
              </div>
              <el-button slot="reference" type="text">回访拨号</el-button>
            </el-popover>
          </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 v-show="this.caseImage.length > 0">
            <el-form-item label="事件图片">
              <!-- 图片展示 -->
              <div class="image-container">
                <el-image
                  v-for="img in caseImage"
                  :key="img"
                  :src="img"
                  fit="fill"
                  class="case-image"
                  :preview-src-list="caseImage"
                />
              </div>
            </el-form-item>
          </el-row>
        </el-collapse-item>
      </el-collapse>
      <!--<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 {};
      },
    },
    process: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      activeName: 1,
      sound: {
        url: "",
        controlList: "noDownload noSpeed onlyOnePlaying",
      },
      popoverVisible: false, // 选择本地外地呼叫的弹窗
      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("-");
    },
    caseImage() {
      if (this.caseForm.caseImage) {
        const base_url = process.env.BASE_API + "/static/";
        const image_ori = this.caseForm.caseImage.split(";");
        const imageList = image_ori.map((item) => base_url + item);
        return imageList;
      } else {
        return [];
      }
    },
  },
  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(middleString) {
      // middleString为空或0，分别表示本地或外地
      const tel = "9" + middleString + this.caseForm.reporterPhone;
      this.$store.dispatch("dial", tel);
      this.popoverVisible = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.image-container {
  display: flex;
  justify-content: flex-start;
  .case-image {
    width: 100px;
    height: 100px;
    margin-right: 10px;
  }
}
.collapse-title {
  font-size: 14px;
  color: #606266;
  font-weight: 800;
  position: absolute;
  right: 80px;
  margin-top: -85px;
}
/deep/.el-collapse-item__arrow {
  margin-top: -85px;
}
/deep/.el-collapse {
  border: 0;
}
/deep/.el-collapse-item__header {
  justify-content: end;
  border: 0;
  height: 0;
}
</style>