<template>
  <el-card class="card-box" header="提交记录" >

    <!-- 提交表单 -->
    <task-submit-panel v-if="canSubmit(task)" :id="task.id" v-on="$listeners"/>

    <!-- 时间线 -->
    <el-row>
      <el-form :inline="true" :model="queryParams" class="filter-form" size="mini">
        <el-form-item label="提交人">
          <el-select v-model="queryParams.userId" placeholder="请选择提交人" clearable>
            <el-option
              v-for="item in userList"
              :key="item.userId"
              :label="item.userName"
              :value="item.userId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
            <el-option v-for="dict of dict.type.task_submit_status" :key="dict.value" :label="dict.label" :value="dict.value"/>
          </el-select>
        </el-form-item>
      </el-form>
    </el-row>
    <el-timeline reverse v-if="filteredSubmitList.length > 0">
      <el-timeline-item
        v-for="(item, index) in filteredSubmitList"
        :key="index"
        :type="timelineType(item)"
        :icon="timelineIcon(item)"
      >
        <div class="verify-item">
          <!-- 提交内容区域 -->
          <div class="submit-section">
            <div class="submit-header">
              <div class="user-info">
                <el-avatar 
                  :size="20" 
                  :src="getRealUrl(item.userAvatar)" 
                >{{ item.userName ? item.userName.substring(0,1) : ''}}</el-avatar>
                <span class="user-name">{{ item.userName }}</span>
              </div>
              <div class="submit-time">{{ item.createTime }}</div>
            </div>
            
            <div class="submit-content" v-if="item.remark">
              <div class="content-text">{{ item.remark }}</div>
            </div>

            <!-- 提交附件 -->
            <div class="submit-attachs" v-if="item.attaches">
              <attach-list :file-list="item.attaches" :column="4" :max-show="4" height="80px" />
            </div>
          </div>

          <!-- 审核内容区域 -->
          <template v-if="item.verify != null">
            <div class="verify-section">
              <div class="verify-header">
                <div class="user-info">
                  <el-avatar 
                    :size="20" 
                    :src="getRealUrl(item.verify.userAvatar)" 
                  >{{ item.verify.userName ? item.verify.userName.substring(0,1) : ''}}</el-avatar>
                  <span class="user-name">{{ item.verify.userName }}</span>
                  <span class="verify-status" :class="{'success': item.verify.status === '1'}">
                    {{ item.verify.status === '1' ? '通过' : '驳回' }}
                  </span>
                </div>
                <div class="verify-time">{{ item.verify.createTime | dv }}</div>
              </div>
              
              <div class="verify-content" v-if="item.verify.remark">
                <div class="content-text">{{ item.verify.remark }}</div>
              </div>
            </div>
          </template>
          
          <!-- 审核表单 -->
          <el-row type="flex" style="justify-content: flex-end" v-if="canReject(item)">
            <el-popover
              placement="right"
              width="400"
              trigger="click">
              <el-button slot="reference" type="text" size="small" icon="el-icon-s-check">驳回</el-button>
              <div class="verify-form">
                <el-form :model="form" :rules="rules" label-position="top" v-loading="loading">
                  <el-form-item prop="remark">
                    <el-input v-model="form.remark" placeholder="请输入驳回意见" type="textarea" maxlength="200" show-word-limit/>
                  </el-form-item>
                </el-form>
                <el-row type="flex" style="justify-content: flex-end" >
                  <el-button 
                    type="danger" 
                    style="flex: 1"
                    icon="el-icon-close" 
                    size="mini"
                    plain
                    @click="handleReject(index)"
                  >驳回</el-button>
                </el-row>  
              </div>
            </el-popover>
          </el-row>
        </div>
      </el-timeline-item>
    </el-timeline>
    <el-empty v-else description="暂无提交记录" />
  </el-card>
</template>

<script>
import FormCol from "@/components/FormCol/index.vue";
import { DatePickerOptions } from '@/utils/constants';
import { TaskSubmitStatus } from '@/utils/enums';
import { getRealUrl } from '@/utils';
import AttachList from '@/components/AttachList/index.vue'
import { $taskSubmit } from '@/views/bst/taskSubmit/mixins'
import { $task } from '@/views/bst/task/mixins'
import { rejectTaskSubmit } from '@/api/bst/taskSubmit'
import TaskSubmitPanel from '@/views/bst/task/components/TaskSubmitPanel.vue';

