<template>
  <div class="mybill-container f40 w">
    <div class="contenttitle">
      <ul @click="resetpag">
        <li @click="pagination.status = -1" :class="{ townsmanactive: pagination.status === -1 }">
          全部
          <span>{{ billNumber.num }}</span>
        </li>
        <li @click="pagination.status = 10" :class="{ townsmanactive: pagination.status === 10 }">
          待审核
          <span>{{ billNumber.num10 }}</span>
        </li>
        <li @click="pagination.status = 20" :class="{ townsmanactive: pagination.status === 20 }">
          待接待
          <span>{{ billNumber.num20 }}</span>
        </li>
        <li @click="pagination.status = 25" :class="{ townsmanactive: pagination.status === 25 }">
          待面试
          <span>{{ billNumber.num25 }}</span>
        </li>
        <li @click="pagination.status = 30" :class="{ townsmanactive: pagination.status === 30 }">
          待入职
          <span>{{ billNumber.num30 }}</span>
        </li>
        <li @click="pagination.status = 40" :class="{ townsmanactive: pagination.status === 40 }">
          跟在职
          <span>{{ billNumber.num40 }}</span>
        </li>
        <li @click="pagination.status = 999" :class="{ townsmanactive: pagination.status === 999 }">
          已完成
          <span>{{ billNumber.num999 }}</span>
        </li>
        <!-- <li
          @click="pagination.status = 50"
          :class="{ townsmanactive: pagination.status === 50 }"
        >
          当前<span>{{ billNumber.num == 0 ? "" : billNumber.num }}</span>
        </li>
        <li
          @click="pagination.status = 70"
          :class="{ townsmanactive: pagination.status === 70 }"
        >
          稍后<span>{{ billNumber.num == 0 ? "" : billNumber.num }}</span>
        </li>-->
        <!-- <li
          @click="pagination.status = 70"
          :class="{ townsmanactive: pagination.status === 70 }"
        >
          已放弃
        </li>-->
      </ul>
    </div>
    <div class="contentbody">
      <div class="searchbox">
        <div class="searchinput f40">
          <a-input placeholder="搜索工单号/职位/姓名/电话/身份证号" allowClear @keyup.enter="onSearch" @input="resetsearch" v-model="pagination.keys">
            <i slot="prefix" class="iconfont icon-sousuo"></i>
            <button slot="suffix" @click="onSearch">搜索</button>
          </a-input>
          <div>
            <div>报名时间：</div>
            <a-range-picker style @change="dateChange" class dropdownClassName="f40" />
          </div>
        </div>
        <div class="pagechange">
          <button @click="changepage(-1)">上一页</button>
          <button @click="changepage(1)">下一页</button>
        </div>
      </div>

      <div class="infocontent">
        <div class="contenttltle">
          <ul>
            <li>姓名</li>
            <li>报名岗位</li>
            <li>政策</li>
            <!-- <button @click="statusFilter">filter</button> -->
            <li>
              <div>状态：</div>
              <a-select size="small" placeholder allowClear @change="resetStatus" :dropdownMatchSelectWidth="false" style>
                <a-select-option v-for="(i, index) in orderStatus" :key="index" @click="handleChange(i)">{{ i.name }}</a-select-option>
              </a-select>
            </li>
          </ul>
        </div>
        <div style="text-align: center; margin-top: 16px">
          <a-spin tip="加载中..." :spinning="isspinning"></a-spin>
        </div>
        <template v-if="billList.length === 0 && isspinning === false">
          <a-empty class="nodata" description="暂无数据" />
        </template>
        <div class="subsetbox" v-if="!isspinning">
          <div class="infoSubset" v-for="(item, index) in billList" :key="item.id" :class="item.isDown ? '' : 'isDownstyle'">
            <ul class="proxyInfo">
              <li>报名时间: {{ item.createTime }}</li>
              <li>工单号: {{ item.orderNum }}</li>
              <li>{{ item.agencyName ?item.agencyName + (item.applyUserName ? ('@' + item.applyUserName) : '') : '-' + (item.applyUserName ? ('@' + item.applyUserName) : '')}}</li>
              <li>
                更新时间: {{ item.updateTime }}
                <span style="display: inline-block">({{ item.diffTime }})</span>
              </li>
            </ul>
            <ul class="billInfo" style>
              <li>
                <div class="serial">{{ index + 1 }}</div>
                <i class="iconfont icon-shenfenzheng" :style="{
										color: item.idCardImageUrl !== '' ? '#ff4400cc' : '#666',
									}" @click.stop="showdiymodal(item)"></i>
                <span>{{ item.userName }}/{{ item.sex }}/{{ item.age }}</span>
                <span>{{ item.tel }}</span>
              </li>
              <li>
                <div>{{ item.storeJobName }}</div>
              </li>
              <li>
                <p>{{ item.policy }}</p>
                <div v-show="item.isunfold" class="policyControl" @click="changeStatus(item, index)" :ref="'Control' + index">
                  <span v-show="item.controlUnfold">展开</span>
                  <span v-show="!item.controlUnfold">收起</span>
                </div>
              </li>
              <li>
                <span style="color: #ff4400; cursor: pointer" @click="showDetail(item)">{{ item.statusTag }}</span>
                <span v-show="item.statusShowTime">{{ item.statusTimeInfo }}: {{ item.statusShowTime }}</span>
                <span v-show="item.status == 40 || item.status == 50">具体以出名单时间为准</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="pagecontainer f40" v-if="billList.length !== 0">
        <a-pagination :current="+pagination.pageNum" :default-current="1" :defaultPageSize="10" :total="pagination.total" @change="onChange" />
        <div class="ant-pagination-options-quick-jumper">
          <span>共{{ pagination.total }}条，</span>
          跳至
          <input ref="pageinput" type="text" @keyup.enter="inputpageChange" @blur="inputpageChange" style />页
        </div>
      </div>
    </div>
    <div id="diymodal" class="diymodal" v-if="isdiymodalshow">
      <div class="title" @mousedown.stop="movebox">
        <i class="iconfont icon-guanbi" @click.stop="closemodal"></i>
      </div>
      <div class="body" @mousewheel.prevent="mousewhell">
        <div class="imgbox1" v-if="idcardimg !== ''">
          <div class="imgbox" :style="{ background: `url('${idcardimg}')` }"></div>
        </div>
        <div class="warningbox" v-else>
          <div>
            <img src="../../../../assets/warning.png" alt />
          </div>
          <p>未上传身份证照片</p>
          <!-- <div><button @click="isdiymodalshow = false">确定</button></div> -->
        </div>
        <!-- <img :src="idcardimg" alt="" draggable="false" /> -->
      </div>
      <div class="footer">
        <i class="iconfont icon-rotatexuanzhuan" title="旋转" @click="rotate(-90)"></i>
        <i class="iconfont icon-rotatexuanzhuan2" title="旋转" @click="rotate(90)"></i>
      </div>
    </div>
    <a-modal class="billDetailModal" v-model="billDetailVisible" width="756px" @cancel="billDetailModalClose" :footer="null">
      <div slot="title">跟进记录</div>
      <div id="progressinfo" v-if="Object.keys(currentBillDetail).length != 0">
        <template v-for="(group, key) in currentBillDetail">
          <div class="titleMain">
            <div v-if="spliceStr(key) == '1'">
              <img src="http://matripeweb.oss-cn-hangzhou.aliyuncs.com/imgs/shz.svg" alt />
              报名审核中
            </div>
            <div v-if="spliceStr(key) == '2'">
              <img src="http://matripeweb.oss-cn-hangzhou.aliyuncs.com/imgs/bmcg.svg" alt />报名成功
            </div>
            <div v-if="spliceStr(key) == '3'">
              <img src="http://matripeweb.oss-cn-hangzhou.aliyuncs.com/imgs/mstg.svg" alt />待入职
            </div>
            <div v-if="spliceStr(key) == '4'">
              <img src="http://matripeweb.oss-cn-hangzhou.aliyuncs.com/imgs/rzcg.svg" alt />在职中
            </div>
            <div v-if="spliceStr(key) == '5'">
              <img src="http://matripeweb.oss-cn-hangzhou.aliyuncs.com/imgs/ylz.svg" alt />已离职
            </div>
            <div v-if="spliceStr(key) == '6'">
              <img src="http://matripeweb.oss-cn-hangzhou.aliyuncs.com/imgs/bmcg.svg" alt />已完成
            </div>
            <div v-if="spliceStr(key) == '9'">
              <img src="http://matripeweb.oss-cn-hangzhou.aliyuncs.com/imgs/yylz.svg" alt />约离职
            </div>
            <div v-if="spliceStr(key) == '11'">
              <img src="http://matripeweb.oss-cn-hangzhou.aliyuncs.com/imgs/wei.svg" alt />报名失败
            </div>
            <div v-if="spliceStr(key) == '12'">
              <img src="http://matripeweb.oss-cn-hangzhou.aliyuncs.com/imgs/yjd.svg" alt />已接到
            </div>
            <div v-if="spliceStr(key) == '13'">
              <img src="http://matripeweb.oss-cn-hangzhou.aliyuncs.com/imgs/wei.svg" alt />未接到
            </div>
            <div v-if="spliceStr(key) == '14'">
              <img src="http://matripeweb.oss-cn-hangzhou.aliyuncs.com/imgs/wei.svg" alt />面试未通过
            </div>
            <div v-if="spliceStr(key) == '15'">
              <img src="http://matripeweb.oss-cn-hangzhou.aliyuncs.com/imgs/wei.svg" alt />未入职
            </div>
          </div>
          <div v-for="(item, index) in group" class="ui-step-one">
            <div class="cb-cricle"></div>
            <div class="ui-list-info">
              <!-- :style="padding-bottom: item.desp == '' ? '18px' : '24px';" -->
              <div class="f12 c6" style="white-space: pre-line" v-if="item.desp != ''">
                {{ item.desp }}
                <template v-if="item.policy">
                  <span class="ml12" style="color: #ff4400; cursor: pointer" @click="showInfo2(item.policy)">详情</span>
                </template>
                <a-modal class="billDetailModal recordInfo" title="报名信息" :visible="zzvisible" @cancel="policyModalCancel" width="716px" :footer="null">
                  <a-row class="f16 mb8">
                    <a-col :span="4">
                      <span class="dib tr">姓名：</span>
                    </a-col>
                    <a-col :span="18">
                      <span class="fwb" v-if="currentBillInfo.userName">{{ currentBillInfo.userName }}</span>
                      <span class="fwb" v-if="currentBillInfo.sex">/{{ currentBillInfo.sex == "1" || currentBillInfo.sex == "男" ? "男" : "女" }}</span>
                      <span class="fwb" v-if="currentBillInfo.age">/{{ currentBillInfo.age }}岁</span>
                      <span class="fwb" v-if="currentBillInfo.nation && currentBillInfo.nation != '族'">/{{ currentBillInfo.nation }}</span>
                    </a-col>
                  </a-row>
                  <a-row class="f16 mb8">
                    <a-col :span="4">
                      <span class="dib tr">电话：</span>
                    </a-col>
                    <a-col :span="18">
                      <span>{{ currentBillInfo.tel == "" || currentBillInfo.tel == null || currentBillInfo.tel == "undefined" ? "-" : currentBillInfo.tel }}</span>
                    </a-col>
                  </a-row>
                  <a-row class="f16 mb8">
                    <a-col :span="4">
                      <span class="dib tr">身份证号：</span>
                    </a-col>
                    <a-col :span="18">
                      <span>{{ currentBillInfo.idCard == "" || currentBillInfo.idCard == null || currentBillInfo.idCard == "undefined" ? "-" : currentBillInfo.idCard }}</span>
                    </a-col>
                  </a-row>
                  <a-row class="f16">
                    <a-col :span="4">
                      <span class="dib tr">家庭住址：</span>
                    </a-col>
                    <a-col :span="18">
                      <span>{{ currentBillInfo.address == "" || currentBillInfo.address == null || currentBillInfo.address == "undefined" ? "-" : currentBillInfo.address }}</span>
                    </a-col>
                  </a-row>

                  <div style="border-top: 1px dashed #eeeeee; margin-top: 24px; margin-bottom: 24px"></div>
                  <a-row class="f16 mb8">
                    <a-col :span="4">
                      <span class="dib tr">报名岗位：</span>
                    </a-col>
                    <a-col :span="18">
                      <span class="fwb">{{ currentBillInfo.storeJobName || "-" }}</span>
                    </a-col>
                  </a-row>
                  <a-row class="f16 mb8">
                    <a-col :span="4">
                      <span class="dib tr">政策：</span>
                    </a-col>
                    <a-col :span="18">
                      <span style="white-space: pre-wrap">{{ currentBillInfo.policy || "-" }}</span>
                    </a-col>
                  </a-row>
                  <a-row class="f16 mb8">
                    <a-col :span="4"></a-col>
                    <a-col :span="18" class="bfbutton">
                      <a-button style="background-color: #ff4400; color: white; border-radius: 0; border: none" @click="handleCancel">复制文本</a-button>
                    </a-col>
                  </a-row>
                </a-modal>
              </div>
              <div class="f12 c9 mt8">
                {{ item.creator }}
                <span class="ml8">{{ formatDateYMDHM(item.createTime) }}</span>
              </div>
            </div>
          </div>
        </template>
      </div>
      <div v-else>
        <a-empty class="nodata" description="暂无数据" style="padding: 40px" />
      </div>
    </a-modal>
  </div>
