<template>
  <div class="mUinitBusiness">
    <div class="header">
      <img class="comeback" src="@/assets/images/fanhui.png" alt="" @click="goHome" >
      <span>分公司入驻</span>
    </div>
    <div class="topTitle">
      <h3>分公司入驻</h3>
      <p>请认真填写申请信息，以便我们为您提供更好的服务！</p>
    </div>
    <div class="centBox">
      <!-- <el-steps :active="active" align-center>
        <el-step @click.native="changeActive(index = 1)" title="个人信息"></el-step>
        <el-step @click.native="changeActive(index = 2)" title="详细信息"></el-step>
      </el-steps> -->
       <div class="mFormBox">
        <div class="shopInfo" v-show="active === 1">
          <div class="form">
            <div class="inputItem">
              <div class="labelTit"><label><i>*</i>账户名/手机号码</label></div>
              <input type="text" v-model="plannerForm.username" placeholder="请输入账号或电话号码">
            </div>
            <div class="inputItem">
              <div class="labelTit"><label><i>*</i>昵称/姓名</label></div>
              <input type="text" v-model="plannerForm.name" placeholder="请输入昵称">
            </div>
            <div class="inputItem">
              <div class="labelTit"><label><i>*</i>手机号</label></div>
              <input type="text" v-model="plannerForm.phone" placeholder="请输入手机号">
            </div>
            <div class="inputItem">
              <div class="labelTit"><label><i>*</i>邮箱</label></div>
              <input type="text" v-model="plannerForm.email" placeholder="请输入邮箱">
            </div>
            <div class="inputItem">
              <div class="labelTit"><label><i>*</i>性别</label></div>
              <!-- <input type="text" v-model="plannerForm.email" placeholder="请选择性别"> -->
              <div class="input">
                <van-radio-group v-model="plannerForm.sex" direction="horizontal">
                <van-radio name="男">男</van-radio>
                <van-radio name="女">女</van-radio>
              </van-radio-group>
              </div>
            </div>
            <div class="inputItem arrow" style="margin-top: 20px;">
              <div class="labelTit"><label><i>*</i>请选择地址</label></div>
              <div class="input" style="background-color: #a4a4a41f;" @click="show = true">
                {{ fieldValue || '请选择地区' }}
              </div>
              <!-- <input @click="show = true" v-model="fieldValue" type="text" placeholder="请选择所在地区"> -->
              <!-- <van-field
                v-model="fieldValue"
                is-link
                readonly
                label="请选择地址"
                placeholder="请选择所在地区"
                @click="show = true"
              /> -->
              <van-popup v-model="show" round position="bottom">
                <!-- v-if="isRequestAddres" sb玩意不动态刷新，现在换了给方法，强行重新赋值，不完全完美的解决问题 -->
                <van-cascader
                  v-model="plannerForm.region"
                  title="请选择所在地区"
                  :options="options"
                  @close="show = false"
                  @change="onAddresChange"
                  :field-names="{ text: 'name', value: 'id', children: 'children' }"
                />
              </van-popup>
            </div>
            <div class="inputItem">
              <div class="labelTit"><label><i>*</i>详细地址</label></div>
              <input type="text" v-model="plannerForm.addres" placeholder="请输入详细地址">
            </div>
            <div class="inputItem">
              <div class="labelTit"><label><i>*</i>入驻套餐</label></div>
              <div class="input" style="background-color: #a4a4a41f;" @click="showSetMeal = true">
                {{ setMealValue || '请选择你的套餐'}}
              </div>
              <van-popup v-model="showSetMeal" round position="bottom" :style="{ height: '50%' }">
                 <van-picker
                    title="请选择你的套餐"
                    show-toolbar
                    :columns="setMealData"
                    value-key="title"
                    @confirm="onSetMealfirm"
                    @cancel="showSetMeal = false"
                    @change="onSetMealChange"
                    visible-item-count="7"
                  />
              </van-popup>
            </div>
          </div>
        </div>
        <!-- <div class="subjectInfo" v-show="active === 2">
          <div class="form">
            <div class="inputItem">
              <div class="labelTit"><label><i>*</i>生效日期</label></div>
              <div class="input" style="background-color: #a4a4a41f;" @click="showDate = true">
                {{ dateValue || '请选择生效日期' }}
              </div>
              <van-calendar :min-date="minDate" :max-date="maxDate" v-model="showDate" type="range" @confirm="getDataArray" />
            </div>
            <div class="inputItem">
              <div class="labelTit"><label><i>*</i>合同是否有效</label></div>
              <div class="input">
                <van-radio-group v-model="plannerForm.contractState" direction="horizontal">
                <van-radio name="1">是</van-radio>
                <van-radio name="0">否</van-radio>
              </van-radio-group>
              </div>
            </div>
          </div>
        </div> -->
       </div>
       <!-- <button class="nextBtn" @click="active = 2" v-show="active < 2">下一步</button>
       <button class="nextBtn" @click="active = 1" v-show="active >= 2">上一步</button> -->
       <button class="nextBtn" @click="submitForm">提交</button>
    </div>
  </div>
