<template>
  <view class="task_page">
    <u-skeleton v-if="skeleton" :class="{'loading': skeleton}" :animate="true" title rows="5" rows-width="92%"
      rowsHeight="56">
    </u-skeleton>
    <block v-else>
      <view class="card">
        <view class="c_title">{{`任务名称: ${taskInfo.title||''}`}}</view>
        <view>{{taskInfo.content||''}}</view>
      </view>
      <view class="card" v-if="taskInfo.approve_status==3">
        <view class="c_title" style="color: #FF7C32;">驳回提示</view>
        <u-line style="margin: 14rpx 0;"></u-line>
        <view class="text" style="color: #FF7C32;">{{taskInfo.deny_notes}}</view>
        <button v-if="other.is_commit==1" class="btn" @click="toUpdate">去修改</button>
      </view>
      <view class="card">
        <view class="c_title">任务完成证明</view>
        <view class="file">
          <view class="file_item" v-for="(item, index) in imgList" :key="'file'+index">
            <image class="image" :src="item" @click="priview(index)"></image>
            <image v-if="taskInfo.status==2 && other.is_commit==0" class="del" src="/static/icons/delete.png" @click.stop="deleteFile(index)">
            </image>
          </view>
          <view v-if="taskInfo.status==2 && other.is_commit==0" class="file_btn" @click="chooseFile">
            <image src="/static/icons/plus.png"></image>
          </view>
          <view class="file_empty" v-for="k in placeholderLength" :key="'empty'+k"></view>
        </view>
      </view>
      <view class="card" style="margin-bottom: 160rpx;">
        <view class="c_title">补充说明</view>
        <u--textarea :disabled="taskInfo.status!=2" v-model="remark" placeholder="请输入内容"
          placeholderStyle="font-size: 22rpx;" count maxlength="500" autoHeight
          style="font-size: 28rpx;background-color: #eee;min-height: 100px;padding-bottom: 50rpx;"></u--textarea>
      </view>
      <mybtn v-if="taskInfo.status==2&&other.is_commit==0" text="确认提交" @click="$u.throttle(submit, 1500)"></mybtn>
      <mybtn v-else-if="taskInfo.status==3" text="已完成" :my_btn_disabled="true" @click="showToast('任务已完成!')"></mybtn>
      <mybtn v-else-if="taskInfo.status==5" text="已关闭" :my_btn_disabled="true" @click="showToast('任务已关闭!')"></mybtn>
      <mybtn v-else-if="taskInfo.approve_status==3" text="已驳回,请重新提交" @click="toUpdate"></mybtn>
      <mybtn v-else text="已提交,请等待审核" :my_btn_disabled="true" @click="showToast('请耐心等待审核结果')"></mybtn>
    </block>
  </view>
</template>

