<template>
  <el-dialog title="案件列表" :visible="true" width="500px" append-to-body :close-on-click-modal="false" @close="handleClose" >
    <div class="dialog-content pl-16 pt-8 pr-16 pb-8">
      <el-scrollbar :style="'height:400px;'" v-if="tableData.length > 0">
        <div class="p-8 mt-8 bottom-case-list border-radius-8" v-for="(item, index) in tableData" :key="index">
          <div class="flex-row justify-content-between align-items-center bor-bottom-E5E6EB pr-16">
            <div v-for="(itemS,indexS) in item.debtorEntityList.filter(itemX => itemX.role == 'DEBTOR' && itemX.type == '本人')" :key="indexS">
              {{indexS === 0 ?'':','}}{{itemS.name}}
            </div>
            <el-button type="text" @click="handleRelevance(item)">进入案件</el-button>
          </div>
          <div class="flex-row p-8">
            <div class="width-50 f12">
              <div class="color-86909C">案件号</div>
              <div>{{item.caseNo}} </div>
            </div>
            <div class="width-25 f12">
              <div class="color-86909C">调解员</div>
              <div>{{item.mediatorName}}</div>
            </div>
            <div class="width-25 f12">
              <div class="color-86909C">逾期金额：</div>
              <div>{{item.moneyAmount}}</div>
            </div>
          </div>
        </div>
      </el-scrollbar>
      <div v-else class="text-center mt-8 f18 p-16">
        该来电未匹配到相关案件！
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <!-- <el-button @click="handleMarkers">标记为不明来电</el-button> -->
      <el-button @click="handleClose">关闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
import voiceCall from "@/services/voiceCall";
export default {
  name: "missedCallCaseDialog",
  props: {
    eventDialog: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },
  data() {
    return{
      tableData: []
    }
  },
  mounted() {
    this.getCaseList();
  },
  methods: {
    handleClose() {
      this.$emit('update:eventDialog', null)
    },
    getCaseList() {
      voiceCall.caseMatchList({phone: this.eventDialog.phone}).then(res => {
        if (!res.code) {
          this.tableData = res;
        }
      })
      this.handleMarkers()
    },
    // 标记来电
    async handleMarkers() {
      try {
        let jsonData = {
          traceId: this.eventDialog.traceId,
          phone: this.eventDialog.phone,
        }
        voiceCall.markUnknow(jsonData).then(res => {
          // this.$message.success('标记成功!')
          // this.handleClose()
          // this.$emit('handleSubmit', null)
        })
      } catch (error) {
        console.error(`${error}`)
      }
    },
    // 关联案件-详情
    handleRelevance(item) {
      this.$router.push(`/mediation-page?sourcePage=sourcePage&caseId=${item.id}`);
    }
  }
}
</script>

<style scoped lang="scss">
.bottom-case-list{
  background-color: #F2F3F5;
  .width-50{
    width: 50%;
  }
  .width-25{
    width: 25%;
  }
}
</style>