<template>
  <div class="recordBill-container w">
    <!-- 面包屑 -->
    <a-breadcrumb class="w">
      <a-breadcrumb-item href>
        <router-link to="/main">
          <a-icon type="home" />
        </router-link>
      </a-breadcrumb-item>
      <a-breadcrumb-item href>
        <a @click="toList">
          <span>一手职位</span>
        </a>
      </a-breadcrumb-item>
      <a-breadcrumb-item>
        <router-link :to="'/detail?' + 'id=' + firminfo.id + '&' + 'page=' + firminfo.currentPageNum">
          <!-- <span @click="$router.back(-1)">企业详情</span> -->
          <span>企业详情</span>
        </router-link>
      </a-breadcrumb-item>
      <a-breadcrumb-item href>
        <span>报名</span>
      </a-breadcrumb-item>
    </a-breadcrumb>
    <div class="content">
      <a-form-model ref="ruleForm" :model="form" :colon="true" :rules="rules">
        <a-form-model-item ref="proxy" label="代理" prop :wrapperCol="{ span: 18 }" :labelCol="{ span: 4 }" style="height: 30px; margin-bottom: 18px">
          <!-- <a-input
            :value="
              proxyinfo.userName !== '' &&
              proxyinfo.userName !== null &&
              proxyinfo.userName !== undefined
                ? proxyinfo.userName
                : proxyinfo.tel
            "
            :disabled="true"
          />-->
          <div class="pzbox" style="width: 100%">
            <span v-if="proxyStatus === ''">{{ proxyinfo.userName !== "" && proxyinfo.userName !== null && proxyinfo.userName !== undefined ? proxyinfo.userName : proxyinfo.tel }}</span>
            <a-select v-if="proxyStatus === 'proxy'" mode="combobox" auto-focus style="width: calc(100% - 200px)" placeholder="请选择代理" @blur="proxyStatus = ''">
              <a-select-option v-for="i in proxyList" :key="i.userName" @click="proxyChange(i)">{{ i.userName }}</a-select-option>
            </a-select>
            <span @click="proxyStatus = 'proxy'" :style="{
								color: '#ff4400',
								marginLeft: '10px',
								cursor: 'pointer',
							}" v-if="isMaster && proxyStatus !== 'proxy'">修改</span>
          </div>
        </a-form-model-item>
        <a-form-model-item ref="username" label="报名企业" prop="username" :wrapperCol="{ span: 18 }" :labelCol="{ span: 4 }" style="height: 30px; margin-bottom: 18px">
          <!-- <a-input :value="firminfo.aliasName" :disabled="true" /> -->
          <div class="pzbox" style="width: 100%">
            <span v-if="storeStatus === ''">{{ firminfo.aliasName }}</span>
            <a-select v-if="storeStatus === 'store'" show-search auto-focus mode="combobox" placeholder="请选择企业" style="width: calc(100% - 200px)" :default-active-first-option="false" :show-arrow="false" :filter-option="false" :not-found-content="null" @search="storeSearch" @blur="storeStatus = ''">
              <a-select-option v-for="i in storeList" :key="i.id + ''" @click="storeChange(i)">{{ i.aliasName }}</a-select-option>
            </a-select>
            <span @click="storeStatus = 'store'" :style="{
								color: '#ff4400',
								marginLeft: '10px',
								cursor: 'pointer',
							}" v-if="isMaster && storeStatus !== 'store'">修改</span>
          </div>
        </a-form-model-item>
        <a-form-model-item ref="username" label="岗位" prop="username" :wrapperCol="{ span: 18 }" :labelCol="{ span: 4 }" style="height: 30px">
          <!-- <a-input :value="firminfo.jobName" :disabled="true" /> -->
          <div class="pzbox" style="width: 100%">
            <span v-if="jobnameStatus === ''">{{ firminfo.jobName }}</span>
            <a-select v-if="jobnameStatus === 'jobname'" show-search auto-focus placeholder="请选择岗位" option-filter-prop="children" style="width: 200px" @blur="jobnameStatus = ''">
              <a-select-option v-for="i in storeJobList" :key="i.id" @click="storeJobChange(i)">{{ i.aliasName }}</a-select-option>
            </a-select>
            <span @click="selected" :style="{
								color: '#ff4400',
								marginLeft: '10px',
								cursor: 'pointer',
							}" v-if="isMaster && jobnameStatus !== 'jobname'">修改</span>
          </div>
        </a-form-model-item>
        <a-form-model-item class="time-input" ref="interviewTime" label="面试时间" prop="interviewTime" :wrapperCol="{ span: 18 }" :labelCol="{ span: 4 }">
          <timepicker :isShow.sync="isShow" :datetime.sync="form.interviewTime" :prev="true"></timepicker>
          <a-input class="pt1" v-model="form.interviewTime" placeholder="请选择面试时间" @input="verify" allowClear @click="getDateinfo">
            <i class="iconfont icon-rili" slot="suffix" @click="getDateinfo"></i>
          </a-input>
        </a-form-model-item>
        <a-form-model-item style="margin-top: 12px" class="time-input" ref="receptionTime" label="接待时间" prop="receptionTime" :wrapperCol="{ span: 18 }" :labelCol="{ span: 4 }">
          <timepicker :isShow.sync="isShow1" :datetime.sync="form.receptionTime" :prev="true"></timepicker>
          <a-input class="pt1" v-model="form.receptionTime" placeholder="请选择接待时间" @input="verify1" allowClear @click="getDateinfo1">
            <i class="iconfont icon-rili" slot="suffix" @click="getDateinfo1"></i>
          </a-input>
        </a-form-model-item>
        <a-row>
          <a-col :span="20">
            <a-form-model-item ref="idCard" label="身份证号" prop="idCard" :wrapperCol="{ span: 16 }" :labelCol="{ span: 5 }">
              <a-input v-model="form.idCard" @change="getIdInfo($event)" placeholder="请输入老乡身份证号" :max-length="18" />
            </a-form-model-item>
          </a-col>
          <a-col :span="4" class="idCardUpload">
            <a-upload :customRequest="customRequestFun" list-type="picture-card" :file-list="fileList" @change="handleChange" @preview="handlePreview" style="margin-left: -50px" :beforeUpload="beforeUpload" :data="dataObj">
              <!-- <div
                v-if="fileList.length < 1"
                style="
                  display: flex;
                  justify-content: center;
                  align-items: center;
                "
              >
                <a-icon type="upload" />
                <div class="ant-upload-text">上传证件</div>
              </div>-->
              <!-- <img
                v-if="form.idCardImageUrl"
                :src="form.idCardImageUrl"
                alt="avatar"
              />-->
              <div v-if="fileList.length == 0" style="display: flex; justify-content: center; align-items: center" class="nloding">
                <a-icon type="plus" />
                <div class="ant-upload-text">上传证件</div>
              </div>
            </a-upload>
            <div v-if="loading" style="display: flex; justify-content: center; align-items: center" class="uploading">
              <a-icon :type="loading ? 'loading' : 'plus'" style="margin-right: 10px" />
              <div class="ant-upload-text">上传中</div>
            </div>
            <i class="iconfont icon-guanbi" v-if="fileList.length !== 0 && !loading" @click="fileList = []"></i>
          </a-col>
        </a-row>
        <a-row class="specialbox">
          <a-col :span="12">
            <a-form-model-item ref="userName" label="姓名" prop="userName" :wrapperCol="{ span: 15 }" :labelCol="{ span: 8 }">
              <a-input v-model="form.userName" placeholder="请输入老乡姓名" class="special-input" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item ref="sex" label="性别" prop="sex" :wrapperCol="{ span: 18 }" :labelCol="{ span: 5 }">
              <a-radio-group v-model="form.sex" defaultValue="nan" class="radiobox">
                <a-radio value="1">男</a-radio>
                <a-radio value="2">女</a-radio>
              </a-radio-group>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <!-- :offset="2" -->
            <a-form-model-item ref="age" label="年龄" prop="age" :wrapperCol="{ span: 15 }" :labelCol="{ span: 8 }">
              <a-input v-model="form.age" placeholder="请输入年龄" class="special-input" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item ref="peoplecard" label="民族" prop="peoplecard" :wrapperCol="{ span: 15 }" :labelCol="{ span: 5 }">
              <a-select v-model="form.nation" placeholder="请选择民族" class="special-input">
                <a-select-option v-for="item in nationlist" :key="item.id" :value="item.name">{{ item.name }}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-form-model-item ref="tel" label="电话" prop="tel" :wrapperCol="{ span: 18 }" :labelCol="{ span: 4 }" style="margin-bottom: 18px">
          <a-input v-model="form.tel" placeholder="请输入电话号" :max-length="11" />
        </a-form-model-item>
        <a-form-model-item ref="peoplecard" label="家庭住址" prop="peoplecard" :wrapperCol="{ span: 18 }" :labelCol="{ span: 4 }">
          <a-input v-model="form.address" placeholder="请输入家庭住址" />
        </a-form-model-item>
        <!-- <a-form-model-item ref="username" label="模式" prop="username">
          <a-select v-model="form.pattern" placeholder="请选择民族">
            <a-select-option :value="apply.id">{{ apply.id }}</a-select-option>
          </a-select>
        </a-form-model-item>-->
        <a-form-model-item ref="policy" label="政策" prop="policy" class="policyContainer" :wrapperCol="{ span: 18 }" :labelCol="{ span: 4 }">
          <!-- <a-input v-model="form.policy" type='textarea'/> -->
          <div class="policy" style="min-height: 30px !important">{{ form.policy }}</div>
          <div class="openContral" v-if="isContainerShow">
            <span v-if="isFold" @click="toFold(1)">展开</span>
            <span v-else @click="toFold(2)">收起</span>
          </div>
        </a-form-model-item>

        <a-form-model-item ref="desp" style="margin-bottom:12px;" label="备注" prop="desp" :wrapperCol="{ span: 18 }" :labelCol="{ span: 4 }">
          <a-textarea v-model="form.desp" placeholder="请输入备注" :auto-size="{ minRows: 2, maxRows: 5 }" />
        </a-form-model-item>

        <a-form-model-item ref="headerUploadRef" label="附件" prop="peoplecard" :wrapperCol="{ span: 18 }" :labelCol="{ span: 4 }">
          <a-upload :customRequest="customRequestFun2" multiple list-type="picture" :default-file-list="fileList2" class="upload-list-inline" @change="handleChange2" :remove="
							(file) => {
								removeFile(file, 'header');
							}
						" @preview="handlePreview" :beforeUpload="beforeUpload" :data="dataObj">
            <a-button>
              <a-icon type="upload" />上传
            </a-button>
          </a-upload>
        </a-form-model-item>
      </a-form-model>
      <div class="upline">
        <div>
          <a-button type="primary" @click="onClose" :style="{
							color: '#666',
							backgroundColor: '#fafafa',
							borderColor: '#ddd',
							boxShadow: 'none',
							textShadow: 'none',
						}">取消</a-button>
          <a-button style="margin-left: 10px; color: #fff; background-color: #ff4400; border-color: #ff4400" @click="handleOk" :loading="confirmLoading">提交</a-button>
        </div>
      </div>
    </div>
    <a-modal title="预览" :visible="previewVisible" :footer="null" @cancel="previewVisible = false">
      <img alt="example" :src="form.idCardImageUrl" />
    </a-modal>
  </div>
