<template>
  <view class="task_details">
    <view class="content_card">
      <!-- 头部 -->
      <view class="cont_header flex_a_c_j_sb">
        <view class="task_name">{{ detail.title }}</view>
        <view class="is_matter">{{ detail.priority_name }}</view>
      </view>
      <!-- 内容 -->
      <view class="cont_details">
        <text class="">任务人：{{ detail.director_name }}</text>
        <text class="">协办人：{{ detail.assist_admin_names }}</text>
        <text class="">发布人：{{ detail.admin_name }}</text>
        <text class="">工作性质：{{ detail.is_bug }}</text>
        <text class="">计划完成日期：{{ detail.end_time }}</text>
        <text class="">任务状态：{{ detail.flow_name }}</text>
        <text class="">任务验收截止时间：{{ detail.initial_end_time }}</text>
        <text class="finish_time">初始完成日期：{{ detail.end_time }}</text>
        <text class="finish_time">实际完成日期：{{ detail.over_time }}</text>
      </view>
    </view>

    <view class="content_card">
      <!-- 头部 -->
      <view class="cont_header flex_a_c">任务描述</view>
      <!-- 内容 -->
      <view class="cont_details">
        {{ detail.content}}
      </view>
    </view>

    <view class="content_card">
      <!-- 头部 -->
      <view class="cont_header flex_a_c">文件附件</view>
      <!-- 内容 -->
      <view class="cont_details">
        <block v-for="(item, i) in fileArray" :key="i">
          <view class="file flex_a_c_j_sb">
            <view class="l_file">
              <view class="file_name">{{ item.name }}</view>
              <view class="file_size">{{ item.filesize | formatBytes }}</view>
              <!-- <view class="upload_people">上传人：{{ item.admin_name }}</view> -->
            </view>
            <u-icon @click="delImg(i)" name="close-circle" color="#333333" size="28"></u-icon>
          </view>
        </block>
        <view class="upload_box flex_a_c_j_sb" @click="seleckImage">
          <view>
            <view class="title">选择文件并上传</view>
            <view class="text">
              上传前，请规范命名，最大只能上传100M的文件<br />
              超过请压缩成多个文件上传。
            </view>
          </view>
          <u-icon name="plus-circle" color="#333333" size="28"></u-icon>
        </view>
      </view>
    </view>

    <view class="content_card">
      <!-- 头部 -->
      <view class="cont_header">
        <view class="flex_a_c_j_sb">
          <view class="approver">当前审批人：张三</view>
          <view class="audit_store">审核状态：<text>已通过</text> </view>
        </view>
        <view class="make_copy">抄送人：李四</view>
      </view>
      <!-- 内容 -->
      <view class="cont_details">
        <view class="examine">审批流程</view>
        <view class="flow_path">
          <block v-if="flowNodes[0].user_id_info.length>0">
            <block v-for="(item, i) in flowNodes[0].user_id_info">
              <view class="flex_a_c">
                <u-icon name="plus-circle" color="#34A853" size="20"></u-icon>
                <view class="name">{{ item.name }}</view>
                <view class="status_tag">创建</view>
                <u-icon name="arrow-right" color="#999999" size="16"></u-icon>
              </view>
            </block>
          </block>
        </view>
        <view class="examine">审批记录</view>
        <block v-if="flowNodes[0].check_list.length>0">
          <block v-for="(item,i) in flowNodes[0].check_list" :key="i">
            <view class="record flex">
              <view class="circle"></view>
              <text class="text">
                <text>{{ item.check_time_str }}</text>
                <text>{{ item.name }}</text>
                2023-03-24 :09:40 张三 提交 了此申请。操作意见：
                <text>{{ item.content }}</text>
              </text>
            </view>
          </block>
        </block>
      </view>
    </view>
    <view class="bott_btn flex_a_c">
      <view class="icons flex_a_c">
        <u-icon name="chat" size="28"></u-icon>
        <u-icon name="order" size="28"></u-icon>
      </view>
      <view class="turn_down">驳回记录（{{detail.count_bohui > 0 ? detail.count_bohui:0 }}）</view>
    </view>
  </view>
</template>

