<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="status"
        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 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="deptName"
              :value="form.deptName"
              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
              clickable
              name="workUserNames"
              :value="form.workUserNames"
              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-form>
        </van-tab>
        <van-tab title="风险清单">
          <van-sticky>
            <van-dropdown-menu>
              <van-dropdown-item v-model="value1" :options="option1" />
              <van-dropdown-item v-model="value2" :options="option2" />
              <van-dropdown-item v-model="value3" :options="option3" />
            </van-dropdown-menu>
          </van-sticky>
          <div style="overflow-y: auto;">
            <van-cell-group
              inset
              v-for="(item, index) in riskList"
              :key="index"
            >
              <van-row
                type="flex"
                justify="space-between"
                style="margin-top:10px;"
              >
                <van-col span="22" @click="toRiskDetail(item)">
                  <van-col span="5">
                    <van-image
                      width="46"
                      height="46"
                      src="https://img01.yzcdn.cn/vant/cat.jpeg"
                    />
                    <van-image width="46" height="46" :src="item.avatar" />
                  </van-col>
                  <van-col span="17">
                    <van-row gutter="">
                      <van-col span="9">风险名称：</van-col>
                      <van-col span="15">{{ item.name }}</van-col>
                    </van-row>
                  </van-col>
                </van-col>
                <van-col span="2">
                  <van-row
                    :style="{
                      color: '#03b615'
                    }"
                  >
                    <van-icon name="arrow" size="26px" @click="goColorDetail" />
                  </van-row>
                </van-col>
              </van-row>
            </van-cell-group>
          </div>
        </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
      v-show="pathAuth == 'riskAssess' && (status == 0 || status == 1)"
      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
      v-show="pathAuth == 'riskManage' && status == 0"
      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="editTask"
        style="color: #4bced0;font-size: 14px;font-weight: 600;"
      >
        <div style="font-size: 22px;">
          <van-icon name="edit" />
        </div>
        <div>修改任务</div>
      </div>
      <div
        @click="delTask"
        style="color: #ec808d;font-size: 14px;font-weight: 600;"
      >
        <div style="font-size: 22px;"><van-icon name="cross" /></div>
        <div>删除任务</div>
      </div>
    </div>
    <div
      v-show="pathAuth == 'riskApprove' && status == 2"
      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="approveTask(1)"
        style="color: #4bced0;font-size: 14px;font-weight: 600;"
      >
        <div style="font-size: 22px;">
          <van-icon name="success" />
        </div>
        <div>审批通过</div>
      </div>
      <div
        @click="unApproveTask"
        style="color: #ec808d;font-size: 14px;font-weight: 600;"
      >
        <div style="font-size: 22px;"><van-icon name="cross" /></div>
        <div>审批否决</div>
      </div>
    </div>
    <!-- 否决弹出层 -->
    <van-popup
      v-model="isShowAppvoreList"
      closeable
      round
      position="right"
      :style="{ width: '90%', height: '100%' }"
    >
      <van-cell-group title="审批否决">
        <!-- 内容列表 -->
        <div class="con-list">
          <van-checkbox-group v-model="checkValue">
            <van-cell-group
              inset
              v-for="(item, index) in buildingList"
              :key="index"
            >
              <van-row gutter="">
                <van-col span="2">
                  <van-checkbox :name="item.buildingId" />
                </van-col>
                <van-col span="14">{{ 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="
                        {
                          checkValue = [item.buildingId];
                          approveTask(0);
                        }
                      "
                      >审批否决</van-button
                    >
                  </van-row></van-col
                >
              </van-row>
            </van-cell-group>
          </van-checkbox-group>

          <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="
                {
                  checkValue = [];
                  isShowAppvoreList = false;
                }
              "
              style="color: #FB6260;font-size: 14px;font-weight: 600;"
            >
              <div style="font-size: 22px;"><van-icon name="cross" /></div>
              <div>返回</div>
            </div>
            <div
              @click="approveTask(0)"
              style="color: #4bced0;font-size: 14px;font-weight: 600;"
            >
              <div style="font-size: 22px;"><van-icon name="success" /></div>
              <div>确认</div>
            </div>
          </div>
          <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 { timestampToTime, generateId } from "@/utils/format";
import { getFun, postFun } from "@/service/table.js";
export default {
  name: "risk-confirme",
  components: {
    LHeader
  },
  data() {
    return {
      text: "任务单",
      searchValue: "",
      messageText: "",
      checkValue: [],
      plan: 0,
      showIndex: false,
      isShowAppvoreList: false,
      isShowText: false,
      isHaveNews: false,
      messageList: [],
      riskLogList: [],
      buildingList: [],
      Loop: "", // 定时器
      active: 0,
      status: 0,
      pathAuth: "",
      form: {},
      tabs: [],
      riskList: [],
      value1: 0,
      value2: "a",
      value3: "1",
      option1: [
        { text: "楼栋", value: 0 },
        { text: "全部", value: 1 }
      ],
      option2: [
        { text: "楼层", value: "a" },
        { text: "全部", value: "b" }
      ],
      option3: [
        { text: "房间", value: "1" },
        { text: "全部", value: "2" }
      ]
    };
  },
  created() {
    this.planId = this.$route.params.id || sessionStorage.getItem("planId");
    var buildingId =
      this.$route.params.buildingId || sessionStorage.getItem("buildingId");
    this.pathAuth = sessionStorage.getItem("pathAuth");
    this.postList(this.planId, buildingId);
    this.getRiskTaskList(this.planId, buildingId);
  },
  methods: {
    timestampToTimes(time) {
      return timestampToTime(new Date(time), "DT2", true);
    },
    //执行任务
    performTasks() {
      sessionStorage.setItem(
        "buildingId",
        this.messageList.riskBuildingListDtos[0].buildingId
      );
      sessionStorage.setItem("planId", this.messageList.id);
      sessionStorage.setItem(
        "buildingName",
        this.messageList.riskBuildingListDtos[0].buildingName
      );
      this.$router.push({
        name: "riskInherent",
        params: {
          id: this.messageList.id,
          buildingId: this.messageList.riskBuildingListDtos[0].buildingId,
          buildingName: this.messageList.riskBuildingListDtos[0].buildingName
        }
      });
    },
    //修改任务
    editTask() {
      //TODO 修改任务
      console.log("修改任务");
    },
    //删除任务
    delTask() {
      //TODO 删除任务
      console.log("删除任务");
    },
    //审批通过
    approveTask(result) {
      //TODO 审批通过
      this.$router.push({
        name: "riskAppvoreText",
        params: {
          planId: this.planId,
          buildingIds: this.checkValue,
          result: result
        }
      });
      console.log("审批通过");
    },
    //审批否决
    unApproveTask() {
      if (this.status == 2) {
        this.lookdetail(this.planId);
      } else if (this.status == 3) {
        this.approveTask(0);
      }

      //TODO 审批否决
      console.log("审批否决");
    },
    //否决楼栋列表
    lookdetail(id) {
      this.isShowAppvoreList = true;
      getFun("/risk/plan/allocation/building/list/" + id)
        .then(res => {
          console.log(res);
          this.buildingList = res.data;
          this.checkValue = this.buildingList.map(item => item.buildingId);
        })
        .catch(() => {
          this.$toast.clear();
          this.$toast.fail("加载失败,请稍后再试");
        });
    },
    handadd() {
      this.$router.push({
        name: "riskAdd",
        params: {
          title: "新增"
        }
      });
    },
    //风险清单列表
    getRiskTaskList(planId, buildingId) {
      if (buildingId) {
        getFun(`/risk/plan/inherent/list/${planId}/${buildingId}`).then(res => {
          console.log(res.data, "lll");
          this.riskList = res.data;
        });
      }
    },
    postList(id, buildingId) {
      console.log(buildingId, "123");
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        loadingType: "spinner",
        duration: 0
      });
      var url = `/risk/plan/details/${id}`;
      if (buildingId) url += "?buildingId=" + buildingId;
      getFun(url)
        .then(res => {
          this.$toast.clear();
          this.messageList = res.data || res.rows;
          console.log(this.messageList);
          this.form = this.messageList.detailsDto;
          this.checkValue = this.messageList.riskBuildingListDtos.map(
            item => item.buildingId
          );
          this.riskLogList = this.messageList.approveListDtos;
          console.log(this.messageList.statusKey, 111);
          switch (this.messageList.statusKey) {
            case "CREATE_TASK":
            case "WAIT_START":
            case "WAIT_RETURN":
              this.status = 0;
              break;
            case "CREATE_TASK":
            case "WAIT_LEADER_RETURN":
            case "PROJECT_REPORT":
              this.status = 1;
              break;
            case "WAIT_APPROVE":
            case "FINISH":
              this.status = 2;
              break;
            case "REVOKE":
            case "FINISH":
              this.status = 3;
              break;
            default:
              this.status = 0;
              break;
          }
        })
        .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;
    },
    // 详情
    goDetail(data) {
      this.$router.push({
        name: "risk-big-detail",
        params: {
          id: data.businessId || data.id
        }
      });
      this.showIndex = null;
    },
    // 确认
    goConfirm(data) {
      this.$router.push({
        name: "risk-affirm",
        params: {
          data: data
        }
      });
      this.showIndex = null;
    },
    //固定资产
    goColorDetail() {
      // 楼层id：  floorId
      // 是否查看 ： isView： true/false  （true：查看，false:添加）
      this.$router.push({
        name: "riskView",
        params: {
          floorId: 18,
          isView: true
        }
      });
    },
    //风险清单列表点击
    toRiskDetail(item) {
      console.log(item, "LLLL");
      this.$router.push({
        name: "taskDetail",
        params: {
          id: item.id
        }
      });
    }
  }
};
</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>
