<template>
  <div class="townsman-container f40 w">
    <div class="contenttitle">
      <ul @click="resetpag">
        <li @click="pagination.status = 0" :class="{ townsmanactive: pagination.status === 0 }">
          全部
          <span>{{ statusNum.num0 == 0 ? "" : statusNum.num0 }}</span>
        </li>
        <li @click="pagination.status = 40" :class="{ townsmanactive: pagination.status === 40 }">
          当前在职
          <span>{{ statusNum.num1 == 0 ? "" : statusNum.num1 }}</span>
        </li>
        <!-- <li @click="pagination.status = 2" :class="{ townsmanactive: pagination.status === 2 }">
          报名中<span>{{ statusNum.num2 == 0 ? "" : statusNum.num2 }}</span>
        </li>-->
        <li @click="pagination.status = 48" :class="{ townsmanactive: pagination.status === 48 }">
          准备离职
          <span>{{ statusNum.num2 == 0 ? "" : statusNum.num2 }}</span>
        </li>
        <li @click="pagination.status = 50" :class="{ townsmanactive: pagination.status === 50 }">
          最近离职
          <span>{{ statusNum.num3 == 0 ? "" : statusNum.num3 }}</span>
        </li>
      </ul>
    </div>
    <div class="contentbody">
      <div class="searchbox">
        <div class="searchinput">
          <a-input placeholder="请输入老乡姓名/身份证号" @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 class="pagechange dn">
          <button @click="changepage(-1)">上一页</button>
          <button @click="changepage(1)">下一页</button>
        </div>
      </div>
      <a-table :columns="columns" class="" :data-source="data" :pagination="false" @change="onChange" :loading="{ spinning: isspinning, tip: '加载中', wrapperClassName: 'spinstyle', }" :locale="tablenodata" :rowKey="(record) => record.index">
        <a slot="name" slot-scope="text" style="height:0px">{{ text }}</a>
        <a slot="userDetail" style="color: #ff4400;height:0px" slot-scope="text, text1" @click="toDetail(text1)">详情</a>
      </a-table>
      <div class="pagecontainer f40">
        <a-pagination :current="+pagination.pageNum" :default-current="1" :defaultPageSize="8" :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" />页
        </div>
      </div>
    </div>
    <!-- 老乡详情的弹出框 -->
    <a-modal class="townsmanDetailModal" centered v-model="townsmanDetailVisible" width="756px" @cancel="townsmanDetailModalClose" :footer="null" destroyOnClose>
      <div slot="title" destoryOnClose>老乡详情</div>
      <div class="detailContent">
        <div class="userInfo">
          <div class="userInfo_top">
            <div>
              <div>
                <span class="f18" style="font-weight: 600">{{ currentTownsmanDetail.name }}{{ currentTownsmanDetail.sex && currentTownsmanDetail.sex == 1 ? "/男" : "/女" }}{{ currentTownsmanDetail.age && "/" + currentTownsmanDetail.age + "岁" }}{{ currentTownsmanDetail.nation && "/" + currentTownsmanDetail.nation + "族" }}</span>
                <span style="border: 1px solid #ff4400; color: #ff4400; padding: 1px 4px; cursor: pointer; margin-left: 8px" @click="editTownsmanDetail">编辑</span>
              </div>
              <p class="f14" style="color: #999">{{ currentTownsmanDetail.address || "-" }}</p>
            </div>
            <div>
              <span style="margin-right: 20px">
                <span class="iconfont icon-shenfenzheng1" style="color: #f40; margin-right: 4px"></span>
                {{ currentTownsmanDetail.idCard ? currentTownsmanDetail.idCard : "-" }}
              </span>
              <span>
                <span class="iconfont icon-dianhua1" style="color: #f40; margin-right: 4px"></span>
                {{ currentTownsmanDetail.tel ? currentTownsmanDetail.tel : "-" }}
              </span>
            </div>
          </div>
          <div class="userInfo_bottom" @click="previewImg($event)">
            <img v-for="img in userImgs" :key="img.id" :src="img.url" :data-src="img.url" alt />
          </div>
          <viewer v-show="false" :images="images" class="images">
            <img v-for="src in images" :key="src" :src="src" />
          </viewer>
        </div>
        <div v-for="item in orders" :key="item.id" class="jobExperience boxStyle">
          <div class="experienceTitle titleStyle">工作{{ item.index + 1 }}</div>
          <div class="experienceContent">
            <a-row>
              <a-col :span="6">报名岗位</a-col>
              <a-col :span="18" style="text-align: right">{{ item.storeJobName || "-" }}</a-col>
            </a-row>
            <a-row>
              <a-col :span="6">报名企业</a-col>
              <a-col :span="18" style="text-align: right">{{ item.storeName || "-" }}</a-col>
            </a-row>
            <a-row>
              <a-col :span="6">政策</a-col>
              <a-col class="policy" :class="'policy' + item.id" :span="18" style="text-align: right">{{ item.policy }}</a-col>
              <span @click="togglePolicyStatus(item)">{{ item.policyStatus ? "收起" : "展开" }}</span>
            </a-row>
            <a-row>
              <a-col :span="6">状态</a-col>
              <a-col :span="18" style="text-align: right; color: #333">{{ item.statusText }}</a-col>
            </a-row>
            <a-row>
              <a-col :span="6">{{ item.timeText }}</a-col>
              <a-col :span="18" style="text-align: right">{{ item.timeStr }}</a-col>
            </a-row>
          </div>
        </div>
        <div class="progressRecord boxStyle" v-for="item in allOrders" :key="item.createTime">
          <div class="progressRecordTitle titleStyle">跟进记录{{ item.idxText }}</div>
          <div id="progressinfo">
            <template v-for="(group, key) in item.records">
              <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">
                    {{ item.creator }}
                    <span class="ml8">{{ formatDateYMDHM(item.createTime) }}</span>
                  </div>
                </div>
              </div>
            </template>
          </div>
        </div>

        <a-modal class="editDetailModal" transitionName centered v-model="editTownsmanVisibel" width="716px" @cancel="cancelEditTownsman" :footer="null" destroyOnClose>
          <div slot="title">老乡信息</div>
          <div class="editInfoContent">
            <a-form :form="Townsmanform" @submit="phonehandleSubmit" :labelCol="{ span: 10 }" :wrapperCol="{ span: 14 }">
              <a-row>
                <a-col :span="12">
                  <a-form-item label="姓名">
                    <a-input v-decorator="['name', { rules: [{ required: true, message: '请输入姓名' }] }]" placeholder="请输入姓名" />
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="性别">
                    <a-radio-group v-decorator="['sex', { rules: [{ required: true, message: '请选择性别' }] }]" name="radioGroup">
                      <a-radio :value="1">男</a-radio>
                      <a-radio :value="2">女</a-radio>
                    </a-radio-group>
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="12">
                  <a-form-item label="年龄">
                    <a-input v-decorator="['age', { rules: [{ required: true, message: '请输入年龄!' }] }]" placeholder="请输入年龄" />
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="民族">
                    <a-select v-decorator="['nation']" @change="selectChange">
                      <a-select-option :title="item.name" v-for="item in nationOptions" :key="item.id" :value="item.name">{{ item.name }}</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
              </a-row>
              <a-form-item label="电话" :labelCol="{ span: 5 }" :wrapperCol="{ span: 19 }">
                <a-input v-decorator="['tel']" placeholder="请输入电话" />
              </a-form-item>
              <a-form-item label="身份证号" :labelCol="{ span: 5 }" :wrapperCol="{ span: 19 }">
                <a-input v-decorator="['idCard']" placeholder="请输入身份证号" />
              </a-form-item>
              <a-form-item label="家庭住址" :labelCol="{ span: 5 }" :wrapperCol="{ span: 19 }">
                <a-input v-decorator="['address']" placeholder="请输入家庭住址" />
              </a-form-item>
              <a-form-item label="附件" :labelCol="{ span: 5 }" :wrapperCol="{ span: 19 }">
                <a-upload name="file" list-type="picture" class="upload-list-inline" :customRequest="customRequestFun2" :beforeUpload="beforeUpload" :showUploadList="false" :remove="
										(file) => {
											removeFile(file, 'header');
										}
									" :data="dataObj">
                  <!-- :default-file-list='userImgs' -->
                  <a-button>
                    <a-icon type="upload" />上传
                  </a-button>
                </a-upload>
              </a-form-item>
              <a-row>
                <a-col :span="5"></a-col>
                <a-col :span="19" class="imgBox">
                  <div v-for="(item, index) in userImgs" :key="index">
                    <div>
                      <img :src="item.url" @click="previewImg($event)" :data-src="item.url" alt />
                      <p style="width: 80px; margin-left: 8px; font-size: 14px; color: #ff4400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">{{ item.title }}</p>
                    </div>
                    <i class="iconfont icon-shanchu" @click="deleteImg('loaded', item)"></i>
                  </div>
                  <div v-for="(item, index) in fileListT2" :key="index">
                    <div>
                      <img :src="item" @click="previewImg($event)" :data-src="item" alt />
                      <p style="width: 80px; margin-left: 8px; font-size: 14px; color: #ff4400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">{{ item.name }}</p>
                    </div>
                    <i class="iconfont icon-shanchu" @click="removeFile(item)"></i>
                  </div>
                </a-col>
              </a-row>
              <a-form-item label=" " :colon="false" :labelCol="{ span: 5 }" :wrapperCol="{ span: 19 }">
                <a-button @click="cancelEditTownsman">取消</a-button>
                <a-button style="background-color: #ff4400; color: white; margin-left: 16px" html-type="submit">提交</a-button>
              </a-form-item>
            </a-form>
          </div>
        </a-modal>
      </div>
    </a-modal>
  </div>
