<template>
  <div class="app-container">
    <el-row class="top">
      <el-col :span="24">
        <el-button type="primary" @click="backToList">返回</el-button>
        <el-button
          class="button"
          type="danger"
          v-if="task.state != 8 && task.publishId == currentUserId"
          @click="deleteTask"
        >删除</el-button>
        <el-button class="button" @click="openDialog3">审核</el-button>
        <el-button class="button" @click="openDialog2">提交</el-button>
        <el-button
          class="button"
          @click="openDialog1"
          v-if="task.state == 0 ||task.state == 1 ||task.state == 2 ||task.state == 4 && task.publishId == currentUserId"
        >延期</el-button>
        <el-button
          class="button"
          v-if="task.state == 0 && task.recipientId == currentUserId"
          @click="receiveTask"
        >接收</el-button>
      </el-col>
    </el-row>

    <div class="block" style="line-height: 35px">
      <span class="title">{{task.content}}</span>
      <span class="state" v-if="task.state == 0">待派发</span>
      <span class="state" v-else-if="task.state == 1">已派发</span>
      <span class="state" v-else-if="task.state == 2">已接收</span>
      <span class="state" v-else-if="task.state == 3">待审核</span>
      <span class="state" v-else-if="task.state == 4">未通过</span>
      <span class="state" v-else-if="task.state == 5">已完成</span>
      <span class="state" v-else-if="task.state == 6">已延期</span>
      <span class="state" v-else-if="task.state == 7">已失效</span>
      <span class="state" v-else-if="task.state == 8">已删除</span>
      <span class="state" v-else>不明</span>
    </div>
    <div class="block">
      <span class="item">任务编码：{{task.code}}</span>
      <span class="item">任务类型：{{task.tagName}}</span>
      <span class="item">工作量：{{task.workLoad}}</span>
    </div>
    <div class="block">
      <span class="item">发起人：{{task.publisherName}}</span>
      <span class="item">接收人：{{task.recipientName}}</span>
      <span class="item">发起时间：{{task.indate}}</span>
      <span class="item">计划时间：{{task.planTime}}</span>
      <span class="item">延迟时间：{{task.delayTime}}</span>
      <span class="item">收款方：{{task.payee}}</span>
      <span class="item">付款方：{{task.payer}}</span>
      <span class="item">费用：{{task.fee}}</span>
    </div>
    <div class="block">
      <span
        v-if="task.participant != null && task.participant.length > 0"
        class="item"
      >参与人：{{task.participant.join("、")}}</span>
      <span v-else class="item">参与人：无</span>
    </div>
    <div class="block">
      <span class="item">任务内容：{{task.content}}</span>
    </div>
    <!-- 下半部分 -->
    <el-tabs v-model="activeTab" @tab-click="handleTabClick">
      <!-- 任务动态 -->
      <el-tab-pane label="任务动态" name="0">
        <span v-if="dynamic.length == 0">暂无动态</span>
        <el-timeline>
          <el-timeline-item v-for="item in dynamic" :key="item.id" :timestamp="item.content">
            <span style="position: relative; top: 3px;">{{item.stateContent}}</span>
          </el-timeline-item>
        </el-timeline>
      </el-tab-pane>
      <!-- 审核结果 -->
      <el-tab-pane label="审核结果" name="1">
        <span v-if="examination.length == 0">暂无审核</span>
        <el-timeline>
          <el-timeline-item v-for="item in examination" :key="item.id">
            <div style="position: relative; top: 3px;">
              <div>
                <el-image
                  class="head"
                  :src="'http://localhost:9102/img' + publisherUrl[item.$index]"
                ></el-image>
                <div class="publisher-name">{{item.publisher}}</div>
                <div class="publisher-date">{{item.publishDate}}</div>
              </div>
              <div class="publish-content">{{item.publishContent}}</div>
              <div class="publish-reply" v-if="item.isPass != 0">
                <div>
                  <el-image
                    class="head"
                    :src="'http://localhost:9102/img' + responderUrl[item.$index]"
                  ></el-image>
                  <span class="publish-state" v-if="item.isPass == 1">未通过</span>
                  <span class="publish-state" v-else>已通过</span>
                  <div class="publisher-name">{{item.responder}}</div>
                  <div class="publisher-date">{{item.respondDate}}</div>
                </div>
                <div class="publish-content">{{item.respondContent}}</div>
                <el-rate
                  v-if="item.isPass == 2"
                  class="publish-star"
                  v-model="item.score"
                  disabled
                  show-score
                  text-color="#ff9900"
                  score-template="{value}"
                ></el-rate>
              </div>
            </div>
          </el-timeline-item>
        </el-timeline>
      </el-tab-pane>
      <!-- 资料上传下载 -->
      <el-tab-pane label="任务资料" name="2" v-if="true">
        <el-button>上传资料N/A</el-button>
        <el-table :data="file" style="width: 100%" v-loading="loading">
          <el-table-column type="index" width="40"></el-table-column>
          <el-table-column prop="name" label="文件名"></el-table-column>
          <el-table-column prop="indate" label="时间"></el-table-column>
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <el-button type="primary" @click="downloadFile(scope.$index)">下载</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>

    <!-- 延期的dialog -->
    <el-dialog title="延期" :visible.sync="form1Visible" width="600px">
      <el-form ref="form1" label-width="110px">
        <el-form-item label="延期时间">
          <el-date-picker
            v-model="extendDate"
            type="date"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
            placeholder="请选择延期时间"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="form1Visible = false">取消</el-button>
        <el-button @click="extendTask" type="primary">提交</el-button>
      </span>
    </el-dialog>

    <!-- 提交的dialog -->
    <!-- <el-dialog title="提交" :visible.sync="form2Visible" width="600px">
      <el-form ref="form2" :model="taskForm" label-width="110px">
        <el-form-item label="任务名称" prop="name">
          <el-input v-model="taskForm.name" placeholder="请输入任务名称" clearable></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="taskFormVisible = false">取消</el-button>
        <el-button type="primary" @click="submit">提交</el-button>
      </span>
    </el-dialog>-->

    <!-- 审核的dialog -->
    <!-- <el-dialog title="审核" :visible.sync="form3Visible" width="600px">
      <el-form ref="form3" :model="taskForm" label-width="110px">
        <el-form-item label="任务名称" prop="name">
          <el-input v-model="taskForm.name" placeholder="请输入任务名称" clearable></el-input>
        </el-form-item>
        <el-form-item label="任务编码" prop="code">
          <el-input v-model="taskForm.code" placeholder="请输入任务编码" clearable></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="taskFormVisible = false">取消</el-button>
        <el-button type="primary" @click="submit">提交</el-button>
      </span>
    </el-dialog>-->
  </div>
