<template>
  <el-drawer
    :with-header="false"
    :visible.sync="dialogVisible" 
    size="1024px" 
    append-to-body 
    @open="handleOpen"
  >
    <el-row :gutter="20" v-loading="loading" style="padding: 30px 20px; ">
      <!-- 左侧详情 -->
      <el-col :span="14">
        <el-card class="card-box">
          <el-descriptions :column="2" title="任务详情">
            <template slot="extra">
              <el-button size="small" type="danger" plain @click="handleCancel" icon="el-icon-close" v-if="canCancel(detail)">取消任务</el-button>
            </template>
            <el-descriptions-item label="所属项目">{{ detail.projectName | dv}}</el-descriptions-item>
            <el-descriptions-item label="任务类型">
              <dict-tag :options="dict.type.task_type" :value="detail.type" size="small"/>
            </el-descriptions-item>
            <el-descriptions-item label="优先级">
              <dict-tag :options="dict.type.task_level" :value="detail.level" size="small"/>
            </el-descriptions-item>
            <el-descriptions-item label="任务状态">
              <dict-tag :options="dict.type.task_status" :value="detail.status" size="small"/>
            </el-descriptions-item>
            <el-descriptions-item label="负责人">{{ detail.ownerName | dv}}</el-descriptions-item>
            <el-descriptions-item label="创建人">{{ detail.createName | dv}}</el-descriptions-item>
            <el-descriptions-item label="创建时间">{{ detail.createTime | dv}}</el-descriptions-item>
            <el-descriptions-item label="截止时间">{{ detail.expireTime | dv}}</el-descriptions-item>
            <el-descriptions-item label="预计完成时间">{{ detail.expectFinishTime | dv}}</el-descriptions-item>
            <el-descriptions-item label="通过时间">{{ detail.passTime | dv}}</el-descriptions-item>
            <el-descriptions-item label="任务描述" :span="2">{{ detail.description | dv}}</el-descriptions-item>
          </el-descriptions>
        </el-card>


        <!--提交内容-->
        <el-card class="card-box" v-if="detail.submitTime">
          <el-descriptions :column="1" title="提交内容">
            <el-descriptions-item label="提交时间">{{ detail.submitTime | dv}}</el-descriptions-item>
            <el-descriptions-item label="备注">{{ detail.submitRemark | dv}}</el-descriptions-item>
          </el-descriptions>
        </el-card>
        </el-card>

        <!--取消内容-->
        <el-card class="card-box" v-if="TaskStatus.CANCEL === detail.status">
          <el-descriptions :column="1">
            <el-descriptions-item label="取消时间">{{ detail.cancelTime | dv}}</el-descriptions-item>
            <el-descriptions-item label="取消备注">{{ detail.cancelRemark | dv}}</el-descriptions-item>
            <el-descriptions-item label="操作人">{{ detail.cancelUserName | dv}}</el-descriptions-item>
          </el-descriptions>
        </el-card>
        <!-- 提交记录、审核 -->
        <task-verify-panel :submit-list="detail.submitList" @success="getInfo(detail.id)"/>

      </el-col>
      
      <!-- 右侧操作区 -->
      <el-col :span="10">

        <!-- 附件展示 -->
        <el-card class="card-box" header="任务附件">
          <attach-list :file-list="detail.picture" :column="2" />
        </el-card>

        <!--开始任务-->
        <task-start-panel v-if="canStart(detail)" :id="detail.id" @success="getInfo(detail.id)"/>

        <!--提交任务-->
        <task-submit-panel v-if="canSubmit(detail)" :id="detail.id" @success="getInfo(detail.id)"/>
      </el-col>
    </el-row>

    <!-- 取消任务 -->
    <task-cancel-dialog :id="detail.id" :show.sync="showCancelDialog" @success="getInfo(detail.id)"/>

  </el-drawer>
</template>

<script>
import { getTask } from "@/api/bst/task";
import FormCol from "@/components/FormCol/index.vue";
import ProjectSelect from '@/components/Business/Project/ProjectSelect.vue';
import UserSelect from '@/components/Business/User/UserSelect.vue';
import AttachList from '@/components/AttachList/index.vue';
import { $task } from '@/views/bst/task/mixins';
import TaskStartPanel from '@/views/bst/task/components/TaskStartPanel.vue';
import TaskSubmitPanel from '@/views/bst/task/components/TaskSubmitPanel.vue';
import TaskVerifyPanel from '@/views/bst/task/components/TaskVerifyPanel.vue';
import TaskCancelDialog from '@/views/bst/task/components/TaskCancelDialog.vue';
import { getRealUrl } from '@/utils';
import { TaskStatus } from '@/utils/enums';

export default {
  name: "TaskViewDialog",
  mixins: [$task],
  components: { FormCol, ProjectSelect, UserSelect, AttachList, TaskStartPanel, TaskSubmitPanel, TaskVerifyPanel, TaskCancelDialog },
  dicts: ['task_status', 'task_level', 'task_type'],
  props: {
    show: {
      type: Boolean,
      required: true
    },
    id: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      TaskStatus,
      loading: false,
      submitLoading: false,
      showCancelDialog: false,
      // 详情数据
      detail: {},
    };
  },
  computed: {
    dialogVisible: {
      get() {
        return this.show;
      },
      set(value) {
        this.$emit('update:show', value);
      }
    }
  },
  methods: {
    getRealUrl,
    // 取消任务
    handleCancel() {
      this.showCancelDialog = true;
    },
    /** 获取详细信息 */
    getInfo(id) {
      this.loading = true;
      getTask(id).then(response => {
        this.detail = response.data;
      }).finally(() => {
        this.loading = false;
      });
    },
    handleOpen() {
      this.getInfo(this.id);
    }
  }
};
</script>

<style lang="scss" scoped>
.card-box {
  margin-bottom: 20px;
}

.verify-item {
  padding: 8px;
  background: #f8f9fa;
  border-radius: 4px;

  .verify-time {
    font-size: 12px;
    color: #909399;
    margin-bottom: 4px;
  }

  .verify-user {
    display: flex;
    align-items: center;
    margin-bottom: 6px;

    .verify-user-name {
      margin-left: 8px;
      font-weight: 500;
      color: #303133;
      font-size: 13px;
    }

    .verify-status {
      margin-left: auto;
      font-size: 12px;
      color: #f56c6c;
      
      &.success {
        color: #67c23a;
      }
    }
  }

  .verify-content {
    .verify-remark {
      font-size: 13px;
      color: #606266;
      line-height: 1.4;
      margin-left: 28px;
    }
  }
}

::v-deep .el-timeline {
  padding-left: 0;
  
  .el-timeline-item {
    padding-bottom: 15px;
    
    &:last-child {
      padding-bottom: 0;
    }
  }
}

::v-deep .el-timeline-item__node--normal {
  left: -1px;
  width: 20px;
  height: 20px;
}

::v-deep .el-timeline-item__tail {
  left: 9px;
}

::v-deep .el-timeline-item__wrapper {
  padding-left: 25px;
  top: -3px;
}

::v-deep .el-timeline-item__content {
  margin-top: 0;
}
</style>