</template>

<script>
import Vue from 'vue'
import { userTownsmanApi, gettownsManCountApi, townsmanDetailApi, townsmanDetailImgsApi, updateTownsmanInfoApi, delTowmsmanDetailImgApi } from '../../../../api/userinfo'
import { formatDateYMD, formatDateYMDHM, getUserApplyOrderStatusById } from '../../../../utils/commonUtil'
import { nationlist } from '../../../../utils/datalist'
import Viewer from 'v-viewer'
// import imgPreview from "../imgPreviewNewJobDetail.vue";
import 'viewerjs/dist/viewer.css'
import request from '@/utils/request'
import $ from 'jquery'

Vue.use(Viewer, {
  defaultOptions: {
    // 需要配置的属性
    toolbar: {
      zoomIn: true,
      zoomOut: true,
      oneToOne: false,
      reset: false,
      prev: false,
      play: {
        show: true,
        size: 'large',
      },
      next: false,
      rotateLeft: true,
      rotateRight: true,
      flipHorizontal: false,
      flipVertical: false,
    },
    title: false,
    navbar: false,
  },
})

export default {
  // 组件名称
  name: '',
  // 局部注册的组件
  components: {},
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data() {
    return {
      tablenodata: {
        // 空状态文本内容
        emptyText: () => (
          <div>
            <div>
              <img src="https://user-images.githubusercontent.com/507615/54591670-ac0a0180-4a65-11e9-846c-e55ffce0fe7b.png" style="width:105px;height:90px;marginTop:20px" />
            </div>
            <div style="marginBottom:20px">暂无数据</div>
          </div>
        ),
      },
      pagination: {
        pageNum: 1,
        pageSize: 8,
        total: null, //分页配置
        status: 0,
        keys: null,
        // searchTag: 1,
      },
      isspinning: false,
      sortedInfo: null,
      statusNum: {
        num0: 0,
        num1: 0,
        num2: 0,
        num3: 0,
      },
      data: [],
      townsmanDetailVisible: false, // 控制详情弹出框的显示
      currentTownsmanDetail: {
        // 当前老乡详情信息["name"] = user
        name: '',
        userId: '',
        sex: '',
        age: '',
        nationality: '',
        address: '',
        idCard: '',
        tel: '',
        jobName: '',
        storeName: '',
        policy: '',
        status: 1,
        nation: '',
        entryTime: 1678075200000,
      },
      dataObj: {
        // 上传图片返回的数据
        policy: '',
        signature: '',
        key: '',
        ossaccessKeyId: '',
        dir: '',
        host: '',
        // callback:'',
      },
      fileListT2: [], // 上传图片的列表
      policyStatus: false, // 政策的展开状态
      editTownsmanVisibel: false, // 编辑老乡详情弹出框的显示
      nationOptions: nationlist, // 民族列表数据
      fileList2: [], // 上传文件的暂存
      images: [], // 点击的图片数组
      userImgs: [], // 老乡的图片数组
      orders: [], // 老乡的工作经历
      allOrders: [], // 所有的跟进记录
      zzvisible: false, // 跟进记录的政策信息弹出框显示
      currentBillInfo: {}, // 当前的工单跟进详情
      Townsmanform: this.$form.createForm(this),
    }
  },
  // 计算属性
  computed: {
    columns() {
      let { sortedInfo } = this
      console.log(sortedInfo)
      sortedInfo = sortedInfo || {}
      const columns = [
        {
          title: '序号',
          dataIndex: 'index',
          key: 'index',
          scopedSlots: { customRender: 'index' },
          ellipsis: true,
          width: 50,
        },
        {
          title: '姓名',
          dataIndex: 'userName',
          key: 'userName',
          ellipsis: true,
          width: 90,
        },
        {
          title: '性别',
          dataIndex: 'sex',
          key: 'sex',
          ellipsis: true,
          customRender: (text, row, index) => {
            switch (text) {
              case 0:
                return '男女不限'
              case 1:
                return '男'
              case 2:
                return '女'

              default:
                break
            }
          },
          width: 60,
        },
        {
          title: '年龄',
          dataIndex: 'age',
          key: 'age',
          ellipsis: true,
          width: 60,
        },
        {
          title: '民族',
          dataIndex: 'nation',
          key: 'nation',
          ellipsis: true,
          width: 100,
          ellipsis: true,
        },
        {
          title: '手机号',
          dataIndex: 'tel',
          key: 'tel',
          ellipsis: true,
          width: 150,
        },
        {
          title: '身份证号',
          dataIndex: 'IDCard',
          key: 'IDCard',
          ellipsis: true,
          // width: 50,
        },
        {
          title: '状态',
          dataIndex: 'userApplyOrder',
          key: 'userApplyOrder',
          sorter: (a, b) => a.userApplyOrder.localeCompare(b.userApplyOrder),

          // sortOrder: sortedInfo.columnKey == "userApplyOrder" && sortedInfo.order,
          // ellipsis: true,
          width: 180,
        },
        {
          title: '操作',
          dataIndex: 'userDetail',
          key: 'userDetail',
          scopedSlots: { customRender: 'userDetail' },

          // sortOrder: sortedInfo.columnKey == "userApplyOrder" && sortedInfo.order,
          // ellipsis: true,
          width: 60,
        },
      ]
      console.log(sortedInfo)
      return columns
    },
  },
  // 侦听器
  watch: {
    editTownsmanVisibel(val1, val2) {
      if (val1 == false) {
        this.fileListT2 = []
      }
    },
  },
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {
    this.getTownsman()
  },
  /**
   * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
   */
  mounted() {
    this.gettownsManCount()
  },
  // 组件方法
  methods: {
    onChange(e, e1, e2) {
      console.log(e)
      console.log(e1)
      console.log(e2)
      if (typeof e == 'number') {
        this.pagination.pageNum = e
        this.getTownsman()
      }
    },
    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.getTownsman()
      console.log(e)
    },
    async getTownsman() {
      // let jobinfo = {...this.pagination , searchTag:1}
      try {
        this.isspinning = true
        console.log(this.pagination)
        const { data } = await userTownsmanApi(this.pagination)
        if (data.status === 200) {
          // console.log();
          this.data = data.data.recordList
          this.data.forEach((item, index) => {
            // console.log(item);
            item.userApplyOrder = getUserApplyOrderStatusById(item.userApplyOrderStatus)
            item.updateTime = formatDateYMD(item.updateTime)
            item.index = index + 1
          })
          this.pagination.total = data.data.recordCount
        }
      } catch (error) {
        console.log(error)
      }
      this.isspinning = false
    },
    async gettownsManCount() {
      try {
        const { data } = await gettownsManCountApi(this.pagination)
        console.log(data)
        if (data.status == 200) {
          console.log('yes')
          this.statusNum = data.data
        }
      } catch (error) {
        console.log(error)
      }
    },
    getPopupContainer(el, dialogContext) {
      console.log(el)
      console.log(dialogContext)
      if (dialogContext) {
        return dialogContext.getDialogWrap()
      } else {
        return document.body
      }
    },
    resetpag() {
      // this.pagination = {
      // 	//分页配置
      // 	pageNum: 1,
      // 	pageSize: 8,
      // 	total: null,
      // 	status: this.pagination.status,
      // 	keys: null,
      // };
      this.gettownsManCount()
      this.getTownsman()
    },
    resetsearch(e) {
      console.log(e)
      if (e.target.value.length === 0) {
        this.pagination.keys = ''

        this.gettownsManCount()
        this.getTownsman()
      }
    },
    onSearch() {
      if (this.pagination.keys != null && this.pagination.keys.length != 0) {
        this.getTownsman()
        this.gettownsManCount()
      }
    },
    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.getTownsman()
    },
    /* 
    弹出详情页
    */
    toDetail(e) {
      this.townsmanDetailVisible = true
      // this.currentTownsmanDetail = e;
      this.currentTownsmanDetail.userId = e.userId
      this.getTownsmanDetail(this.currentTownsmanDetail)
      console.log(e)
    },
    getTownsmanDetail(e) {
      townsmanDetailApi(e.userId).then((detailRes) => {
        console.log(detailRes)
        let userinfo = detailRes.data.data.allOrders[0]
        console.log(userinfo.nation.indexOf('族'))
        this.currentTownsmanDetail['name'] = userinfo.userName
        this.currentTownsmanDetail['nation'] = userinfo.nation.indexOf('族') > 0 ? userinfo.nation.substr(0, userinfo.nation.length - 1) : userinfo.nation
        //  == '族' ? userinfo.nation  : userinfo.nation;
        this.currentTownsmanDetail['currentImg'] = userinfo.idCardImageUrl
        this.currentTownsmanDetail['sex'] = userinfo.sex
        this.currentTownsmanDetail['age'] = userinfo.age
        this.currentTownsmanDetail['idCard'] = userinfo.idCard
        this.currentTownsmanDetail['userId'] = userinfo.userId
        this.currentTownsmanDetail['tel'] = userinfo.tel
        this.currentTownsmanDetail['address'] = userinfo.address
        this.currentTownsmanDetail['policy'] = userinfo.policy
        this.orders = detailRes.data.data.orders
        this.allOrders = detailRes.data.data.allOrders

        this.orders.forEach((item, index) => {
          console.log(item)
          this.replaceIndex(item, index)
          item.isOpen = false
          if (item.status == 60 || item.status == 40) {
            item.isTimeShow = false
          } else {
            item.isTimeShow = true
          }
          if (item.status == 25) {
            item.isTimeShowDbl = false
          } else {
            item.isTimeShowDbl = true
          }

          if (item.status == 10) {
            item.statusText = '待审核'
            item.timeText = '面试时间'
            item.timeStr = formatDateYMDHM(item.interviewTime)

            item.timeText2 = '接待时间'
            item.timeStr2 = formatDateYMDHM(item.receptionTime)
          } else if (item.status == 20) {
            item.statusText = '待接待'
            item.timeText = '面试时间'
            item.timeStr = formatDateYMDHM(item.interviewTime)
            item.timeText2 = '接待时间'
            item.timeStr2 = formatDateYMDHM(item.receptionTime)
          } else if (item.status == 21) {
            item.statusText = '审核未通过'
            item.timeText = '面试时间'
            item.timeStr = formatDateYMDHM(item.interviewTime)
            item.timeText2 = '接待时间'
            item.timeStr2 = formatDateYMDHM(item.receptionTime)
          } else if (item.status == 25) {
            item.statusText = '待面试'
            item.timeText = '面试时间'
            item.timeStr = formatDateYMDHM(item.interviewTime)
          } else if (item.status == 26) {
            item.statusText = '未接到'
            item.timeText = '面试时间'
            item.timeStr = formatDateYMDHM(item.interviewTime)

            item.timeText2 = '接待时间'
            item.timeStr2 = formatDateYMDHM(item.receptionTime)
          } else if (item.status == 30) {
            item.statusText = '待入职'
            item.timeText = '面试时间'
            item.timeStr = formatDateYMDHM(item.interviewTime)

            item.timeText2 = '约入职时间'
            item.timeStr2 = formatDateYMDHM(item.willEntryTime)
          } else if (item.status == 35) {
            item.statusText = '面试未通过'
            item.timeText = '面试时间'
            item.timeStr = formatDateYMDHM(item.interviewTime)
          } else if (item.status == 40) {
            item.statusText = '在职中'
            item.timeText2 = '入职时间'
            item.timeStr2 = formatDateYMDHM(item.entryTime)
          } else if (item.status == 48) {
            item.statusText = '约离职'
            item.timeText = '入职时间'
            item.timeStr = formatDateYMDHM(item.entryTime)
            item.timeText2 = '约离职时间'
            item.timeStr2 = formatDateYMDHM(item.willLeaveTime)
          } else if (item.status == 45) {
            item.statusText = '通过未入职'
            item.timeText = '面试时间'
            item.timeStr = formatDateYMDHM(item.interviewTime)
            item.timeText2 = '约入职时间'
            item.timeStr2 = formatDateYMDHM(item.willEntryTime)
          } else if (item.status == 50) {
            item.statusText = '已离职'
            item.timeText = '离职时间'
            item.timeStr = formatDateYMDHM(item.leaveTime)
          } else if (item.status == 60) {
            item.statusText = '已完成'
            item.timeText = '离职时间'
            item.timeStr = formatDateYMDHM(item.leaveTime)
          }
        })
        console.log(this.allOrders)
        this.allOrders.forEach((item1, index) => {
          this.replaceIndex(item1, index)
          console.log(item1)
          for (var key in item1.records) {
            // console.log(key, item1.records[key]);
            item1.records[key].forEach((item, index) => {
              if (item.desp.substr(item.desp.length - 3, 3) == '备注：') {
                item.desp = item.desp.replace(/备注：/g, '')
              }

              if (item.type == 1) {
                item['statusText'] = '报名审核中'
              } else if (item.type == 2) {
                item['statusText'] = '待接待'
              } else if (item.type == 3) {
                item['statusText'] = '待入职'
              } else if (item.type == 4) {
                item['statusText'] = '在职中'
              } else if (item.type == 5) {
                item['statusText'] = '已离职'
              } else if (item.type == 9) {
                item['statusText'] = '约离职'
              } else if (item.type == 6) {
                item['statusText'] = '已完成'
              } else if (item.type == 11) {
                item['statusText'] = '审核未通过'
              } else if (item.type == 12) {
                item['statusText'] = '已接到'
              } else if (item.type == 13) {
                item['statusText'] = '未接到'
              } else if (item.type == 14) {
                item['statusText'] = '面试未通过'
              } else if (item.type == 15) {
                item['statusText'] = '未入职'
              }
            })
          }
        })
        console.log(this.allOrders)
        this.allOrders = this.allOrders.reverse()
      })
      this.getTownsmanImg(e)
    },
    getTownsmanImg(e) {
      townsmanDetailImgsApi(e.userId).then((detailImgRes) => {
        console.log(detailImgRes)
        this.userImgs = detailImgRes.data.data.userImgs
      })
    },
    /* 
      替换index为汉字
    */
    replaceIndex(item1, index) {
      let changeNum = ['十', '一', '二', '三', '四', '五', '六', '七', '八', '九']
      let idx = (index + 1).toString()
      let arr = idx.split('')
      let first
      let second
      let third
      if (arr[0]) {
        first = changeNum[arr[0]]
      }
      if (arr[0] == 1 && idx % 10 == 0) {
        first = ''
      }
      if (arr[0] == 1 && arr[1] && idx % 10 != 0) {
        first = changeNum[0]
        second = changeNum[arr[1]]
      }
      if (arr[0] != 1 && arr[1] && idx % 10 != 0) {
        first = changeNum[arr[0]] + '十'
        second = changeNum[arr[1]]
      }
      if (arr[1] && idx % 10 == 0) {
        second = changeNum[0]
      }
      item1.idxText = (first || '') + (second || '') + (third || '')
      item1.index = index
      return item1
    },
    /* 
      关闭详情弹出框
    */
    townsmanDetailModalClose() {
      this.townsmanDetailVisible = false
      this.getTownsman()
    },
    /* 
      关闭政策显示框
    */
    policyModalCancel() {
      this.zzvisible = false
    },
    /* 
      显示跟进记录详情弹出框
    */
    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)
        }
      )
    },
    /* 
      切换政策展开状态
    */
    togglePolicyStatus(item) {
      console.log(this.policyStatus)
      item.policyStatus = !item.policyStatus
      let policy = document.querySelector('.policy' + item.id)
      if (item.policyStatus == false) {
        policy.style.height = '20px'
      } else {
        policy.style.height = 'auto'
      }
      this.$forceUpdate()
    },
    /* 
      编辑老乡详情
    */
    editTownsmanDetail() {
      this.editTownsmanVisibel = true
      this.$nextTick(() => {
        this.Townsmanform.setFieldsValue({
          ...this.currentTownsmanDetail,
        })
      })
    },
    /* 
      关闭编辑老乡信息
    */
    cancelEditTownsman() {
      this.editTownsmanVisibel = false
    },
    /* 
      民族选择框变化
    */
    selectChange(e) {
      console.log(e)
    },
    /* 
      截出跟进记录字符串
    */
    spliceStr(str) {
      return str.split('_')[1]
    },
    /* 
      上传附件
    */
    // handleChange2({ file, fileList }) {
    //   console.log(file);
    //   console.log(fileList);
    //   this.fileList2 = fileList;
    // },
    removeFile(file) {
      let that = this
      this.$confirm({
        title: '是否确认删除图片',
        // content: 'Bla bla ...',
        okText: '确认',
        cancelText: '取消',
        onOk() {
          console.log('isok')
          let index = that.fileList2.indexOf(file)
          that.fileListT2.splice(index, 1)
        },
        onCancel() {
          console.log('ontok')
        },
      })

      // fileList.forEach((item, index) => {
      //     if (item.uid === file.uid) {
      //         _this.headerFileList.splice(index, 1)
      //     }
      // })
    },
    // 预览图片
    previewImg(e) {
      console.log(e)
      if (e.target.localName == 'img') {
        this.images = []
        this.images.push(e.target.dataset.src)
        this.$viewerApi({
          images: this.images,
        })
      }
    },
    formatDateYMDHM(time) {
      return formatDateYMDHM(time)
    },
    phonehandleSubmit(e) {
      let that = this
      console.log(e)
      e.preventDefault()
      this.Townsmanform.validateFields(async (err, msg) => {
        if (err == null) {
          console.log(msg)
          msg.imgs = that.fileListT2.toString()

          let { data } = await updateTownsmanInfoApi({
            ...msg,
            userName: msg.name,
            userId: that.currentTownsmanDetail.userId,
          })
          if (data.status == 200) {
            this.$message.success('修改成功')
            this.toDetail(this.currentTownsmanDetail)
            this.cancelEditTownsman()
          }
          console.log(data)
        }
      })
    },
    beforeUpload(e, data) {
      console.log(e)
      let that = this
      console.log(e)
      console.log(data)
      //resolve()
      return new Promise((resolve, reject) => {
        //resolve()
        new Promise((resolve) => {
          request({
            url: '/oss/policy',
            method: 'get',
          })
            .then(({ data }) => {
              console.log(data)
              // console.log(data.msg);
              resolve(data.data)
            })
            .catch((err) => {
              console.log(err)
            })
        })
          .then((response) => {
            console.log('响应的数据', response)
            that.dataObj.policy = response.data.policy
            that.dataObj.signature = response.data.signature
            that.dataObj.ossaccessKeyId = response.data.accessid
            that.dataObj.key = response.data.dir + that.getUUID() + '_${filename}'
            that.dataObj.dir = response.data.dir
            that.dataObj.host = response.data.host
            console.log('响应的数据222。。。', that.dataObj)
            resolve(true)
          })
          .catch((err) => {
            console.log(err)
            reject(false)
          })
      })
    },
    async customRequestFun2(file) {
      var that = this

      let _self = this
      var formData = new FormData()
      console.log(file)
      console.log(_self.dataObj)
      //注意formData里append添加的键的大小写
      formData.append('key', _self.dataObj.key) //存储在oss的文件路径
      formData.append('OSSAccessKeyId', _self.dataObj.ossaccessKeyId) //accessKeyId
      formData.append('policy', _self.dataObj.policy) //policy
      formData.append('Signature', _self.dataObj.signature) //签名
      formData.append('success_action_status', '200') // 上传成功返回的状态码，不设置则是204
      formData.append('file', file.file) // 一定在最后
      file.onProgress()
      console.log(formData)
      $.ajax({
        type: 'post',
        url: 'http://matripe-cms.oss-cn-beijing.aliyuncs.com',
        data: formData,
        contentType: false, // 不设置Content-Type请求头
        processData: false,
        success: function (data) {
          file.onSuccess()
          // console.log(document.querySelector(".ant-upload-list-item-info"));
          console.log(data)
          var img = _self.dataObj.host + '/' + _self.dataObj.key.replace('${filename}', file.file.name)
          that.fileListT2.push(img)
          console.log(that.fileListT2)
        },
        fail: function (err) {
          console.log(err)
        },
      })
    },
    getUUID() {
      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
        return (c === 'x' ? (Math.random() * 16) | 0 : 'r&0x3' | '0x8').toString(16)
      })
    },
    deleteImg(type, item) {
      console.log(type)
      console.log(item)
      let that = this
      this.$confirm({
        title: '是否确认删除图片',
        // content: 'Bla bla ...',
        okText: '确认',
        cancelText: '取消',
        onOk() {
          console.log('isok')
          delTowmsmanDetailImgApi(item.id).then((res) => {
            console.log(res)
            if (res.data.status == 200) {
              that.getTownsmanImg(that.currentTownsmanDetail)
              that.$message.success('删除图片成功')
            } else {
              that.$message.warning('请重试')
            }
          })
        },
        onCancel() {
          console.log('ontok')
        },
      })
    },
  },
}
</script>