</template>
<script>
import { nationlist } from '../../utils/datalist'
// import recordbill from "@/components/FirstJob/components/recordbill.vue";
import moment from 'moment'
import { isEmptyCheck, getAgeFromBirthday } from '../../utils/commonUtil'
import timepicker from './components/timepicker.vue'
import { recordBillApi, getProxyInfoApi, getStoreAliasApi, getStoreJobApi, getPolicyByJobIdApi } from '@/api/job'
import request from '@/utils/request'
import qs from 'qs'
// import axios from "axios";
import $ from 'jquery'
// import axiosUpload from "axios";
export default {
  inject: ['reload'],
  // 组件名称
  name: 'recordBill',
  // 局部注册的组件
  components: {
    // recordbill,
    timepicker,
  },
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data() {
    return {
      fileList2: [],
      fileListT2: [],
      // facetimedate: "",
      previewVisible: false,
      proxyStatus: '', // 代理选择的控制
      storeStatus: '', // 企业选择的控制
      jobnameStatus: '', // 岗位选择的控制
      isContainerShow: false, // 政策展示控制按钮是否显示
      isFold: true,
      previewImage: '',
      isMaster: true,
      isShow: false,
      isShow1: false,
      nationlist,
      moment,
      loading: false,
      confirmLoading: false,
      fetching: false,
      proxyList: [],
      storeList: [],
      storeJobList: [],
      userinfo: {},
      fileList: [],
      dataObj: {
        policy: '',
        signature: '',
        key: '',
        ossaccessKeyId: '',
        dir: '',
        host: '',
        // callback:'',
      },
      rules: {
        // 录单校验规则
        interviewTime: [
          {
            required: true,
            message: '请选择面试时间',
            trigger: 'blur',
          },
        ],
        userName: [
          {
            required: true,
            message: '请输入姓名',
            trigger: 'blur',
          },
          {
            pattern:
              // /^((?![\u3000-\u303F])[\u2E80-\uFE4F]|·)*(?![\u3000-\u303F])[\u2E80-\uFE4F](·)*$/, // 姓名校验规则
              /^(((?![\u3000-\u303F])[\u2E80-\uFE4F]|·)*(?![\u3000-\u303F])[\u2E80-\uFE4F][^·]{1,12})$/, // 姓名校验规则
            message: '请输入正确的姓名',
            trigger: 'blur',
          },
        ],
        sex: [
          {
            required: true,
            message: '请选择性别',
            trigger: 'change',
          },
        ],
        age: [
          {
            required: true,
            message: '请输入年龄',
            trigger: 'blur',
          },
          {
            pattern: /^\d{2}$/,
            message: '请输入正确的年龄',
            trigger: 'blur',
          },
        ],
        idCard: [
          {
            required: true,
            message: '请输入身份证号',
            trigger: 'submit',
          },
          {
            min: 18,
            max: 18,
            message: '请输入正确的身份证号',
            trigger: 'submit',
          },
        ],
        tel: [
          //   {
          //   required: true,
          //   message: "请输入年龄",
          //   trigger: "blur",
          // },
          {
            pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
            message: '请输入正确的手机号',
            trigger: 'blur',
          },
        ],
        // tel: [{ required: true, message: "请输入手机号", trigger: "submit" }],
      },
      form: {
        // 录单数据
        userName: '',
        idCard: '',
        sex: '', // 性别
        age: '', // 年龄
        agencyId: '', // 代理id
        storeJobId: '', // 职位id
        qiyeId: '', // 企业id
        nation: undefined, // 民族
        address: '', // 家庭住址
        policy: '', // 代理政策
        interviewTime: '', // 面试时间
        receptionTime: '', //接待时间
        idCardImageUrl: '',
        imgs: '',
      },
      proxyinfo: {},

      firminfo: {},
    }
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {
    facetimedate() {
      console.log(this.facetimedate)
    },
  },
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {
    if (JSON.stringify(this.$route.params) == '{}') {
      this.firminfo = JSON.parse(sessionStorage.getItem('CURRENT_FIRM'))
    } else {
      this.firminfo = this.$route.params
    }
    console.log(JSON.parse(sessionStorage.getItem('CURRENT_FIRM')))
    console.log(this.firminfo)
    // this.userinfo = JSON.parse(userinfo);
    this.proxyinfo = JSON.parse(localStorage.getItem('LOGIN_DATA'))
    if (this.proxyinfo.roleOfPmd) {
      this.isMaster = true
    }
    console.log(this.firminfo)
    this.getProxyInfo(this.proxyinfo.id)
    this.getJob(this.firminfo)
    this.getPolicyByJobId(this.firminfo.id)
    console.log(this.proxyinfo)
    console.log(this.firminfo)
  },
  /**
   * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
   */
  mounted() {
    // })
  },
  // 组件方法
  methods: {
    async getJob(value) {
      try {
        const { data } = await getStoreJobApi(value.id)
        console.log(data)
        if (data.status === 200) {
          this.storeJobList = data.data
          let that = this
          const policy = document.querySelector('.policy')
          // this.$nextTick(()=>{
          setTimeout(() => {
            console.log(policy.offsetHeight)
            console.log(policy.innerHTML)
            if (policy.offsetHeight >= 230) {
              policy.style.maxHeight = '230px'
              policy.style.marginBottom = '24px'
              that.isContainerShow = true
            } else {
              policy.style.minHeight = '230px'
              that.isContainerShow = false
            }
          }, 100)
        }
      } catch (error) {
        console.log(error)
      }
    },
    async getPolicyByJobId(value) {
      console.log(value)
      try {
        const { data } = await getPolicyByJobIdApi(value)
        console.log(data)
        if (data.status === 200) {
          this.form.policy = data.data
        }
      } catch (error) {
        console.log(error)
      }
    },
    onClose() {
      this.form = {
        // 录单数据
        userName: '',
        idCard: '',
        sex: '', // 性别
        age: '', // 年龄
        nation: undefined, // 民族
        address: '', // 家庭住址
        policy: '', // 代理政策
        interviewTime: '', // 面试时间
        idCardImageUrl: '',
      }
      this.$router.push('/detail?' + 'id=' + this.firminfo.id + '&' + 'page=' + this.firminfo.currentPageNum)
    },
    handleOk() {
      var that = this
      console.log(that.fileListT2)

      this.$refs.ruleForm.validate(async (ispass, no) => {
        console.log(this.form)
        console.log(ispass)
        console.log(no)
        this.confirmLoading = true

        if (ispass) {
          console.log(this.form)
          this.form['imgs'] = that.fileListT2.toString()
          console.log({
            ...this.form,
            storeJobId: this.firminfo.id,
          })
          let dataObj = qs.stringify({
            ...this.form,
            storeJobId: this.firminfo.id,
          })
          const { data } = await recordBillApi(dataObj)
          if (data.status === 200) {
            console.log(data)
            // this.$message.success("提交成功");
            setTimeout(() => {
              this.confirmLoading = false

              this.$router.push('/recordsuccess')
            }, 1000)
          } else {
            this.$message.error(data.msg)
          }
          // setTimeout(() => {
          //   this.confirmLoading = false;
          //   this.form = {
          //     // 录单数据置空
          //     name: "",
          //     tel: "",
          //     peoplecard: "",
          //     username: "",
          //   };
          //   this.visible = false;
          // }, 2000);
        } else {
          this.confirmLoading = false
          // this.$message.error(no)

          console.log(123)
        }
        console.log(no)
      })
    },
    // interviewTimeDisabledDate(current) {
    //   // Can not select days before today and today
    //   return (
    //     current < moment().startOf("day") || current > moment().add(100, "days")
    //   );
    // },
    // interviewTimeDisabledDateTime() {
    //   return {
    //     disabledHours: () => [0, 1, 2, 3, 4, 5, 6, 22, 23],
    //     disabledMinutes: () =>
    //       this.range(0, 60)
    //         .splice(1, 29)
    //         .concat(this.range(0, 60).splice(31, 59)),
    //     disabledSeconds: () => this.range(1, 60),
    //   };
    // },
    range(start, end) {
      const result = []
      for (let i = start; i < end; i++) {
        result.push(i)
      }
      return result
    },

    getDom() {
      console.log(1)
    },
    formatDateYMD(val) {
      // model -> view，在更新 `<input>` 元素之前格式化值
      if (val == null || val == '') {
        return null
      }

      if ((val != null || val == '') && typeof val == 'string') {
        if (val.indexOf('T')) {
          val = val.replace('T', ' ') //原来L端可能返回的时间格式有带T的格式，处理一下
        }
        val = val.replace('-', '/').replace('-', '/')
      }
      var value = new Date(val)
      //console.log(val);
      var fmt = 'yyyy-MM-dd'
      var o = {
        'M+': value.getMonth() + 1, //月份
        'd+': value.getDate(), //日
        // "H+": value.getHours(), //小时
        //"h+": val.getHours()%12 == 0 ? 12 : val.getHours()%12, //小时
        // "m+": value.getMinutes(), //分
        // "s+": value.getSeconds() //秒
        //"S": val.getMilliseconds() //毫秒
        //"q+": Math.floor((val.getMonth() + 3) / 3) //季度
      }
      if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (value.getFullYear() + '').substr(4 - RegExp.$1.length))
      for (var k in o) {
        if (new RegExp('(' + k + ')').test(fmt)) {
          fmt = fmt.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length))
        }
      }
      return fmt
    },
    getDateinfo() {
      this.isShow = true
      if (isEmptyCheck(this.form.interviewTime)) {
        //设置默认值
        //判断当前时间是不是在16:00之后，如果在16:00之后，默认显示次日09:00，如果在16:00之前，则显示下一个整点时间
        var mydate = new Date()
        var tomorrow = new Date()
        tomorrow.setDate(tomorrow.getDate() + 1)
        this.form.interviewTime = mydate.toTimeString() >= '16:00' ? this.formatDateYMD(tomorrow.toLocaleDateString()) + ' ' + '09:00' : this.formatDateYMD(mydate.toLocaleDateString()) + ' ' + `${mydate.getHours() + 1}:00`
      }
      console.log(this.form.interviewTime)
    },
    getDateinfo1() {
      this.isShow1 = true
      if (isEmptyCheck(this.form.receptionTime)) {
        //设置默认值
        //判断当前时间是不是在16:00之后，如果在16:00之后，默认显示次日09:00，如果在16:00之前，则显示下一个整点时间
        var mydate = new Date()
        var tomorrow = new Date()
        tomorrow.setDate(tomorrow.getDate() + 1)
        this.form.receptionTime = mydate.toTimeString() >= '16:00' ? this.formatDateYMD(tomorrow.toLocaleDateString()) + ' ' + '09:00' : this.formatDateYMD(mydate.toLocaleDateString()) + ' ' + `${mydate.getHours() + 1}:00`
      }
      console.log(this.form.receptionTime)
    },
    verify() {
      if (this.form.interviewTime !== '') {
        this.form.interviewTime = ''
      }
    },
    verify1() {
      if (this.form.receptionTime !== '') {
        this.form.receptionTime = ''
      }
    },
    handleChange({ fileList }) {
      console.log(fileList)
      console.log(fileList[0])
      this.fileList = fileList
    },
    handleChange2({ file, fileList }) {
      console.log(file)
      console.log(fileList)
      this.fileList2 = fileList
    },
    // getBase64(file) {
    //   return new Promise((resolve, reject) => {
    //     const reader = new FileReader();
    //     console.log(reader);
    //     reader.readAsDataURL(file);
    //     reader.onload = () => resolve(reader.result);
    //     reader.onerror = (error) => reject(error);
    //   });
    // },
    beforeUpload(e, data) {
      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)
          })
      })
    },
    getUUID() {
      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
        return (c === 'x' ? (Math.random() * 16) | 0 : 'r&0x3' | '0x8').toString(16)
      })
    },
    async customRequestFun(file) {
      console.dir(file.onSuccess)
      let _self = this
      this.loading = true
      var formData = new FormData()

      //注意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) // 一定在最后
      console.log(formData)
      let formData1 = new FormData()
      console.log(file.file)
      console.log(formData1)
      formData1.append('uploadFile', file.file) // 一定在最后
      // try {
      //   const { data } = await getIdCardInfoApi(formData1);
      //   console.log(data);
      // } catch (err) {
      //   console.log(err);
      // }
      request({
        method: 'post',
        url: '/yishoudan/commons/idCardOcrRecognize',
        data: formData1,
        withCredentials: true,
        // headers: {'Content-Type': 'application/x-www-form-urlencoded'}

        headers: {
          'Content-Type': 'multipart/form-data;boundary = ' + new Date().getTime(),
        },
      })
        .then(({ data }) => {
          this.loading = false

          console.log(data)
          if (data.status === 200) {
            // console.log(this.$message);
            if (data.data.success) {
              if (!isEmptyCheck(data.data.num)) {
                this.form.idCard = data.data.num
                this.form.age = data.data.age
                if (data.data.sex === '男') {
                  this.form.sex = '1'
                } else {
                  this.form.sex = '2'
                }
                console.log(this.form.sex)
                this.form.nation = data.data.nationality + '族'
                this.form.userName = data.data.name
                this.form.address = data.data.address
              }
            } else {
              this.$message.error('身份证识别失败,请重新上传图片')
            }
          } else {
            this.$message.error('上传失败,请重新上传')
          }
          console.log(data)
        })
        .catch((err) => {
          console.log(err)
        })
      file.onProgress()

      $.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()
          _self.uploadFileFlag = true
          console.log(data)
          var img = _self.dataObj.host + '/' + _self.dataObj.key.replace('${filename}', file.file.name)
          _self.form.idCardImageUrl = img
          console.log(_self.form.idCardImageUrl)
        },
        fail: function (err) {
          console.log(err)
        },
      })
    },

    async customRequestFun2(file) {
      console.dir(file.onSuccess)
      var that = this

      let _self = this
      var formData = new FormData()

      //注意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) // 一定在最后
      console.log(formData)
      let formData1 = new FormData()
      console.log(file.file)
      formData1.append('uploadFile', file.file) // 一定在最后
      // try {
      //   const { data } = await getIdCardInfoApi(formData1);
      //   console.log(data);
      // } catch (err) {
      //   console.log(err);
      // }
      file.onProgress()
      $.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(data)
          var img = _self.dataObj.host + '/' + _self.dataObj.key.replace('${filename}', file.file.name)
          that.fileListT2.push(img)
        },
        fail: function (err) {
          console.log(err)
        },
      })
    },

    removeFile(file) {
      // let fileList
      // let _this = this
      // fileList = this.$refs.headerUploadRef.$children[1].$children[0].items

      // console.log(this.$refs.headerUploadRef.$children[1].$children[0].items);
      console.log(this.fileList2.indexOf(file))
      let index = this.fileList2.indexOf(file)
      this.fileListT2.splice(index, 1)

      console.log(this.fileListT2)
      // fileList.forEach((item, index) => {
      //     if (item.uid === file.uid) {
      //         _this.headerFileList.splice(index, 1)
      //     }
      // })
    },

    async handlePreview(file) {
      console.log(file)
      if (!file.url && !file.preview) {
        file.preview = await this.getBase64(file.originFileObj)
      }
      this.previewImage = file.url || file.preview
      this.previewVisible = true
    },
    getBase64(file) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader()
        reader.readAsDataURL(file)
        reader.onload = () => resolve(reader.result)
        reader.onerror = (error) => reject(error)
      })
    },
    async getProxyInfo(id) {
      const { data } = await getProxyInfoApi(id)
      console.log(data)
      if (data.status === 200) {
        this.proxyList = data.data
        this.proxyList.forEach((item) => {
          // console.log(item);
          let data1 = item.agencyName
          if (!isEmptyCheck(item.userName)) {
            item.userName = data1 + '/' + item.userName
          }
          if (!isEmptyCheck(item.tel)) {
            item.userName = item.userName + item.tel.slice(7, 12)
          }
        })
        console.log(this.proxyList)
      }
      console.log(data)
    },
    proxyChange(value) {
      console.log(value)
      this.form.agencyId = value.id
      this.proxyinfo.userName = value.userName
      this.proxyStatus = ''
      console.log(this.form)
    },
    async storeSearch(value) {
      // 企业名称搜索
      console.log(value)
      const { data } = await getStoreAliasApi(value)
      if (data.status === 200) {
        this.storeList = data.data
      }
      console.log(data)
    },
    async storeChange(value) {
      console.log(value)
      this.storeList = []
      this.firminfo.aliasName = value.aliasName
      this.form.qiyeId = value.id
      this.storeStatus = ''
      try {
        const { data } = await getStoreJobApi(value.id)
        console.log(data)
        if (data.status === 200) {
          this.storeJobList = data.data
        }
      } catch (error) {
        console.log(error)
      }
      console.log(this.form)
      console.log(value)
    },
    selected() {
      // if (!isEmptyCheck(this.form.qiyeId)) {
      this.jobnameStatus = 'jobname'
      // } else {
      // this.$message.warning("请先选择企业");
      // }
    },
    storeJobChange(value) {
      console.log(value)
      // this.storeJobList = [];
      // if(!isEmptyCheck(this.form.qiyeId)){
      this.getPolicyByJobId(value.id)
      this.form.storeJobId = value.id
      this.jobnameStatus = ''
      this.firminfo.jobName = value.jobName
      console.log(this.form)
      // } else {

      // }
    },
    toList() {
      this.$router.push({
        name: 'JobList',
        params: {
          pagenum: this.firminfo.currentPageNum,
        },
      })
      // this.$router.go(0);
      // window.location.reload();
      // this.reload();
    },
    getIdInfo(e) {
      if (e.target.value.length == 18) {
        let bir = getAgeFromBirthday(e.target.value)
        if (!isEmptyCheck(bir.gender)) {
          this.form.sex = bir.gender
        }
        if (!isEmptyCheck(bir.age)) {
          this.form.age = bir.age
        }
      }
    },
    toFold(value) {
      let policy = document.querySelector('.policy')
      if (value == 1) {
        this.isFold = false
        policy.style.maxHeight = 'unset'
      } else {
        this.isFold = true
        policy.style.maxHeight = '230px'
      }
    },
  },
}
</script>
<style scoped lang="less">
/deep/ .policy {
  min-height: 0 !important;
}