</template>

<script>
import { userBillApi, userBillNumberApi, userBillDetailApi } from '../../../../api/userinfo'
import { getUserApplyOrderStatusByIdToBill, isEmptyCheck, formatDateYMDHM, formatDateYMD } from '../../../../utils/commonUtil'

export default {
  // 组件名称
  name: 'mybillcontainer',
  // 局部注册的组件
  components: {},
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data() {
    return {
      isspinning: false,
      idcardimg: '', // 回显的身份证图片url
      isdiymodalshow: false, // 控制身份证图片显示
      scaleNum: 1, // 身份证图片显示倍率
      rotateNum: 0,
      searchvalue: '', // 搜索框检索信息
      filterStatus: 1, // 排序状态
      saveBill: [], // 缓存的报名列表
      billDetailVisible: false, // 工单详情显示
      currentBillDetail: {}, // 当前点击的报名详情
      zzvisible: false, // 跟进记录的政策信息弹出框显示
      currentBillInfo: {}, // 当前的工单跟进详情
      pagination: {
        pageNum: 1,
        pageSize: 10,
        total: null, //分页配置
        status: -1,
        keys: '',
      },
      statusValue: '',
      orderStatus: [
        {
          id: '10',
          name: '已报名，审核中',
          value: '10',
          text: '报名审核中',
          num: 0,
        },
        {
          id: '20',
          name: '报名成功，待面试',
          value: '20',
          text: '审核通过',
          num: 0,
        },
        {
          id: '21',
          name: '审核未通过，报名失败',
          value: '21',
          text: '审核未通过',
          num: 0,
        },
        { id: '25', name: '已接到', value: '25', text: '已接到', num: 0 },
        { id: '26', name: '未接到', value: '26', text: '未接到', num: 0 },
        {
          id: '30',
          name: '面试通过，待入职',
          value: '30',
          text: '面试通过',
          num: 0,
        },
        {
          id: '35',
          name: '面试未通过',
          value: '35',
          text: '面试未通过',
          num: 0,
        },
        {
          id: '40',
          name: '已入职，在职中',
          value: '40',
          text: '已入职',
          num: 0,
        },
        {
          id: '45',
          name: '面试通过，未入职',
          value: '45',
          text: '通过未入职',
          num: 0,
        },
        { id: '50', name: '已离职', value: '50', text: '已离职', num: 0 },
        // { id: "60", name: "已完成", value: "60", text: "已完成", num: 0 }
      ],
      billList: [],
      isunfold: false,
      statusTimeInfo: '', // 状态的时间类型
      statusShowTime: '', // 状态时间
      billNumber: {},
    }
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {
    this.getBill()
    this.userBillNumber()
  },
  /**
   * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
   */
  mounted() {},
  // 组件方法
  methods: {
    onChange(e) {
      this.pagination.pageNum = e
      console.log(e)
      this.getBill()
    },
    dateChange(e) {
      console.log('ischange')
      console.log(e)

      if (e.length != 0) {
        let date1 = new Date(e[0]._d)
        let date2 = new Date(e[1]._d)
        this.pagination.startDate = formatDateYMD(date1)
        this.pagination.endDate = formatDateYMD(date2)
      } else {
        this.pagination.startDate = ''
        this.pagination.endDate = ''
      }
      this.getBill()
      this.userBillNumber()
    },
    inputpageChange(e) {
      const pagenumcount = this.pagination.total / this.pagination.pageSize
      console.log(pagenumcount)
      if (e.target.value) {
        if (e.target.value > pagenumcount) {
          this.pagination.pageNum = Math.ceil(pagenumcount)
        } else {
          this.pagination.pageNum = e.target.value
        }
      } else {
        this.pagination.pageNum = 1
      }
      // this.getJobList();
      this.getBill()
      console.log(e)
    },
    async userBillNumber() {
      try {
        const { data } = await userBillNumberApi(this.pagination)
        if (data.status == 200) {
          console.log(data.data)
          this.billNumber = data.data
        }
      } catch (error) {
        console.log(error)
      }
    },
    async getBill() {
      console.log('click')
      // let that = this;
      console.log(this.pagination.status)
      try {
        this.isspinning = true
        const { data } = await userBillApi(this.pagination)
        console.log(data)
        if (data.status === 200) {
          // console.log();
          this.billList = data.data.recordList

          console.log(this.billList)
          setTimeout(() => {
            this.billList.forEach((item, index) => {
              let differenceTime = new Date().getTime() - new Date(item.updateTime).getTime()
              var D = Math.floor(differenceTime / (24 * 60 * 60 * 1000))
              var level1 = differenceTime % (24 * 3600 * 1000)
              var H = Math.floor(level1 / (3600 * 1000))
              var level2 = level1 % (3600 * 1000)
              var M = Math.floor(level2 / (60 * 1000))
              var level3 = level2 % (60 * 1000)
              var S = Math.floor(level3 / 1000)
              item.diffTime = null
              if (D > 0) {
                item.diffTime = D + '天前'
              } else if (H > 0) {
                item.diffTime = H + '小时前'
              } else if (M > 0) {
                item.diffTime = M + '分钟前'
              } else {
                item.diffTime = S + '秒前'
              }
              // console.log(new Date(differenceTime).getDate());
              // console.log(item.userName, D, H, M);
              // console.log(item);
              if (item.sex === 1) {
                item.sex = '男'
              } else if (item.sex === 2) {
                item.sex = '女'
              } else {
                item.sex = '未知'
              }

              // if (index % 2 === 0) {
              //   item.status = 60;
              // }
              if (!isEmptyCheck(item.tel)) {
                let first = item.tel.slice(0, 3)
                let second = item.tel.slice(3, 7)
                let thirdly = item.tel.slice(7, 12)
                // console.log(first);
                // console.log(second);
                // console.log(thirdly);
                item.tel = first + ' ' + second + ' ' + thirdly
              }

              if (item.status === 60 || item.status === 70) {
                item.isDown = true
              } else {
                item.isDown = false
              }
              item.statusTag = getUserApplyOrderStatusByIdToBill(item.status)
              item.interviewTime = formatDateYMDHM(item.interviewTime)
              item.entryTime = formatDateYMDHM(item.entryTime)
              item.leaveTime = formatDateYMDHM(item.leaveTime)
              // item.updateTime = formatDateYMDHMS(item.updateTime);
              // item.createTime = formatDateYMDHMS(item.createTime);
              item.updateTime = isEmptyCheck(item.updateTime) ? '2022-03-16 14:19' : formatDateYMDHM(item.updateTime)
              item.createTime = isEmptyCheck(item.createTime) ? '2022-03-16 14:19' : formatDateYMDHM(item.createTime)
              item.index = index + 1

              // console.log(that.$refs["Control" + index][0]);

              // setTimeout(() => {
              if (item.status == 10 || item.status == 20 || item.status == 21 || item.status == 25 || item.status == 26 || item.status == 30 || item.status == 35 || item.status == 45) {
                item.statusTimeInfo = '面试时间'
                item.statusShowTime = item.interviewTime
              } else if (item.status == 40) {
                item.statusTimeInfo = '入职时间'
                item.statusShowTime = item.entryTime
              } else if (item.status == 50) {
                item.statusTimeInfo = '离职时间'
                item.statusShowTime = item.leaveTime
              }
              // console.log(item.statusShowTime);
              // console.log(item.statusTimeInfo);
              // }, 100);
              // console.log("controlUnfold", item.controlUnfold);
              // console.log("isunfold", item.isunfold);
              // console.log(item);
            })
            this.showFlod(this.billList)

            this.saveBill = JSON.parse(JSON.stringify(this.billList))
          }, 0)

          this.pagination.total = data.data.recordCount
          this.$forceUpdate()
          this.totop()
        }
      } catch (error) {
        console.log(error)
      }
      ;(this.statusValue = ''), (this.isspinning = false)
    },
    resetpag() {
      // this.pagination.status = this.pagination.status
      this.getBill()
      this.userBillNumber()
    },
    customRendert(a) {
      console.log(a)
      this.$message.success(a.id)
      // console.log(c);
    },
    showdiymodal(info) {
      // 显示 身份证图片弹出框
      console.log(info)
      this.isdiymodalshow = true
      if (info.idCardImageUrl !== null && info.idCardImageUrl !== '') {
        this.idcardimg = info.idCardImageUrl
      }
      // this.$nextTick(() => {

      // });
    },
    movebox(e) {
      // 移动身份证弹出框
      let modalbox = document.querySelector('#diymodal')
      var x = e.pageX - modalbox.offsetLeft
      var y = e.pageY - modalbox.offsetTop
      var mousemove = function (e) {
        modalbox.style.left = e.pageX - x + 'px' // e.pageX是鼠标在点击之后移动的时候实时传过来的坐标信息,而x是在点击的一瞬间就确定的坐标,
        modalbox.style.top = e.pageY - y + 'px'
      }
      modalbox.addEventListener('mousemove', mousemove)
      var mouseup = function () {
        // modalbox.removeEventListener("mousedown", mousedown);
        modalbox.removeEventListener('mousemove', mousemove)
      }
      modalbox.addEventListener('mouseup', mouseup)
    },
    mousewhell(e) {
      // 滚动鼠标缩放图片
      let that = this
      console.log(e)
      console.log(that.scaleNum)
      console.log(this.scaleNum)
      var delta = 0
      let imgbox = document.querySelector('.imgbox')
      // if (Math.abs(that.rotateNum / 90) % 2 !== 0) {
      //   imgbox.style.transformOrigin = `${e.offsetY}px ${e.offsetX}px`; // 设置图片的缩放中心,保证跟随鼠标的位置进行图片的缩放
      // } else {
      imgbox.style.transformOrigin = `${e.offsetX}px ${e.offsetY}px` // 设置图片的缩放中心,保证跟随鼠标的位置进行图片的缩放
      // }
      var handle = function (delta) {
        // let
        let scaleNum = (that.scaleNum += delta / 15)
        if (delta < 0) {
          //向下滚动
          console.log(that.scaleNum)
          if (scaleNum <= 0.5) {
            that.scaleNum = 0.5
          }
        } else {
          //向上滚动
          console.log(that.scaleNum)
          if (scaleNum >= 3) {
            that.scaleNum = 3
          }
        }
        imgbox.style.transform = `scale(${that.scaleNum})`
      }
      if (!e) e = window.event
      if (e.wheelDelta) {
        //IE、chrome浏览器使用的是wheelDelta，并且值为“正负180”
        delta = e.wheelDelta / 180
        if (window.opera) delta = -delta //因为IE、chrome等向下滚动是负值，FF是正值，为了处理一致性，在此取反处理
      } else if (e.detail) {
        //FF浏览器使用的是detail,其值为“正负3”
        delta = -e.detail / 3
      }
      if (delta) {
        handle(delta)
      }
    },
    closemodal() {
      this.isdiymodalshow = false
      this.idcardimg = ''
      this.scaleNum = 1
    },
    rotate(e) {
      let imgbox1 = document.querySelector('.imgbox1')
      let imgbox = document.querySelector('.imgbox')
      this.scaleNum = 1
      console.log(this.scaleNum)
      this.rotateNum += e
      console.log(imgbox1.style)
      console.log(this.rotateNum)
      imgbox.style.transformOrigin = `50% 50%` // 设置图片的缩放中心,保证跟随鼠标的位置进行图片的缩放
      // imgbox.style.transformOrigin = `${e.offsetX}px ${e.offsetY}px`; // 设置图片的缩放中心,保证跟随鼠标的位置进行图片的缩放

      imgbox1.style.transform = `rotate(${this.rotateNum}deg)`
      this.mousewhell(e)
    },

    resetsearch(e) {
      console.log(e)
      if (e.target.value.length === 0) {
        this.pagination.keys = ''

        this.getBill()
        this.userBillNumber()
      }
    },
    onSearch() {
      this.pagination.pageNum = 1
      this.pagination.pageSize = 10
      this.pagination.status = -1
      // console.log();
      this.getBill()
      this.userBillNumber()
    },
    changepage(num) {
      console.log(Math.ceil(this.pagination.total / this.pagination.pageSize))
      if ((this.pagination.pageNum === 1 && num === -1) || (this.pagination.pageNum === Math.ceil(this.pagination.total / this.pagination.pageSize) && num === 1)) {
        if (num === -1) {
          this.$message.warning('已经到第一页了')
        } else {
          this.$message.warning('已经到最后一页了')
        }
        return
      } else {
        this.pagination.pageNum += num
      }
      this.getBill()
    },
    totop() {
      // 返回顶部
      // console.log(window);
      document.body.scrollTop = 0
      document.documentElement.scrollTop = 0
      // window.body.scrollY = 0;
    },
    changeStatus(item, index) {
      // 控制政策的展开
      // console.log(item);
      // console.log(index);
      let parent = this.$refs['Control' + index][0].parentNode
      let sibling = this.$refs['Control' + index][0].previousElementSibling
      if (item.controlUnfold) {
        parent.style.maxHeight = 'none'
        sibling.style.height = '100%'
        console.log(parent)
      } else {
        parent.style.maxHeight = '156px'
        sibling.style.height = '146px'
        sibling.style.overflow = 'hidden'
        console.log(parent)
      }
      item.controlUnfold = !item.controlUnfold
      this.$forceUpdate()
      console.log(item.controlUnfold)
    },
    statusFilter() {
      // 状态筛选
      let num = this.filterStatus % 3
      if (num == 1) {
        this.billList.sort((a, b) => {
          return a.status - b.status
        })
      } else if (num == 2) {
        this.billList.sort((a, b) => {
          return b.status - a.status
        })
      } else {
        this.billList = JSON.parse(JSON.stringify(this.saveBill))
      }
      this.filterStatus++
    },
    showFlod(list) {
      // setTimeout(() => {
      list.forEach((item, index) => {
        // console.log('=======');
        let parent = this.$refs['Control' + index][0].parentNode
        let sibling = this.$refs['Control' + index][0].previousElementSibling
        // console.log('parent ' + parenzt );
        // console.log('sibling ' + sibling );
        // console.log('sibling.offsetHeight' + sibling.offsetHeight );
        // console.log('parent.offsetHeight' + parent.offsetHeight );
        if (sibling.scrollHeight >= parent.scrollHeight) {
          // sibling.style.height = "100%";
          sibling.style.overflow = 'hidden'
          parent.style.paddingBottom = '20px'
          item.isunfold = true
          item.controlUnfold = true
        } else {
          item.isunfold = false
        }
        // console.log(item);
      })
      // }, 100);
      this.$forceUpdate()
    },
    handleChange(e) {
      // console.log(e);
      // let that = this;
      // this.billList = JSON.parse(JSON.stringify(this.saveBill));
      // let list = [];
      // this.billList.forEach((item) => {
      // 	if (item.status == e.value) {
      // 		list.push(item);
      // 	}
      // });
      // this.billList = list;
      // setTimeout(() => {
      // 	this.$nextTick(() => {
      // 		this.showFlod(that.billList);
      // 	});
      // }, 0);
      // console.log(e);
      this.pagination.statusMin = e.id
      this.getBill()
      this.userBillNumber()
    },
    resetStatus(e) {
      console.log(e)
      if (e == undefined) {
        this.pagination.statusMin = ''
        this.userBillNumber()
        this.getBill()
        // this.billList = JSON.parse(JSON.stringify(this.saveBill));
        // setTimeout(() => {
        // 	this.showFlod(this.billList);
        // }, 0);
      }
      // console.log(e);
    },
    /* 
      显示工单跟进记录弹出框
    */
    showDetail(item) {
      userBillDetailApi(item.id).then((res) => {
        let { data } = res
        if (data.status == 200) {
          console.log(res)
          this.currentBillDetail = data.data.records
        } else {
          this.currentBillDetail = {}
        }
        console.log(this.currentBillDetail)
        console.log(this.currentBillDetail.length)
        let test = {}
        console.log(test[0])
        console.log(toString(this.currentBillDetail) == '{}')
      })
      this.billDetailVisible = true
      console.log(item)
    },
    /* 
      关闭工单跟进记录弹出框
    */
    billDetailModalClose() {
      this.billDetailVisible = false
    },
    /* 
      关闭政策显示框
    */
    policyModalCancel() {
      this.zzvisible = false
    },
    /* 
      截出跟进记录字符串
    */
    spliceStr(str) {
      return str.split('_')[1]
    },
    /* 
      显示跟进记录详情弹出框
    */
    showInfo2(record) {
      this.currentBillInfo = JSON.parse(record)
      // this.currentBillInfo = {
      //   userName: "李俊中",
      //   nation: "汉族",
      //   age: "52",
      //   sex: 1,
      //   tel: 1311111111,
      //   idCard: 412825197101040513,
      //   address: "河南省上蔡县芦岗乡看花楼村王会庄9988",
      //   storeJobName: "郑州西区格力绿色再生资源",
      //   policy:
      //     "●年龄性别：男 35-55；女 35-46 ●薪资明细：计件工资，多劳多得。不同岗位，计件工资约200-280元/天（出勤七天内，男170元/天，在职不满30天的保底工资按60%或按实际操作量计算工资）。入职会安全培训，上岗实习等，以上时间无工资 ●吃饭住宿：吃饭自理;住宿免费，水电均摊 ●代理利润：出勤15天利润400元；（具体政策以面试当天为准）",
      // };
      this.zzvisible = true
    },
    /* 
    复制跟进记录详情文本
     */
    handleCancel() {
      var that = this

      var text = '姓名：' + that.currentBillInfo.userName + '/' + (that.currentBillInfo.sex == 1 || that.currentBillInfo.sex == '男' ? '男' : '女') + '/' + that.currentBillInfo.age + '岁' + (that.currentBillInfo.nation == '族' ? '' : '/' + that.currentBillInfo.nation) + '\n电话：' + (that.currentBillInfo.tel == '' || that.currentBillInfo.tel == undefined || that.currentBillInfo.tel == null ? '-' : that.currentBillInfo.tel) + '\n身份证号：' + (that.currentBillInfo.idCard == '' ? '-' : that.currentBillInfo.idCard) + '\n家庭地址：' + (that.currentBillInfo.address == '' || that.currentBillInfo.address == undefined || that.currentBillInfo.address == null ? '-' : that.currentBillInfo.address) + '\n报名岗位：' + that.currentBillInfo.storeJobName + '\n政策：' + that.currentBillInfo.policy

      this.zzvisible = false
      this.$copyText(text).then(
        (e) => {
          console.log('复制成功：', e)
          that.$message.success('复制成功')
        },
        (e) => {
          console.log('复制失败：', e)
        }
      )
    },
    /* 
      关闭跟进详情弹出框
    */
    // handleOk() {
    //   this.zzvisible = false;
    // },
    formatDateYMDHM(time) {
      return formatDateYMDHM(time)
    },
  },
}
</script>

<style scoped lang="less">
.mybill-container {
  position: relative;
  // min-height: 802px;
  margin-top: 16px;
  // border-radius: 4px;
  padding: 1px 10px;
  background-color: #fff;
  font-size: 16px;

  .diymodal {
    // display: none;
    width: 512px;
    height: 512px;
    position: fixed;
    border: #ebebeb solid 1px;
    left: 50%;
    top: 50%;
    background: #ffffff;
    box-shadow: 0px 5px 20px #ddd;
    z-index: 9999;
    transform: translate(-50%, -60%);
    .title {
      height: 30px;
      border-bottom: 1px solid rgb(240, 240, 240);
      i {
        float: right;
        width: 30px;
        margin: 2px 3px 0 0;
        line-height: 30px;
        text-align: center;
        font-size: 12px;
        cursor: pointer;
      }
    }
    .body {
      height: calc(100% - 60px);
      width: 100%;
      padding: 10px 0;
      overflow: hidden;
      .imgbox1 {
        height: 100%;

        .imgbox {
          position: relative;
          // width: 100%;
          height: 100%;
          background-repeat: no-repeat !important;
          background-size: contain !important;
          background-position: center center !important;
        }
      }
      .warningbox {
        height: 100%;
        padding: 100px 0 160px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        text-align: center;
        > div:first-child {
          margin-top: 20px;
        }
        // overflow: hidden;
        img {
          width: 80px;
          height: 80px;
        }
        p {
          font-size: 16px;
          margin-top: 30px;
        }
        > div:last-child {
          margin-top: 20px;
          height: 32px;
          button {
            float: right;
            width: 72px;
            height: 32px;
            background-color: #ff4400;
            border: none;
            color: #fff;
            // border-radius: 4px;
            margin-right: 60px;
          }
        }
      }
      // img {
      //   height: 100%;
      // }
    }
    .footer {
      height: 40px;
      width: 100%;
      border-top: 1px solid rgb(240, 240, 240);
      background-color: #fff;
      text-align: center;
      i {
        font-size: 20px;
        line-height: 40px;
        color: #a1a1a1;
        // font-weight: bold;
        cursor: pointer;
        &:first-child {
          margin-right: 25px;
        }
      }
    }
  }
}
/deep/ .contenttitle {
  display: flex;
  padding-bottom: 0px;
  justify-content: space-between;
  border-bottom: 1px solid rgba(77, 87, 94, 0.1);
  margin-top: 16px;
  margin-bottom: 16px;

  ul {
    display: flex;
    height: 40px;
    .townsmanactive {
      // border-color: #;
      color: #ff6600;
      z-index: 999;
      border-bottom: 2px solid #ff6600;
      span {
        color: #ff6600;
      }
    }
    li {
      position: relative;
      // width: 104px;
      // height: 40px;
      padding: 0px 20px;
      padding-bottom: 16px;
      font-weight: 600;
      color: #666;
      // line-height: 40px;
      text-align: center;
      cursor: pointer;
      span {
        color: #ff6600;
        margin-left: 4px;
        font-size: 16px;
      }
      &:hover {
        color: #ff6600;
        span {
          color: #ff6600;
        }
      }
      &::after {
        content: '';
        position: absolute;
        display: block;
        width: 1px;
        height: 24px;
        right: 0;
        top: 0%;
        // transform: translateY(-50%);
        background-color: #eeeeee;
      }
      &:last-child::after {
        display: none;
      }
      &:nth-child(7)::after {
        height: 57px;
        top: -16px;
      }
    }
    button {
      width: 100px;
      height: 28px;
      position: relative;
      font-size: 14px;
      border: 1px solid #cccccc;
      background-color: #fff;
      margin-right: -1px;
      cursor: pointer;
      &:hover {
        color: #ff4400;
      }
    }
    button:first-child {
      // border-radius: 4px 0px 0px 4px;
    }
    button:last-child {
      // border-radius: 0px 4px 4px 0px;
    }
  }
}
/deep/ .contentbody {
  // /deep/ .ant-table-placeholder {
  //   min-height: 300px;
  //   > div {
  //     position: relative;
  //     height: 131px;
  //     top: 30px;
  //     // transform: translateY(-50%);
  //   }
  // }
  .searchbox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .ant-input {
      border-radius: 0;
    }
    .searchinput {
      display: flex;
      position: relative;
      > div {
        display: flex;
        // width: 375px;
        justify-content: start;
        align-items: center;
        font-size: 14px;
        > div {
          margin-left: 50px;
          width: 70px;
        }
      }
      .ant-input {
        width: 400px;
        // width: 300px;
        position: relative;
        height: 32px;
        text-indent: 10px;
        background: #fff;
        // border: 1px solid rgba(77, 87, 94, 0.3);
        // border-radius: 136px;
        box-shadow: 0px 2px 4px 0px transparent;
        font-size: 14px !important;
        padding-right: 0;
        border-color: #e9e9e9;
        // z-index: ;
        &::placeholder {
          text-indent: 10px;
          font-size: 14px !important;
        }
        &:hover {
          border-color: #ff4400;
          box-shadow: none;
        }
        &:focus {
          border-color: #ff4400;
        }
      }
      .ant-input-affix-wrapper {
        .ant-input-prefix {
          position: absolute;
          width: 20px;
          right: 0;
          top: 16px;
          i {
            color: #c9c9c9;
          }
        }
        .ant-input-suffix {
          // position: absolute;
          right: 0px !important;
        }
      }
      button {
        width: 70px;
        height: 32px;
        color: white;
        background: #ff4400;
        border-color: #ff4400;
        border: none;
        // border-radius: 16px;
        font-size: 14px;
        box-shadow: none;
        cursor: pointer;
        outline: none;
        &:hover {
          background-color: #ff4400d9;
        }
        // &:focus {
        //   border: none;
        // }
      }
      .ant-calendar-picker-input {
        display: flex;
        padding-left: 0;
        justify-content: center;
        // margin-left: 20px;
        width: 260px;
        border-color: #ccc;
        // border-radius: 4px;
        // border: none;
        &:hover {
          border-color: #ff4400;
        }
        .ant-calendar-range-picker-input {
          width: 95px;
          font-size: 14px;
        }
        .ant-calendar-range-picker-separator {
          margin-right: 10px;
        }
        .ant-calendar-picker-clear {
          margin-right: 10px;
        }
      }
    }
    .pagechange {
      button {
        width: 66px;
        height: 24px;
        border: 1px solid rgba(77, 87, 94, 0.3);
        // border-radius: 4px;
        font-size: 14px;
        color: #4d575e;
        background-color: #fff;
        &:hover {
          border-color: #ff4400;
          color: #ff4400;
        }
        &:first-child {
          margin-right: 12px;
        }
      }
    }
  }
  .infocontent {
    .contenttltle {
      margin-top: 16px;
      > ul {
        height: 32px;
        line-height: 32px;
        display: flex;
        justify-content: space-between;
        background-color: #f5f5f5;
        border: 1px solid #e8e8e8;
        font-size: 14px;
        text-align: center;
        // li {
        // }
        li:first-child {
          width: 263px;
          padding-left: 60px;
        }
        li:nth-child(2) {
          width: 246px;
          // line-height: 100px;
          // background-color: red;
        }
        li:nth-child(3) {
          // width: 213px;
          flex: 1;
          // background-color: green;
        }
        li:nth-child(4) {
          display: flex;
          justify-content: end;
          align-items: center;
          padding-left: 50px;
          padding-right: 16px;
          width: 321px;
          > div:first-child {
            line-height: 30px;
          }
          .ant-select {
            width: 120px;
            // margin-left: 20px;
          }
          .ant-select-focused .ant-select-selection,
          .ant-select-selection:focus,
          .ant-select-selection:active {
            border-color: #ff4400;
            box-shadow: none;
          }
          .ant-select-selection {
            border-radius: 0;
          }
          .ant-select-selection:hover {
            border-color: #ff4400;
          }
          .ant-select-focused {
            box-shadow: none;
          }
          // background-color: purple;
        }
      }
    }
    .isDownstyle {
      .proxyInfo {
        background-color: #fff3ef !important;
        border-color: #ff4400cc !important;
      }
      .billInfo {
        li {
          border-color: #ff4400cc !important;
          .serial {
            border-color: #ff4400cc !important;
          }
        }
      }
    }
    .infoSubset {
      // height: 174px;
      // background-color: pink;
      margin-top: 16px;
      font-size: 14px;

      .proxyInfo {
        display: flex;
        height: 40px;
        padding: 0 16px;
        // background-color: skyblue;
        background-color: #f5f5f5;
        justify-content: space-between;
        align-items: center;
        border: 1px solid #ccc;
        li {
          flex: 1;
          &:nth-child(2) {
            margin-left: 5px;
          }
          &:nth-child(3) {
            // margin-left: 100px;
            position: relative;
            transform: translateX(52px);
          }
          &:last-child {
            text-align: right;
          }
          // flex: 1;
        }
      }
      .billInfo {
        display: flex;
        justify-content: space-between;
        li {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          text-align: center;
          border: 1px solid #ccc;
          border-top: none;
          &:nth-child(-n + 3) {
            border-right: none;
          }
        }
        li:first-child {
          position: relative;
          width: 273px;
          padding-left: 60px;
          .serial {
            display: flex;
            align-items: center;
            position: absolute;
            height: 100%;
            width: 60px;
            left: 0;
            font-weight: 400;
            color: #333;
            font-size: 16px;
            justify-content: center;
            background-color: #fff;
            border-right: 1px solid #ccc;
          }
          // flex-direction: column;

          // justify-content: space-around;
          // padding: 28px 0 32px;
          i {
            text-align: center;
            width: 24px;
            font-size: 24px;
            &:before {
              cursor: pointer;
            }
          }
          // span {
          // 	display: block;
          // 	height: 22px;
          // }
          span:nth-of-type(1) {
            font-weight: bold;
            margin-bottom: 5px;
          }
          // background-color: blue;
        }
        li:nth-child(2) {
          width: 246px;
          // line-height: 100px;
          // background-color: red;
        }
        li:nth-child(3) {
          width: 400px;
          // display: block;
          position: relative;
          max-height: 156px;
          min-height: 156px;
          text-align: left;
          padding: 6px 16px 6px 16px;

          overflow: hidden;
          > p {
            white-space: break-space;
            text-align: center;
            word-break: break-all;
            font-size: 14px;
            width: 100%;
          }
          div {
            position: absolute;
            width: 42px;
            height: 20px;
            right: 19px;
            bottom: 3px;
            text-align: right;
            background-color: #fff;
            color: #ff4400;
            cursor: pointer;
          }
          // background-color: green;
        }
        li:nth-child(4) {
          display: flex;
          flex-direction: column;
          justify-content: center;
          // padding-top: 62px;
          width: 321px;
          // background-color: purple;
        }
      }
    }
  }
}
.icon-zhengjian {
  transform: scaleX(-1.2);
}
.billDetailModal {
  /deep/ .ant-modal-content {
    .ant-modal-body {
      max-height: 700px;
      overflow: auto;
      padding: 30px;
      // 跟进信息的状态
      #progressinfo {
        margin: 0 !important;
      }
      #progressinfo > div {
        margin-left: 24px;
        padding-top: 0;
        padding-bottom: 0;
        padding-right: 16px;
        position: relative;
      }

      .titleMain div {
        padding-bottom: 20px;
        padding-left: 13px;
        border-left: 2px solid #cccccc;
        left: 16px;
        line-height: 20px;
        /*height: 22px;*/
        font-size: 16px;
        font-weight: bold;
        color: #333333;
      }

      .cg-cricle,
      .cb-cricle {
        position: absolute;
        left: -4.5px;
        top: 1px;
        background: #cccccc;
        width: 10px;
        height: 10px;
        border-radius: 100%;
      }

      .ui-list-info {
        padding-bottom: 24px;
        border-left: 2px solid #cccccc;
        padding-left: 13px;
        position: relative;
        top: -3px;
        margin-bottom: -4px;
      }
      #progressinfo {
        margin-top: 24px;
        font-size: 14px;
        margin-bottom: 125px;
        ul {
          margin-bottom: 0;

          li {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-left: 1px solid #e8e8e8;
            margin-left: 4px;
            position: relative;
            padding-bottom: 29px;

            p {
              margin-bottom: 0;
            }

            > div:first-child {
              position: absolute;
              width: 8px;
              height: 8px;
              left: -4.5px;
              top: 0;
              border: 2px solid #1890ff;
              background-color: #fff;
              border-radius: 50%;
              box-sizing: border-box;
            }

            > div:nth-child(2) {
              margin-left: 37px;
              margin-top: -7px;
            }

            > div:last-child {
              color: #ccc;
              cursor: pointer;
            }
          }

          li:last-child {
            border-color: transparent;
          }
        }

        .loadmore {
          text-align: center;
          color: #1890ff;
        }
      }
      .titleMain > div > img {
        position: absolute;
        top: 0px;
        left: -10px;
        display: inline-block;
        width: 20px;
        height: 20px;
        background-color: #ccc;
        line-height: 20px;
        border-radius: 50%;
        padding: 2px;
      }
      .titleMain:first-of-type > div {
        color: #ff4400;
      }
      .titleMain:first-of-type > div > img {
        background-color: #ff4400;
      }
    }
    .ant-modal-header {
      background-color: #f5f5f5;
      border-bottom: 0px solid #000;
    }
  }
}
.recordInfo {
  /deep/ .ant-modal-content {
    .ant-modal-body {
      padding-left: 120px;
      .mb8 {
        margin-bottom: 20px !important;
      }
      .ant-row > div:first-child {
        text-align: right;
        margin-right: 32px;
      }
    }
  }
}
/deep/ .ant-calendar-panel {
  .ant-calendar-month-panel-selected-cell .ant-calendar-month-panel-month {
    background: #ff4400;
  }
  .ant-calendar-date:hover {
    border-color: #ff4400;
    background-color: #fff;
    color: #ff4400;
  }
  .ant-calendar-today .ant-calendar-date {
    background-color: #ff4400;
    border-color: #ff4400;
    color: #fff;
  }
  .ant-calendar-range .ant-calendar-selected-start-date .ant-calendar-date,
  .ant-calendar-range .ant-calendar-selected-end-date .ant-calendar-date {
    background-color: #ff4400;
    border-color: #ff4400;
    color: #fff;
  }
  .ant-calendar-range .ant-calendar-in-range-cell::before {
    background: #fff3ef;
  }
  .ant-calendar-range .ant-calendar-selected-start-date .ant-calendar-date:hover,
  .ant-calendar-range .ant-calendar-selected-end-date .ant-calendar-date:hover {
    background: #ff4400;
  }
  .ant-calendar-header a:hover {
    color: #ff4400;
  }
  .ant-calendar-month-panel-selected-cell .ant-calendar-month-panel-month:hover,
  .ant-calendar-year-panel-selected-cell .ant-calendar-year-panel-year,
  .ant-calendar-decade-panel-selected-cell .ant-calendar-decade-panel-decade,
  .ant-calendar-decade-panel-selected-cell .ant-calendar-decade-panel-decade:hover,
  .ant-calendar-year-panel-selected-cell .ant-calendar-year-panel-year:hover {
    background: #ff4400;
  }
  .ant-calendar-month-panel-month:hover,
  .ant-calendar-year-panel-year:hover,
  .ant-calendar-decade-panel-decade:hover {
    background: #fff3ef;
  }
}
</style>
