<template>
  <div>
    <!-- eslint-disable-next-line vue/no-mutating-props, vue/no-mutating-props -->
    <el-dialog title="督办事项" :visible.sync="selfVisible" @open="open">
      <el-row :gutter="20">
        <el-col :span="18">
          <span style="font-size: 18px; margin-right: 10px">
            {{ theTask.taskTitle }}
          </span>
          <el-button v-show="theTask.isOverdue === '10'" type="primary" @click="changeStatus('IsOverdue', '20')">
            超期
          </el-button>
          <el-button v-show="theTask.taskStatus === '10'" type="primary" @click="changeStatus('TaskStatus', '20')">
            关闭
          </el-button>
          <div style="border-bottom: solid 1px; margin-top: 1px"></div>
          <el-row :gutter="20" style="margin-top: 10px">
            <el-col :span="8">督办类型：{{ typeMap[theTask.taskType] }}</el-col>
            <el-col :span="8">状态：{{ theTask.taskStatus === '10' ? '进行中' : '关闭' }}</el-col>
            <el-col :span="8">超期：{{ theTask.isOverdue === '10' ? '否' : '是' }}</el-col>
            <el-col :span="8">开始时间：{{ parseTime(theTask.taskStartDate) }}</el-col>
            <el-col :span="8">结束时间：{{ parseTime(theTask.taskEndDate) }}</el-col>
            <el-col :span="24">说明：{{ theTask.taskDesc }}</el-col>
            <el-col :span="8">督办人：{{ userMap[theTask.supervisorUserId] }}</el-col>
            <el-col :span="8">监办人：{{ userMap[theTask.watchUserId] }}</el-col>
            <el-col :span="8">负责人：{{ userMap[theTask.mainUserId] }}</el-col>
            <el-col :span="16">团队成员：{{ teamNames }}</el-col>
            <el-col :span="8">
              关联类型：
              <span v-show="theTask.targetType == '10'">客户</span>
              <span v-show="theTask.targetType == '20'">项目</span>
              <span v-show="theTask.targetType == '30'">合同</span>
              <span v-show="theTask.targetType == '40'">回款</span>
            </el-col>
            <el-col :span="8">关联对象：{{ theTask.targetName }}</el-col>
            <el-col :span="8">创建人：{{ theTask.createdName }}</el-col>
            <el-col :span="8">创建时间：{{ parseTime(theTask.createdTime) }}</el-col>
            <el-col :span="24">备注：{{ theTask.remark }}</el-col>
            <el-button v-show="theTask.taskStatus === '10'" type="primary" @click="addProgress">添加进展</el-button>
            <el-table border :data="progressList" height="440">
              <el-table-column align="center" label="进展说明" prop="progDesc" />
              <el-table-column align="center" label="时间" prop="progDate">
                <template #default="{ row }">
                  {{ parseTime(row.progDate) }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="附件" prop="progFile">
                <template #default="{ row }">
                  <el-link v-show="row.progFile != ''" @click="showFile(row.progFile)">查看附件</el-link>
                </template>
              </el-table-column>
              <el-table-column align="center" label="备注" prop="remark" />
            </el-table>
          </el-row>
        </el-col>
        <el-col :span="6">
          <el-button round :type="rightInfo == 'log' ? 'primary' : 'none'" @click="changeRightInfo('log')">
            流程动态
          </el-button>
          <el-button round :type="rightInfo == 'comment' ? 'primary' : 'none'" @click="changeRightInfo('comment')">
            评论
          </el-button>
          <div style="border-bottom: solid 1px; margin-top: 1px"></div>
          <div style="height: 560px; width: 100%">
            <div v-for="log in logList" v-show="rightInfo == 'log'" :key="log.id" style="margin-top: 10px">
              {{ log.nodeName }}
              <div style="margin-top: 5px">
                <span style="margin-top: 5px">{{ log.createdName }}</span>
                <span style="float: right; margin-top: 5px">
                  {{ log.desc }}
                </span>
                <div style="margin-top: 5px">开始处理：{{ log.startTime }}</div>
                <div style="margin-top: 5px">完成处理：{{ log.endTime }}</div>
              </div>
            </div>
            <el-button v-show="rightInfo == 'comment'" style="margin-top: 10px" type="primary" @click="addComment">
              评论
            </el-button>
            <div
              v-for="comment in commentList"
              v-show="rightInfo == 'comment'"
              :key="comment.id"
              style="margin-top: 10px">
              {{ comment.createdName }}
              <div style="margin-top: 5px">
                <span style="margin-top: 5px">评论时间：{{ comment.createdTime }}</span>
                <div style="margin-top: 5px">评论：{{ comment.content }}</div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-dialog>
    <!-- 评论添加 -->
    <commentAdd :do-refresh="getCommentList" :self-visible.sync="commentAddDialogVisible" :the-task="theTask" />
    <!-- 进展添加 -->
    <progressAdd
      :do-refresh="doRefreshProgressAndLogs"
      :self-visible.sync="progressAddDialogVisible"
      :the-task="theTask" />
  </div>
</template>

<script>
  import taskApi from '@/api/plat/task'
  import commentAdd from './CommentAdd.vue'
  import progressAdd from './ProgressAdd.vue'

  export default {
    name: 'TaskDetail',
    components: { commentAdd, progressAdd },
    props: {
      selfVisible: {
        type: Boolean,
        default: false,
      },
      theTask: {
        type: Object,
        // eslint-disable-next-line vue/require-valid-default-prop
        default: {},
      },
      userMap: {
        type: Object,
        // eslint-disable-next-line vue/require-valid-default-prop
        default: {},
      },
      typeMap: {
        type: Object,
        // eslint-disable-next-line vue/require-valid-default-prop
        default: {},
      },
      doRefresh: {
        type: Function,
        default: undefined,
      },
    },
    data() {
      return {
        // 进展新增弹窗
        progressAddDialogVisible: false,
        // 团队成员
        teamNames: '',
        // 评论新增弹窗
        commentAddDialogVisible: false,
        // 右侧栏显示项目
        rightInfo: 'log',
        // 督办进展
        progressList: [],
        // 日志
        logList: [],
        // 评论
        commentList: [],
      }
    },
    watch: {
      selfVisible(val) {
        this.$emit('update:selfVisible', val)
      },
    },
    methods: {
      // 改变督办状态
      changeStatus(type, status) {
        this.$confirm('确定修改督办状态？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(async () => {
          // eslint-disable-next-line vue/no-mutating-props
          this.selfVisible = false
          let data = {
            taskId: this.theTask.id + '',
            type: type,
            oldStatus: this.theTask.taskStatus,
            nowStatus: status,
          }
          const { msg } = await taskApi.updateTaskStatus(data)
          this.$baseMessage(msg, 'success', 'vab-hey-message-success')
          if (this.doRefresh) {
            this.doRefresh()
          }
        })
      },
      // 刷新进展和日志信息
      doRefreshProgressAndLogs() {
        this.getProgressList()
        this.getLogList()
      },
      // 添加进展
      addProgress() {
        this.progressAddDialogVisible = true
      },
      // 查看附件
      showFile(path) {
        const a = document.createElement('a')
        a.href = path // 文件链接
        a.download = path // 文件名，跨域资源download无效
        a.click()
        a.remove()
      },
      // 新增评论
      addComment() {
        this.commentAddDialogVisible = true
      },
      // 打开弹窗
      open() {
        this.rightInfo = 'log'
        // 获取数据信息
        this.getProgressList()
        this.getLogList()
        this.getCommentList()
        this.teamNames = ''
        if (this.theTask.ownerUserId != '') {
          let ids = this.theTask.ownerUserId.split(',')
          for (let id of ids) {
            if (this.teamNames == '') {
              this.teamNames = this.userMap[parseInt(id)]
            } else {
              this.teamNames += ',' + this.userMap[parseInt(id)]
            }
          }
        }
      },
      // 获取进展信息
      getProgressList() {
        this.progressList = []
        taskApi
          .getTaskProgressList({ taskId: this.theTask.id + '' })
          .then((res) => {
            if (res.data.list) {
              this.progressList = res.data.list
            }
          })
          .catch((err) => {
            console.error(err)
          })
      },
      // 获取日志信息
      getLogList() {
        this.logList = []
        taskApi
          .getTaskLogList({ taskId: this.theTask.id + '' })
          .then((res) => {
            if (res.data.list) {
              this.logList = res.data.list
            }
          })
          .catch((err) => {
            console.error(err)
          })
      },
      // 获取评论信息
      getCommentList() {
        this.commentList = []
        taskApi
          .getTaskCommentList({ taskId: this.theTask.id + '' })
          .then((res) => {
            if (res.data.list) {
              this.commentList = res.data.list
            }
          })
          .catch((err) => {
            console.error(err)
          })
      },
      // 右侧操作栏改变状态
      changeRightInfo(info) {
        this.rightInfo = info
      },
    },
  }
</script>
