<template>
  <div class="mainContainer">
    <div class="mainTableTools">
      <div class="mainTableTagbox">
        <el-tag>开放中需求：<b>{{counter.audit}}</b></el-tag>
        <el-tag>人力外包服务商：<b>{{counter.recruit}}</b></el-tag>
        <el-tag>驻场开发者：<b>{{counter.remote}}</b></el-tag>
      </div>
    </div>
    <el-tabs>
      <el-tab-pane label="人力外包需求列表">
        <el-table :data="auditData" style="width: 100%;margin-bottom: 20px;" border>
          <el-table-column prop="id" label="岗位ID" width="70"></el-table-column>
          <el-table-column prop="occupationName" label="职位类型"></el-table-column>
          <el-table-column prop="workTypeName" label="工作方式"></el-table-column>
  <!--        <el-table-column prop="conversionType" label="转化来源"></el-table-column>-->
          <el-table-column  label="转化来源">
            <template slot-scope="scope">
              <span>{{(scope.row.sourceType || '') +'-'+ (scope.row.version || '')}}{{scope.row.conversionType != '-'?'-'+scope.row.conversionType:''}}</span>
            </template>
          </el-table-column>
          <el-table-column label="工作周期">
            <template slot-scope="scope">
              <span>{{scope.row.month}}个月</span>
            </template>
          </el-table-column>
          <el-table-column label="驻场地区">
            <template slot-scope="scope">
              <span>{{scope.row.cityName || '-'}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="salaryName" label="薪酬范围"></el-table-column>
          <el-table-column label="公司">
            <template slot-scope="scope">
              <span>{{scope.row.companyInfo && scope.row.companyInfo.shortName ? scope.row.companyInfo.shortName : (scope.row.companyInfo && scope.row.companyInfo.name ? scope.row.companyInfo.name : '')}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="auditAtFormat" label="发布（刷新）日期"></el-table-column>
          <el-table-column prop="createdAtFormat" label="创建日期"></el-table-column>
          <!-- <el-table-column prop="submitAuditAtFormat" label="申请审核日期"></el-table-column> -->
          <el-table-column prop="countApplied" label="已投递" width="70"></el-table-column>
          <el-table-column prop="countTalk" label="沟通中" width="70"></el-table-column>
          <el-table-column prop="statusName" label="岗位状态" width="90"></el-table-column>
          <el-table-column prop="recuitResult" label="招聘结果" width="90">
            <template slot-scope="scope">
              <span v-if="scope.row.recruitResult == 1">是</span>
              <span v-if="scope.row.recruitResult == 2">否</span>
              <span v-if="scope.row.recruitResult == '' || scope.row.recruitResult == 0">-</span>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination class="order-footer" background layout="prev, pager, next" 
          :page-size="20" :total="Number(auditTotal)" @current-change="auditDataPage" />
      </el-tab-pane>

      <el-tab-pane label="人力外包服务商">
        <el-table :data="recruitUserData" style="width: 100%;margin-bottom: 20px;" border >
          <el-table-column prop="uid" label="用户信息">
            <template slot-scope="scope">
              <span class="lblue point">
                <a target="_blank" :href="scope.row.host+'/rooter/user/'+scope.row.uid">{{scope.row.nickname}}</a>
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="company" label="企业信息">
            <template slot-scope="scope">
              <span class="lblue point">
                <a target="_blank" :href="scope.row.host+'/rooter/companyVerifyAuditItem?uid='+scope.row.uid">{{scope.row.company_name}}</a>
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="create_time" label="入驻时间"></el-table-column>
          <el-table-column label="审核记录">
            <template slot-scope="scope">
              <span class="lblue point">
                <a target="_blank" :href="scope.row.host+'/rooter/companyVerifyAuditItem?uid='+scope.row.uid">查看详情</a>
              </span>
            </template>
          </el-table-column>
          <el-table-column label="备注">
            <template slot-scope="scope">
              <div>{{ scope.row.remark_text }}</div>
              <el-button type="text" @click="onToList(scope.row)">查看备注({{ scope.row.remark_num }})</el-button>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="onRemark(scope.row)">添加备注</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination class="order-footer" background layout="prev, pager, next" 
          :page-size="20" :total="Number(recruitTotal)" @current-change="recruitUserPage" />
      </el-tab-pane>

      <el-tab-pane label="人力外包个人">
        <el-table :data="remoteUserData" style="width: 100%;margin-bottom: 20px;" border >
          <el-table-column prop="uid" label="用户信息">
            <template slot-scope="scope">
              <span class="lblue point">
                <a target="_blank" :href="scope.row.host+'/rooter/user/'+scope.row.uid">{{scope.row.nickname}}</a>
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="company" label="所属企业">
            <template slot-scope="scope">
              <span class="lblue point">
                <a target="_blank" :href="scope.row.host+'/rooter/companyVerifyAuditItem?uid='+scope.row.uid">{{scope.row.company_name}}</a>
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="city_name" label="可驻场城市"></el-table-column>
          <el-table-column prop="weixin" label="微信号"></el-table-column>
          <el-table-column label="备注">
            <template slot-scope="scope">
              <div>{{ scope.row.remark_text }}</div>
              <el-button type="text" @click="onToList(scope.row)">查看备注({{ scope.row.remark_num }})</el-button>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="onRemark(scope.row)">添加备注</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination class="order-footer" background layout="prev, pager, next" 
          :page-size="20" :total="Number(remoteTotal)" @current-change="remoteUserPage" />
      </el-tab-pane>

    </el-tabs>

    <el-dialog title="添加备注" :visible.sync="remarkModel">
      <div>
        <el-input
          type="textarea"
          :rows="5"
          placeholder="请输入内容"
          v-model="remarkData.content">
        </el-input>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="remarkModel = false">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="onRemarkSave">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>

  export default {
    data() {
      return {
        page: 1,
        auditTotal: 0,
        recruitTotal: 0,
        remoteTotal: 0,
        auditData: [],
        recruitUserData: [],
        remoteUserData: [],
        remarkModel: false,
        remarkData: {id: '0', content: ''},
        loading: false,
        counter: {audit: 0, recruit: 0, remote: 0}
      }
    },
    computed: {
      
    },
    mounted() {
      this.getAuditList();
      this.getRecruitUserList();
      this.getRemoteUserList();
    },
    methods: {
      async getAuditList() {
        const data = {
          page: this.page,
          workType: 2
        };
        let res = await this.$post("/api/admin/recruit/getAuditList", data);
        if (res && res.status === 1) {
          this.auditData = res.data.list;
          this.page = res.data.page;
          this.auditTotal = res.data.total;
          this.counter.audit = res.data.total;
        }
      },
      async getRecruitUserList() {
        const data = {
          page: this.page
        };
        let res = await this.$post("/api/admin/recruit/getRecruitUser", data);
        if (res && res.status === 1) {
          this.recruitUserData = res.data.list;
          this.page = res.data.page;
          this.recruitTotal = res.data.total;
          this.counter.recruit = res.data.total;
        }
      },
      async getRemoteUserList() {
        const data = {
          page: this.page
        };
        let res = await this.$post("/api/admin/recruit/getRemoteUser", data);
        if (res && res.status === 1) {
          this.remoteUserData = res.data.list;
          this.page = res.data.page;
          this.remoteTotal = res.data.total;
          this.counter.remote = res.data.total;
        }
      },
      auditDataPage(val) {
        this.page = val;
        this.getAuditList();
      },
      recruitUserPage(val) {
        this.page = val;
        this.getRecruitUserList();
      },
      remoteUserPage(val) {
        this.page = val;
        this.getRemoteUserList();
      },

      onRemark(row) {
        this.remarkData.id = row.uid;
        this.remarkData.type = row.remark_type;
        this.remarkModel = true;
      },
      onToList(row) {
        let data = {
          obj_id: row.uid,
          type: row.remark_type
        }
        this.$router.push({path: '/main/remark_list', query: data});
      },
      async onRemarkSave() {
        this.loading = true;
        if (this.remarkData.content === '' || this.remarkData.id === '0') {
          this.$message.error('请输入内容')
          this.loading = false
          return false
        }

        let data = {content: this.remarkData.content, id: this.remarkData.id, type: this.remarkData.type}
        let res = await this.$post("/api/admin/recruit/saveRemark", data);
        if (res && res.status === 1) {
          this.$message.success('备注成功')
          this.remarkModel = false;
          this.getRecruitUserList();
          this.getRemoteUserList();
        }
        this.loading = false
      },

    }
  };
</script>