<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="todetail(index, item)"
                    >{{ active == 0 ? "去审批" : "查看详情" }}</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>
  </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-approve",
  components: {
    LHeader
  },
  data() {
    return {
      text: "风险审批",
      searchValue: "",
      isHaveNews: false,
      messageList: [
        {
          title: "XX项目评估任务单",
          time: "2022-12-12",
          name: "Mr.周",
          state: 1
        }
      ],
      Loop: "", // 定时器
      active: 0,
      // 状态 wait 待评估，running 执行中，finish 已完成
      tabs: [
        {
          title: "待审批",
          key: "running"
        },
        {
          title: "已审批",
          key: "completed"
        },
        {
          title: "已退回",
          key: "return"
        }
      ],
      buildingList: []
    };
  },
  mounted() {
    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/approve/list?status=running`;
      if (this.active == 0) {
        url = `/risk/plan/approve/list?status=running`;
      } else if (this.active == 1) {
        url = `/risk/plan/approve/list?status=completed`;
      } else {
        url = `/risk/plan/approve/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("加载失败,请稍后再试");
        });
    },

    //查看详情
    todetail(index, item) {
      this.$router.push({
        name: "riskTaskList",
        params: {
          id: item.id
          // buildingId: item.buildingId
        }
      });
      if (this.active == 0) sessionStorage.setItem("pathAuth", "riskApprove0");
      else sessionStorage.setItem("pathAuth", "riskApprove1");
      sessionStorage.setItem("planId", item.id);
      sessionStorage.setItem("buildingId", "");
    }
  }
};
</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>
