<template>
  <!-- 提交 -->
  <div>
    <van-sticky offset-top="0">
      <LHeader :text="text"></LHeader>
    </van-sticky>
    <van-tabs
      v-model="active"
      @change="postList"
      color="#2980f7"
      animated
      :sticky="true"
    >
      <van-tab v-for="item in tabs" :key="item.key" :title="item.title">
        <!-- 内容列表 -->
        <div class="con-list">
          <van-cell-group
            inset
            v-for="(item, index) in messageList"
            :key="index"
          >
            <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">{{ item.leaderUserName }}</van-col>
                </van-row>
                <van-row gutter="">
                  <van-col span="9">发起时间：</van-col>
                  <van-col span="15">{{
                    timestampToTimes(item.startTime)
                  }}</van-col>
                </van-row>
              </van-col>
              <van-col span="7">
                <van-row
                  :style="{
                    color:
                      active == 0
                        ? '#f79648'
                        : active == 1
                        ? '#0069e5'
                        : '#03b615'
                  }"
                >
                  {{ item.state }}
                </van-row>
                <van-row>
                  <van-button
                    type="info"
                    size="mini"
                    @click="lookdetail(index, item)"
                    >执行情况</van-button
                  >
                </van-row>
              </van-col>
            </van-row>
          </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>
        <!-- 暂无数据 -->
        <!-- {{messageList}} -->
      </van-tab>
    </van-tabs>
    <!-- 长按显示遮罩层 -->
    <van-popup
      v-model="showIndex"
      closeable
      round
      position="right"
      :style="{ width: '90%', height: '100%' }"
    >
      <van-cell-group title="执行情况">
        <!-- 内容列表 -->
        <div class="con-list">
          <van-cell-group
            inset
            v-for="(item, index) in buildingList"
            :key="index"
          >
            <van-row gutter="">
              <van-col span="16">{{ item.buildingName }}</van-col>
              <van-col
                span="8"
                :style="{
                  color:
                    item.status == 'wait'
                      ? '#F79648'
                      : item.status == 'finish'
                      ? '#03B615'
                      : '#FF041D'
                }"
                >{{
                  item.status == "wait"
                    ? "待评估"
                    : item.status == "finish"
                    ? "已完成"
                    : "已退回"
                }}</van-col
              >
            </van-row>

            <van-row>
              <van-col span="18">
                <van-row gutter="">
                  <van-col span="8">创 建 人：</van-col>
                  <van-col span="16">{{ item.createUserName }}</van-col>
                </van-row>

                <van-row gutter="">
                  <van-col span="8">处理人员：</van-col>
                  <van-col span="16">{{ item.workUserNames }}</van-col>
                </van-row>

                <van-row gutter="">
                  <van-col span="8">发起时间：</van-col>
                  <van-col span="16"
                    >{{ timestampToTimes(item.startTime) }}
                  </van-col>
                </van-row>
              </van-col>
              <van-col span="6">
                <van-row>
                  <van-button
                    type="info"
                    size="mini"
                    @click="todotail(index, item)"
                    >查看详情</van-button
                  >
                </van-row></van-col
              >
            </van-row>
          </van-cell-group>
          <div
            style="
              width: 100%;
              text-align: center;
              font-size: 0.48rem;
              position: fixed;
              top: 30%;
            "
            v-if="buildingList['length'] == 0"
          >
            暂无数据
          </div>
        </div>
      </van-cell-group>
    </van-popup>
  </div>
</template>

<script>
import LHeader from "@/components/header.vue";
import { getFun, postFun } from "@/service/table.js";
import { timestampToTime, generateId } from "@/utils/format";
export default {
  name: "risk-execution",
  components: {
    LHeader
  },
  data() {
    return {
      text: "执行情况管理",
      searchValue: "",
      isHaveNews: false,
      messageList: [
        {
          title: "XX项目评估任务单",
          time: "2022-12-12",
          name: "Mr.周",
          state: 1
        }
      ],
      Loop: "", // 定时器
      showIndex: false, // 是否显示遮罩层,
      active: 0,
      tabs: [
        {
          title: "待执行",
          key: "running"
        },
        {
          title: "已执行",
          key: "finish"
        },
        {
          title: "已退回",
          key: "return"
        }
      ],
      buildingList: []
    };
  },
  created() {
    this.postList(0);
  },
  methods: {
    timestampToTimes(time) {
      return timestampToTime(new Date(time), "DT2", true);
    },
    handadd() {
      this.$router.push({
        name: "riskAdd",
        params: {
          title: "新增"
        }
      });
    },
    postList(name, title) {
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        loadingType: "spinner",
        duration: 0
      });
      let url = `/risk/plan/task/list?status=running`;
      if (name == 0) {
        url = `/risk/plan/task/list?status=running`;
      } else if (name == 1) {
        url = `/risk/plan/task/list?status=finish`;
      } else {
        url = `/risk/plan/task/list?status=return`;
      }
      getFun(url)
        .then(res => {
          this.$toast.clear();
          this.messageList = res.data || res.rows;
          // 判断有无数据返回
          if (this.messageList.length == 0) {
            this.isHaveNews = true;
          }
        })
        .catch(() => {
          this.$toast.clear();
          this.$toast.fail("加载失败,请稍后再试");
        });
    },

    onSearch(val) {
      this.postList(this.searchValue);
    },
    //执行情况
    lookdetail(index, item) {
      this.showIndex = true;
      console.log(item);
      getFun("/risk/plan/allocation/building/list/" + item.id)
        .then(res => {
          console.log(res);
          this.buildingList = res.data;
        })
        .catch(() => {
          this.$toast.clear();
          this.$toast.fail("加载失败,请稍后再试");
        });
    },
    //查看详情
    todotail(index, item) {
      console.log(item);
      this.$router.push({
        name: "riskTaskList",
        params: {
          id: item.id,
          buildingId: item.buildingId
        }
      });
      sessionStorage.setItem("planId", item.id);
      sessionStorage.setItem("pathAuth", "riskAssess");
      sessionStorage.setItem("buildingId", item.buildingId);
      this.showIndex = false;
    },
    // 确认
    goConfirm(data) {
      this.$router.push({
        name: "risk-affirm",
        params: {
          data: data
        }
      });
      this.showIndex = false;
    }
  }
};
</script>
<style lang="less" scoped>
#app {
  font-family: "";
  color: #2c3e50;
}

.con-list {
  padding: 0;
  background-color: #f0f1f5;
  position: relative;

  .van-cell-group--inset {
    margin: 0;
    margin-bottom: 0.26667rem;
    padding: 0.25rem;
    font-size: 0.4rem;
    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;
    }
  }
}

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