</template>

<script>
import store from "@/store";
import request from "@/utils/request";
export default {
  data() {
    return {
      taskId: this.$route.params.id,
      currentUserId: store.getters.token,
      task: [],
      dynamic: [],
      examination: [],
      publisherUrl: [],
      responderUrl: [],
      file: [],
      activeTab: "0",
      loading: false,
      form1Visible: false,
      extendDate: null,
      form2Visible: false,
      form3Visible: false
    };
  },
  methods: {
    //接收任务
    receiveTask() {
      this.loading = true;
      request({
        url: "/task/receiveTask",
        method: "post",
        params: {
          userId: this.currentUserId,
          taskId: this.taskId
        }
      })
        .then(response => {
          this.$message({
            message: "任务已接收",
            type: "success"
          });
          this.getTask();
          this.loading = false;
        })
        .catch(error => {
          this.loading = false;
        });
    },

    //延期任务
    extendTask() {
      this.loading = true;
      if (this.extendDate == null) {
        this.$message({
          message: "请填写延期时间",
          type: "error"
        });
      } else {
        request({
          url: "/task/extendTask",
          method: "post",
          params: {
            taskId: this.taskId,
            date: this.extendDate
          }
        })
          .then(response => {
            this.$message({
              message: "任务已延期",
              type: "success"
            });
            this.getTask();
            this.form1Visible = false;
            this.loading = false;
          })
          .catch(error => {
            this.loading = false;
          });
      }
    },

    //删除任务
    deleteTask() {
      this.loading = true;
      request({
        url: "/task/deleteTaskById",
        method: "post",
        params: {
          taskId: this.taskId
        }
      })
        .then(response => {
          this.$message({
            message: "任务已删除",
            type: "success"
          });
          this.getTask();
          this.loading = false;
        })
        .catch(error => {
          this.loading = false;
        });
    },

    //获取记录
    getTask() {
      this.loading = true;
      request({
        url: "/task/getTaskById",
        method: "post",
        params: {
          id: this.taskId
        }
      })
        .then(response => {
          this.task = response.data.task;
          this.task.participant = response.data.participant;
          this.task.publisherName = response.data.publisherName;
          this.task.recipientName = response.data.recipientName;
          this.task.tagName = response.data.tagName;
          this.loading = false;
        })
        .catch(error => {
          this.loading = false;
        });
    },

    //获取任务动态
    getDynamic() {
      this.loading = true;
      request({
        url: "/task/getDynamicById",
        method: "post",
        params: {
          id: this.taskId
        }
      })
        .then(response => {
          this.dynamic = response.data;
          this.loading = false;
        })
        .catch(error => {
          this.loading = false;
        });
    },

    //获取任务审核信息
    getExamination() {
      this.loading = true;
      request({
        url: "/task/getExaminationById",
        method: "post",
        params: {
          id: this.taskId
        }
      })
        .then(response => {
          this.examination = response.data.examination;
          this.publisherUrl = response.data.publisherUrl;
          this.responderUrl = response.data.responderUrl;
          this.loading = false;
        })
        .catch(error => {
          this.loading = false;
        });
    },

    //获取资料文件
    getFile() {
      this.loading = true;
      request({
        url: "/task/getFileById",
        method: "post",
        params: {
          id: this.taskId
        }
      })
        .then(response => {
          this.file = response.data;
          this.loading = false;
        })
        .catch(error => {
          this.loading = false;
        });
    },

    //下载
    downloadFile(index) {
      if (this.file[index].url == null) {
        location.href = "http://localhost:9102" + this.file[index].url;
      } else {
        this.$message({
          message: "下载失败",
          type: "error"
        });
      }
    },

    //打开延期窗口
    openDialog1() {
      this.form1Visible = true;
      this.extendDate = null;
    },

    //打开提交窗口
    openDialog2() {
      this.form2Visible = true;
      this.extendDate = null;
    },

    //打开审核窗口
    openDialog3() {
      this.form3Visible = true;
      this.extendDate = null;
    },

    //回到前一个页面
    backToList() {
      this.$router.go(-1);
    },

    //标签页切换
    handleTabClick(tab, event) {}
  },
  mounted() {
    this.getTask();
    this.getDynamic();
    this.getExamination();
    this.getFile();
  }
};
</script>

<style scoped>
.button {
  float: right;
  margin-left: 15px;
}
.top {
  margin-bottom: 15px;
}
.block {
  margin-bottom: 10px;
}
.title {
  font-size: 18px;
}
.state {
  margin-left: 30px;
  font-size: 16px;
  color: #409eff;
}
.item {
  font-size: 16px;
  line-height: 30px;
  margin-right: 20px;
}
.head {
  width: 60px;
  height: 60px;
  border-radius: 60px;
  float: left;
}
.publisher-name {
  line-height: 30px;
  font-size: 16px;
  margin-left: 70px;
}
.publisher-date {
  line-height: 30px;
  font-size: 16px;
  color: #aaa;
  margin-left: 70px;
}
.publish-content {
  font-size: 16px;
  margin-top: 15px;
}
.publish-reply {
  background-color: #eee;
  padding: 15px;
  margin-top: 15px;
  font-size: 16px;
}
.publish-state {
  font-size: 16px;
  float: right;
}
.publish-star {
  margin-top: 15px;
}
</style>

