<template>
  <!-- 提交 -->
  <div>
    <van-sticky offset-top="0">
      <LHeader :text="text"></LHeader>
    </van-sticky>
    <div style="margin-bottom: 1.5rem;">
      <van-tabs v-model="active" @change="tabList" color="#2980f7" animated>
        <van-tab :title="buildingName">
          <van-dropdown-menu z-index="1000">
            <van-dropdown-item
              v-model="value0"
              @change="changeBuild"
              :options="option0"
              get-container="body"
            />
            <van-dropdown-item
              v-model="value1"
              @change="changeFloor"
              :options="option1"
              get-container="body"
            />
            <van-dropdown-item
              v-model="value2"
              @change="changeRoom"
              :options="option2"
              get-container="body"
            />
          </van-dropdown-menu>
          <div class="con-list">
            <van-cell-group
              inset
              v-for="(item, index) in messageList"
              :key="index"
              @click="touchstart(index, item)"
            >
              <div style="font-size: 0.45rem;padding: 5px 0;">
                {{ item.name }}
              </div>
              <van-row gutter="">
                <van-col span="17">
                  <van-row gutter="">
                    <van-col span="9">发起时间：</van-col>
                    <van-col span="15">{{
                      timestampToTimes(item.createTime)
                    }}</van-col>
                  </van-row>
                  <van-row gutter="">
                    <van-col span="9">楼层：</van-col>
                    <van-col span="15">{{ item.floorName }}</van-col>
                  </van-row>
                  <van-row gutter="">
                    <van-col span="9">房间：</van-col>
                    <van-col span="15">{{ item.roomName }}</van-col>
                  </van-row>
                </van-col>
                <!-- <van-col span="7" :style="{ color: item.state == 1 ? '#0069e5' : '#03b615' }">
                  {{ "●待审批" }}
                </van-col> -->
              </van-row>
              <van-overlay :show="showIndex == index">
                <div class="wrapper" @click.stop="showIndex = null">
                  <van-button round type="primary" @click="goDetail(item)"
                    >编辑</van-button
                  >
                  <!-- <van-button round type="info" @click="goConfirm(item)" v-show="active==0"
                    >确认</van-button
                  > -->
                </div>
              </van-overlay>
            </van-cell-group>
            <div
              style="
              width: 100%;
              text-align: center;
              font-size: 0.48rem;
              position: fixed;
              top: 30%;
            "
              v-if="messageList['length'] == 0"
            >
              暂无数据
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
    <div
      style="display: flex;
        justify-content: space-around;
        background-color: #fff;
        border-top: 1px solid #e3e3e3;
        height: 1.5rem;
        width: 100%;
        text-align: center;
        position: fixed;
        bottom: 0;"
    >
      <div
        @click="performTasks"
        style="color: #4bced0;font-size: 14px;font-weight: 600;"
      >
        <div style="font-size: 22px;"><van-icon name="plus" /></div>
        <div>新增固有风险</div>
      </div>
      <div
        @click="endTasks"
        style="color: #D9001B;font-size: 14px;font-weight: 600;"
      >
        <div style="font-size: 22px;"><van-icon name="cross" /></div>
        <div>任务执行结束</div>
      </div>
    </div>
  </div>
</template>

