<template>
  <div>
    <van-cell-group title="学生信息">
      <van-field
        v-model="studentInfo.realname"
        label="姓名"
        readonly
        input-align="right"
      />
      <van-field
        v-model="studentInfo.school_name"
        label="学校"
        readonly
        input-align="right"
      />
      <van-field
        v-model="studentInfo.grade_name"
        label="年级"
        readonly
        input-align="right"
      />
      <van-field
        v-model="studentInfo.class_name"
        label="班级"
        readonly
        input-align="right"
      />
      <van-field
        v-model="studentInfo.online_time"
        label="最后在线时间"
        readonly
        input-align="right"
      />
      <!-- <van-field v-model="studentInfo.last_station_mac" label="最后经过基站" readonly input-align="right" /> -->
      <van-field
        v-model="location"
        :right-icon="location ? 'location-o' : ''"
        label="最后定位坐标"
        readonly
        input-align="right"
      />
    </van-cell-group>
    <!-- 紧急联系人 -->
    <van-cell-group title="紧急联系人">
      <template  v-if="studentInfo.urgent_list.length">
        <van-field
          v-for="urgent in studentInfo.urgent_list"
          :key="urgent.id"
          v-model="urgent.phone"
          :label="urgent.name + '(' + urgent.relationship_text +'关系)'"
          label-width="50%"
          readonly
          input-align="right"
        />
      </template>
      <div v-else>
        <p style="line-height: 30px;">无数据</p>
      </div>
    </van-cell-group>

    <van-divider>告警处理</van-divider>
    <van-form @submit="onSubmit">
      <van-field name="result" label="处理结果" v-if="studentId">
        <template #input>
          <van-radio-group v-model="handleResult" direction="horizontal">
            <van-radio name="1">确认</van-radio>
            <van-radio name="2">误报</van-radio>
          </van-radio-group>
        </template>
      </van-field>

      <van-field
        name="reason"
        v-model="reason"
        rows="3"
        autosize
        label="处理原因"
        type="textarea"
        maxlength="200"
        placeholder="请输入处理原因"
        show-word-limit
        :readonly="studentId ? false : true"
      />

      <van-field
        v-if="!studentId"
        v-model="handleTime"
        label="处理时间"
        readonly
        input-align="right"
      />


      <div style="margin: 16px">
        <van-button
          v-if="studentId"
          round
          block
          type="info"
          size="small"
          native-type="submit"
          >提交</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import Vue from "vue";
import {
  Form,
  Field,
  CellGroup,
  Button,
  Divider,
  RadioGroup,
  Radio,
} from "vant";

Vue.use(Form);
Vue.use(Field);
Vue.use(CellGroup);
Vue.use(Button);
Vue.use(Divider);
Vue.use(RadioGroup);
Vue.use(Radio);

export default {
  data() {
    return {
      value: 112,
      activeRfid: null,
      studentId: null,
      studentInfo: {},
      handleResult: "1",
      reason: "",
      handleTime: '',
      userid: null,
    };
  },
  created() {
    this.userid = localStorage.getItem("userid");
    if (!this.userid) {
      this.$dialog.toast({
        mes: "获取不到您的用户标识，请重新登陆",
      });
      return;
    }
    this.studentId = this.$route.query.sid;
    this.activeRfid = this.$route.query.rfid;
    if (!this.studentId && !this.activeRfid) {
      return;
    }

    this.getDetail();
  },
  computed: {
    location() {
      if (this.studentInfo.longitude && this.studentInfo.latitude) {
        return this.studentInfo.longitude + "," + this.studentInfo.latitude;
      }
    },
  },
  methods: {
    // 获取告警详情
    getDetail() {
      let url = "getStudentAlarmDetail";
      if (this.studentId) {
        url += "&sid=" + this.studentId;
      } else {
        url += "&rfid=" + this.activeRfid;
      }
      if (this.$route.query.alarm_id) {
        url += '&alarm_id=' + this.$route.query.alarm_id;
      }

      this.$http
        .get(url)
        .then((resp) => {
          if (resp.status === 200 && resp.data && resp.data.success) {
            this.studentInfo = resp.data.data;
            if (this.studentInfo.alarm_info) {
              this.reason = this.studentInfo.alarm_info.reason;
              if (this.studentInfo.alarm_info.handle_time) {
                this.handleTime = new Date(parseInt(this.studentInfo.alarm_info.handle_time + '000')).toLocaleString()
              }
            }
          }
        })
        .catch((err) => {
          this.$notify({ type: "warning", message: "获取数据失败" });
        });
    },
    onSubmit(vals) {
      let data = {
        student_id: this.studentInfo.id,
        active_rfid: this.studentInfo.active_rfid,
        realname: this.studentInfo.realname,
        result: vals.result,
        reason: vals.reason,
        userid: this.userid,
      };
      this.$http
        .post("handleAlarm", JSON.stringify(data))
        .then((resp) => {
          if (resp.status === 200 && resp.data && resp.data.success) {
            this.$notify({ type: "success", message: resp.data.message });
            this.$router.back();
          } else {
            this.$notify({ message: resp.data.message });
          }
        })
        .catch((err) => {
          this.$notify({ type: "warning", message: "出错了" });
        });
    },
  },
};
</script>

<style scoped="less">
.van-cell-group__title {
  /* text-align: left; */
}
</style>