<template>
  <div style="padding-top: 13vw">
    <TopNav navTitle="任务详情" :showRight="false" :showLeft="true" />
    <div class="detail_box" v-if="reDetail">
      <div class="item">
        <span class="label">名称</span>
        <span class="text">{{ reDetail.rwmc }}</span>
      </div>
      <div class="item">
        <span class="label">内容</span>
        <span class="text">{{ reDetail.rwnr }}</span>
      </div>
      <!-- <div class="item">
        <span class="label">链接</span>
        <span class="text">{{ reDetail.rwlj }}</span>
      </div> -->
      <div class="item">
        <span class="label">状态</span>
        <span class="text" :class="{
                    green: reDetail.rwzt == 0,
                    yellow: reDetail.rwzt == 1 || reDetail.rwzt == 2,
                  }">{{ setDict(reDetail.rwzt, D_BZ_RWZT) }}</span>
      </div>
      <!-- <div class="item">
        <span class="label">执行人员数</span>
        <span class="text">{{ reDetail.rwzxrysl }}</span>
      </div> -->

      <div class="item">
        <span class="label">发起人</span>
        <span class="text">{{ reDetail.cjrxm }}{{ reDetail.cjrlxdh }}</span>
      </div>
      <div class="item">
        <span class="label">紧急程度</span>
        <span class="text">{{ setDict(reDetail.rwjjcd, D_BZ_RWJJCD) }}</span>
      </div>
      <div class="item">
        <span class="label">任务细类</span>
        <span class="text">{{ setDict(reDetail.rwxl, D_BZ_RWXL) }}</span>
      </div>
      <div class="item">
        <span class="label">进行状态</span>
        <span class="text" :class="{
                    bule: reDetail.rwjxzt == 1,
                    yellow: reDetail.rwjxzt == 4,
                    green: reDetail.rwjxzt == 3,
                    red: reDetail.rwjxzt == 2,
                  }">{{ setDict(reDetail.rwjxzt, D_BZ_RWJXZT) }}</span>
      </div>

      <div class="item">
        <span class="label">发起时间</span>
        <span class="text">{{ reDetail.rwfqsj }}</span>
      </div>
      <div class="item">
        <span class="label">要求完成时间</span>
        <span class="text">{{ reDetail.rwyqwcsj }}</span>
      </div>
      <div class="item">
        <span class="label">个人执行状态</span>
        <span class="text">{{ setDict(userRwzt, D_BZ_GRRWZT) }}</span>
      </div>

      <div class="item" v-if="reDetail.rwwcsj">
        <span class="label">完成时间</span>
        <span class="text">{{ reDetail.rwwcsj }}</span>
      </div>
      <div class="item" style="border: none" v-if="reDetail.fjid">
        <span class="label">附件</span>
        <div>
          <div class="fj_item" v-for="(item, index) in fjList" :key="index + 'file'">
            <van-image width="120px" height="120px" fit="cover" :src="baseUrl + reDetail.fjid.split(',')[index]"
              @click="onClickImg(baseUrl + reDetail.fjid.split(',')[index])" v-if="item && item.fileFormat == 'png'">
              <template v-slot:loading>
                <van-loading type="spinner" size="20" />
              </template>
            </van-image>
            <a :href="baseUrl + reDetail.fjid.split(',')[index]" style="text-decoration: underline" v-else>{{ item.name
                          }}</a>
          </div>
        </div>
      </div>
      <!-- 通知任务 -->
      <div v-if="
                reDetail.rwlx == 1 &&
                reDetail.rwjxzt !== '3' &&
                reDetail.rwjxzt !== '4'
              " class="btn_box">
        <van-button :loading="loading" round block type="success" style="margin: 0 2vw" @click="onConfirm">
          确认
        </van-button>
      </div>
    </div>
    <van-loading type="spinner" style="padding-top: 50vw; text-align: center" v-if="loading" />
    <van-empty v-if="showEmpty" description="错误" image="error" />
  </div>
</template>

<script setup>
import axios from "axios";
import { ref, onMounted, reactive } from "vue";
import TopNav from "../../../components/topNav.vue";
import { getMyTaskDetail, getFjInfo } from "../../../api/rwzx.js";
import { getDictList, setDict } from "../../../utils/dict";
import { baseUrl2 } from "../../../utils/request.js";
import { Dialog, ImagePreview } from "vant";
import { transmitTask } from "../../../api/yyzxApi.js";
import router from "../../../router/index.js";
import { IS_PNG, hintToast } from "../../../utils/tools.js";
const {
  D_BZ_RWXL,
  D_BZ_RWJJCD,
  D_BZ_RWJXZT,
  D_BZ_RWZT,
  D_BZ_GRRWZT,
} = getDictList(
  "D_BZ_RWXL",
  "D_BZ_RWJJCD",
  "D_BZ_RWJXZT",
  "D_BZ_RWZT",
  "D_BZ_GRRWZT"
); //字典信息
import { useRoute } from "vue-router";
import { format } from "echarts";
const id = ref("");
const reDetail = ref(null); //任务详情数据
const loading = ref(true);
const showEmpty = ref(false);
const showImage = ref(false); //是否预览图片
const userRwzflx = ref(""); //用户任务类型
const userRwzt = ref(""); //个人任务状态
const baseUrl = `${baseUrl2}/mosty-api/mosty-base/minio/image/download/`;