<script>
  import { Toast } from '@/libs/uniApi.js'
  import { oaUploads, uploads } from '@/api/upload'
  import { getTaskDetailsAPI } from '@/api/oaApi.js'
  export default {
    data() {
      return {
        taskId: '',
        attachment: [],
        loading: false,
        detail: {},
        fileArray: [], // 附件
        flowNodes: [{
          check_list: [],
          user_id_info: []
        }] // 流程
      }
    },
    onLoad(e) {
      this.taskId = e.id
      this.getTaskDetails()
    },
    onShow() {},
    methods: {
      async getTaskDetails() {
        const { detail, file_array, flow_nodes } = await getTaskDetailsAPI({ id: this.taskId })
        this.detail = detail
        this.fileArray = file_array
        flow_nodes.length > 0 ? this.flowNodes = flow_nodes : ''
      },
      seleckImage(i) {
        let that = this
        uni.chooseImage({
          count: 1,
          sizeType: ['original', 'compressed'],
          sourceType: ['album', 'camera'],
          success: function(res) {
            that.loading = true
            let objImg = {}
            objImg.name = res.tempFiles[0].name
            objImg.filesize = res.tempFiles[0].size
            objImg.admin_name = '马开明'
            oaUploads(res.tempFilePaths[0], 'img').then(res => {
              that.fileArray.push(res)
              that.loading = false
              Toast('上传成功')
            }).catch(err => {
              Toast('上传失败')
              that.loading = false
              console.log('上传失败', err)
            })
          },
          fail: function(err) {
            Toast('添加失败')
            console.log('失败', err)
          }
        });
      },
      delImg(i) {
        let that = this
        uni.showModal({
          title: '删除图片',
          content: '确定删除图片?',
          success: res => {
            if (res.confirm) {
              that.fileArray.splice(i, 1)
            } else if (res.cancel) {
              console.log('用户点击取消');
            }
          }
        })
      }
    },
    filters: {
      // 数字转MB
      formatBytes(bytes, decimals = 2) {
        if (bytes === 0) return '0 MB';
        const k = 1024;
        const sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
        const i = Math.floor(Math.log(bytes) / Math.log(k));
        return parseFloat((bytes / Math.pow(k, i)).toFixed(decimals)) + ' ' + sizes[i];
      }
    },
    onPullDownRefresh() {
      uni.stopPullDownRefresh()
    }
  }
</script>

<style lang="scss">
  .task_details {
    position: relative;
    padding: 26.32rpx 0 100rpx 0;
  }

  .content_card {
    width: 695rpx;
    margin: 0 auto;
    margin-bottom: 24.56rpx;
    padding: 0 28.07rpx;
    background-color: #fff;
    border-radius: 4px;

    .cont_header {
      padding: 21.05rpx 0;
      font-size: 31.58rpx;
      min-height: 82.46rpx;
      width: 100%;
      border-bottom: 1px solid rgba(204, 204, 204, 0.5);

      .task_name {
        width: 526.32rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .is_matter {
        font-size: 24.56rpx;
        border-radius: 4px;
        padding: 3.51rpx 17.54rpx;
        color: $theme-oa-color;
        background-color: #E4EDFF;
      }

      // 审批人
      .approver {
        font-size: 28.07rpx;
      }

      .audit_store {
        font-size: 31.58rpx;
      }

      .make_copy {
        color: #999;
        margin-top: 14.04rpx;
        font-size: 24.56rpx;
      }
    }

    .cont_details {
      padding: 24.56rpx 0;
      font-size: 28.07rpx;

      // 时间
      .finish_time {
        font-size: 24.56rpx;
        color: #999;
      }

      text {
        display: block;
        margin-bottom: 7.02rpx;
      }

      .upload_box {
        padding: 17.54rpx;
        background-color: #F7F7F7;
        border-radius: 4px;

        .title {
          font-size: 28.07rpx;
        }

        .text {
          margin-top: 7.02rpx;
          font-size: 21.05rpx;
          color: #999;
        }
      }

      .file {
        padding: 17.54rpx;
        border-radius: 4px;
        border: 1px solid #F2F2F2;
        margin-bottom: 17.54rpx;

        .file_size {
          margin-top: 7.02rpx;
        }

        .file_name {
          width: 525.7rpx;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .file_size,
        .upload_people {
          font-size: 21.05rpx;
          color: #999;
        }
      }

      // 审批
      .examine {
        margin-bottom: 17.54rpx;
      }

      .flow_path {
        margin-bottom: 14.04rpx;

        .name {
          margin: 0 14.04rpx 0 8.77rpx;
        }

        .status_tag {
          color: #999;
          margin-right: 8.77rpx;
        }
      }

      .record {
        position: relative;
        margin-bottom: 14.04rpx;

        .circle {
          width: 31.58rpx;
          height: 31.58rpx;
          background-color: #fff;
          border: 2px solid #34A853;
          border-radius: 50%;
          margin: 5px;
          display: flex;
          flex-direction: column;
          align-items: center;

          &::before {
            content: "";
            display: block;
            position: absolute;
            clear: both;
            width: 1px;
            height: 100%;
            background-color: rgba(204, 204, 204, 0.5);
            margin: 31.58rpx;
          }
        }

        .text {
          flex: 1;
          margin-left: 7.02rpx;
        }
      }

      :last-child {
        .circle {
          &::before {
            display: none;
          }
        }
      }
    }
  }

  .bott_btn {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 87.72rpx;
    display: flex;
    align-items: center;

    .icons {
      flex: 1;
      justify-content: space-around;
      height: 87.72rpx;
      background-color: #fff;
    }

    .turn_down {
      width: 421.05rpx;
      height: 87.72rpx;
      text-align: center;
      line-height: 87.72rpx;
      background: #3274F9;
      color: #fff;
    }
  }
</style>
