<template>
  <!-- 提交 -->
  <div>
    <van-sticky offset-top="0">
      <LHeader :text="text"></LHeader>
    </van-sticky>
    <div style="margin-bottom: 1.5rem;">
      <van-grid :column-num="3" style="background-color: #fff;">
        <van-grid-item>
          <div>发起人员:</div>
          <div>{{ messageList.createUserName }}</div>
        </van-grid-item>
        <van-grid-item>
          <div>项目负责人:</div>
          <div>{{ messageList.leaderUserName }}</div>
        </van-grid-item>
        <van-grid-item>
          <div>任务状态:</div>
          <div>{{ messageList.status }}</div>
        </van-grid-item>
        <van-grid-item>
          <div>开始时间:</div>
          <div>
            {{
              timestampToTimes(messageList.startTime) || messageList.startTime
            }}
          </div>
        </van-grid-item>
        <van-grid-item>
          <div>结束时间:</div>
          <div>
            {{ timestampToTimes(messageList.endTime) || messageList.endTime }}
          </div>
        </van-grid-item>
      </van-grid>
      <van-steps
        :active="active"
        active-icon="success"
        active-color="#38f"
        style="margin: 0.26rem 0;"
      >
        <van-step>任务发起</van-step>
        <van-step>风险评估</van-step>
        <van-step>评估审核</van-step>
        <van-step>项目完成</van-step>
      </van-steps>
      <van-tabs
        v-model="active"
        color="#2980f7"
        animated
        :sticky="true"
        offset-top="2.93rem"
      >
        <van-tab title="任务详情">
          <van-form
            :scroll-to-error="true"
            :show-error="false"
            validate-trigger="onSubmit"
          >
            <van-field
              readonly
              name="createUserName"
              :value="form.createUserName"
              label="创建人员"
              input-align="right"
              :rules="[{ required: true, message: '创建人员不能为空' }]"
            />
            <van-field
              readonly
              name="createDeptName"
              :value="form.createDeptName"
              label="创建单位"
              input-align="right"
              :rules="[{ required: true, message: '创建单位不能为空' }]"
            />
            <van-field
              readonly
              name="projectName"
              :value="form.projectName"
              label="任务名称"
              input-align="right"
              :rules="[{ required: true, message: '任务名称不能为空' }]"
            />

            <van-field
              readonly
              name="projectName"
              :value="form.projectName"
              label="关联项目"
              input-align="right"
              :rules="[{ required: true, message: '关联项目不能为空' }]"
            />

            <van-field
              readonly
              name="buildingNames"
              :value="form.buildingNames"
              label="评估楼栋"
              input-align="right"
              :rules="[{ required: true, message: '评估楼栋不能为空' }]"
            />

            <van-field
              readonly
              name="leaderUserName"
              :value="form.leaderUserName"
              label="项目负责人"
              input-align="right"
              :rules="[{ required: true, message: '事故类型不能为空' }]"
            />

            <van-field
              v-model="form.startTime"
              readonly
              name="location"
              label="任务开始时间"
              input-align="right"
              :formatter="
                () => {
                  return timestampToTimes(form.startTime);
                }
              "
              :rules="[{ required: true, message: '任务开始时间不能为空' }]"
            />

            <van-field
              v-model="form.endTime"
              readonly
              name="location"
              label="任务结束时间"
              :formatter="
                () => {
                  return timestampToTimes(form.endTime);
                }
              "
              input-align="right"
              :rules="[{ required: true, message: '任务结束时间不能为空' }]"
            />

            <van-field
              clickable
              name="workUserNames"
              :value="form.workUserNames"
              label="执行人员"
              input-align="right"
              :rules="[{ required: true, message: '执行人员不能为空' }]"
            />
          </van-form>
        </van-tab>
        <van-tab title="风险清单"> </van-tab>
        <van-tab title="审核记录">
          <div class="journal-wrap">
            <van-cell-group inset>
              <van-steps
                direction="vertical"
                :active="99999"
                v-if="riskLogList.length > 0"
              >
                <van-step v-for="(item, index) in riskLogList" :key="index">
                  <div class="step-wrap">
                    <van-row>
                      <van-col span="24"
                        ><div class="info-title">
                          {{ timestampToTimes(item.startTime) }}
                        </div></van-col
                      >
                    </van-row>
                    <van-row>
                      <van-col span="7"
                        ><span class="field-title">操作人：</span></van-col
                      >
                      <van-col span="17">{{ item.approvalUserName }}</van-col>
                    </van-row>
                    <van-row>
                      <van-col span="7"
                        ><span class="field-title">审批结果：</span></van-col
                      >
                      <van-col span="17">{{ item.taskName }}</van-col>
                    </van-row>
                    <van-row>
                      <van-col span="7"
                        ><span class="field-title">岗位：</span></van-col
                      >
                      <van-col span="17">{{ item.taskResult }}</van-col>
                    </van-row>
                    <!-- <van-row>
                    <van-col span="7"
                      ><span class="field-title">结果：</span></van-col
                    >
                    <van-col span="17">{{LogType(item.taskResult)}}</van-col>
                  </van-row> -->
                  </div>
                </van-step>
              </van-steps>
              <div style="text-align: center;" v-if="riskLogList.length == 0">
                暂无数据
              </div>
            </van-cell-group>
          </div>
        </van-tab>
        <van-tab title="风险评估报告">
          <div
            style="height: 1.5rem;
           background-color: #fff;
           border-bottom: 1px solid #97999a;
           display: flex;
           justify-content: space-between;
           line-height: 1.5rem;
           "
          >
            <div><van-icon name="column" size="26px" /></div>
            <div style="flex-grow:1;line-height: 0.6rem">
              <div>风险评估报告.PDF</div>
              <div>2019-3-21 10:23 100KB</div>
            </div>
            <div>
              <van-icon name="arrow" size="26px" />
            </div>
          </div>
          <div
            style="height: 1.5rem;
           background-color: #fff;
           border-bottom: 1px solid #97999a;
           display: flex;
           justify-content: space-between;
           line-height: 1.5rem;
           "
          >
            <div><van-icon name="column" size="26px" /></div>
            <div style="flex-grow:1;line-height: 0.6rem">
              <div>风险评估报告.PDF</div>
              <div>2019-3-21 10:23 100KB</div>
            </div>
            <div>
              <van-icon name="arrow" size="26px" />
            </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 style="color: #ec808d;font-size: 14px;font-weight: 600;">
          <div style="font-size: 22px;"><van-icon name="success" /></div>
          <div>任务完成</div>
        </div> -->
    </div>
  </div>