/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;
  }
}

.recordBill-container {
  // height: 100%;

  box-sizing: border-box;

  .content {
    margin-top: 12px;
    padding: 30px 0 20px 300px;
    position: relative;
    background-color: #fff;
    text-align: left;

    .ant-form {
      width: 640px;
    }
  }

  .upline {
    position: relative !important;
    box-shadow: none;
    // transform: translateX(-10px);
    margin-top: 12px;

    > div {
      margin-left: 107px;
      display: flex;
      justify-content: start;

      button {
        border-radius: 0;
        transition: none;
      }

      button:first-child {
        &:hover {
          border-color: #ff4400 !important;
          color: #ff4400 !important;
        }
      }

      button:last-child {
        &:hover {
          background-color: #ff7c1f !important;
          border-color: #ff7c1f !important;
        }
      }

      // button::after {
      //   // display: none;
      // }
    }
  }
}

/deep/ .ant-radio-wrapper {
  margin-right: 16px;

  span:last-child {
    padding: 0 2px;
  }
}

// /deep/ .ant-radio {
//   border-color: #ddd;
//   box-shadow: none;

//   &:after {
//     display: none;
//   }

//   &:hover .ant-radio-inner {
//     border-color: #ff4400 !important;
//     box-shadow: none;
//   }
// }

