<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'}]"> 员工登记</div>
        <div :class="['div_option','option_right',{'option_select':selectTab=='2'}]">受众群体登记</div>
      </div>

      <div class="content">

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

          <span style="margin-right:20px">{{shequName}}</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.idNum"></mt-field>
        <div class="line"></div>

        <div @click="handelSel('detNum')">
          <mt-cell :title="'*参加核酸检测次数'"
                   is-link>
            <span class="picker_content"
                  v-if="formData.detNum">{{formData.detNumName}}</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.detData">{{formData.detDataName}}</span>
            <span v-else>请选择</span>
          </mt-cell>
        </div>
        <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"
                        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(),

      formData: {
        name: '',
        idNum: '',
        mobile: '',
        detNum: null,
        detNumName: '',
        detData: '',
        detDataName: ''
      },

      btnDisabled: false,
      popupVisible: false,

      //二维码带来数据
      shequId: '',//社区id   6e511da6816e53af4cda952365a26eb9  德兴路  1202807601961984002
      shequName: '',//社区名称
      customerId: '',//客户id  45687aa479955f9d06204d415238f7cc

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

      selObj: {},

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

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

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

    }
  },
  components: {},
  computed: {

  },

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

    this.shequId = this.$route.params.id
    this.customerId = this.$route.query.customerId
    this.shequName = this.$route.query.name
    document.title = this.shequName + '信息管理平台'
  },
  mounted () {


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

    let internalShequId = ['1202807601961984002', '6e511da6816e53af4cda952365a26eb9', 'b058eb82d65d922fec9dc84f0348fc6a', '630c3c2dd1cd7a4d198c8558bce88324']
    // let internalShequId = ['1202807601961984002',]
    // if (envShow === 'dev' || envShow === 'prod:sit') { // 开发环境
    //   internalShequId = '6e511da6816e53af4cda952365a26eb9'
    // } else if (envShow === 'prod:uat') { // 体验
    //   internalShequId = '6e511da6816e53af4cda952365a26eb9'
    // } else if (envShow === 'prod') { // 生产
    //     微笑崂山下的小寨子社区：b058eb82d65d922fec9dc84f0348fc6a
    // 亿联街道下的亿联社区：630c3c2dd1cd7a4d198c8558bce88324
    //   internalShequId = '1202807601961984002'
    // } else if (envShow === 'shibei_prod') { // 生产
    //   internalShequId = '1202807601961984002'
    // }

    this.formData.customerId = this.customerId
    if (internalShequId.indexOf(this.shequId) > -1) {
      this.formData.origin = 'internal'
    } else {
      this.formData.origin = 'external'
    }

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


  },

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

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

      let year = time.getFullYear()
      console.log(year)

    },

    handelSel (selType) {
      this.selType = selType

      if (selType === 'detNum') {

        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 () {





      console.log(this.formData)

      this.btnDisabled = true
      this.startLoading()
      const url = "/epmetuser/icresicollect/save"

      const { data, code, msg } = await requestPost(url, this.formData)
      this.endLoading()
      this.btnDisabled = false
      if (code === 0) {
        this.formData.shequName = this.shequName
        this.$router.replace({
          name: 'caijisuccess',
          query: {
            formData: this.formData
          }
        })
        // Toast({
        //   message: '提交成功',
        //   duration: 3000
        // });

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

      }
    },

    //必填验证
    validataFormData () {

      let aletMessage = ''
      this.showMessagsBox = false
      if (this.formData.origin === 'internal') {//内部
        if (!this.selVillage) {
          aletMessage = '请选择小区'

          return aletMessage
        }
        if (!this.selBuild) {
          aletMessage = '请选择楼栋'
          return aletMessage
        }

        if (!this.selUnit) {//没有选择单元
          aletMessage = '请选择单元'
          return aletMessage

        } else {//选择了单元
          if (this.selUnit.value === 'other') {//单元选择了其他
            if (!this.unitContent) {
              aletMessage = '请填写单元号'
              return aletMessage
            }

            if (!this.homeContent) {//房屋必须填写内容
              aletMessage = '请填写房屋'
              return aletMessage
            }

          } else {//单元没有选择其他
            if (!this.selHome) {
              aletMessage = '请选择房屋'
              return aletMessage

            } else if (this.selHome.value === 'other' && !this.homeContent) {
              aletMessage = '请填写房屋'
              return aletMessage
            }
          }

        }


      } else {
        if (!this.formData.address) {
          aletMessage = '请填写地址'
          return aletMessage
        }
      }

      if (!this.selHomeType) {
        aletMessage = '请选择房屋类型'
        return aletMessage
      }
      if (!this.formData.houseHolderName) {
        aletMessage = '请填写户主姓名'
        return aletMessage
      }




    },

    popupOk () {

      if (this.selType === 'detNum') {
        this.formData.detNum = this.selObj.value
        this.formData.detNumName = 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>