</template>

<script>
import api from '@/api'
import { listSearchMixin } from '@/config/mixin'
// eslint-disable-next-line no-unused-vars
import { formatDate, unemptyArray } from '@/util/ArrayFunction'
// eslint-disable-next-line no-unused-vars
import { Field, Popup, DatetimePicker, Toast, Picker, RadioGroup, Radio, Cascader, Calendar } from 'vant'
export default {
  mixins: [listSearchMixin],
  components: {
    [Field.name]: Field,
    [Popup.name]: Popup,
    [DatetimePicker.name]: DatetimePicker,
    [Toast.name]: Toast,
    [Picker.name]: Picker,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    [Cascader.name]: Cascader,
    [Calendar.name]: Calendar
  },
  data () {
    return {
      active: 1,
      show: false, // 控制地区选择
      // isRequestAddres: true, // 原本是用来动态刷新地址选择栏的，但是有闪屏问题，遗弃掉
      showDate: false, // 控制时间选择
      showSetMeal: false, // 控制套餐选择
      showSubCompany: false, // 控制公司选择
      minDate: new Date(1991, 0, 1), // 控制时间区间选择的最小年份
      maxDate: new Date(2099, 0, 31), // 控制时间区间选择的最大年份
      fieldValue: '',
      dateValue: '',
      companyValue: '',
      setMealValue: '',
      options: [],
      plannerColumns: [],
      setMealData: [],
      queryData: {
        page: 1,
        size: 10
      },
      plannerForm: {
          username: '', // 账号
          name: '', // 姓名
          phone: '', // 电话号码
          email: '', // 邮箱
          sex: '男', // 性别
          region: '', // 区域编码
          addres: '', //
          packageId: '',
          // startTime: '',
          // endTime: '',
          effectiveDate: '', // 生效日期  即时生效-设置当前时间 有值-指定日期生效
          effectiveYear: '', // 生效时限（年）
          contractState: '', // 合同状态 1-有效 0-无效
          type: '1', // 类型： 1为分公司 2为策划师
          parentId: '' // 父级ID 如果为分公司则为null
        }
    }
  },
  created () {
    this.sendReq({
        url: api.getTreeClass,
        method: 'GET',
        params: {}
      }, (res) => {
        // console.log(res) // 获取地址选择器数据并去除空的子项
        this.options = res.data
        // console.log(this.options)
      })
      this.sendReq({
        url: api.getAdditional, // 套餐购买类型：1-商家，2-策划师 3-分公司
        method: 'GET',
        params: {
          type: 3
        }
      }, (res) => {
        // console.log(res) // 获取地址选择器数据并去除空的子项
        this.setMealData = res.data
        // console.log(this.options)
      })
  },
  methods: {
    submitForm () {
      let phoneReg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
      let emailReg = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
      if (this.plannerForm.phone === '' || !phoneReg.test(this.plannerForm.phone)) {
        Toast.fail('请输入正确的电话号码')
        return false
      }
      if (this.plannerForm.email === '' || !emailReg.test(this.plannerForm.email)) {
        Toast.fail('请输入正确的邮箱')
        return false
      }
      if (this.plannerForm.username === '') {
        Toast.fail('请输入用户名')
        return false
      }
      if (this.plannerForm.name === '') {
        Toast.fail('请输入姓名')
        return false
      }
      if (this.plannerForm.region === '' || this.plannerForm.addres === '') {
        Toast.fail('请选择地区，并填好详细地址')
        return false
      }
      // if (this.plannerForm.effectiveDate === '' || this.plannerForm.effectiveYear === '') {
      //   Toast.fail('请选择生效时间')
      //   return false
      // }
      // if (this.plannerForm.contractState === '') {
      //   Toast.fail('请确认合同是否有效')
      //   return false
      // }
      this.sendReq({
        url: api.subsidiaryCompanyCheck,
        method: 'POST',
        data: this.plannerForm
        }, (res) => {
          console.log(res)
          if (res.code === '200') {
            Toast.success('提交成功')
            this.$router.push({path: '/mStatus'})
          } else {
            Toast.fail(res.message)
          }
      })
    },
    getDataArray (dateArray = []) { // 获取选择的时间区间
      const [start, end] = dateArray
      // 先拿到有多少年的生效时间
      let arr = dateArray.map(item => {
        return formatDate(item).split('-')[0]
      })
      this.plannerForm.effectiveYear = arr[1] - arr[0]

      this.dateValue = `${formatDate(start)} - ${formatDate(end)}` + `             有效期${this.plannerForm.effectiveYear}年`
      this.plannerForm.effectiveDate = `${formatDate(start)} - ${formatDate(end)}`
      // console.log(this.dateValue)
      this.showDate = false
    },
    changeActive (index) { // 切换表单栏
      this.active = index
    },
    onAddresChange ({value, selectedOptions, tabIndex}) { // 选择完地址后转为显示的字符串
    let cacheArray = []
      // console.log(value, selectedOptions, tabIndex)
      // this.isRequestAddres = false
      let addresString = ''
      // eslint-disable-next-line no-unused-vars
      let level = ''
      this.sendReq({
        url: api.getTreeOne,
        method: 'GET',
        params: {
          parentId: value
        }
        }, (res) => {
          if (res.data && res.data.length > 0) {
              selectedOptions[selectedOptions.length - 1].children = res.data
              cacheArray = this.options.map(item => { // 这里重新再赋值一遍是因为这里直接改变数组页面不会动态刷新，所以每次都重新给options赋值，强制刷新
                return item
              })
              this.options = cacheArray
            }
          // this.isRequestAddres = true
        })
      for (let i = 0; i < selectedOptions.length; i++) {
        if (i >= selectedOptions.length - 1) {
          addresString += selectedOptions[i].name
          level = selectedOptions[i].level // 获取最后选择的地址的层级
        } else {
          addresString += selectedOptions[i].name + ' / '
        }
      }
      this.fieldValue = addresString
      // this.sendReq({ // 获取可选择的分公司
      //   url: api.selectAnd,
      //   method: 'POST',
      //   data: {
      //     area: value, // 地区编号
      //     type: 1,
      //     level, // "区级别不能为空"
      //     page: this.queryData.page,
      //     pageSize: this.queryData.size
      //   }
      //   }, (res) => {
      //     this.plannerColumns = res.data.list
      //     console.log(res)
      //   })
    },
    onPlannerConfirm (value) { // 确认选择的公司
      this.companyValue = value.name
      this.plannerForm.parentId = value.platformUserId
      this.showSubCompany = false
    },
    goHome () {
      this.$router.replace({
        path: '/'
      })
    },
    onSetMealChange (value) {
      // console.log(value)
    },
    onSetMealfirm (value) {
      // console.log(value)
      this.setMealValue = value.title
      this.plannerForm.packageId = value.id
      this.showSetMeal = false
    }
  }
}
</script>

