<template>
  <div>
    <el-dialog title="排序得分详情" class="index-score-dlg" :visible.sync="isShow" @open="beforeDialogOpen">
      <table width="100%" cellpadding="5" cellspacing="0" v-loading="rankDetailLoading" class="rank-detail-table">
        <tbody>
          <tr>
            <td width="14%" valign="middle"><b>检索词：</b></td>
            <td height="40" valign="middle" v-html="rankDetail.queryWords"></td>
          </tr>
          <tr>
            <td valign="middle"><b> 基础得分计算：</b></td>
            <td height="40" valign="middle" v-html="rankDetail.basicRankDetail"></td>
          </tr>
          <tr>
            <td valign="middle"><b>基础得分解释：</b></td>
            <td height="40" valign="middle" v-html="rankDetail.basicExplain"></td>
          </tr>
          <tr>
            <td valign="middle"><b>均衡加分：</b></td>
            <td height="40" valign="middle" v-html="rankDetail.blanceDetail"></td>
          </tr>
          <tr>
            <td valign="middle"><b>距离加分：</b></td>
            <td height="40" valign="middle" v-html="rankDetail.distanceDetail"></td>
          </tr>
          <tr>
            <td valign="middle"><b>自定义加分：</b></td>
            <td height="40" valign="middle" v-html="rankDetail.customDetail"></td>
          </tr>
          <tr>
            <td valign="middle"><b>位置调整：</b></td>
            <td height="40" valign="middle" v-html="rankDetail.docPositionDetail"></td>
          </tr>
        </tbody>
      </table>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: { show: Boolean, query: Object },
  data() {
    return {
      rankDetail: {}, //   排序得分详情请求数据
      rankDetailLoading: false
    }
  },
  computed: {
    isShow: {
      get() {
        return this.show
      },
      set(val) {
        this.$emit('update:show', val)
      }
    }
  },
  methods: {
    beforeDialogOpen() {
      this.rankDetail = {}
      this.loadRankDetail()
    },
    async loadRankDetail() {
      this.rankDetailLoading = true
      try {
        let res = await axios.get('/ui/indexlist/rankdetail', {
          params: this.query
        })
        this.rankDetail = res.data.data
      } catch (e) {
      }
      this.rankDetailLoading = false
    }
  }
}
</script>
<style>
.index-score-dlg .el-dialog{
  width:800px;
}
@media (max-width:480px){
  .index-score-dlg .el-dialog{
    width:96%;
  }
}
</style>
<style scoped>
.rank-detail-table{
  line-height:2;
}
</style>
