<template>
  <div style="width: 100%; padding: 20px">
    <div class="detailinfo" style="width: 100%">
      <div class="boxshow">
        <task-info ref="taskInfo"></task-info>
        <!-- <el-divider  v-if="task.processStatus==0 || task.processStatus==1" content-position="left"><h3>任务提醒</h3></el-divider>
      <el-form label-width="150px" class="demo-ruleForm" label-position="left">
        <el-row v-if="task.processStatus == 0">
          <el-col :span="24">
            <el-form-item label="发布有效期截止">
              {{ task.expireTime }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="task.processStatus == 1">
          <el-col :span="24">
            <el-form-item label="工期截止">
              {{ task.deadline }}
            </el-form-item>
          </el-col>
        </el-row>
      </el-form> -->
        <template v-if="task.expireTime || task.deadline">
          <div class="modeltitel"  style="margin-top: 20px;">
          <div class="line"></div>
          任务提醒
        </div>
        <div class="contentinfo" v-if="task.processStatus == 0">
          <div class="lefttext">发布有效期截止:</div>
          <div class="rightinfo">{{ task.expireTime }}</div>
        </div>
        <div class="contentinfo" v-if="task.processStatus == 1">
          <div class="lefttext">工期截止:</div>
          <div class="rightinfo">{{ task.deadline }}</div>
        </div>
        </template>

        <!-- <el-divider content-position="left"><h3>发布者详情</h3></el-divider>
      <el-form label-width="150px" class="demo-ruleForm" label-position="left">
        <el-row>
          <el-col :span="24">
            <el-form-item label="公司名称">
              {{ company.name }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="公司描述">
              {{ company.companyDesc }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="联系人">
              {{ task.contactName }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系人电话">
              {{ task.contactTel }}
            </el-form-item>
          </el-col>
        </el-row>
      </el-form> -->
        <div class="modeltitel" style="margin-top: 40px;">
          <div class="line"></div>
          发布者详情
        </div>
        <div class="contentinfo">
          <div class="lefttext">公司名称:</div>
          <div class="rightinfo">{{ company.name }}</div>
        </div>
        <div class="contentinfo">
          <div class="lefttext">公司描述:</div>
          <div class="rightinfo">{{ company.companyDesc }}</div>
        </div>
        <div class="contentinfo">
          <div class="lefttext">联系人:</div>
          <div class="rightinfo">{{ task.contactName }}</div>
        </div>
        <div class="contentinfo">
          <div class="lefttext">联系人电话:</div>
          <div class="rightinfo">{{ task.contactTel }}</div>
        </div>
      </div>

      <div class="boxshow">
        <!-- <el-divider content-position="left"><h3>应征者名单</h3></el-divider> -->
        <div class="modeltitel" style="margin-bottom: 20px">
          <div class="line"></div>
          应征者名单
        </div>
        <el-table v-loading="loading" :data="this.applicantList">
          <el-table-column label="序号" type="index" width="50">
          </el-table-column>
          <el-table-column
            label="应征时间"
            align="center"
            key="applyTime"
            prop="applyTime"
            width="180"
          >
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.applyTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="应征者类型"
            align="center"
            key="testerType"
            prop="testerType"
          >
            <template slot-scope="scope">
              <span>{{
                scope.row.testerType == 2 ? "认证测试公司" : "个人测试者"
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="姓名"
            align="center"
            key="userName"
            prop="userName"
          />
          <el-table-column
            label="状态"
            align="center"
            key="status"
            prop="status"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.status == 0 ? "待定" : "选中" }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            width="160"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="viewTesterDetail(scope.row.applicantId)"
                >查看详情
              </el-button>
              <!--              <el-button-->
              <!--                size="mini"-->
              <!--                type="text"-->
              <!--                icon="el-icon-key"-->
              <!--                @click="assignTester(scope.row.applicantId)"-->
              <!--                :disabled="task.processStatus!=0"-->
              <!--              >选中-->
              <!--              </el-button>-->
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div>
      <tester-detail
        ref="testerDetail"
        :status="task.processStatus"
        :taskId="task.taskId"
        @closeDialog="closeDialog"
      ></tester-detail>
    </div>
    <div
      style="
        width: 100%;
        display: inline-block;
        text-align: center;
        margin-top: 10px;
      "
    >
      <el-button type="warning" class="btn-blue" @click="back">返回</el-button>
    </div>


    <!-- 查看详情弹层 -->
    <ChouTi ref="chouti" />

  </div>
</template>

<script>
import {
  getById,
  getApplicant,
  assignTester,
} from "@/api/crowdsource/crowdsource";
import TesterDetail from "@/views/components/TesterDetail";
import TaskInfo from "@/views/components/TaskInfo";
import ChouTi from './chouti.vue'
export default {
  name: "manageDetail",
  components: { TesterDetail, TaskInfo, ChouTi },
  data() {
    return {
      loading: false,
      dialogLoading: false,
      task: {},
      applicantList: [],
      userId: null,
      company: {},
      publisher: {},
    };
  },
  methods: {
    viewTesterDetail(userId) {
      this.userId = userId;
      // this.$refs.testerDetail.viewDetail(userId);
      this.$refs.chouti.open = true
      this.$refs.chouti.viewDetail(userId, this.id )
    },
    assignTester(userId) {
      this.$confirm("确认要将众包任务指定给该测试者吗?").then(() => {
        let param = {};
        param.testerId = userId;
        param.taskId = this.task.taskId;
        assignTester(param).then((response) => {
          getApplicant(this.id).then((response) => {
            this.applicantList = response.data;
          });
        });
        getById(this.id).then((response) => {
          this.task = response.task;
          this.$refs.taskInfo.refresh(this.task);
        });
      });
    },
    closeDialog(isFresh) {
      if (isFresh) {
        getApplicant(this.id).then((response) => {
          this.applicantList = response.data;
        });
        getById(this.id).then((response) => {
          this.task = response.task;
          this.$refs.taskInfo.setTask(this.task);
        });
      }
    },
    back() {
      this.$store.dispatch("tagsView/delView", this.$route);
      this.$router.push({ path: "/crowdsourceManage" });
    },
  },
  created() {
    this.id = this.$route.params && this.$route.params.id;
    getById(this.id).then((response) => {
      this.task = response.task;
      this.company = response.company;
      this.publisher = response.publisher;
      this.$refs.taskInfo.setTask(this.task);
    });
    getApplicant(this.id).then((response) => {
      this.applicantList = response.data;
    });
  },
};
</script>

<style scoped lang="scss">
.detailinfo {
  width: 100%;
  .boxshow {
    width: 100%;
    padding: 30px;
    box-shadow: 0px 2px 8px 0px rgba(54, 61, 67, 0.3);
    margin-top: 20px;
  }
  .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: 20px 0 10px 0;
    .lefttext {
      min-width:100px;
      margin-right: 10px;
    }
  }
}
</style>

