<template>
  <div class="missionInfoDetail">
    <headNav :title="'更多内容'"></headNav>

    <!-- 任务信息 -->
    <div class="missionInfo">
      <div class="headTip FontColorInfo">任务信息</div>

      <!-- <div class="content">
				<van-cell title="任务编号" :value="dataList.taskId" />
				<van-cell title="任务状态">
					<template #default>
						<span v-if="dataList.executeStatus == '1'" class="FontColorError">
							待执行
						</span>
						<span v-else-if="dataList.executeStatus == '2'" class="FontColorSuccess">
							完成
						</span>
						<span v-else-if="dataList.executeStatus == '3'" class="FontColorOther">
							执行中
						</span>
						<span v-else class="FontColorError">待复查</span>
					</template>
				</van-cell>
				<van-cell v-if="dataList.taskForm === '1'" title="任务来源" value="双随机" />
				<van-cell v-else-if="dataList.taskForm === '2'" title="任务来源" value="举报检查" />
				<van-cell
					v-else-if="dataList.taskForm === '3'"
					title="任务来源"
					value="信访/96119"
				/>
				<van-cell v-else-if="dataList.taskForm === '4'" title="任务来源" value="日常任务" />
				<van-cell v-else title="任务来源" value="未知" />
				<van-cell
					v-if="dataList.checkType === '1'"
					title="任务类型"
					value="日常消防监督检查"
				/>
				<van-cell
					v-if="dataList.checkType === '2'"
					title="任务类型"
					value="专项行动消防检查"
				/>
				<van-cell title="检查单位" :value="dataList.byCheckUnit" />
				<van-cell title="任务地点" :value="dataList.taskAddr">
					<template #right-icon>
						<van-icon
							name="location"
							color="#00f"
							@click="setCenter(dataList.taskAddr)"
						></van-icon>
					</template>
				</van-cell>
				<van-cell v-if="dataList.siteType === '0'" title="场所类型" value="通用" />
				<van-cell v-if="dataList.siteType === '1'" title="场所类型" value="宾馆场所" />
				<van-cell v-if="dataList.siteType === '2'" title="场所类型" value="餐饮场所" />
			</div> -->
      <div class="missionInfo_cardInfo">
        <div class="missionInfo_cardInfo_headCard df jfsb aic">
          <div class="missionInfo_location FontColorNormal">
            <!-- {{ dataList.byCheckUnit }} -->
          </div>
          <div class="missionInfo_status">
            <span v-if="dataList.executeStatus == 1" class="fb FontColorError"
              >待执行</span
            >
            <span
              v-else-if="dataList.executeStatus == 3"
              class="fb FontColorOther"
              >执行中</span
            >
            <span
              v-else-if="dataList.executeStatus == 4"
              class="fb FontColorWarn"
              >待复查</span
            >
            <span
              v-else-if="dataList.executeStatus == 2"
              class="fb FontColorSuccess"
              >任务完成</span
            >
          </div>
        </div>
        <div class="missionInfo_cardInfo_contentCard">
          <van-cell
            title="被检查单位"
            :value="dataList.enforce_obj && dataList.enforce_obj.enforce_obj_name"
          />
          <!-- <van-cell v-if="dataList.checkType === '1'" title="检查类型" value="日常消防监督检查" />
					 <van-cell v-if="dataList.checkType === '2'" title="检查类型" value="专项行动消防检查" /> -->
          <van-cell
            title="单位地址"
            :value="dataList.enforce_obj && dataList.enforce_obj.enforce_obj_address"
          >
            <template #right-icon>
              <van-icon
                name="location"
                class="search-icon"
                color="#0066cc"
                @click="getCenter(dataList.enforce_obj)"
              />
            </template>
          </van-cell>
          <van-cell
            title="执法机构"
            :value="dataList.enforce_org_name || (dataList.enforce_org && dataList.enforce_org.enforce_org_name)"
          />
          <van-cell title="创建时间" :value="dataList.create_time" />
          <van-cell title="检查期限" :value="dataList.last_enforce_date" />
          <van-cell title="任务编号" :value="dataList.job_no" />
          <template v-if="dataList.enforce_obj">
            <van-cell
              v-if="dataList.enforce_obj.enforce_obj_type === '1'"
              title="单位类型"
              value="火灾高危单位"
            />
            <van-cell
              v-if="dataList.enforce_obj.enforce_obj_type === '2'"
              title="单位类型"
              value="消防安全重点单位"
            />
            <van-cell
              v-if="dataList.enforce_obj.enforce_obj_type === '3'"
              title="单位类型"
              value="一般单位"
            />
            <van-cell
              v-if="dataList.enforce_obj.enforce_obj_type === '4'"
              title="单位类型"
              value="其他单位"
            />
            <van-cell
              v-if="dataList.enforce_obj.place_type === '1'"
              title="场所类型"
              value="宾馆场所"
            />
          </template>
          <van-cell v-else title="场所类型" value="餐饮场所" />
          <!-- <van-cell :value="getPerson(dataList.executors)" is-link>
            <template #title>
              <span class="custom-title">检查成员</span>
            </template>
          </van-cell> -->
          <van-cell title="检查类型" :value="'日常抽查'" />
					<van-cell title="任务来源" :value="dataList.jobSource" />
					<van-cell title="预约检查" :value="dataList.pointStatus" />
          <van-cell title="任务状态" :value="dataList.jobStatus" />
          <!-- <van-cell title="检查时间" :value="dataList.executeTime" /> -->
        </div>
        <!-- <div class="missionInfo_cardInfo_more df jfc">
          <van-button type="info" size="small" @click="moreMissionDetail"
            >更 多</van-button
          >
        </div> -->
      </div>
    </div>

    <!-- 检查计划 -->
    <!-- <div class="checkPlan">
			<div class="headTip FontColorInfo">检查计划</div>

			<div class="content">
				<van-cell title="检查机构" :value="dataList.lawUnit" />
				<van-cell title="主检察员" :value="getPerson(dataList, 0)" />
				<van-cell title="协检查员" :value="getPerson(dataList, 1)" /> -->

    <!-- 				<van-cell title="检查日期" v-if="!isMadePlan" :value="dataList.executeTime" />
				<van-cell title="检查时间预判" v-if="!isMadePlan" :value="getTimeAnticipation()" /> -->
    <!-- <van-cell title="实际检查时间" v-if="!isMadePlan" :value="dataList.trueCheckTime" /> -->
    <!-- 制定检查计划 -->
    <!-- <div class="notice">
					<van-cell
						title="检查任务流程"
						is-link
						class="lastCell"
						@click="turnProcessEdit"
					>
						<template #default>
							<span class="FontColorOther">配置</span>
						</template>
					</van-cell>
					<div class="tips">
						检查内容包含：消防许可及验收备案、建筑防火、安全疏散、消防控制室、消防安全管理、等项目检查
					</div>
				</div>
				
				<div class="notice">
					<van-cell
						title="检查通知"
						is-link
						class="lastCell"
						@click="checkMsg(dataList.taskId)"
					>
						<template #default>
							<span class="FontColorWarn">发送通知</span>
						</template>
					</van-cell>
					<div class="tips">
						在每次制定消防监督检查计划时，需提前24小时通知被检查单位，通知内容包含检查时间、检查内容大致项目、需配合人员等信息。
					</div>
				</div>

				<div class="isShowContent">
					<van-cell
						is-link
						title="检查日期"
						:value="checkDate"
						@click="showDatePop = true"
					/> -->
    <!-- 日期弹出层 -->
    <!-- <van-popup v-model="showDatePop" position="bottom">
						<van-datetime-picker
							v-model="currentDate"
							type="month-day"
							title="选择年月日"
							:min-date="minDate"
							:max-date="maxDate"
							@cancel="showDatePop = false"
							@confirm="chooseDate"
						/>
					</van-popup>

					<van-cell
						is-link
						title="检查时间预判"
						:value="
							`${allTime}h (内容检查 ${checkContent}h +  通勤时间 ${commuteTime}h)`
						"
						@click="showTimeAnticipation = true"
					/>
					<van-popup v-model="showTimeAnticipation" position="bottom">
						<div class="popContent">
							<div class="topInfo">
								检查时间预判
								<div class="totalTime">
									(检查总耗时：
									<span class="FontColorOther fz12">{{ allTime }}h</span>
									)
								</div>
							</div>
							<div class="inputContent">
								<div>
									<van-field
										v-model="checkContent"
										label="内容检查："
										@input="contentInputChange"
										@blur="contentInputBlur"
										placeholder="请输入检查内容"
									/>

									<van-field
										v-model="commuteTime"
										label="通勤时间："
										@input="commuteInputChange"
										@blur="commuteInputBlur"
										placeholder="请输入通勤时间"
									/>
								</div>
							</div>
							<div class="popBtn">
								<div class="btn flex1" @click="showTimeAnticipation = false">
									取消
								</div>
								<div class="btn FontColorSuccess flex1" @click="sureTimePlan">
									确定
								</div>
							</div>
						</div>
					</van-popup>
				</div> -->

    <!-- 制定按钮 -->
    <!-- <div class="madePlanBtn">
					<div class="isMadePlan">
						<van-button
							@click="savePlan"
							type="info"
							size="small"
							class="btn1"
						>
							保存计划
						</van-button>
					</div>
				</div> -->
    <!-- </div>
		</div> -->

    <!-- 弹出地图展示 -->
    <van-popup v-model="showMap" position="bottom" :style="{ height: '450px' }">
      <div><baiduMap :center="center" :zoom="zoom"></baiduMap></div>
    </van-popup>

    <!-- 遮罩层 -->
    <v-mask :showOverLay="showOverLay" :tipMsg="tipMsg"></v-mask>
  </div>