<style scoped lang="less">
.townsman-container {
  margin-top: 16px;
  // min-height: calc(100vh - 200px);
  padding: 0 10px;
  background-color: #fff;
  border: 1px solid #0000;
}
.contenttitle {
  display: flex;
  padding-bottom: 0px;
  justify-content: space-between;
  border-bottom: 1px solid rgba(77, 87, 94, 0.1);
  font-weight: 600;
  margin-top: 16px;
  margin-bottom: 16px;

  ul {
    display: flex;
    height: 40px;
    .townsmanactive {
      // border-color: #;
      // width: 128px;
      color: #ff4400;
      z-index: 999;
      border-bottom: 2px solid #ff6600;
      > span {
        font-size: 16px;
        color: #ff6600;
      }
    }
    li {
      position: relative;
      width: 118px;
      font-size: 16px;
      // height: 40px;
      padding-bottom: 16px;
      color: #666;
      // line-height: 40px;
      text-align: center;
      transition: width 0.2s;
      cursor: pointer;
      > span {
        margin-left: 4px;
        font-size: 16px;
        color: #ff6600;
      }
      &::after {
        content: '';
        position: absolute;
        display: block;
        width: 1px;
        height: 16px;
        right: 0;
        top: 5px;
        // transform: translateY(-50%);
        background-color: #eeeeee;
      }
      &:last-child::after {
        display: none;
      }
    }
    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;
    }
  }
}
.contentbody {
  overflow: hidden;
  /deep/ .searchbox {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
    .searchinput {
      width: 326px;
      position: relative;
      .ant-input {
        // width: 300px;
        position: relative;
        height: 32px;
        text-indent: 10px;
        background: #fff;
        // border: 1px solid rgba(77, 87, 94, 0.3);
        border-radius: 0px;
        box-shadow: 0px 2px 4px 0px transparent;
        font-size: 14px !important;
        padding-right: 0;
        border-color: #ddd;
        // 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: 0px;
        font-size: 14px;
        box-shadow: none;
        cursor: pointer;
        outline: none;
        &:hover {
          background-color: #ff4400cc;
        }
        // &:focus {
        //   border: none;
        // }
      }
    }
    .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;
        }
      }
    }
  }
  /deep/ .ant-table-placeholder {
    min-height: 300px;
    > div {
      position: relative;
      height: 131px;
      top: 30px;
      // transform: translateY(-50%);
    }
  }
  /deep/ .ant-table-content {
    .ant-table-body {
      .ant-table-thead {
        font-size: 14px;
        th {
          padding: 16px 0;
          div {
            font-weight: bold;
            padding: 0px 8px;
          }
          &:not(:first-child) {
            > span {
              //  line-height: 22px;
              > div {
                //  line-height: 1;
                border-left: 1px solid #ccc;
                padding-left: 12px;
              }
            }
          }
        }
      }
      .ant-table-tbody {
        font-size: 14px;
        .ant-table-row {
          // height: 48px !important;
        }
        .ant-table-row-cell-ellipsis {
          // height: 48px !important;
          padding: 8px 14px;
        }
      }
    }
  }
}
/deep/ .ant-table-column-sorter-inner {
  height: 16px !important;
}