// /deep/ .ant-radio-checked {
//   .ant-radio-input:focus {
//     box-shadow: none;
//   }

//   .ant-radio-inner {
//     border-color: #ff4400;
//     box-shadow: none;

//     &::after {
//       background-color: #ff4400 !important;
//     }
//   }
// }

.ant-col {
  .ant-form-item {
    margin-top: 0;
    margin-bottom: 16px !important;
  }
}

.idCardUpload {
  // 上传身份证关闭按钮的样式
  position: relative;

  .icon-guanbi {
    position: absolute;
    top: -3px;
    right: 52px;
    height: 16px;
    width: 16px;
    text-align: center;
    line-height: 16px;
    font-size: 12px;
    font-weight: 900;
    border-radius: 50%;
    background-color: #999;
    color: #fff;
    z-index: 99;

    &::before {
      display: inline-block;
      transform: scale(0.6);
    }
  }
}

.specialbox {
  margin-top: -8px;
}

/deep/ .ant-upload-picture-card-wrapper {
  width: 100px !important;
  height: 40px !important;

  // border: 1px solid #ddd !important;
  // box-sizing: border-box;
  .ant-upload.ant-upload-select-picture-card,
  .ant-upload-list-item,
  .ant-upload-list-picture-card-container {
    width: 100px !important;
    height: 40px !important;
    min-width: 100px !important;
    min-height: 40px !important;
    font-size: 12px;
    padding: 0;
    border-color: #dddddd !important;
    box-sizing: border-box;
    border-radius: 0px;

    &:hover {
      border-color: #ff4400 !important;
    }

    .ant-upload {
      padding: 0;
    }

    .ant-upload-list-item-progress {
      display: none;
    }

    // .ant-upload-list-item-uploading {
    //   display: none;
    // }
    .ant-upload-select {
      background-color: #f5f5f5 !important;
    }

    .ant-upload-text {
      font-size: 12px;
      margin: 0 0 0 6px;
    }

    .ant-upload-list-item-uploading-text {
      // display: none;
      text-align: center !important;
      line-height: 40px !important;
      width: 100px !important;
      height: 40px !important;
      margin-top: 0;
      // overflow: hidden;
    }

    .ant-upload-list-item-actions {
      > i {
        display: none;
      }

      > a {
        text-align: center;
      }
    }
  }

  // .ant-upload-select {
  // display: none !important;
  // }
}

