<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, "DT2") ||
        messageList.startTime
      }}
          </div>
        </van-grid-item>
        <van-grid-item>
          <div>结束时间:</div>
          <div>
            {{
          timestampToTimes(messageList.endTime, "DT2") ||
          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="name" :value="form.name" 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 readonly 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, 'DT2');
      }
        " :rules="[{ required: true, message: '任务开始时间不能为空' }]" />

            <van-field v-model="form.endTime" readonly name="location" label="任务结束时间" :formatter="() => {
        return timestampToTimes(form.endTime, 'DT2');
      }
        " input-align="right" :rules="[{ required: true, message: '任务结束时间不能为空' }]" />
          </van-form>
        </van-tab>
        <van-tab title="风险清单">
          <van-sticky>
            <van-dropdown-menu>
              <van-dropdown-item v-model="buildingFValue" :options="buildingFList" get-container="body"
                @change="changeNextList('GroundList', 'buildingF')" /> <!-- 楼栋 -->
              <van-dropdown-item v-model="groundValue" :options="groundList" get-container="body"
                @change="changeNextList('FloorList', 'ground')" /> <!-- 地上地下 -->
              <van-dropdown-item v-model="floorValue" :options="floorList" get-container="body"
                @change="changeNextList('RoomList', 'floor')" /> <!-- 楼层 -->
              <van-dropdown-item v-model="roomValue" :options="roomList" get-container="body"
                @change="changeNextList('', 'room')" /> <!-- 房间 -->
            </van-dropdown-menu>
          </van-sticky>
          <div style="overflow-y: auto;padding: 10px;">
            <van-cell-group inset v-for="(item, index) in riskList" :key="index">
              <van-row class="list-row" type="flex" align="center" style="margin-top:10px;" @click="toRiskDetail(item)">
                <!-- <van-col span="20"> -->
                <van-col>
                  <van-image style="vertical-align: middle;margin-right: 15px;margin-left: 10px;" width="58" height="58"
                    :src="item.level == '重大风险'
        ? require('@/assets/imgs/redInherent.png')
        : item.level == '较大风险'
          ? require('@/assets/imgs/inherentOrange.png')
          : item.level === '一般风险'
            ? require('@/assets/imgs/yellowInherent.png')
            : require('@/assets/imgs/blueInherent.png')
        " />
                  <!-- <van-image width="46" height="46" :src="item.avatar" /> -->
                </van-col>
                <van-col span="17">
                  <van-row gutter="0">
                    <van-col span="10" style="font-weight: bold;color:#000;font-size: 16px;">风险名称：</van-col>
                    <van-col span="14" style="color: #000;font-size: 16px;">{{
        item.name
      }}</van-col>
                  </van-row>
                  <van-row gutter="0">
                    <van-col span="9" style="font-weight: bold;color:#666666;font-size: 12px;">风险等级：</van-col>
                    <van-col span="15" style="color: #9d9d9d;font-size: 12px;">{{ item.level }}</van-col>
                  </van-row>
                  <van-row gutter="0">
                    <van-col span="9" style="font-weight: bold;color:#666666;font-size: 12px;">上报时间：</van-col>
                    <van-col span="15" style="color: #9d9d9d;font-size: 12px;">{{ timestampToTimes(item.createTime,
        "DT2")
                      }}</van-col>
                  </van-row>
                  <van-row gutter="0">
                    <van-col span="9" style="font-weight: bold;color:#666666;font-size: 12px;">所属房间：</van-col>
                    <van-col span="15" style="color: #9d9d9d;font-size: 12px;">{{
        item.buildingName + item.floorName + item.roomName
      }}</van-col>
                  </van-row>
                </van-col>
                <van-col span="4" class="list-right">
                  <van-tag plain type="primary">详情<van-icon name="arrow" size="12px" /></van-tag>

                  <!-- <van-row type="flex">
                    详情
                    
                  </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, "DT1") }}
                        </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
                        }}{{
        item.taskResult
          ? item.taskResult == 1
            ? "（审批通过）"
            : "（审批否决）"
          : ""
      }}</van-col>
                    </van-row>
                    <van-row v-show="item.taskResult">
                      <van-col span="7"><span class="field-title">审批意见：</span></van-col>
                      <van-col span="17">{{ item.taskOpinion }}</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;
           background-color: #fff;
           border-bottom: 1px solid #97999a;
           display: flex;
           justify-content: space-between;
           line-height: 1.5rem;
           color:#010101;
           " :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 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 == 'riskApprove0' && 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, "DT2") }}
                    </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: "riskTaskList",
  components: {
    LHeader
  },
  data() {
    return {
      text: "任务单",
      searchValue: "",
      messageText: "",
      checkValue: [],
      isAll: false,
      plan: 0,
      showIndex: false,
      isShowAppvoreList: false,
      isShowText: false,
      isHaveNews: false,
      messageList: [],
      riskLogList: [],
      buildingList: [],
      Loop: "", // 定时器
      active: 0,
      status: 0,
      pathAuth: "",
      form: {},
      tabs: [],
      riskList: [],
      floorValue: 0,
      groundValue: 0,
      roomValue: 0,
      buildingFValue: 0,
      buildingFList: [
        { text: "全部", value: 0 }
      ],
      groundList: [
        { text: "全部", value: 0, children: [] }
      ],
      floorList: [
        { text: "全部", value: 0 }
      ],
      roomList: [
        { text: "全部", value: 0 }
      ],
    };
  },
  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);
    this.getBuildingFList()
  },
  methods: {
    timestampToTimes(time, type) {
      return timestampToTime(new Date(time), type, true);
    },
    fileUrl() {
      // return window.location.origin + '/dev-api/profile/upload/report/风险评估报告模板.docx'
      return 'http://rongtongpc.censoft.com.cn/dev-api/profile/upload/report/风险评估报告模板.docx'
    },
    /* swp add 风险清单筛选 */
    changeData(arr) {
      if (Array.isArray(arr)) {
        return arr.map(item => ({ text: item.name, value: item.id || item.name, ...item }))
      }
    },
    getBuildingFList() {
      getFun(`/risk/plan/plan/building/list/${this.planId}`).then(res => {
        const data = res.data;
        this.buildingFList = [{ text: "全部", value: 0 }, ...this.changeData(data)]
      })
    },
    getGroundList() {
      getFun(`/risk/plan/floor/list/${this.buildingFValue}`)
        .then(res => {
          const data = res.data;
          this.groundList = [{ text: "全部", value: 0, children: [] }, ...this.changeData(data)]
        })
        .catch(() => {
          this.$toast.fail("加载失败,请稍后再试");
        });
    },
    getFloorList() {
      const getfloors = this.groundList.find(x => x.value === this.groundValue)
      if (getfloors) {
        this.floorList = [{ text: "全部", value: 0 }, ...this.changeData(getfloors.children)]
      }
    },
    getRoomList() {
      getFun(`/risk/plan/room/list/${this.floorValue}`)
        .then(res => {
          const data = res.data;
          this.roomList = [{ text: "全部", value: 0 }, ...this.changeData(data)]
        }).catch(() => {
          this.$toast.fail("加载失败,请稍后再试");
        });
    },
    /* 切换楼栋，楼层 */
    changeNextList(needChange, from) {
      this.getRiskTaskList(this.planId, this.buildingFValue || '', {
        floorId: this.floorValue || '',
        roomId: this.roomValue || '',
      })
      /* 清空后面子项 start*/
      const list = ['buildingF', 'ground', 'floor', 'room'];
      const i = list.indexOf(from);
      if (i > -1) {
        list.slice(i + 1).forEach(val => {
          this[val + 'Value'] = 0;
          this[val + 'List'] = [{ text: "全部", value: 0 }];
        })
      }
      /* 清空后面子项 end*/
      needChange && this['get' + needChange]()
    },
    /* swp end 风险清单筛选 */


    //执行任务
    performTasks() {
      sessionStorage.setItem(
        "buildingId",
        this.messageList.detailsDto.buildingIds
      );
      sessionStorage.setItem("planId", this.messageList.id);
      sessionStorage.setItem(
        "buildingName",
        this.messageList.detailsDto.buildingNames
      );
      sessionStorage.setItem(
        "projectId",
        this.messageList.detailsDto.projectId
      );
      sessionStorage.setItem(
        "projectName",
        this.messageList.detailsDto.projectName
      );

      this.$router.push({
        name: "riskInherent",
        params: {
          id: this.messageList.id,
          buildingId: this.messageList.detailsDto.buildingIds,
          buildingName: this.messageList.detailsDto.buildingNames
        }
      });
    },
    //修改任务
    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.isAll) {
        this.approveTask(0);
      } else {
        this.lookdetail(this.planId);
      }

      //TODO 审批否决
      console.log("审批否决");
    },
    //否决楼栋列表
    lookdetail(id) {
      this.isShowAppvoreList = true;
      getFun("/risk/plan/allocation/building/list/" + id)
        .then(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, data) {
      if (buildingId) {
        getFun(`/risk/plan/inherent/list/${planId}/${buildingId}`, data).then(res => {
          this.riskList = res.data;
        });
      } else {
        getFun(`/risk/plan/inherent/list/${planId}`).then(res => {
          this.riskList = res.data;
        });
      }
    },
    postList(id, buildingId) {
      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;
          this.form = this.messageList.detailsDto;
          this.checkValue = this.messageList.riskBuildingListDtos.map(
            item => item.buildingId
          );
          this.riskLogList = this.messageList.approveListDtos;
          switch (this.messageList.statusKey) {
            case "CREATE_TASK":
            case "WAIT_START":
              this.status = 0;
              break;
            case "RUNNING":
            case "WAIT_RETURN":
              this.status = 1;
              break;
            case "WAIT_LEADER_APPROVE":
            case "WAIT_LEADER_RETURN":
              this.status = 2;
              this.isAll = false;
              break;

            case "WAIT_APPROVE":
              this.status = 2;
              this.isAll = true;
              break;
            case "REVOKE":
            case "FINISH":
            case "PROJECT_REPORT":
              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) {
      sessionStorage.setItem("inherentId", item.id);
      this.$router.push({
        name: "taskDetail",
        params: {
          inherentId: item.id,
          floorId: item.floorId
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
#app {
  font-family: "";
  color: #2c3e50;
}

.cell-wrap {
  position: relative;
}

.van-cell-group--inset .van-row {
  line-height: 1.5 !important;
}

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;
  }
}

.list-row {
  position: relative;
}

.list-right {
  position: absolute;
  right: 0;
}

.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;
}

.item-prop {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
</style>
