<template>
  <div class="jobs">
    <section class="jobs-top">
      <div class="left">
        近一个月共有<span>{{ lastMonthRecruitNum }}</span
        >个人应聘
      </div>
      <!-- <div class="add-job">刷新</div> -->
    </section>
    <section class="job-type-til">
      <div class="left">已收到简历状态</div>
      <div class="refresh" @click="handlegetApplyList">
        <i class="el-icon-refresh"></i>刷新
      </div>
    </section>
    <dl class="job-type">
      <!-- <dt>职位：</dt> -->
      <dd>
        <span
          :class="{ active: filterIndex == '-1' }"
          @click="filterData({ dictLabel: '', dictValue: '-1' })"
          >全部</span
        >
        <span
          :class="{ active: item.dictValue == filterIndex }"
          @click="filterData(item)"
          v-for="item in deliveryStatus"
          :key="item.index"
          >{{ item.dictLabel }}</span
        >
      </dd>
    </dl>
    <section class="job-list applys-list">
      <Empty v-if="total < 1" text="暂无应聘信息" />
      <div
        class="job-item"
        :class="{offline:item.postStatus=='0'}"
        v-for="item in applyList"
        :key="item.id"
        @click="goDetails(item)"
      >
        <div class="left">
          <div class="name">
            {{ item.postName
            }}<span class=""
              >{{ item.postLowestSalary }}K-{{ item.postHighestSalary }}K</span
            >
          </div>
          <div class="position">
            {{ item.memberName || item.createBy
            }}<span>{{ item.memberCityName }}</span>
          </div>
          <div class="resume">使用简历：<span>在线简历</span></div>
        </div>
        <div class="right">
          <div class="edit" v-if="item.postStatus==1">
            <span
              v-if="
                item.interviewMethod == 0 &&
                item.interviewTime &&
                item.status>=20&& item.status<40
              "
              @click.stop="sendvideo(item)"
              >发起视频面试</span
            >
            <span
              v-if="item.status >= 20 && item.status < 40"
              @click.stop="edit(item)"
              >更新面试结果</span
            >
          </div>
          <div class="edit" v-else>职位已下架</div>
          <div class="bottom">
            <span class="time"> {{ item.createTime }}</span>
            <span class="status"> {{ item.status | verifyStatusFilter }}</span>
          </div>
        </div>
      </div>
      <el-pagination
        :hide-on-single-page="true"
        @current-change="handleCurrentChange"
        :current-page.sync="queryParams.pageNum"
        :page-size="queryParams.pageSize"
        layout="prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </section>
    <el-dialog
      title="更新面试结果"
      :visible.sync="dialogVisible"
      :center="true"
      width="30%"
    >
      <el-form :model="form">
        <el-form-item label="岗位" :label-width="formLabelWidth">
          {{ form.postName }}
          <!-- <el-input v-model="form.name" autocomplete="off"></el-input> -->
        </el-form-item>
        <el-form-item label="面试结果" :label-width="formLabelWidth">
          <el-select v-model="form.status" placeholder="请选面试结果">
            <el-option
              v-for="item in results"
              :key="item.label"
              :label="item.label"
              :value="Number(item.value)"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item
          v-if="form.status == 20"
          label="邀请面试时间"
          :label-width="formLabelWidth"
        >
          <el-date-picker
            v-model="form.interviewTime"
            type="datetime"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item
          v-if="form.status == 20"
          label="邀请面试方式"
          :label-width="formLabelWidth"
        >
          <el-select v-model="form.interviewMethod" placeholder="面试方式">
            <el-option label="现场面试" value="1"></el-option>
            <el-option label="视频面试" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          v-if="form.status == 20"
          label="邀请面试地点"
          :label-width="formLabelWidth"
        >
          <el-input v-model="form.interviewArea" autocomplete="off"></el-input>
        </el-form-item> -->
        <el-form-item
          v-if="form.status == 50"
          label="邀请入职时间"
          :label-width="formLabelWidth"
        >
          <!-- value-format=" yyyy-MM-dd HH:mm"
            format="yyyy-MM-dd HH:mm" -->
          <el-date-picker
            v-model="form.hiredate"
            format="yyyy-MM-dd HH:mm"
            type="datetime"
            default-time="09:00:00"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
    <div class="chat" v-if="showChat">
      <div class="tool">
       <i class="close el-icon-close" @click="showChat=false"></i>
      </div>
      <iframe        
        :src='iframeScr'
        class="mapFrame"
        ref="mapFrame"
      ></iframe>
    </div>
  </div>