export default {
  name: "TaskVerifyPanel",
  mixins: [$taskSubmit, $task],
  components: { FormCol, AttachList, TaskSubmitPanel},
  dicts: ['task_submit_status'],
  props: {
    submitList: {
      type: Array,
      default: () => []
    },
    task: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      span: 24,
      loading: false,
      submitLoading: false,
      DatePickerOptions,
      TaskSubmitStatus,
      // 查询参数
      queryParams: {
        userId: null,
        status: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      }
    };
  },
  computed: {
    // 获取提交人列表
    userList() {
      const users = new Map();
      this.submitList.forEach(item => {
        if (!users.has(item.userId)) {
          users.set(item.userId, {
            userName: item.userName,
            userId: item.userId
          });
        }
      });
      return Array.from(users.values());
    },
    // 过滤后的提交列表
    filteredSubmitList() {
      return this.submitList.filter(item => {
        const userNameMatch = !this.queryParams.userId || item.userId === this.queryParams.userId;
        const statusMatch = !this.queryParams.status || item.status === this.queryParams.status;
        return userNameMatch && statusMatch;
      });
    },
    // 获取timeline类型
    timelineType() {
      return (item) => {
        if (item.status === TaskSubmitStatus.WAIT_CONFIRM) {
          return 'info';
        }
        else if (item.status === TaskSubmitStatus.PASS) {
          return 'success';
        }
        else if (item.status === TaskSubmitStatus.REJECT) {
          return 'danger';
        }
      }
    },
    // 获取timeline图标
    timelineIcon() {
      return (item) => {
        if (item.status === TaskSubmitStatus.WAIT_CONFIRM) {
          return 'el-icon-more';
        }
        else if (item.status === TaskSubmitStatus.PASS) {
          return 'el-icon-check';
        }
        else if (item.status === TaskSubmitStatus.REJECT) {
          return 'el-icon-close';
        }
      }
    }
  },
  created() {
    this.reset();
  },
  methods: {
    getRealUrl,
    // 表单重置
    reset() {
      this.form = {
        id: this.id,
        pass: false,
        remark: null,
      };
    },
    // 驳回按钮
    handleReject(index) {
      let row = this.filteredSubmitList[index];
      this.$confirm(`确定要驳回吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.submitLoading = true;
        this.form.id = row.id;
        console.log(this.form);
        rejectTaskSubmit(this.form).then(response => {
          this.$modal.msgSuccess(`驳回成功`);
          this.$emit('success');
        }).finally(() => {
          this.submitLoading = false;
        }); 
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.verify-item {
  padding: 8px;
  background: #f8f9fa;
  border-radius: 4px;
  margin-bottom: 16px;

  .submit-section {
    
    .submit-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;

      .user-info {
        display: flex;
        align-items: center;
        
        .user-name {
          margin-left: 8px;
          font-weight: 500;
          color: #303133;
          font-size: 14px;
        }
      }

      .submit-time {
        color: #909399;
        font-size: 12px;
      }
    }

    .submit-content {
      margin-bottom: 8px;

      .content-text {
        color: #606266;
        line-height: 1.4;
        font-size: 13px;
        padding-left: 28px;
      }
    }

    .submit-attachs {
      margin-top: 8px;
      padding-left: 28px;
    }
  }

  .verify-section {
    position: relative;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #ebeef5;

    .verify-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;

      .user-info {
        display: flex;
        align-items: center;
        
        .user-name {
          margin-left: 8px;
          margin-right: 8px;
          font-weight: 500;
          color: #303133;
          font-size: 14px;
        }

        .verify-status {
          padding: 2px 6px;
          border-radius: 2px;
          font-size: 12px;
          background: #fef0f0;
          color: #f56c6c;
          
          &.success {
            background: #f0f9eb;
            color: #67c23a;
          }
        }
      }

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

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

  .verify-form {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #ebeef5;
  }
}

.filter-form {
  padding: 4px 8px;
  background: #f8f9fa;
  border-radius: 4px;
  margin-top: 16px;
  margin-bottom: 8px;

  .el-form-item {
    margin-bottom: 0;
    margin-right: 16px;

    &:last-child {
      margin-right: 0;
    }
  }

  .el-select {
    width: 160px;
  }
}
</style>