<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">
      <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>
    </div>
    <span slot="footer" class="dialog-footer">
      <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;
        }
      })
    },
    // 关联案件-详情
    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>