<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="风险评估报告">
          <a style="height: 1.5rem;
          color:#010101;
           background-color: #fff;
           border-bottom: 1px solid #97999a;
           display: flex;
           justify-content: space-between;
           line-height: 1.5rem;
           " :href="fileUrl()" target="_blank">
            <div><van-icon name="column" size="26px" /></div>
            <div style="flex-grow:1;line-height: 0.6rem">
              <div>风险评估报告模板.docx</div>
              <div>2019-3-21 10:23 154KB</div>
            </div>
            <div>
              <van-icon name="arrow" size="26px" />
            </div>
          </a>
        </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: {
    fileUrl() {
      // return window.location.origin + '/dev-api/profile/upload/report/风险评估报告模板.docx'
      return 'http://rongtongpc.censoft.com.cn/dev-api/profile/upload/report/风险评估报告模板.docx'
    },
    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>