.detailContent {
  .titleStyle {
    font-weight: 600;
    margin-bottom: 20px;
  }
  .boxStyle {
    padding: 6px 0;
    border-bottom: 1px solid #eee;
  }
  .userInfo {
    border-bottom: 1px solid #eee;
    .userInfo_top {
      display: flex;
      margin-bottom: 12px;
      justify-content: space-between;
      align-items: center;
      & > div > div:first-child {
        margin-bottom: 4px;
      }
    }
    .userInfo_bottom {
      margin-bottom: 10px;

      img {
        width: 64px;
        height: 64px;
        margin: 0 10px 10px 0;
        border-radius: 4px;
      }
    }
  }
  .experienceContent {
    .ant-row {
      margin-bottom: 10px;
      & > div {
        color: #666;
      }
      .policy {
        position: relative;
        height: 20px;
        text-align: left;
        white-space: pre-wrap;
        margin-bottom: 20px;
        overflow: hidden;
      }
      span {
        position: absolute;
        bottom: -5px;
        right: 0;
        color: #ff4400;
        cursor: pointer;
      }
    }
  }
  div {
    // border: 1px solid #eee;
  }
}
.townsmanDetailModal {
  /deep/ .ant-modal-header {
    background-color: #f5f5f5;
    border-bottom: 0px solid #000;
  }
  /deep/ .ant-modal-content {
    .ant-modal-body {
      min-height: 600px;
      max-height: 700px;
      overflow: auto;
    }
  }
}
.editDetailModal {
  /deep/ .ant-modal-content {
    .ant-modal-header {
      background-color: #f5f5f5;
      border-bottom: 0px solid #000;
    }
    .ant-modal-body {
      max-height: 650px;
      overflow: auto;
      padding: 30px 120px 30px 70px;
      .imgBox {
        display: flex;
        flex-flow: row wrap;
        > div {
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: calc(50% - 10px);
          height: 60px;
          padding-left: 6px;
          border: 1px solid #d9d9d9;
          margin-bottom: 12px;
          > div {
            display: flex;
            align-items: center;
          }
          &:nth-of-type(2n - 1) {
            margin-right: 20px;
          }
          .icon-shanchu {
            font-size: 12px;
            cursor: pointer;
            margin-right: 12px;
          }
        }
        img {
          width: 44px;
          height: 44px;
        }
      }
    }
  }
}
/deep/ .ant-form-item {
  margin-bottom: 20px;
  .ant-input {
    height: 40px;
  }
  .ant-select-selection,
  .ant-select-selection__rendered {
    height: 40px;
    line-height: 40px;
  }
}
/deep/ .upload-list-inline .ant-upload-list-item {
  float: left;
  width: 220px;
  margin-right: 16px;

  .ant-upload-animate-enter {
    animation-name: uploadAnimateInlineIn;
  }

  .ant-upload-animate-leave {
    animation-name: uploadAnimateInlineOut;
  }
}
#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 > .ui-step-one:last-of-type > .ui-list-info {
  border-left: none;
}
#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;
  }
}
.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;
      }
    }
  }
}
</style>
