<template>
  <div>
    <el-drawer
      :title="$route.meta.title"
      direction="rtl"
      size="68%"
      :visible.sync="visible"
      append-to-body
      @close="$emit('update:isShow', false)"
    >
      <section class="drawer-container">
        <el-descriptions
          class="drawer-container__desc"
          size="small"
          border
          ref="elDesc"
          :column="2"
          direction="vertical"
          :labelStyle="{ 'font-weight': '500', 'font-size': '15px' }"
        >
          <el-descriptions-item label="代码">
            {{ form['school'] ? form['school'].code : '' }}
          </el-descriptions-item>

          <el-descriptions-item label="所属学校">
            {{
              form['school'] ? form['school'].name : ''
            }}
          </el-descriptions-item>

          <el-descriptions-item label="年份">
            {{ form["year"] }}
          </el-descriptions-item>

          <el-descriptions-item label="统招总分">
            {{
              typeof form["total_score"] === "number"
                ? form["total_score"].toFixed(2)
                : form["total_score"]
            }}
          </el-descriptions-item>

          <el-descriptions-item label="统招语数外">
            {{
              typeof form["main_score"] === "number"
                ? form["main_score"].toFixed(2)
                : form["main_score"]
            }}
          </el-descriptions-item>

          <el-descriptions-item label="跨区总分">
            {{
              typeof form["area_total_score"] === "number"
                ? form["area_total_score"].toFixed(2)
                : form["area_total_score"]
            }}
          </el-descriptions-item>

          <el-descriptions-item label="跨区语数外">
            {{
              typeof form["area_main_score"] === "number"
                ? form["area_main_score"].toFixed(2)
                : form["area_main_score"]
            }}
          </el-descriptions-item>
        </el-descriptions>
      </section>
    </el-drawer>
  </div>
</template>

<script>
import { show } from "@/api/score/score";

export default {
  name: "ScoreShow",
  props: {
    isShow: {
      type: Boolean,
      default: false,
      required: true,
    },

    school: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      loading: false,
      visible: false,
      form: {
        code: "",

        school_id: "",
        school: "",
        year: "",

        total_score: "",

        main_score: "",

        area_total_score: "",

        area_main_score: "",
      },
    };
  },
  watch: {
    isShow(newVal) {
      this.visible = newVal;
    },
    visible(newVal) {
      this.$emit("update:isShow", newVal);
    },
  },
  methods: {
    async getDetail(id) {
      try {
        const detail = await show({
          id,
          show_relation: ['school']
        });
        for (let key in this.form) {
          if (detail.hasOwnProperty(key)) {
            this.form[key] = detail[key];
          }
        }
      } catch (err) {
        console.error(err);
      }
    },
  },
};
</script>

<style scoped lang="scss">
.span2 {
  grid-column: span 2;
}
::v-deep .el-form-item > * {
  max-width: 100%;
}
.drawer-container {
  height: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;

  & > * {
    flex: 1;
  }
}
</style>