<script>
import { Dialog } from "vant";
import LHeader from "@/components/header.vue";
import { getFun, postFun } from "@/service/table.js";
import { timestampToTime, generateId } from "@/utils/format";
export default {
  name: "risk-confirme",
  components: {
    LHeader
  },
  data() {
    return {
      text: "固有风险列表",
      searchValue: "",
      planId: 0,
      buildingId: 0,
      buildingName: "",
      value0: "",
      value1: 0,
      value2: 0,
      option0: [],
      option1: [],
      option2: [],
      isHaveNews: false,
      messageList: [],
      riskLogList: [],
      Loop: "", // 定时器
      showIndex: null, // 是否显示遮罩层,
      active: 1,
      form: {},
      tabs: [],
      floorListData: []
    };
  },
  created() {
    this.planId = this.$route.params.id || sessionStorage.getItem("planId");
    this.buildingId =
      this.$route.params.buildingId || sessionStorage.getItem("buildingId");
    this.buildingName =
      this.$route.params.buildingName || sessionStorage.getItem("buildingName");
    this.getRiskList(this.planId);
    //   this.postList();
  },
  methods: {
    timestampToTimes(time) {
      return timestampToTime(new Date(time), "DT2", true);
    },
    changeData(arr) {
      var arrList = [];
      arr.forEach(item => {
        arrList.push({
          text: item.name,
          value: item.id || item.name
        });
      });
      return arrList;
    },
    //新增固有风险
    performTasks() {
      sessionStorage.setItem("buildingId", this.buildingId);
      sessionStorage.setItem("planId", this.planId);
      sessionStorage.setItem("buildingName", this.buildingName);

      this.$router.push({
        name: "addInherent",
        params: {
          id: this.active,
          planId: this.planId,
          buildingId: this.buildingId,
          buildingName: this.buildingName
        }
      });
    },
    //任务执行结束
    endTasks() {
      //toDo
      Dialog.confirm({
        title: "任务执行结束",
        message: "是否任务执行结束"
      })
        .then(() => {
          postFun(`/risk/plan/submit/${this.planId}/${this.buildingId}`).then(
            res => {
              // Dialog.alert({
              //   title: '任务执行结束',
              //   message: res.msg,
              // }).then(() => {
              // resolve(res.data);
              this.$toast.success(res.msg);
              this.$router.push({
                name: "riskAssess"
              });
              // });
            }
          );
        })
        .catch(() => {
          // on cancel
        });
    },
    handadd() {
      this.$router.push({
        name: "riskAdd",
        params: {
          title: "新增"
        }
      });
    },

    floorList(id) {
      return new Promise((resolve, reject) => {
        getFun(`/risk/plan/floor/list/${id}`)
          .then(res => {
            this.floorListData = res.data;
            this.changeBuild(res.data[0].name);
            this.option0 = this.changeData(res.data);
            this.value0 = res.data[0].name || "";
          })
          .catch(() => {
            this.$toast.fail("加载失败,请稍后再试");
          });
      });
    },
    roomList(id) {
      return new Promise((resolve, reject) => {
        getFun(`/risk/plan/room/list/${id}`)
          .then(res => {
            this.option2 = this.changeData(res.data);
            this.value2 = res.data[0].id || 0;
            resolve(res.data);
          })
          .catch(() => {
            this.$toast.fail("加载失败,请稍后再试");
          });
      });
    },
    riskList(planId, buildingId, floorId, roomId) {
      return new Promise((resolve, reject) => {
        var paramsJson = {};
        if (floorId || roomId) {
          paramsJson = {
            floorId,
            roomId
          };
        } else {
          paramsJson = {};
        }
        getFun(`/risk/plan/inherent/list/${planId}/${buildingId}`, paramsJson)
          .then(res => {
            this.messageList = res.data;
            resolve(res.data);
          })
          .catch(() => {
            this.$toast.fail("加载失败,请稍后再试");
          });
      });
    },
    async getRiskList(id) {
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        loadingType: "spinner",
        duration: 0
      });
      let floor = await this.floorList(this.buildingId);
      let risk = await this.riskList(id, this.buildingId);
      this.$toast.clear();
    },
    async tabList(value) {
      let floor = await this.floorList(value);
      let risk = await this.riskList(this.planId, value);
    },
    changeBuild(name) {
      console.log(name);
      let arr = this.floorListData.map(item => {
        if (item.name == name) {
          return item.children;
        }
      });
      this.option1 = this.changeData(arr[0]);
      this.value1 = arr[0][0].id;
      this.roomList(this.value1);
    },
    async changeFloor() {
      let room = await this.roomList(this.value1);
      let risk = await this.riskList(
        this.planId,
        this.buildingId,
        this.value1,
        this.value2
      );
    },
    async changeRoom() {
      let risk = await this.riskList(
        this.planId,
        this.buildingId,
        this.value1,
        this.value2
      );
    },
    onSearch(val) {
      this.postList(this.searchValue);
    },
    touchstart(index, item) {
      if (this.showIndex != null) {
        this.showIndex = null;
        return;
      }
      this.showIndex = index;
    },
    // 详情
    goDetail(data) {
      sessionStorage.setItem("buildingId", this.buildingId);
      sessionStorage.setItem("planId", this.planId);
      sessionStorage.setItem("buildingName", this.buildingName);
      sessionStorage.setItem("inherentId", data.businessId || data.id);
      this.$router.push({
        name: "addCurrent",
        params: {
          inherentId: data.businessId || data.id,
          planId: this.planId,
          buildingId: this.buildingId,
          buildingName: this.buildingName
        }
      });
      this.showIndex = null;
    },
    // 确认
    goConfirm(data) {
      this.$router.push({
        name: "risk-affirm",
        params: {
          data: data
        }
      });
      this.showIndex = null;
    }
  }
};
</script>
<style lang="less" scoped>
#app {
  font-family: "";
  color: #2c3e50;
}

.cell-wrap {
  position: relative;
}

p {
  font-size: 0.4rem;
  font-weight: none;
  padding-left: 0.16rem;
  margin: 0.186667rem 0;
  color: #7f7f7f;
}

.van-cell-group--inset {
  margin: 0;
  margin-bottom: 10px;
  padding: 10px;
  font-size: 13px;
  position: relative;

  .van-row {
    margin-bottom: 0.133333rem;
    line-height: 0.64rem;
  }
}

.journal-wrap {
  position: relative;
}

.supervise-wrap {
  position: relative;
}

.info-title {
  color: #2980f7;
  font-weight: none;
}

.field-title {
  color: black;
  font-weight: none;
}

.more {
  position: absolute;
  bottom: 0.32rem;
  right: 15px;
  color: #2a80f7;
  font-weight: none;
  z-index: 99;
}

.con-list {
  padding: 0;
  min-height: 10rem;
  background-color: #f0f1f5;

  .van-cell-group--inset {
    margin: 0;
    margin-bottom: 0.26667rem;
    padding: 0.25rem;
    font-size: 0.4rem;
    position: relative;
    border-radius: 4%;
    box-shadow: 0px 0px 10px 2px #f3f3f3;
    width: 90%;
    margin: 0.4rem auto;

    .van-row {
      font-size: 0.4rem;
      line-height: 0.8rem;
      margin-bottom: 0;
    }

    .van-overlay {
      position: absolute;

      .wrapper {
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        height: 100%;
      }
    }
  }
}
</style>