<script>
  import {
    upLoadImage,
  } from "@/api/file.js";
  import { Toast } from "../../libs/uniApi";
  import { marketTask10Detail, marketTask10Commit } from "@/api/task.js"
  export default {
    data() {
      return {
        skeleton: true,
        other: {
          annex: [], // 图片列表
          is_commit: 0, // 是否提交
          note: "", // 详情描述
          video_annex: [] // 视频列表
        },
        taskInfo: {
          id: '',
          title: '',
          content: '',
          extend: {},
          status: 0
        },
        sign_in_table: '',
        remark: '',
        imgList: [], // 上传的图片列表
        stage: 1, // 任务进行的状态
        stage1: {},
        stage2: {},
        stage3: {},
        stage4: {},
      }
    },
    onLoad(options) {
      options.task_id ? this.taskInfo.id = options.task_id : null;
      options.stage ? this.stage = +options.stage : null;
      this.initTask();
    },
    onShow() {},
    computed: {
      // 占位长度
      placeholderLength() {
        if (this.taskInfo.status != 2||this.other.is_commit==1) return this.imgList.length % 3 == 0 ? 0 : 3 - this.imgList.length % 3;
        return (this.imgList.length + 1) % 3 == 0 ? 0 : 3 - (this.imgList.length + 1) % 3;
      },
    },
    methods: {
      async initTask() {
        this.skeleton = true;
        let res = await marketTask10Detail({
          id: this.taskInfo.id
        });
        // approve_status 状态 0待审核,1审核中,2审核通过,3审核不通过,4撤销审核
        this.taskInfo = res.data;
        if(!this.taskInfo.approve_status)this.taskInfo.approve_status=0;
        if(this.taskInfo?.extend?.file){
          // 判断该任务是否提交过
          if(this.taskInfo.extend.stage4?.is_commit==1)this.other.is_commit = 1;
          else if(this.taskInfo.extend.stage3?.is_commit==1)this.other.is_commit = 1;
          else if(this.taskInfo.extend.stage2?.is_commit==1)this.other.is_commit = 1;
          else if(this.taskInfo.extend.stage1?.is_commit==1)this.other.is_commit = 1;
          else this.other.is_commit = 0;
          let task = JSON.parse(JSON.stringify(this.taskInfo.extend))
          this.imgList = task.file;
          this.remark = task.remark;
        }
        // this.sign_in_table = this.taskInfo?.extend?.town_task_type_4?.sign_in_table;
        // this.remark = this.taskInfo?.extend?.town_task_type_4?.remark;
        // this.imgList = JSON.parse(JSON.stringify(this.taskInfo?.extend?.town_task_type_4?.imgList || []));
        this.skeleton = false;
      },
      // 被驳回时点击重新修改
      toUpdate() {
        this.other.is_commit = 0;
      },
      // 判断内容是否更改, 返回true代表更改
      isReject(){
        if (this.taskInfo.approve_status == 3) { // 被驳回，重新提交需要修改内容后方可提交
          let other = {
            file: this.imgList,
            remark: this.remark
          }
          let flag = true;
          if(JSON.stringify(other)==JSON.stringify({
            file: this.taskInfo.extend.file,
            remark: this.taskInfo.extend.remark
          })) flag = false;
          if (!flag) {
            Toast('未检测到您的修改，请修改后提交')
          } 
          return flag;
        }
        else return true;
      },
      // 提交
      async submit() {
        if (this.imgList.length < 1) return Toast('证明数量不得小于1');
        if(!this.isReject()) return;
        let that = this;
        switch (that.stage) {
          case 1:
            that.stage1 = { file: that.imgList, remark: that.remark };
            break;
          case 2:
            that.stage2 = { file: that.imgList, remark: that.remark };
            break;
          case 3:
            that.stage3 = { file: that.imgList, remark: that.remark };
            break;
          case 4:
            that.stage4 = { file: that.imgList, remark: that.remark };
            break;
        }
        await marketTask10Commit({
          id: this.taskInfo.id,
          stage: this.stage,
          stage1: this.stage1,
          stage2: this.stage2,
          stage3: this.stage3,
          stage4: this.stage4,
        });
        this.other.is_commit = 1;
        Toast('提交成功');
        uni.navigateBack();
      },
      showToast(str) {
        Toast(str)
      },
      chooseFile() {
        uni.chooseImage({
          count: 9,
          sizeType: ['compressed'],
          success: async (res) => {
            for (let item of res.tempFiles) {
              let ul = await upLoadImage({
                filePath: item.path,
                name: 'file'
              });
              this.imgList.push(ul.data.uri);
            }
          }
        });
      },
      priview(index) {
        uni.previewImage({
          urls: this.imgList,
          current: index,
          longPressActions: {
            itemList: ['删除'],
            itemColor: '#ff0000',
            success(e) {
              if (e.tapIndex == 0) this.deleteFile(e.index);
            }
          },
        })
      },
      chooseOneFile() {
        uni.chooseImage({
          count: 1,
          sizeType: ['compressed'],
          success: async (res) => {
            let ul = await upLoadImage({
              filePath: res.tempFilePaths[0],
              name: 'file'
            });
            this.sign_in_table = ul.data.uri;
          }
        });
      },
      priviewOne(index) {
        uni.previewImage({
          urls: [this.sign_in_table],
          current: index,
          longPressActions: {
            itemList: ['删除'],
            itemColor: '#ff0000',
            success(e) {
              if (e.tapIndex == 0) this.sign_in_table = '';
            }
          },
        })
      },
      // 删除已上传文件
      deleteFile(index) {
        this.imgList.splice(index, 1);
      },
    },
  }
</script>

<style lang="scss">
  .task_page {
    padding-top: 30rpx;

    .card {
      margin: 0 auto;
      margin-bottom: 28rpx;
      width: 694rpx;
      background-color: #fff;
      border-radius: 26rpx;
      padding: 28rpx;

      .c_title {
        font-size: 32rpx;
        font-weight: bold;
        color: #333333;
        margin-bottom: 20rpx;
      }
      
      .btn {
        background-color: $theme-oa-color;
        color: #FFFFFF;
        font-size: 28rpx;
        height: 60rpx;
        line-height: 60rpx;
        margin-top: 16rpx;
      }

      .file {
        display: flex;
        justify-content: left;
        flex-wrap: wrap;

        &_item {
          flex-shrink: 0;
          width: 200rpx;
          height: 200rpx;
          margin: 0 auto;
          margin-bottom: 16rpx;
          border: 2px solid #ccc;
          border-radius: 10rpx;
          overflow: hidden;
          position: relative;

          .image {
            width: 100%;
            height: 100%;
          }

          .del {
            position: absolute;
            height: 40rpx;
            width: 40rpx;
            top: 10rpx;
            right: 10rpx;
          }
        }

        &_btn {
          flex-shrink: 0;
          width: 200rpx;
          height: 200rpx;
          margin: 0 auto;
          margin-bottom: 16rpx;
          border: 2px solid #ccc;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          border-radius: 10rpx;

          image {
            width: 100rpx;
            height: 100rpx;
          }
        }

        &_empty {
          flex-shrink: 0;
          width: 200rpx;
          height: 200rpx;
          margin: 0 auto;
          margin-bottom: 16rpx;
          border: 2px solid transparent;
        }
      }
    }

    .loading {
      padding: 28rpx;
    }
  }
</style>