<template>
  <div class="taskinfo">
    <!--<el-divider content-position="left"><h3>任务信息</h3></el-divider>
    <el-form label-width="100px" class="demo-ruleForm" label-position="left">
      <el-row v-if="history">
        <el-col :span="12">
          <el-form-item label="名称">
            {{ task.projectName }}&nbsp;
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="赏金金额">
            {{ task.price | currency("￥") }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="审核状态">
            <audit-status :status="task.status"></audit-status>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="!history">
        <el-col :span="6">
          <el-form-item label="名称">
            {{ task.projectName }}&nbsp;
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="赏金金额">
            {{ task.price | currency("￥") }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="任务状态">
            <process-status :processStatus="task.processStatus" />
          </el-form-item>
        </el-col>
             <el-col :span="6">
               <el-form-item label="任务状态">
                 <task-status :status="task.taskStatus"></task-status>
               </el-form-item>
             </el-col>
        <el-col v-if="!history" :span="6">
          <el-form-item label="应征者总数">
            <el-tag type="danger" effect="dark" size="small">
              {{
                task.companyAppCount + task.personalAppCount == 20
                  ? "已满"
                  : task.companyAppCount + task.personalAppCount + "人"
              }}</el-tag
            >
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="测试类型">
            <test-type :type="task.testType"></test-type>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="发布日期">
            {{ task.createTime }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="发布有效期">
            {{ task.validDays }}天
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="项目工期"> {{ task.period }}天 </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="应征者要求">
            <tester-type :type="task.applicantType"></tester-type>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="技能要求">
            {{ task.techNeed }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="驻场要求">
            <onsite-type :type="task.onsiteType"></onsite-type>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="地域要求">
            {{ task.area }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="项目简价">
            {{ task.projectDesc }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="备注信息">
        {{ task.remark }}
      </el-form-item>
    </el-form> -->

    <!-- ljy修改20240321 -->
    <div class="modeltitel">
      <div class="line"></div>
      任务信息
    </div>
    <div class="taskinfotop" v-if="history">
      <div class="topleft">
        <div class="toptitle">{{ task.projectName }}</div>
        <div class="topstatus">
          <audit-status :status="task.status"></audit-status>
          <el-tag style="margin-left: 10px" size="small" effect="plain"><test-type :type="task.testType"></test-type></el-tag>
        </div>
      </div>
      <div class="topright">
        {{ task.price | currency("￥") }}
      </div>
    </div>
    <div class="taskinfotop" v-if="!history">
      <div class="topleft">
        <div class="toptitle">{{ task.projectName }}</div>
        <div class="topstatus">
          <process-status :processStatus="task.processStatus" />
          <!-- <el-tag style="margin-left: 10px" size="small" effect="plain"><test-type :type="task.testType"></test-type></el-tag> -->
          <el-tag style="margin-left: 10px" size="small" effect="plain" v-for="it in findLabelValueByProp(tasktypelist, task.testType, 'dictValue', 'dictLabel').split(',')" :key="it">
            {{it}}
          </el-tag>
        </div>
      </div>
      <div class="topright">
        {{ task.price | currency("￥") }}
      </div>
    </div>

    <div class="contentinfo" v-if="!history">
      <div class="lefttext">应征者总数：</div>
      <div class="rightinfo">{{
              task.companyAppCount + task.personalAppCount == 20
                ? "已满"
                : task.companyAppCount + task.personalAppCount + "人"
            }}</div>
    </div>
    <div class="contentinfo">
      <div class="lefttext">发布日期：</div>
      <div class="rightinfo">{{ task.createTime }}</div>
    </div>
    <div class="contentinfo">
      <div class="lefttext">需要人数：</div>
      <div class="rightinfo">{{ task.needPerson }}人</div>
    </div>
    <div class="contentinfo">
      <div class="lefttext">发布有效期：</div>
      <div class="rightinfo">{{ task.validDays }}天</div>
    </div>
    <div class="contentinfo">
      <div class="lefttext">项目工期：</div>
      <div class="rightinfo">{{ task.period }}天</div>
    </div>
    <!-- <div class="contentinfo">
      <div class="lefttext">应征者要求：</div>
      <div class="rightinfo">
        <tester-type :type="task.applicantType"></tester-type>
      </div>
    </div> -->
    <div class="contentinfo">
      <div class="lefttext">技能要求：</div>
      <div class="rightinfo">{{ task.techNeed }}</div>
    </div>
    <div class="contentinfo">
      <div class="lefttext">驻场要求：</div>
      <div class="rightinfo">
        <onsite-type :type="task.onsiteType"></onsite-type>
      </div>
    </div>
    <div class="contentinfo">
      <div class="lefttext">地域要求：</div>
      <div class="rightinfo">{{ task.area }}</div>
    </div>
    <!-- <div class="contentinfo">
      <div class="lefttext">备注信息：</div>
      <div class="rightinfo">{{ task.remark }}</div>
    </div> -->
    <div class="contentinfo">
      <div class="lefttext">项目简介：</div>
      <!-- <div class="rightinfo">{{ task.projectDesc }}</div> -->
      <div class="rightinfo" v-html="task.projectDesc"></div>
    </div>
    <div class="contentinfo">
      <div class="lefttext">项目附件：</div>
        <template v-if="task.attachment">
          <div v-for="(it,index) in task.attachmentArr" :key="it" class="uploaddiv">
            <img title="点击下载查看" @click="uploaddivClick(it)" src="@/assets/images/crowd/upload.png" alt="">
            <span title="点击下载查看" @click="uploaddivClick(it)">项目附件{{ index + 1 }}</span>
          </div>
        </template>
        <div v-else>无</div>
    </div>
  </div>
</template>

<script>
import ProcessStatus from "@/views/components/enum/ProcessStatus";
import TaskStatus from "@/views/components/enum/TaskStatus";
import TesterType from "@/views/components/enum/TesterType";
import TestType from "@/views/components/enum/TestType";
import OnsiteType from "@/views/components/enum/OnsiteType";
import AuditStatus from "@/views/components/enum/AuditStatus";
import mixin from '@/mixin/index.js'
export default {
  name: "TaskInfo",
  mixins: [mixin],
  components: {
    AuditStatus,
    TaskStatus,
    ProcessStatus,
    TesterType,
    TestType,
    OnsiteType,
  },
  props: {
    history: Boolean,
  },
  data() {
    return {
      task: {},
    };
  },
  methods: {
    setTask(item) {
      this.task = item;
      if (item.attachment) {
        this.task.attachmentArr = item.attachment.split(',')
      }
    },
    uploaddivClick(it) {
      if (it) {
        window.location.href=it
      }
    }
  },
};
</script>

<style scoped lang="scss">
.uploaddiv {
  display: flex;
  align-items: center;
  color: #1890ff;
  cursor: pointer;
  margin-right: 10px;
}
.uploaddiv img {
  width: 15px;
  margin-right: 5px;
}
.taskinfo {
  width: 100%;
  // padding: 20px;
  // box-shadow: 0px 2px 8px 0px rgba(54, 61, 67, 0.3);
  .modeltitel {
    width: 100%;
    display: flex;
    align-items: center;
    font-size: 20px;
    font-weight: 700;
    color: #333333;
    .line {
      width: 5px;
      height: 25px;
      background: #0066eb;
      margin-right: 10px;
    }
  }
  .taskinfotop {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .topleft {
      padding: 20px 0;
      .toptitle {
        font-size: 18px;
        font-weight: 700;
        color: #333333;
        margin-bottom: 10px;
      }
    }
    .topright {
      font-size: 18px;
      font-weight: 700;
      color: rgb(253, 70, 26);
    }
  }
  .contentinfo {
    font-size: 16px;
    color: rgb(128, 128, 128);
    display: flex;
    margin-bottom: 10px;
    .lefttext {
      min-width: 100px;
    }
  }
}
</style>