</template>

<script>
import { getApplyList, updateStatus, getDicData } from "@/utils/api";
import { parseTime } from "@/utils/index";
import Empty from "@/components/empty.vue";
export default {
  name: "",
  components: {
    Empty,
  },
  props: {
    lastMonthRecruitNum: {
      type: String,
      default: "0",
    },
  },
  data() {
    return {
      dialogVisible: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        postName: "",
        status: "",
      },
      total: 10,
      applyList: [],
      form: {},
      formLabelWidth: "120px",
      results: [
        // { label: "未查看", value: 0 },
        // { label: "已查看", value: 10 },
        { label: "邀请面试中", value: 20 },
        // { label: "已接受面试", value: 30 },
        // { label: "已拒绝面试", value: 40 },
        { label: "面试通过", value: 50 },
        { label: "面试未通过", value: 60 },
        { label: "不合适(邀请面试后不能选此项)", value: 11 },
        { label: "未参加面试", value: 70 },
        // { label: "已拒绝入职", value: 80 },
        // { label: "已入职", value: 90 },
      ],
      deliveryStatus: [],
      filterIndex: "-1",
      iframeScr:'https://veterhchat.hw.hongweisoft.com/',
      showChat:false
    };
  },
  filters: {
    verifyStatusFilter(value) {
      if (value == 0) {
        return "未查看";
      } else if (value == 10) {
        return "已查看";
      } else if (value == 20) {
        return "已邀请面试";
      } else if (value == 30) {
        return "已接受面试";
      } else if (value == 40) {
        return "已拒绝面试";
      } else if (value == 50) {
        return "面试通过";
      } else if (value == 11) {
        return "不合适";
      } else if (value == 70) {
        return "未参加面试";
      } else if (value == 80) {
        return "已拒绝入职";
      } else if (value == 90) {
        return "已入职";
      } else {
        return "未知";
      }
    },
  },
  watch: {
    form: {
      handler(val) {
        console.log("form.status: " + val.status);
      },
      deep: true, //true 深度监听
    },
  },
  created() {
    this.handlegetApplyList();
    this.getInterviewMethod();
    this.getDeliveryStatus();
  },
  methods: {
    getInterviewMethod() {
      getDicData("interview_method").then((res) => {
        console.log("interview_method", res.data);
        // this.jobForm.educations = res.data;
      });
    },
    getDeliveryStatus() {
      getDicData("delivery_status").then((res) => {
        this.deliveryStatus = res.data;
        console.log("delivery_status", res.data);
        // this.jobForm.educations = res.data;
      });
    },
    handlegetApplyList() {
      this.$emit("getTotal");
      getApplyList(this.queryParams)
        .then((res) => {
          console.log("getComPostList", res);
          this.applyList = res.data.rows;
          this.total = res.total;
        })
        .catch((err) => {
          this.$message.error(err.msg);
          // console.log("register err", err);
        });
    },
    filterData(item) {
      this.filterIndex = item.dictValue;
      if (item.dictValue == "-1") {
        this.queryParams.status = "";
      } else {
        this.queryParams.status = item.dictValue;
      }

      this.handlegetApplyList();
    },
    edit(item) {
      this.form = item;
      console.log("this.form", this.form);
      this.dialogVisible = true;
    },
    cancel() {
      this.dialogVisible = false;
      this.form = {};
      this.handlegetApplyList();
      // this.$router.go(0);
    },
    submit() {
      // console.log("this.form", this.form);
      // console.log("parseTime", parseTime);
      this.form.hiredate = parseTime(this.form.hiredate);
      this.form.interviewTime = parseTime(this.form.interviewTime);
      let that = this;
      let param = {
        id: this.form.id,
        status: this.form.status,
        interviewMethod: this.form.interviewMethod,
        interviewArea: this.form.interviewArea,
        interviewTime: this.form.interviewTime,
        interviewAddress: this.form.interviewAddress,
        hiredate: this.form.hiredate,
      };
      if (this.form.status == "50") {
        param = {
          id: this.form.id,
          status: this.form.status,
          hiredate: this.form.hiredate,
        };
      }else if(this.form.status == "11"){
        param = {
          id: this.form.id,
          status: this.form.status,
        };
      }

      // console.log("res", res);

      updateStatus(param)
        .then((res) => {
          this.dialogVisible = false;
          this.handlegetApplyList();
          this.$message({
            message: res.msg,
            type: "success",
            duration: 1000,
            onClose: function () {},
          });
          // console.log("updateStatus", res);
        })
        .catch((err) => {
          // console.log("err", err);
          this.$message({
            message: err.msg,
            type: "error",
            duration: 1000,
            onClose: function () {},
          });
        });
    },
    handleCurrentChange(val) {
      this.handlegetApplyList();
      // console.log(`当前页: ${val}`);
    },
    goDetails(item) {
      console.log("item", item);
      let that = this;
      if (item.status == "0") {
        console.log("goDetails", "1");
        updateStatus({ id: item.id, status: "10" }).then((res) => {
          this.$message({
            message: res.msg,
            type: "success",
            duration: 1000,
            onClose: function () {
              that.$router.push({
                path: "/applicant",
                query: {
                  veteMemberId: item.veteMemberId,
                  postName: item.postName,
                  applyId: item.id,
                },
              });
            },
          });
          // console.log("updateStatus", res);
        });
      } else {
        this.$router.push({
          path: "/applicant",
          query: {
            veteMemberId: item.veteMemberId,
            postName: item.postName,
            postLowestSalary: item.postLowestSalary,
            postHighestSalary: item.postHighestSalary,
            applyId: item.id,
          },
        });
      }
    },
    sendvideo(item) {
      // this.iframeScr = `https://veterhchat.hw.hongweisoft.com/?veteMemberId=${item.veteMemberId}&inviterId=${this.$store.state.vuex_company_id}`
      // this.showChat = true;
      // return;
      let url = `https://veterhwebchat.hw.hongweisoft.com/#/?veteMemberId=${item.veteMemberId}&inviterId=${this.$store.state.vuex_user.userId}&from=company`;
      // console.log("url", url);
      window.open(url, "_blank");
      // console.log("sendvideo", item);
    },
  },
};
</script>

