<template>
  <div class="bg-caiji">
    <div class="title">
      员工登记
    </div>
    <div class="main">

      <div class="div_tab">
        <div :class="['div_option','option_left',{'option_select':selectTab==='1'}]"
             @click="handleChangeTab('1')"> 员工登记</div>
        <div :class="['div_option','option_right',{'option_select':selectTab==='2'}]"
             @click="handleChangeTab('2')">受众群体登记</div>
      </div>

      <div v-if="selectTab==='1'"
           class="content">

        <mt-cell title="*企业名称">

          <span style="margin-right:20px">{{placeOrgName}}</span>
        </mt-cell>
        <div class="line"></div>

        <mt-field class="my-field"
                  :disableClear="true"
                  :label="'*姓名'"
                  placeholder="请输入"
                  v-model="formData.name"></mt-field>
        <div class="line"></div>
        <mt-field class="my-field"
                  :disableClear="true"
                  :label="'*手机号'"
                  placeholder="请输入"
                  type="tel"
                  v-model="formData.mobile"></mt-field>
        <div class="line"></div>
        <mt-field class="my-field"
                  :disableClear="true"
                  :label="'*身份证'"
                  placeholder="请输入"
                  v-model="formData.idCard"></mt-field>
        <div class="line"></div>

        <div @click="handelSel('ymjzCount')">
          <mt-cell :title="'*疫苗接种次数'"
                   is-link>
            <span class="picker_content"
                  v-if="formData.ymjzCount">{{formData.ymjzCountName}}</span>
            <span v-else>请选择</span>
          </mt-cell>
        </div>
        <div class="line"></div>
        <div @click="handelSelData()">
          <mt-cell :title="'*最近一次核酸检测时间'"
                   is-link>
            <span class="picker_content"
                  v-if="formData.latestNatTime">{{formData.latestNatTime}}</span>
            <span v-else>请选择</span>
          </mt-cell>
        </div>
        <div class="line"></div>

      </div>
      <div v-if="selectTab==='2'"
           class="content">

        <mt-cell title="*企业名称">

          <span style="margin-right:20px">{{placeOrgName}}</span>
        </mt-cell>
        <div class="line"></div>
        <div @click="handelSelData()">
          <mt-cell :title="'*核酸检测时间'"
                   is-link>
            <span class="picker_content"
                  v-if="formData2.natTime">{{formData2.natTime}}</span>
            <span v-else>请选择</span>
          </mt-cell>
        </div>
        <div class="line"></div>
        <mt-field class="my-field"
                  :disableClear="true"
                  :label="'*受众人数'"
                  placeholder="请输入"
                  v-model="formData2.szTotal"></mt-field>
        <div class="line"></div>
        <mt-field class="my-field"
                  :disableClear="true"
                  :label="'*核酸检测人数'"
                  placeholder="请输入"
                  type="tel"
                  v-model="formData2.hsjcTotal"></mt-field>
        <div class="line"></div>

      </div>

    </div>

    <div class="div-btn">
      <mt-button @click="handleSubmit"
                 type="primary"
                 class="btn"
                 :disabled="btnDisabled"
                 size="small">提交</mt-button>
    </div>

    <mt-popup v-model="popupVisible"
              popup-transition="popup-fade"
              closeOnClickModal="true"
              position="bottom">
      <mt-picker :slots="popupSlots"
                 value-key="label"
                 @change="onPickerChange"
                 showToolbar>
        <div class="picker-toolbar-title">
          <div class="usi-btn-cancel"
               @click="popupVisible = !popupVisible">取消</div>
          <div class="">请选择</div>
          <div class="usi-btn-sure"
               @click="popupOk()">确定</div>
        </div>
      </mt-picker>
    </mt-popup>
    <mt-datetime-picker v-model="pickerVisible"
                        ref="pickerData"
                        type="date"
                        :startDate="startDate"
                        year-format="{value} 年"
                        month-format="{value} 月"
                        date-format="{value} 日"
                        @confirm="handleConfirm">
    </mt-datetime-picker>
  </div>
</template>
<script>


import { requestPost } from "@/js/dai/request";
import { Toast } from "mint-ui";
import { MessageBox } from 'mint-ui';
import { Loading } from 'element-ui' // 引入Loading服务
import { messages } from '@/i18n'

