<template>
  <div style="text-align: center; padding: 10px">
    <table class="tabdept" cellspacing="0" cellpadding="0">
      <tr>
        <th>电话号码:</th>
        <td>{{ rowdata.phone }}</td>
        <th>通话时间:</th>
        <td>{{ rowdata.createTime }}</td>
      </tr>
      <tr>
        <th>呼叫方向:</th>
        <td>{{ rowdata.callType == 1 ? "呼入" : "呼出" }}</td>
        <th>通话时长:</th>
        <td>{{ getTimeLimit(rowdata.answerTime, rowdata.hangupTime) }}秒</td>
      </tr>
      <tr>
        <th>坐席工号:</th>
        <td>{{ rowdata.agent }}</td>
        <th>坐席姓名:</th>
        <td>{{ rowdata.agentName }}</td>
      </tr>
      <tr>
        <th>听取录音:</th>
        <td colspan="3">
          <audio
            :src="rowdata.recordPath"
            style="width: 100%"
            loop="loop"
            controls="controls"
          />
        </td>
      </tr>
    </table>
    <table class="tabledata" cellspacing="0" cellpadding="0">
      <thead>
        <tr>
          <td>分类</td>
          <td>指标</td>
          <td>分值</td>
          <td>评分</td>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in tableData" :key="index">
          <td
            v-if="item.row > 1"
            :rowspan="item.row + 1"
            :colspan="item.col"
          >
            {{ item.qcName }}
          </td>
          <td
            v-if="item.row == 1"
            :rowspan="item.row"
            :colspan="item.col"
          >
            {{ item.qcName }}
          </td>
          <td v-if="item.row == 1" rowspan="1" colspan="1">
            {{ item.score }}  
          </td>
          <td v-if="item.row == 1" rowspan="1" colspan="1">
            <input v-if="isScore == 0 && item.qcName !='总计'" :disabled="item.qcName=='总计'" v-model="item.qcScore" >
            <input
              v-if="isScore == 1"
              v-model="item.qcScore"
              readonly="readonly"
            >
          </td>
        </tr>
      </tbody>
    </table>
    <el-button
      v-show="isScore == 0"
      style="margin: 10px 0"
      type="primary"
      @click="onsub"
    >提交</el-button
    >
  </div>
</template>

<script setup>
  import { ref } from 'vue'
  import { getPageListData,createPageData } from '@/api/main/system/system';

  const { proxy } = getCurrentInstance();
  const props = defineProps({
    isScore: {
      type: Number,
      default: ''
    },
    getListInfo: {
      type: Object,
      default: () => ({}),
    }
  });
  const isScore = ref(0)
  const CallNumber = ref('')
  const rowdata = ref({})
  const tableData = ref([])
  watch(props, (nweProps) => {
    init(nweProps)
  });
  onMounted(() => {
    init(props)
  });
  function init(props) {
    console.log(props.getListInfo)
    isScore.value = props.isScore
    rowdata.value = props.getListInfo
    getIndexlist()

  }
  const emit = defineEmits(["refreshOrder"]);
  function onsub() {
    const jsonarr = []
    tableData.value.forEach(function(val) {
      if (val.row) {
        jsonarr.push({
          indexId: val.qcId,
          qcScore: val.qcScore,
          score: val.score,
        })
        console.log(jsonarr)
      }
    })
    const params = {
      id: rowdata.value.id,
      list: jsonarr
    }
    createPageData('/quality/indexresult', params).then((data) => {
      proxy.$modal.msgSuccess('新增成功！');
      emit('refreshOrder');
    })
  }
  // 列表数据
  function getIndexlist() {
    getPageListData("/quality/indexresult/indexlist/"+rowdata.value.id).then((res) => {
      if (res.data.length>0) {
        tableData.value = res.data
      } else {
        tableData.value = []
      }
    })
  }
  function getTimeLimit(startTime, endTime) {
    return proxy.getTimeDifference(startTime, endTime);
  }
</script>
<style lang="scss" scoped>
.tabdept {
  width: 100%;
  margin: 10px 0;
  border: 1px solid #ccc;
}

.tabdept th {
  width: 100px;
  padding: 10px 0;
  font-size: 1rem;
  text-align: center;
  background-color: #ffffff;
  border: 1px solid #ccc;
}

.tabdept td {
  width: 30%;
  font-size: 1rem;
  text-align: center;
  background-color: #fafafa;
  border: 1px solid #ccc;
}
.tabledata {
  width: 100%;
  margin: 10px 0;
  text-align: center;
  border: 1px solid #ccc;
}
.tabledata thead tr td {
  padding: 10px 0;
  width: 25%;
  background-color: #d5edfe;
}
.tabledata tbody td {
  padding: 5px 0;
  font-size: 14px;
  border: 1px solid #ccc;
}
.tabledata input {
  padding: 5px;
  outline: none;
  color: #0077aa;
}
</style>