<style lang='scss' scoped>
//@import url()
@import "./jobs.scss";
.job-type dd {
  padding-left: 0;
}
.job-type-til {
  height: 46px;
  line-height: 46px;
  padding-left: 20px;
  padding-right: 26px;
  background: #f7f7f7;
  border: 1px solid #efefef;
  .left {
    float: left;
    font-size: 16px;
    font-weight: 400;
    color: #2e2e2e;
  }
  .refresh {
    float: right;
    color: #329cf4;
    cursor: pointer;
    i {
      margin-right: 5px;
    }
  }
}
.applys-list {
  .job-item {
    .name {
      margin-bottom: 1px !important;
      span {
        color: #ff5900;
        font-size: 14px;
        margin-left: 9px;
      }
    }
    .position {
      margin-bottom: 4px;
      font-size: 14px;
      font-weight: 400;
      color: #434343;
      line-height: 20px;
      span {
        color: #979797;
        margin-left: 10px;
      }
    }
    .resume {
      font-size: 12px;
      font-weight: 400;
      color: #979797;
      line-height: 17px;
      span {
        color: #434343;
      }
    }
    .right {
      .edit {
        min-height: 12px;
        font-size: 12px;
        font-weight: 400;
        color: #4aad78;
        line-height: 17px;
        margin-bottom: 27px;
        span {
          cursor: pointer;
          & + span {
            margin-left: 10px;
          }
        }
      }
      .bottom {
        font-size: 12px;
        font-weight: 400;
        color: #9d9d9d;
        line-height: 17px;
        .status {
          color: #6c6c6c;
          margin-left: 5px;
        }
      }
    }
  }
  
}
.chat{
  // overflow-y: auto;
  box-sizing: border-box;
  width:400px;
  height:500px;
  position: fixed;
  right:24px;
  bottom:50px;
  .tool{
    text-align: right;
    .close{
      cursor: pointer;
      font-size: 50px;
    }
  }
  .mapFrame{
    box-sizing: border-box;
    border: 1px solid #ddd;
    width:100%;
    min-height:100%;
  }
}
::v-deep {
  .el-cascader {
    width: 100%;
  }
  .el-select {
    width: 100%;
  }
  .el-dialog {
    -moz-box-shadow: rgba(169, 169, 169, 0.6) 0px 0px 0px 10px; /* 老的 Firefox */
    box-shadow: rgba(169, 169, 169, 0.6) 0px 0px 0px 10px;
    border-radius: 0px;
    .el-dialog__header {
      background: rgb(0, 179, 138);
      span {
        color: white;
        font-size: 16px;
      }
      .el-dialog__headerbtn .el-dialog__close {
        color: white;
      }
    }
  }
}
</style>