.uploading {
  position: absolute;
  width: 98px !important;
  height: 38px !important;
  top: 1px;
  left: -49px;
  background-color: #f5f5f5;
}

/deep/ .ant-form-item {
  // margin-bottom: 0;
  margin-top: -8px;

  .ant-col-5 {
    width: 20%;
  }

  .ant-form-item-label {
    // line-height: 22px;
    > label {
      font-weight: 400;
      color: #333;
    }
  }

  .ant-input-affix-wrapper {
    &:hover .ant-input {
      border-color: #ddd;
    }
  }

  .radiobox {
    height: 40px;
    display: flex;
    align-items: center;
  }

  .ant-form-item-children {
    .pzbox {
      // display: flex !important;
      color: #666;

      span {
        display: inline-block;

        &:first-child {
          min-width: 50px;
        }

        // &:last-child {
        //   cursor: pointer;
        //   margin-left: 10px;
        //   color: #ff4400;
        // }
      }

      // &::before {
      //   content: "";
      //   display: block;
      //   position: absolute;
      //   height: 1px;
      //   width: 588px;
      //   left: -428px;
      //   top: -20px;
      //   background-color: #d5d5d5;
      // }
    }
  }

  .ant-input {
    // width: 430px;
    height: 38px;
    // color: rgba(77, 87, 94, 0.7);
    color: #666;
    // border: none;
    border: 1px solid #dddddd;
    box-shadow: none !important;

    // background-color: #f6f6f6;
    &::placeholder {
      color: #cdcdcd;
    }
  }

  .ant-select-selection__rendered,
  .ant-select-selection--single,
  .ant-select {
    height: 38px;
    line-height: 38px;
    // border: none;
    // border: 1px solid #dddddd;
    box-shadow: none !important;
    border-color: #ddd;

    .ant-select-selection__placeholder {
      line-height: 17px;
      color: #cdcdcd;
    }

    .ant-select-selection-selected-value {
      line-height: 37px;
      color: #666;
    }

    &:hover {
      border-color: #ddd;
    }

    // &:focus {
    //   border-color: #d9d9d9;
    // }
    // &:active {
    //   border-color: #d9d9d9;
    // }
  }
}