let loading // 加载动画
export default {
  data () {
    return {
      selectTab: '1',
      pickerVisible: '',
      startDate: new Date(2021, 0, 1),

      //二维码带来数据
      enterpriseId: '',//场所Id
      customerId: '',//客户Id
      placeOrgName: '',//场所名称

      formData: {
        enterpriseId: '',//场所ID	
        customerId: '',//客户id
        name: '',
        idCard: '',
        mobile: '',
        ymjzCount: null,
        ymjzCountName: '',
        latestNatTime: '',
      },
      formData2: {
        enterpriseId: '',//场所ID	
        customerId: '',//客户id
        natTime: '',//受众人数	
        szTotal: '',//核酸检测人数	
        hsjcTotal: '',//客户ID	

      },

      btnDisabled: false,
      popupVisible: false,


      shequName: '',//社区名称

      selType: 'community',//弹出框所显示的数据类型：community、building、unit、room
      pickerData: [],

      selObj: {},

      showMessagsBox: false,//是否显示人员未填写提示弹出框

      detNumList: [],//参加核酸次数list

      popupSlots: [//问题类型弹框数据
        {
          values: []
        }
      ],

    }
  },
  components: {},
  computed: {

  },

  created () {
    console.log(this.$route)

    this.customerId = this.$route.query.customerId
    this.enterpriseId = this.$route.query.enterpriseId
    this.placeOrgName = this.$route.query.placeOrgName
    document.title = this.placeOrgName + '员工登记'
  },
  mounted () {

    let envShow = process.env.VUE_APP_NODE_ENV
    console.log('环境', envShow)

    this.formData.customerId = this.customerId
    this.formData.enterpriseId = this.enterpriseId

    this.formData2.customerId = this.customerId
    this.formData2.enterpriseId = this.enterpriseId

    this.detNumList = []
    for (let i = 0; i < 5; i++) {
      let obj = {
        value: i + '',
        label: i + '次',
      }
      this.detNumList.push(obj)
    }

  },

  methods: {
    handleChangeTab (val) {
      this.selectTab = val
    },
    handelSelData () {
      this.$refs.pickerData.open();   // 触发
      // this.$refs.pickerData.close() ; // 关闭
    },

    handleConfirm (val) {
      let time = new Date(val);

      let year = time.getFullYear()
      let month = time.getMonth() + 1
      let day = time.getDate()
      if (this.selectTab === '1') {
        this.formData.latestNatTime = year + '-' + month + '-' + day
      } else if (this.selectTab === '2') {
        this.formData2.natTime = year + '-' + month + '-' + day
      }

    },

    handelSel (selType) {
      this.selType = selType

      if (selType === 'ymjzCount') {
        this.pickerData = this.detNumList
      }

      let obj = {
        values: this.pickerData
      }

      this.popupSlots = []
      this.popupSlots.push(obj)
      this.popupVisible = !this.popupVisible
    },

    async handleSubmit () {
      let message = this.validataFormData()

      if (message) {
        if (this.showMessagsBox) {
          MessageBox.confirm(message).then(action => {
            this.submit()
          });
        } else {
          Toast({
            message: message,
            duration: 3000
          });
        }
      } else {
        this.submit()
      }


    },
    async submit () {
      let url = "/gov/org/icEmployeeRegister/add"
      let params = {}
      if (this.selectTab === '1') {
        url = '/gov/org/icEmployeeRegister/add'
        params = this.formData
      } else if (this.selectTab === '2') {
        url = '/gov/org/icGroupPeopleRegister/add'
        params = this.formData2
      }
      console.log(params)
      // return false
      this.btnDisabled = true
      this.startLoading()


      const { data, code, msg } = await requestPost(url, params)
      this.endLoading()
      this.btnDisabled = false
      if (code === 0) {

        this.$router.replace({
          name: 'staffRegisterSuccess',
          query: {
            selectTab: this.selectTab,
            placeOrgName: this.placeOrgName,
            formData: this.selectTab === '1' ? this.formData : this.formData2
          }
        })
        // Toast({
        //   message: '提交成功',
        //   duration: 3000
        // });

      } else {
        Toast({
          message: msg,
          duration: 3000
        });

      }
    },

    //必填验证
    validataFormData () {

      let aletMessage = ''
      this.showMessagsBox = false
      if (this.selectTab === '1') {//员工
        if (!this.formData.name) {
          aletMessage = '请填写姓名'

          return aletMessage
        }
        if (!this.formData.mobile) {
          aletMessage = '请填写手机号'
          return aletMessage
        }

        if (!this.formData.idCard) {//
          aletMessage = '请填写证件号'
          return aletMessage

        }
        if (!this.formData.ymjzCount) {//
          aletMessage = '请选择疫苗接种次数'
          return aletMessage

        }
        if (!this.formData.latestNatTime) {//
          aletMessage = '请选择最近一次核酸检测时间'
          return aletMessage

        }


      } else if (this.selectTab === '2') {//企业
        if (!this.formData2.natTime) {
          aletMessage = '请选择核酸检测时间'

          return aletMessage
        }
        if (!this.formData2.szTotal) {
          aletMessage = '请填写受众人数'
          return aletMessage
        }

        if (!this.formData2.hsjcTotal) {//
          aletMessage = '核酸检测人数'
          return aletMessage

        }
      }


    },

    popupOk () {

      if (this.selType === 'ymjzCount') {
        this.formData.ymjzCount = this.selObj.value
        this.formData.ymjzCountName = this.selObj.label
      }
      this.popupVisible = false

    },

    onPickerChange (picker, values) {

      this.selObj = values[0]

    },

    // 开启加载动画
    startLoading () {
      loading = Loading.service({
        lock: true, // 是否锁定
        text: '正在加载……', // 加载中需要显示的文字
        background: 'rgba(0,0,0,.7)' // 背景颜色
      })
    },
    // 结束加载动画
    endLoading () {
      // clearTimeout(timer);
      if (loading) {
        loading.close()
      }
    }


  },
  beforeDestroy () {
    // document.title = messages[val].brand.lg
  },
}
</script>

<style lang="scss" scoped >
@import "@/assets/scss/pages/staffRegister.scss";
/deep/ .mint-cell-wrapper {
  padding: 0 5px 0 0;
}
.my-field /deep/ .mint-field-core {
  text-align: right;
  margin-right: 20px;
}

/deep/ .mint-popup-bottom {
  height: 300px;
  width: 100vw;
}

// /deep/ .picker {
//   height: 300px;
// }
/deep/ .picker-items {
  height: 250px;
  width: 100vw;
}
/deep/ .picker-slot-center {
  width: 100vw;
}
/deep/ .picker-center-highlight {
  top: 35%;
}
.picker-toolbar-title {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  background-color: #eee;
  height: 44px;
  line-height: 44px;
  font-size: 16px;
  .usi-btn-cancel,
  .usi-btn-sure {
    color: #26a2ff;
    font-size: 16px;
  }
}
</style>
