<template>
  <div>
    <van-sticky>
      <van-nav-bar title="告警详情" left-text="返回" left-arrow @click-left="$router.back()" />
    </van-sticky>
    <van-cell-group title="用户信息">
      <van-field
        v-model="device_info.device_name"
        label="设备名称"
        readonly
        input-align="right"
      />
      <van-field
        v-model="device_info.imei"
        label="设备IMEI"
        readonly
        input-align="right"
      />
      <van-field
        v-model="alarm_info.department_name"
        label="所属部门"
        readonly
        input-align="right"
      />
      <van-field
        v-model="user_info.realname"
        label="所属用户"
        readonly
        input-align="right"
      />
      <van-field
        v-model="user_info.phone"
        label="用户号码"
        readonly
        input-align="right"
        right-icon="phone-o"
      >
        <template #input>
          <a :href="'tel:'+ user_info.phone">{{user_info.phone}}</a>
        </template>
      </van-field>
      <van-field
        type="textarea"
        v-model="alarm_info.address"
        label="告警地址"
        readonly
        input-align="right"
        :right-icon="device_info.last_location ? 'location-o' : ''"
      />
      <!-- <van-field
        type="textarea"
        v-model="device_info.address"
        label="最新定位地址"
        readonly
        input-align="right"
        :right-icon="device_info.last_location ? 'location-o' : ''"
      /> -->
      <!-- <van-field
        v-model="device_info.last_location"
        :right-icon="device_info.last_location ? 'location-o' : ''"
        label="最后定位坐标"
        readonly
        input-align="right"
      /> -->
      <van-field
        v-model="device_info.last_online_time"
        label="最后在线时间"
        readonly
        input-align="right"
      />
    </van-cell-group>
    <!-- 紧急联系人 -->
    <van-cell-group title="紧急联系人">
      <template  v-if="urgent_list.length">
        <van-field
          v-for="urgent in urgent_list"
          :key="urgent.id"
          v-model="urgent.phone"
          :label="urgent.name + '(' + urgent.relationship_text +'关系)'"
          label-width="50%"
          readonly
          input-align="right"
          right-icon="phone-o"
        >
          <template #input>
            <a :href="'tel:'+ urgent.phone">{{urgent.phone}}</a>
          </template>
        </van-field>
      </template>
      <div v-else>
        <p style="line-height:30px;text-align:center;color:#999;">暂无</p>
      </div>
    </van-cell-group>

    <van-divider>告警处理</van-divider>
    <van-form @submit="onSubmit">
      <van-field name="result" label="处理结果" v-if="allowHandle">
        <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="comment"
        v-model="comment"
        rows="3"
        autosize
        label="处理原因"
        type="textarea"
        maxlength="200"
        placeholder="请输入处理原因"
        show-word-limit
        :readonly="!allowHandle"
      />

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

      <div style="margin: 16px">
        <van-button
          v-if="allowHandle"
          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,
  NavBar,
  Sticky,
} from "vant";

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

export default {
  data() {
    return {
      id: null, // 告警id
      rid: null, // 上报记录id
      alarm_info: {}, // 告警信息
      user_info: {}, // 设备用户信息
      device_info: {}, // 设备信息
      urgent_list: [], // 紧急联系人
      allowHandle: false,
      handleResult: "1",
      comment: "",
      handleTime: '',
      userid: null,
    };
  },
  created() {
    this.openid = localStorage.getItem("openid");
    this.userid = localStorage.getItem("userid");

    this.id = this.$route.query.id;
    this.rid = this.$route.query.rid;

    this.getDetail();
  },
  methods: {
    // 获取告警详情
    getDetail() {
      let url = 'getUserAlarmDetail&openid='+this.openid+'&userid='+this.userid+'&id='+this.id+'&rid='+this.rid;

      this.$http
        .get(url)
        .then((resp) => {
          if (resp.status === 200 && resp.data && resp.data.success) {
            this.alarm_info = resp.data.data;
            if (this.alarm_info) {
              this.user_info = this.alarm_info.user_info || {};
              this.device_info = this.alarm_info.device_info || {};
              this.urgent_list = this.alarm_info.urgent_list || [];
              this.comment = this.alarm_info.comment;

              this.allowHandle = (this.alarm_info.state == 'start');
              if (this.alarm_info.end_time) {
                this.handleTime = new Date(parseInt(this.alarm_info.end_time + '000')).toLocaleString()
              }
            }
          }
        })
        .catch((err) => {
          this.$notify({ type: "warning", message: "获取数据失败" });
        });
    },
    onSubmit(vals) {
      let data = {
        id: this.id,
        result: vals.result,
        comment: vals.comment,
      };

      this.$http.post('handleAlarm&openid='+this.openid+'&userid='+this.userid, 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>