<template>
  <el-card class="card-box" header="提交记录" v-if="submitList.length > 0">
    <el-timeline reverse>
      <el-timeline-item
        v-for="(item, index) in submitList"
        :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="3" :max-show="3" />
            </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>
          
          <!-- 审核表单 -->
          <div v-if="canVerify(item)" 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" >
              <el-button 
                style="flex: 1"
                plain
                type="success"
                icon="el-icon-check" 
                @click="handleVerify(index, true)"
              >通过</el-button>
              <el-button 
                style="flex: 1"
                type="danger" 
                icon="el-icon-close" 
                plain
                @click="handleVerify(index, false)"
              >驳回</el-button>
            </el-row>  
          </div>
        </div>
      </el-timeline-item>
    </el-timeline>
  </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 { verifyTaskSubmit } from '@/api/bst/taskSubmit'

export default {
  name: "TaskVerifyPanel",
  mixins: [$taskSubmit],
  components: { FormCol, AttachList},
  props: {
    submitList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      span: 24,
      loading: false,
      submitLoading: false,
      DatePickerOptions,
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      }
    };
  },
  computed: {
    // 获取timeline类型
    timelineType() {
      return (item) => {
        if (item.status === TaskSubmitStatus.WAIT_CONFIRM) {
          return 'warning';
        }
        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,
      };
    },
    // 提交按钮
    handleVerify(index, pass) {
      let row = this.submitList[index];
      this.$confirm(`确定要${pass ? '通过' : '驳回'}吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.submitLoading = true;
        this.form.pass = pass;
        this.form.id = row.id;
        console.log(this.form);
        verifyTaskSubmit(this.form).then(response => {
          this.$modal.msgSuccess(`${pass ? '通过' : '驳回'}成功`);
          this.$emit('success');
        }).finally(() => {
          this.submitLoading = false;
        }); 
      });
    }
  }
}
</script>

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

  .submit-section {
    margin-bottom: 12px;
    
    .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.6;
        font-size: 14px;
      }
    }

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

  .verify-section {
    position: relative;
    margin-top: 16px;
    padding-top: 16px;
    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;
  }
}
</style>