<style lang="less" scoped>
.plannerItem {
  display: flex;
  align-items: center;
  .avatar {
    margin-top: -3px;
    width: 30px;
    height: 30px;
  }
  .custom-title {
    margin-top: -5px;
    margin-left: 20px;
  }
}
.header {
  z-index: 1000;
  width: 100%;
  height: 50px;
  background-color: #333;
  color: #fff;
  font-weight: 600;
  text-align: center;
  line-height: 50px;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  .comeback {
    margin-left: 10px;
    width: 30px;
    height: 30px;
  }
  > span {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    // margin-left: 90px;
  }
}
/* 此处使用样式穿透更改vant组件的样式 但是不起作用， 因素很多 包的版本 vant的less样式 问题很多，期待下一位挑战者 */
.subjectInfo {
 /deep/ .van-calendar__day--start {
  background-color: #080707 !important;
}
/deep/ .van-calendar__day--end {
  background-color: #080707 !important;
}
/deep/ .van-calendar__day--middle::after {
  background-color: #3f3f3f86 !important;
}
/deep/ .van-calendar__day--middle {
  color: #080707;
}
/deep/ .van-button--danger {
  background-color: #080707;
  border: 1px solid #080707;
}
}

.mUinitBusiness {
  padding-top: 30px;
  padding-bottom: 60px;
  .topTitle {
    padding: 0 5%;
    h3 {
      /* background-color: #a4a4a41f; */
      font-size: 21px;
      color: #333333;
      margin-bottom: 22px;
    }
    p {
      font-size: 12px;
      color: #676870;
    }
    margin:50px 0 28px 0;
  }
  ::v-deep .el-step__head {
    color: #E9EAEB;
    .el-step__icon {
      background: #FFFFFF;
      width: 50px;
      height: 50px;
      border-radius: 0;
      border: 1px solid #F3F4F5;
    }
  }
  ::v-deep .el-step__head.is-process {
    border-color: #CDCDCD
  }
  ::v-deep .el-step__line {
    background-color: #F3F4F5;
    height: 1px !important;
    top: 50% !important;
    overflow: hidden;
  }
  ::v-deep .is-finish {
    border-color: #C5AA7B;
    color: #FFFFFF;
    font-weight: 500 !important;
    .el-step__icon {
      background: #FFFFFF;
      height: 50px;
      width: 50px;
      color: #C5AA7B;
      border: 1px solid #C5AA7B;
      border-radius: 0;
    }
  }
  ::v-deep .el-step__main {
    .is-finish {
      color: #333333;
    }
  }
  ::v-deep .el-step__title.is-process {
    font-size: 14px;
    color: #999999;
    font-weight: 500;
  }
  ::v-deep .el-step__title.is-wait {
    font-size: 14px;
    color: #676870;
    font-weight: 500;
  }
  ::v-deep .el-step__main {
    .el-step__title {
      font-size: 14px;
    }
    .is-success {
      color: #FFEBC4;
    }
  }
  .mFormBox {
    padding: 0 5%;
    margin-top: 41px;
    .formTit {
      span {
        font-size: 17px;
        font-weight: bold;
        color: #444444;
        line-height: 18px;
        position: relative;
        i {
          background: linear-gradient(267deg, #FF8F25 0%, rgba(254, 179, 24, 0.48) 52%, rgba(255, 255, 255, 0) 100%);
          opacity: 0.7;
          display: block;
          height: 11px;
          width: 100%;
          bottom: -2px;
          position: absolute;
        }
      }
    }
    .form {
      margin-top: 25px;
      .inputItem {
        margin-top: 20px;
        .labelTit {
          display: flex;
          label {
            color: #333333;
            font-weight: 500;
            font-size: 14px;
            i {
              color: #FFEBC4;
              font-size: 15px;
              margin-right: 5px;
            }
          }
        }
        .input {
          width: 100%;
          margin: 10px 0px;
          border-bottom: 1px solid #F6F4F7;
          height: 30px;
          line-height: 30px;
          font-size: 13px;
          color: #666666;
          padding-left: 10px;
          display: flex;
          align-items: center;
        }
        input {
          width: 100%;
          border-bottom: 1px solid #F6F4F7;
          height: 50px;
          line-height: 50px;
          font-size: 13px;
          color: #666666;
          padding-left: 10px;
        }
        input::placeholder {
          color: #999999;
        }
      }
      .arrow {
        position: relative;
        span {
          position: absolute;
          right: 5px;
          top: 30px;
          color: #999999;
        }
      }
      .arrowTime {
        position: relative;
        span {
          position: absolute;
          right: 5px;
          top: 20px;
          color: #999999;
        }
      }
      .describe {
        color: #BBBBBB;
        font-size: 12px;
        margin-top: 10px;
        line-height: 20px;
      }
    }
  }
  .nextBtn {
    display: block;
    margin: 30px auto 0 auto;
    width: 315px;
    height: 42px;
    background: #333333;
    color: #FFEBC4;
  }
  .businessLicense {
    width: 100%;
    background: #F3F4F5;
    margin-top: 10px;
    display: flex;
    .van-uploader {
      margin: 10px auto;
    }
    ::v-deep .van-uploader__preview-image {
      width: 162px;
      height: 135px;
    }
    .updateLicense {
      width: 162px;
      height: 135px;
      .updateTop {
        display: flex;
        justify-content: center;
        height: 110px;
        align-items: center;
        img {
          width: 169px;
          height: 100px;
        }
      }
      .updateBottom {
        width: 162px;
        height: 25px;
        font-size: 13px;
        line-height: 25px;
        color: #999999;
        text-align: center;
      }
    }
  }
}
.preview-cover {
  position: absolute;
  bottom: 0;
  box-sizing: border-box;
  width: 100%;
  padding: 4px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background: rgba(0, 0, 0, 0.3);
}

.centBox {
  > .el-step {
    .el-step:nth-child(1) {
      .el-step__icon-inner {
      }
    }
  }
}
</style>