const list = reactive({
  phone: "", //转发人手机号
  fzrList: [], //转发人数据
});
const rwId = ref("");

onMounted(() => {
  rwId.value = useRoute().query.id;
  _getMyTaskDetail();
});
//预览图片
function onClickImg(url) {
  ImagePreview([url]);
}
//处置任务下一步
function onNext() {
  if (reDetail.value.rwxl == "04") {
    router.push("/yyzx/views/addZbbb");
  } else if (reDetail.value.rwxl == "03") {
    router.push("/yyzx/xfbb/addXfbb");
  }
}

//确认任务
function onConfirm() {
  Dialog.confirm({
    title: "提示",
    message: "是否知晓任务信息!",
    confirmButtonColor: "#3e6ee8",
  }).then((res) => {
    _setTransmitTask(reDetail.value.id, 2);
  });
}

/**
 * 设置任务状态
 * @export
 * @param {*} rwid
 * @param {*} rwzt 1 进行中  2 已完成  3 已转发  4 已驳回
 * @param {*} zfjsrid 转发人ID
 */
function _setTransmitTask(rwid, rwzt, zfjsrid) {
  let data = {
    rwid,
    rwzt,
    zfjsrid,
  };
  try {
    let location = JSON.parse(bridge.getLocation());
    data.jd = location.app_x;
    data.wd = location.app_y;
  } catch (error) { }
  transmitTask(data).then((res) => {
    if (rwzt != 1) {
      hintToast("成功")
    }
    // _getMyTaskDetail();
    router.go(-1);
  });
}

//获取任务详情
function _getMyTaskDetail() {
  getMyTaskDetail(rwId.value)
    .then((res) => {
      loading.value = false;
      reDetail.value = res;
      if (res.fjid) {
        _getFile(res.fjid);
        _getUserRwzflx();
      }
    })
    .catch((err) => {
      loading.value = false;
      showEmpty.value = true;
    });
}
/**
 *
 * @param {Object} fjid
 */
const fjList = ref([]);
function _getFile(fjid) {
  const requestArr = fjid.split(",").map((item) => {
    return getFjInfo(item);
  });
  Promise.all(requestArr).then((resArr) => {
    resArr.forEach((res) => {
      if (IS_PNG(res.suffix.substring(1, res.suffix.length))) {
        res.fileFormat = "png";
      } else {
        res.fileFormat = "file";
      }
      fjList.value.push(res);
    });
  });
}
//获取用户任务转发类型
function _getUserRwzflx() {
  if (reDetail.value && reDetail.value.userDtoList.length > 0) {
    let info = reDetail.value.userDtoList[0];
    userRwzflx.value = info.rwzflx;
    userRwzt.value = info.rwzt;
    //如果是待查看 改为进行中
    // if (userRwzt.value == 0) _setTransmitTask(reDetail.value.id, 1);
  }
  //   let userInfo = JSON.parse(getStorage("userInfo"));
  //   switch (reDetail.value.rwjsdx) {
  //     case "01":
  //       if (reDetail.value && reDetail.value.userDtoList.length > 0) {
  //         let info = reDetail.value.userDtoList.find((item) => {
  //           return userInfo.idEntityCard == item.jsrsfzh;
  //         });
  //         userRwzflx.value = info.rwzflx;
  //         userRwzt.value = info.rwzt;
  //         //如果是待查看 改为进行中
  //         // if (userRwzt.value == 0) _setTransmitTask(reDetail.value.id, 1);
  //       }
  //       break;
  //     case "02":
  // 		if (reDetail.value && reDetail.value.userDtoList.length > 0) {
  //         let info = reDetail.value.userDtoList.find((item) => {
  //           return userInfo.deptList[0].deptId == item.jsbmdm;
  //         });
  //         userRwzflx.value = info.rwzflx;
  //         userRwzt.value = info.rwzt;
  //         //如果是待查看 改为进行中
  //         // if (userRwzt.value == 0) _setTransmitTask(reDetail.value.id, 1);
  //       }
  //       break;
  //     case "03":
  //       break;
  //   }
}
</script>

<style lang="scss" scoped>
@import "../../../assets/styles/mixin.scss";

.detail_box {
  padding: 3vw;
  @include font_size($font_medium_s);
  @include font_color($font-color-theme);

  .item {
    display: flex;
    justify-content: space-between;
    padding: 3vw 0;
    @include item_bottom_color($bottom-border-top-clore-theme);

    .label {
      width: 25%;
    }

    .text {
      width: 70%;
      text-align: right;
    }
  }
}

.fj_item {
  padding: 8px 0;
}

.btn_box {
  display: flex;
  justify-content: space-between;
  margin-top: 5vw;
}
</style>
