<template>
  <div class="pages">
    <el-dialog :title="title" :visible.sync="open" width="800px" class="dialogax" append-to-body>
      <el-descriptions size="medium" border :column="1" class="pagedesc">
        <el-descriptions-item label="项目名称">{{ task.projectName }}</el-descriptions-item>
        <el-descriptions-item label="需要人数">{{ task.needPerson }}人</el-descriptions-item>
        <el-descriptions-item label="测试类型">
          <!-- <test-type :type="task.testType"></test-type> -->
          <span>{{ findLabelValueByProp(list, task.testType, 'dictValue', 'dictLabel')}}</span>
        </el-descriptions-item>
        <el-descriptions-item label="测试技能要求">{{ task.techNeed }}</el-descriptions-item>
        <el-descriptions-item label="任务金额">
          {{ task.price | currency('￥') }}
        </el-descriptions-item>
        <el-descriptions-item label="工期">{{ task.period }}天</el-descriptions-item>
        <el-descriptions-item label="发布有效天数">{{ task.validDays }}天</el-descriptions-item>
        <!-- <el-descriptions-item label="应征者要求">
          <tester-type :type="task.applicantType"></tester-type>
        </el-descriptions-item> -->
        <el-descriptions-item label="驻场要求">
          <onsite-type :type="task.onsiteType"></onsite-type>
        </el-descriptions-item>
        <el-descriptions-item label="地域要求">{{ task.area }}</el-descriptions-item>
        <el-descriptions-item label="联系人">{{ task.contactName }}</el-descriptions-item>
        <el-descriptions-item label="联系电话">{{ task.contactTel }}</el-descriptions-item>
        <el-descriptions-item label="项目描述">
          <span v-html="task.projectDesc"></span>
        </el-descriptions-item>
        <el-descriptions-item label="项目附件">
          <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>
        </el-descriptions-item>
      </el-descriptions>
      <div style="height: 15px"></div>
      <el-form v-loading="loading" :model="form" :rules="rules" ref="form" label-width="80px" inline>
        <el-row>
          <!-- <el-col :span="12">
            <el-form-item label="项目名称" prop="projectName">
              <span>{{task.projectName}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="测试类型" prop="testType">
              <test-type :type="task.testType"></test-type>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="测试技能要求" prop="techNeed">
              <span>{{task.techNeed}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="任务赏金" prop="price">
              <span>{{task.price | currency('￥')}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工期" prop="period">
              <span>{{task.period}}</span>天
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="发布有效天数" prop="validDays">
              <span>{{task.validDays}}</span>天
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="应征者要求" prop="applicantTypeArr">
              <tester-type :type="task.applicantType"></tester-type>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="驻场要求" prop="onsiteType">
              <onsite-type :type="task.onsiteType"></onsite-type>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="地域要求" prop="area">
              <span>{{task.area}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系人" prop="contactName">
              <span>{{task.contactName}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话" prop="contactTel">
              <span>{{task.contactTel}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="项目描述" prop="projectDesc" style="margin-bottom:-20px;">
              <span v-html='task.projectDesc' ></span>
            </el-form-item>
          </el-col> -->
          <!-- <el-row>
          <el-col :span="24">
            <el-form-item label="备注" prop="projectDesc">
              <span>{{task.remark}}</span>
            </el-form-item>
          </el-col>
        </el-row> -->
          <!-- <el-col :span="24">
            <el-form-item label="项目描述" prop="projectDesc" style="margin-bottom: -20px">
              <span v-if="task.projectDesc" v-html="task.projectDesc"></span>
              <span v-else> 无 </span>
            </el-form-item>
          </el-col> -->
          <el-col :span="24">
            <el-form-item label="审核意见" prop="auditOpinion">
              <el-input v-model="form.auditOpinion" type="textarea" :rows="2" style="width: 500px"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <div style="display: flex; justify-content: center">
          <el-button type="primary" @click="audit(1)" style="padding: 10px !important; margin-right: 30px !important">审核通过</el-button>
          <el-button type="danger" @click="audit(2)" style="padding: 10px !important">审核不通过</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { getApply, auditTask } from '@/api/crowdsource/crowdsource'
import TestType from './enum/TestType'
import OnsiteType from './enum/OnsiteType'
import TesterType from './enum/TesterType'

export default {
  name: 'CrowdsourceAudit',
  components: { TesterType, OnsiteType, TestType },
  props: {
    list: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      // 遮罩层
      loading: false,
      open: false,
      applyId: 0,
      title: '众包任务审核',
      form: {},
      task: {},
      rules: {},
    }
  },
  methods: {
    audit(status) {
      this.form.status = status
      this.form.applyId = this.applyId
      this.$confirm('确定提交审核结果吗？').then(() => {
        auditTask(this.form).then((response) => {
          this.$notify({
            title: '审核完毕',
            message: '',
            align: 'center',
            type: 'success',
          })
          this.resetForm('form')
          this.open = false
          this.$emit('closeDialog')
        })
      })
    },
    openDialog(applyId) {
      this.loading = true
      this.applyId = applyId
      getApply(applyId).then((response) => {
        this.task = response.data
        this.task.attachmentArr = response.data.attachment ? response.data.attachment.split(',') : []
        this.loading = false
        this.open = true
      })
    },
    uploaddivClick(it) {
      if (it) {
        window.location.href=it
      }
    }
  },
  created() {},
  computed: {},
}
</script>

<style scoped>
.pagedesc >>> .el-descriptions-item__label {
  width: 120px !important;
}
.dialogax >>> .el-dialog__body {
  height: 600px;
  overflow-y: auto;
}
.uploaddiv {
  display: flex;
  align-items: center;
  color: #1890ff;
  cursor: pointer;
  margin-right: 10px;
}
.uploaddiv img {
  width: 15px;
  margin-right: 5px;
}
</style>
