<template>
  <view class="container">
    <UserHeader />
    <tui-card style="margin-top: 20rpx;">
      <template>
        <view class="tui-default">
          <tui-form-item label="项目部:"
                         labelFontWeight="600">
            <tui-input padding="0"
                       :borderBottom="false"
                       placeholder="请选择项目部"
                       disabled
                       backgroundColor="transparent"
                       v-model="row.org_name"></tui-input>
          </tui-form-item>
        </view>
      </template>
    </tui-card>
    <tui-card style="margin-top: 20rpx;">
      <template>
        <view class="tui-default">
          <tui-form-item label="巡视地点:"
                         labelFontWeight="600"
                         labelWidth="170">
            <tui-input padding="0"
                       :borderBottom="false"
                       placeholder="巡视地点"
                       disabled
                       backgroundColor="transparent"
                       v-model="row.address"></tui-input>
            <template v-slot:right>
              <tui-icon name="position"
                        :size="24"
                        color="#5677fc"></tui-icon>
            </template>
          </tui-form-item>
        </view>
      </template>
    </tui-card>
    <tui-card style="margin-top: 20rpx;">
      <template>
        <view class="tui-default">
          <tui-form-item label="任务距离:"
                         labelFontWeight="600"
                         labelWidth="170">
            <tui-input padding="0"
                       :borderBottom="false"
                       placeholder="巡视地点"
                       disabled
                       backgroundColor="transparent"
                       v-model="distanceJudgementStateWatchText">
              <template slot="right">
                <view :style="{ color: distanceJudgementStateWatchWarning.includes('正常距离')!=-1 ? 'red' : 'rgb(81, 121, 239)' }">
                  {{distanceJudgementStateWatchWarning}}
                </view>
              </template>
            </tui-input>
            <template v-slot:right>
              <tui-icon name="refresh"
                        :size="24"
                        color="#5677fc"
                        @click="getDistanceJudge"></tui-icon>
            </template>
          </tui-form-item>
        </view>
      </template>
    </tui-card>
    <tui-card :title="{text:'巡查目标'}"
              style="margin-top: 20rpx;">
      <everyDayList v-if="!!content"
                    :risk_id="id"
                    :patrolTypeProp="content"
                    :riskOrgName="row.org_name"
                    :distanceJudgementState=distanceJudgementState
                    :contacts="contacts"
                    :contacts_id="contacts_id" />
    </tui-card>
  </view>
</template>

<script>
import UserHeader from "@/pages/template/bomb/common/userHeader.vue";
import everyDayList from "@/pages/template/everyday/everyDayList.vue";
import { getDistances } from "@/utils/util.js";
export default {
  components: {
    UserHeader,
    everyDayList,
  },
  data() {
    return {
      patrolTarget: [],
      content: null,
      management_content_state: [],
      //巡查目标id
      id: "",
      row: {
        org_name: "",
        address: "",
      },
      distanceJudgementState: 0,
      distanceJudgementStateWatchText: "获取距离中!请等待!",
      distanceJudgementStateWatchWarning: "距离未知",
      distanceJudge: -1,
      longitude: null, //经纬度
      latitude: null,
      contacts: "", //责任人
      contacts_id: "", //责任人
    };
  },
  onLoad(options) {
    let opt = options;
    this.id = opt.id;
    this.riskOrgName = options.riskOrgName;
    this.getTodayPatrolTask(opt.id);
  },
  onShow: async function () {
    this.content = null;
    await this.getTodayPatrolTask(this.id);
    await this.getDistanceJudge();
  },
  methods: {
    //获取经纬度
    async getDistanceJudge() {
      try {
        this.distanceJudgementState = 0;
        uni.showToast({
          title: "测算距任务距离中!请等待!",
          duration: 2000,
          icon: "none",
        });
        const res = await this.getParseAddress();
        this.longitude = res.longitude;
        this.latitude = res.latitude;
        if (!this.longitude) {
          uni.showToast({
            title: "获取定位失败,检查定位是否开启",
            duration: 2000,
            icon: "none",
          });
          this.distanceJudgementState = -1;
          return;
        }
        this.distanceJudge = getDistances(
          this.latitude,
          this.longitude,
          this.row.latitude,
          this.row.longitude
        );
        this.distanceJudge = this.distanceJudge.toFixed(2);
        this.distanceJudgementState = this.distanceJudge < 1000 ? 2 : 1;
        uni.hideToast();
      } catch (e) {}
    },
    getParseAddress() {
      return new Promise((resolve, reject) => {
        uni.getLocation({
          type: "wgs84",
          isHighAccuracy: true,
          success: (res) => {
            resolve(res);
          },
          fail: (err) => {
            uni.showToast({
              title:
                "获取位置失败!请检查定位权限和定位是否开启!并尝试重新获取!",
              icon: "none",
            });
            this.receivematerial.address.detail =
              "请检查定位权限和定位是否开启";
            reject();
          },
        });
      });
    },
    //通过获取今日巡查任务列表获取巡查目标
    async getTodayPatrolTask(id) {
      let res = await this.$request.get(`patrol/TodayTask/getOne`, {
        params: {
          id: id,
        },
      });
      this.patrolTarget = res.data.lid_list;
      this.content = res.data.row?.content;
      this.management_content_state = res.data.row.management_content_state;
      this.management_content_state.forEach((element) => {
        this.content.find((itemChildren) => {
          if (itemChildren.id == element.content_id) {
            itemChildren.state = element.state;
            return true;
          }
          if (!itemChildren.state) itemChildren.state = 0;
          return false;
        });
      });
      this.row = res.data.row;
      this.contacts = res.data.row.contacts; //责任人
      this.contacts_id = res.data.row.contacts_id ?? "";
    },
  },
  watch: {
    distanceJudgementState(newVal, oldVal) {
      switch (newVal) {
        case 0:
          this.distanceJudgementStateWatchText = "获取距离中!请等待!";
          this.distanceJudgementStateWatchWarning = "距离未知";
        case -1:
          this.distanceJudgementStateWatchText = "获取距离失败";
          this.distanceJudgementStateWatchWarning = "距离未知";
        case 1:
          this.distanceJudgementStateWatchText = `${this.distanceJudge}米`;
          if (this.distanceJudge > 1000) {
            this.distanceJudgementStateWatchWarning = "距离过远";
          } else this.distanceJudgementStateWatchWarning = "正常距离";
        default:
          // 处理其他情况
          break;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  padding-top: 20rpx;
}

.header {
  display: flex;
}
</style>