/deep/ .ant-modal-content {
  .ant-modal-header {
    border-bottom: 1px solid transparent;
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .ant-modal-body {
    padding: 24px;
    padding-top: 0;

    img {
      display: block;
      width: 100%;
    }
  }

  .ant-modal-close-x {
    height: 50px;
    line-height: 50px;
    // .anticon-close {
    //   vertical-align: 10px;
    //   margin-right: -4px;
    // }
  }
}

/deep/ .policyContainer {
  position: relative;

  .ant-form-item-children {
    position: unset;

    .policy {
      // position: relative;
      padding: 0;
      padding-top: 6px;
      // padding-bottom: 24px;
      white-space: pre-wrap;
      border-radius: 4px;
      overflow: hidden;
      line-height: 2;
    }

    .openContral {
      position: absolute;
      height: 20px;
      line-height: 20px;
      bottom: 0;
      right: 10px;
      cursor: pointer;

      &::after {
        content: '';
        position: absolute;
        width: 480px;
        height: 1px;
        background-color: #ededed;
        bottom: -10px;
        left: -445px;
      }

      &:hover {
        color: #ff4400;
      }
    }
  }

  // background-color: #ff4400;
}

// /deep/ .date-picker {
//  .picker-content {
//    table {
//      width: 100%;
//      // padding: 4px !important;
//      margin: 4px 0;
//      border-collapse: separate;
//      border-spacing: 0;
//      font-size: 12px;
//      line-height: 20px !important;
//      .contain {
//        height: 2px;
//      }
//      thead {
//        padding-bottom: 5px;
//        tr {
//          margin-bottom: 5px;
//          background-color: #ff6a001a;
//          color: rgba(77, 87, 94);
//          th {
//            text-align: center;
//            font-weight: 600;
//            font-size: 14px;
//            line-height: 26px;
//            &:first-child {
//              border-radius: 4px 0 0 4px;
//            }
//            &:last-child {
//              border-radius: 0 4px 4px 0;
//            }
//          }
//        }
//      }
//      tbody {
//        margin-top: 10px;
//        tr {
//          td {
//            // height: 50px;
//            box-sizing: border-box;
//            color: rgba(77, 87, 94);
//            // font-weight: 600;
//            padding: 0 4px;
//            font-size: 14px;
//            cursor: pointer;
//            &:first-child {
//              border-radius: 4px 0 0 4px;
//            }
//            &:last-child {
//              border-radius: 0 4px 4px 0;
//            }
//            div {
//              border: 1px solid transparent;
//              position: relative;
//              width: 30px;
//              height: 26px;
//              line-height: 24px;
//              border-radius: 4px;
//              text-align: center;
//              margin: 0 2px;
//              z-index: 99;
//              box-sizing: border-box;
//            }
//          }
//          td.gray {
//            font-weight: 400;
//            color: rgba(138, 138, 138, 0.7);
//          }
//          td.bggray {
//            position: relative;
//            color: #ccc;
//            cursor: default;

//            &::after {
//              content: "";
//              position: absolute;
//              display: block;
//              width: 100%;
//              height: 26px;
//              background-color: #f5f5f5;
//              top: 50%;
//              transform: translateY(-50%);
//              left: 0;
//              z-index: 9;
//            }
//          }

//          .bggray:first-child::after {
//            border-radius: 4px 0 0 4px;
//          }
//          .bggray:last-of-type::after {
//            border-radius: 0 4px 4px 0;
//          }
//          td:not(.bggray):hover {
//            div {
//              border: 1px solid #ff4400;
//              color: #ff4400;
//            }
//          }
//          td.active {
//            div {
//              background: #ff4400;
//              color: white !important;
//              font-weight: bold;
//            }
//          }
//        }
//      }
//    }
//  }

//  .picker-content1:extend(.picker-content all) {
//    // &: extend ;
//    display: flex;
//    flex-direction: row;
//    table {
//      width: calc(100% - 40px);
//      margin-right: 4px;
//      // border-right: 1px solid #eee;
//    }
//    .hour-list {
//      display: flex;
//      flex-wrap: wrap;
//      justify-content: space-between;
//      border-left: 1px solid #eee;
//      list-style: none;
//      padding: 5px 2px 0 4px;
//      margin: 0;
//      height: 100%;
//      overflow-x: hidden;
//      width: 300px;
//      font-size: 12px;
//      overflow-y: auto;
//      &::-webkit-scrollbar {
//        /*滚动条整体样式*/
//        width: 0px !important; /*高宽分别对应横竖滚动条的尺寸*/
//        height: 4px;
//      }
//      &::-webkit-scrollbar-thumb {
//        /*滚动条里面小方块*/
//        border-radius: 5px;
//        // -webkit-box-shadow: inset 0 0 5px rgba(126, 126, 126, 0.06);
//        background: #ddd !important;
//      }
//      // &::-webkit-scrollbar-track {
//      //   /*滚动条里面轨道*/
//      //   -webkit-box-shadow: inset 0 0 5px rgba(112, 112, 112, 0.06);
//      //   border-radius: 0;
//      //   background: rgba(0, 0, 0, 0.1);
//      // }
//      li {
//        padding: 0;
//        margin: 0;
//        margin-bottom: 6px;
//        color: #4d575ecc;
//        font-weight: 600;
//        background-color: #ff6a001a;
//        width: 48%;
//        border-radius: 4px;
//        /* font-weight: 600; */
//        display: flex;
//        height: 26px !important;
//        line-height: 26px;
//        font-size: 14px;
//        justify-content: center;
//        align-items: center;
//        padding: 0 4px;
//        height: 26px;
//        cursor: pointer;
//        span:last-child {
//          margin-left: 0 !important;
//        }
//        &:hover {
//          color: white;
//          background: #ff4400;
//        }
//      }
//      // li:not(:last-child) {
//      // border-bottom: solid 1px gainsboro;
//      // }

//      .active {
//        color: white;
//        background: #ff4400;
//      }
//    }
//    .minutes-list {
//      width: 60px;
//    }
//  }

//  .picker-footer {
//    display: block;
//    line-height: 42px;
//    text-align: right;
//    white-space: nowrap;
//    button {
//      outline: none;
//      border: solid 1px gainsboro;
//      border-radius: 2px;
//      text-align: center;
//      padding-left: 1px;
//      color: #8a8a8a;
//      height: 24px;
//      width: 50px;
//      line-height: 20px;
//      font-size: 12px;
//      margin-right: 12px;
//      background-color: #f3f3f3;
//      &:first-child {
//        background-color: #fff;
//        &:active,
//        &:hover {
//          border-color: #eee;
//          background-color: #eee;
//        }
//      }
//      &:last-child {
//        background-color: #ff4400;
//        border-color: #ff4400;
//        color: #fff;
//        &:active,
//        &:hover {
//          border-color: #ff4400;
//          background-color: #ff4400;
//        }
//      }
//    }
//  }
// }
/deep/ .time-input {
  margin-bottom: 16px;

  .ant-input {
    font-size: 20px !important;
    border-radius: 0px;
    -webkit-text-stroke-width: 0.5px;
    font-weight: 400;

    &::placeholder {
      font-size: 14px;
      -webkit-text-stroke-width: 0.1px;
    }
  }

  .ant-input-suffix {
    right: 16px;
  }

  .anticon-close-circle {
    width: 24px;
    height: 24px;
    line-height: 28px;
    margin-right: 8px;
  }
}

.ant-input {
  border-radius: 0px;
}

/deep/ .pt1 .ant-input {
  padding-top: 1px;
}

/deep/ .ant-select-selection {
  border-radius: 0px !important;
}
</style>