</template>

<script>
import headNav from "@/components/headNav.vue";
import { get, post, put } from "@/utils/http.js";
import baiduMap from "@/components/baiduMap.vue";
import mask_overLay from "@/components/overLay_xy.vue";

export default {
  name: "missionInfoDetail",
  components: {
    headNav,
    baiduMap,
    "v-mask": mask_overLay,
  },
  data() {
    return {
      isMadePlan: false,
      showOverLay: false,
      tipMsg: "加载中",
      isLastCell: "lastCell",
      showMap: false,
      showDatePop: false,
      checkDate: "",
      showTimeAnticipation: false,
      currentDate: "",
      minDate: new Date(),
      maxDate: new Date(),
      checkContent: "1",
      commuteTime: "1",
      allTime: 2,
      zoom: 15,
      center: "重庆市",
      dataList: {
        enforce_obj: null,
        pointStatus: '未预约'
      },
      hasSend: false,
    };
  },
  mounted() {
    let D = new Date();
    let Y = D.getFullYear();

    this.minDate = new Date(Y, 0, 0);
    this.maxDate = new Date(Y, 12, 0);

    this.init();
  },
  computed: {},
  methods: {
    // 初始化
    init() {
      const D = new Date(new Date().getTime() + 48 * 3600 * 1000);

      this.currentDate = D;

      // this.getTime(D);
      this.getDetailInfoApi();
    },

    getTime(date) {
      let time = "";
      time = this.$getTime(date);
      time = time.split(" ")[0];
      this.checkDate = time;
    },

    // 获取任务详情信息
    getDetailInfoApi() {
      this.showOverLay = true;
      this.tipMsg = "加载中";
      get(`/v2/api/enforce-job/${this.$route.params.ID}`).then((res) => {
        if (res) {
          res.jobSource = this.getSource(res.job_source);
          res.jobStatus = this.getStatus(res.job_status);
        }
        this.dataList = res;
        get(`/v2/api/enforce-job/${res.id}/enforce-message?page=1&size=1`).then(result => {
          if (result && result.data.length > 0) {
            this.dataList.pointStatus = '已预约';
          }
          this.showOverLay = false;
        });
        // if (res.success == true) {
        // 	this.dataList = res.data;
        // 	this.showOverLay = false;

        // 	if (res.data.executeTime) {
        // 		this.isMadePlan = false;

        // 		this.checkDate = res.data.executeTime;
        // 		this.currentDate = new Date(res.data.executeTime);

        // 		this.checkContent = res.data.checkContTime ? res.data.checkContTime : 0;
        // 		this.commuteTime = res.data.commutingTime ? res.data.commutingTime : 0;

        // 		this.allTime = parseInt(this.checkContent) + parseInt(this.commuteTime);
        // 	} else {
        // 		this.isMadePlan = true;
        // 	}
        // }
      });
    },

    backPage() {
      this.$router.go(-1);
    },

    // 选择时间
    chooseDate() {
      this.showDatePop = false;

      console.warn(this.currentDate);

      this.getTime(this.currentDate);
    },

    // 设置地图中心点
    setCenter(location) {
      this.showMap = true;
      this.center = location;
    },

    // 限制输入框
    contentInputChange(value) {
      if (isNaN(value) || value.trim() === "") {
        this.checkContent = "";
      }
    },

    contentInputBlur() {
      this.allTime = 0;
      if (this.checkContent) {
        this.checkContent = parseFloat(this.checkContent).toFixed(1);
        if (this.commuteTime === "") {
          this.allTime = 0 + parseFloat(this.checkContent);
        } else {
          this.allTime =
            parseFloat(this.commuteTime) + parseFloat(this.checkContent);
        }
      }

      this.allTime = this.allTime.toFixed(1);
    },

    // 限制输入框
    commuteInputChange(value) {
      if (isNaN(value) || value.trim() === "") {
        this.commuteTime = "";
      }
    },

    commuteInputBlur() {
      this.allTime = 0;
      if (this.commuteTime) {
        this.commuteTime = parseFloat(this.commuteTime).toFixed(1);
        if (this.checkContent === "") {
          this.allTime = 0 + parseFloat(this.checkContent);
        } else {
          this.allTime =
            parseFloat(this.commuteTime) + parseFloat(this.checkContent);
        }
      }
      this.allTime = this.allTime.toFixed(1);
    },

    sureTimePlan() {
      if (this.checkContent === "" || this.commuteTime === "") {
        this.$toast.fail("检查时间不能为空");
      } else {
        this.showTimeAnticipation = false;
      }
    },

    getTimeAnticipation() {
      let checkContTime = this.dataList.checkContTime;
      let commutingTime = this.dataList.commutingTime;
      let totalTime = parseFloat(checkContTime) + parseFloat(commutingTime);

      return `${totalTime}h (内容检查 ${checkContTime}h + 通勤时间 ${commutingTime}h)`;
    },

    //
    getPerson(dataList, index) {
      if (dataList.checkPerson) {
        if (dataList.checkPersonTel) {
          return (
            dataList.checkPerson.split(",")[index] +
            " " +
            dataList.checkPersonTel.split(",")[index]
          );
        } else {
          return dataList.checkPerson.split(",")[index];
        }
      } else {
        return "";
      }
    },
    // 设置主协标识
    // getPerson(per) {
    //   if (per) {
    //     let str = "";
    //     for (let i in per) {
    //       if (i == 0) {
    //         str = str + per[i].user_name + "(主)，";
    //       } else {
    //         str = str + per[i].user_name + "(协)";
    //       }
    //     }

    //     return str;
    //   }
    // },
    // 获取地图中心位置
    getCenter(info) {
      // this.showMap = true;
      // var lo = {
      //   lng: location.longitude,
      //   lat: location.latitude,
      // };
      if (info) {
        this.center = window.BMap.Point(Number(info.longitude), Number(info.latitude))
        this.showMap = true;
      }
    },
    // 检查通知
    checkMsg(id) {
      this.$router.push(`/editMsg/${id}`);
    },

    // 跳转检查流程
    turnProcessEdit() {
      this.$router.push(`/sureProcess/${this.$route.params.ID}`);
    },

    // 保存计划
    savePlan() {
      if (this.checkContent === "" || this.commuteTime === "") {
        this.$toast.fail("检查时间预判不能为空");
      } else {
        this.showOverLay = true;
        this.tipMsg = "提交数据中";

        put("/cdsupervisionTask/edit", {
          id: this.dataList.id,
          isAppEdit: true,
          executeTime: this.checkDate,
          checkContTime: this.checkContent,
          commutingTime: this.commuteTime,
          expectTime: `${this.allTime}h (内容检查 ${this.checkContent}h +  通勤时间 ${this.commuteTime}h)`,
        }).then((res) => {
          this.showOverLay = false;

          if (res.success === true) {
            this.$toast.success("保存成功");
            this.getDetailInfoApi();
          } else {
            this.$toast.fail(res.msg);
          }
        });
      }
    },
		// 任务来源
		getSource(status) {
      // 任务来源（RANDOM-双随机 REPORT-举报投诉 CREATED-自建任务）
			let str="";
			switch(status) {
				case 'RANDOM':
					str="双随机";
					break;
				case 'CREATED':
					str="自建任务";
					break;
				case 'REPORT':
					str="举报投诉";
					break;
				default :
				break;
			}
			return str;
		},
    //任务状态
    getStatus(status) {
      let str = "";
      switch (status) {
        case "AUDIT":
          str = "审核中";
          break;
        case "REJECT":
          str = "已驳回";
          break;
        case "TODO":
          str = "待执行";
          break;
        case "DOING":
          str = "执行中";
          break;
        case "ARCHIVED":
          str = "已归档";
          break;
        default:
          str = "其他";
          break;
      }
      return str;
    },
    // 确定计划
    surePlan() {
      if (this.checkContent === "" || this.commuteTime === "") {
        this.$toast.fail("检查时间预判不能为空");
        return;
      } else {
        this.showOverLay = true;
        this.tipMsg = "提交数据中";

        put("/cdsupervisionTask/edit", {
          id: this.dataList.id,
          executeTime: this.checkDate,
          checkContTime: this.checkContent,
          commutingTime: this.commuteTime,
          expectTime: `${this.allTime}h (内容检查 ${this.checkContent}h +  通勤时间 ${this.commuteTime}h)`,
        }).then((res) => {
          this.showOverLay = false;
          if (res.success === true) {
            this.$router.go(-1);
          } else {
            this.$toast.fail("保存失败");
          }
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.missionInfoDetail {
  font-size: 14px;

  .headTip {
    margin-bottom: 10px;
    padding: 0 15px;
  }

  .missionInfo {
    margin-top: 57px;
  }

  .checkPlan {
    margin-top: 10px;

    .madePlanBtn {
      display: flex;
      justify-content: center;
      padding: 20px 0;
      padding-bottom: 15px;
      background-color: #fff;

      button {
        width: 90%;
        height: 35px;
      }

      .isMadePlan {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
    }

    .content {
      .notice {
        background-color: #fff;

        .tips {
          margin: 0 15px;
          padding-bottom: 10px;
          font-size: 11px;
          color: #c8c8c8;
          border-bottom: 1px solid #ebedf0;
        }
      }

      .popContent {
        padding: 10px 20px;
        padding-bottom: 0;

        .topInfo {
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 5px 0;
          color: #323233;
        }

        .totalTime {
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 12px;
          color: #acacac;
          padding: 5px 0;
          margin-left: 5px;
        }
        .popBtn {
          display: flex;
          justify-content: space-between;
          margin-top: 10px;
          margin-bottom: 10px;

          div {
            height: 40px;
            text-align: center;
            line-height: 40px;
            margin: 0 5px;
            background-color: #dcdcdc;

            &:last-child {
              background-color: #0066ff;
              color: #ffffff;

              &:active {
                background: #0189ff;
              }
            }

            &:active {
              background: #e8e8e8;
            }
          }
        }
      }
    }
  }
}
</style>

<style lang="scss">
.missionInfoDetail {
  .van-cell {
    font-size: 12px;

    .van-cell__title {
      color: #4f4f4f;
    }

  }

  .lastCell {
    &::after {
      border-bottom: none;
    }
  }

  .van-icon.van-icon-location {
    display: flex;
    align-items: center;
    margin-left: 10px;
  }

  .btn1 {
    margin-bottom: 10px;
  }

  .van-cell__title.van-field__label {
    display: flex;
    align-items: center;
  }

  .van-cell.van-field {
    &::after {
      border: none;
    }
  }

  .van-field__control {
    padding: 3px 10px;
  }

  .content {
    .van-cell__value {
      flex: 2;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  }
}
</style>
