<template>
  <div class="recordcomponent">
    <a-form-model
      ref="ruleForm"
      :model="form"
      :rules="rules"
      :colon="false"
      :wrapperCol="{ span: 19 }"
      :labelCol="{ span: 4 }"
    >
      <a-form-model-item ref="proxy" label="代理" prop="">
        <a-input
          :value="
            proxyinfo.userName !== '' ? proxyinfo.userName : proxyinfo.tel
          "
          :disabled="true"
        />
      </a-form-model-item>
      <a-form-model-item ref="name" label="姓名" prop="name">
        <a-input
          v-model="form.username"
          placeholder="请输入老乡姓名"
          class="special-input"
        />
      </a-form-model-item>
      <a-form-model-item ref="gender" label="性别" prop="gender">
        <a-radio-group
          v-model="form.gender"
          defaultValue="nan"
          class="radiobox"
        >
          <a-radio value="nan"> 男 </a-radio>
          <a-radio value="nv"> 女 </a-radio>
        </a-radio-group>
      </a-form-model-item>
      <!-- :offset="2" -->
      <a-form-model-item ref="tel" label="年龄" prop="tel">
        <a-input
          v-model="form.age"
          placeholder="请输入年龄"
          class="special-input"
        />
      </a-form-model-item>
      <a-form-model-item ref="peoplecard" label="民族" prop="peoplecard">
        <a-select
          v-model="form.nation"
          placeholder="请选择民族"
          class="special-input"
        >
          <a-select-option
            v-for="item in nationlist"
            :key="item.id"
            :value="item.id"
            >{{ item.name }}</a-select-option
          >
        </a-select>
      </a-form-model-item>

      <a-form-model-item ref="peoplecard" label="身份证号" prop="peoplecard">
        <a-input v-model="form.peoplecard" placeholder="请输入老乡身份证号" />
      </a-form-model-item>
      <a-form-model-item ref="peoplecard" label="家庭住址" prop="peoplecard">
        <a-input v-model="form.address" placeholder="请输入家庭住址" />
      </a-form-model-item>
      <a-form-model-item ref="username" label="面试时间" prop="username">
        <a-date-picker
          :showToday="false"
          format="YYYY-MM-DD HH:mm"
          :disabledDate="interviewTimeDisabledDate"
          :disabledTime="interviewTimeDisabledDateTime"
          :locale="locale"
          :showTime="{
            hideDisabledOptions: true,
            defaultValue: moment('12:00', 'HH:mm'),
            format: 'HH:mm',
          }"
          v-decorator="[
            'interviewTime',
            { rules: [{ required: true, message: '请选择面试时间' }] },
          ]"
          placeholder="请选择面试时间"
          style="width: 100%"
        />
      </a-form-model-item>
      <a-form-model-item ref="username" label="报名企业" prop="username">
        <a-input :value="firminfo.aliasName" :disabled="true" />
      </a-form-model-item>
      <a-form-model-item ref="username" label="岗位" prop="username">
        <a-input :value="firminfo.jobName" :disabled="true" />
      </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="username" label="政策" prop="username">
        <a-input
          v-model="form.policy"
          style="min-height: 150px; max-height: 200px"
          type="textarea"
        />
      </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: #ff6a00;
            border-color: #ff6a00;
          "
          @click="handleOk"
        >
          提交
        </a-button>
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import { nationlist } from "../../../utils/datalist";
import { recordBillApi } from "@/api/job";
export default {
  // 组件名称
  name: "",
  // 局部注册的组件
  components: {},
  // 组件参数 接收来自父组件的数据
  props: {
    visible: {
      require: true,
    },
    firminfo: {
      require: true,
    },
  },
  // 组件状态值
  data() {
    return {
      form: {
        // 录单数据
        name: "",
        peoplecard: "",
        gender: "", // 性别
        nation: undefined, // 民族
        location: "", // 家庭住址
        firm: "", // 公司名
        post: "", // 岗位
        pattern: "", // 模式
        policy: "", // 代理政策
        proxy: "", // 代理
        facedate: "", // 面试时间
      },
      rules: {
        // 录单校验规则
        name: [{ required: true, message: "请输入姓名", trigger: "submit" }],
        // tel: [{ required: true, message: "请输入手机号", trigger: "submit" }],
      },
      proxyinfo: JSON.parse(sessionStorage.getItem("LOGIN_DATA")),
      nationlist: nationlist,
      moment: this.$moment,
      locale: {
        lang: {
          locale: "zh_CN",
          placeholder: "请选择面试时间",
          today: "今天",
          yearFormat: "YYYY",
          dateFormat: "M/D/YYYY",
          dayFormat: "D",
          dateTimeFormat: "M/D/YYYY HH:mm:ss",
          monthFormat: "MMMM",
          timeSelect: "选择时间",
          ok: "确认",
          monthBeforeYear: false,
        },
      },
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {},
  /**
   * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
   */
  mounted() {},
  // 组件方法
  methods: {
    onClose() {
      // this.visible = false;
      this.$emit("update:visible", false);
      this.form = {
        // 录单数据
        name: "",
        peoplecard: "",
        gender: "", // 性别
        nation: undefined, // 民族
        location: "", // 家庭住址
        firm: "", // 公司名
        post: "", // 岗位
        pattern: "", // 模式
        policy: "", // 代理政策
        proxy: "", // 代理
        facedate: "", // 面试时间
      };
    },
    handleOk() {
      this.$refs.ruleForm.validate(async (ispass, no) => {
        console.log(ispass);
        if (ispass) {
          // this.confirmLoading = true;
          // console.log(this.form);

          // setTimeout(() => {
          //   this.confirmLoading = false;
          //   this.form = {
          //     // 录单数据置空
          //     name: "",
          //     tel: "",
          //     peoplecard: "",
          //     username: "",
          //   };
          //   this.visible = false;
          // }, 2000);
          let { data } = await recordBillApi(this.form);
          console.log(data);
        } else {
          console.log(123);
        }
        console.log(no);
      });
    },
    // 录单弹出层的关闭
    handleCancel() {
      this.visible = false;
      this.form = {
        // 录单数据
        name: "",
        peoplecard: "",
        gender: "",
        nation: undefined,
        location: "",
        firm: "",
        post: "",
        pattern: "",
        policy: "",
        proxy: "",
        facedate: "",
      };
    },
    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;
    },
  },
};
</script>

<style scoped lang="less">
.recordcomponent {
  padding-top: 10px;
  /deep/ .ant-form-item {
    // margin-bottom: 0;
    // display: flex;
    // justify-content: start;
    // align-items: flex-start;
    margin-top: -16px;
    .radiobox {
      height: 40px;
      display: flex;
      align-items: center;
    }
    .ant-form-item-label > label {
      color: #4d575e;
    }
    .ant-form-item-label {
      line-height: 40px;
      // margin-right: 8px;
      .ant-form-item-no-colon {
        font-size: 14px !important;
        // text-shadow: 0px 0px 1px black;
      }
    }
    .ant-calendar-picker-container-content {
      width: 323px !important;
    }
    .ant-select-selection__rendered {
      font-size: 14px;
    }
    .ant-input {
      // width: 430px;
      height: 32px;
      font-size: 14px;
      // border: none;
      border: 1px solid #dddddd;
      box-shadow: none !important;
      &::placeholder {
        color: #cdcdcd;
      }
      // background-color: #f6f6f6;
    }
    .ant-select-selection__rendered,
    .ant-select-selection--single,
    .ant-select {
      height: 32px;
      // border: none;
      // border: 1px solid #dddddd;
      line-height: 32px;
      box-shadow: none !important;
      border-color: #d9d9d9;
      .ant-select-selection__placeholder {
        line-height: 18px;
        color: #cdcdcd;
      }
      /deep/ .ant-form-item-children {
        line-height: 40px;

        // display: flex !important;
      }
      &:hover {
        border-color: #d9d9d9;
      }
      // &:focus {
      //   border-color: #d9d9d9;
      // }
      // &:active {
      //   border-color: #d9d9d9;
      // }
    }
  }
  // /deep/ .ant-calendar-picker {
  //   border-color: #d9d9d9 !important;
  //   &:hover {
  //     border-color: #d9d9d9 !important;
  //   }
  // }
  .upline {
    position: absolute;
    width: 100%;
    height: 48px;
    // margin-bottom: 20px;
    // margin-left: 410px;
    bottom: 0;
    right: 0;
    background-color: #fff;
    box-shadow: 1px -5px 20px rgb(241, 241, 241);
    > div {
      // display: inline-block;
      margin: 8px 35px 8px 20px;
      display: flex;
      justify-content: end;
      // float: right;
      // bottom: 0;
      // right: 0;
    }
  }
  /deep/ .ant-radio-wrapper {
    margin-right: 16px;
    span:last-child {
      padding: 0 2px;
    }
  }
  /deep/ .ant-radio-checked {
    .ant-radio-input:focus {
      box-shadow: none;
    }
    .ant-radio-inner {
      border-color: #ff6a00;
      box-shadow: none;
      &::after {
        background-color: #ff6a00 !important;
      }
    }
  }
  /deep/ .ant-radio {
    border-color: #d9d9d9;
    box-shadow: none;
    &:after {
      display: none;
    }
    &:hover .ant-radio-inner {
      border-color: #ff6a00 !important;
      box-shadow: none;
    }
  }
}
</style>