</template>

<script>
import LHeader from "@/components/header.vue";
import { timestampToTime, generateId } from "@/utils/format";
import { getFun, postFun } from "@/service/table.js";
export default {
  name: "riskBigDetail",
  components: {
    LHeader
  },
  data() {
    return {
      text: "任务单",
      searchValue: "",
      isHaveNews: false,
      messageList: [],
      riskLogList: [],
      Loop: "", // 定时器
      showIndex: null, // 是否显示遮罩层,
      active: 0,
      form: {},
      tabs: []
    };
  },
  created() {
    var planId = this.$route.params.id || sessionStorage.getItem("planId");
    this.postList(planId);
  },
  methods: {
    timestampToTimes(time) {
      return timestampToTime(new Date(time), "DT2", true);
    },
    performTasks() {
      this.$router.push({
        name: "riskInherent",
        params: {
          id: this.messageList.id
        }
      });
    },
    handadd() {
      this.$router.push({
        name: "riskAdd",
        params: {
          title: "新增"
        }
      });
    },
    postList(id) {
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        loadingType: "spinner",
        duration: 0
      });
      getFun(`/risk/plan/details/${id}`)
        .then(res => {
          this.$toast.clear();
          this.messageList = res.data || res.rows;
          this.form = this.messageList.detailsDto;
          this.riskLogList = this.messageList.approveListDtos;
        })
        .catch(() => {
          this.$toast.clear();
          this.$toast.fail("加载失败,请稍后再试");
        });
    },

    onSearch(val) {
      this.postList(this.searchValue);
    },
    touchstart(index, item) {
      if (this.showIndex != null) {
        this.showIndex = null;
        return;
      }
      this.showIndex = index;
    },
    // 确认
    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;
}
</style>
