<template>
  <div>
    <van-nav-bar title="创建组织" left-text="返回" @click-left="$route_back" left-arrow></van-nav-bar>

    <div class="body_com has_header">
      <!--<scroller>-->
      <div class="body_com_bg"></div>
      <van-cell-group>
        <div class="company_name">企业名称</div>
        <van-field required v-model="formdata.name" name="企业名称" v-validate="'required|min:2'" clearable
                   input-align="left" placeholder="公司名/组织名称" style="letter-spacing: 0.005rem;"></van-field>
        <div class="company_scale">企业规模</div>
        <van-cell required title="人数" :value="formdata.scale" @click="scale_columns_show=true" clickable is-link
                  style="color:#b8b8b8;letter-spacing: 0.005rem;"/>
        <van-cell required title="行业" :value="formdata.industry" @click="industry_columns_show=true" clickable
                  v-show="false"/>

      </van-cell-group>
      <div class="submit_btn_box login_butto">
        <van-button type="info" :disabled="submit_loading" @click="create_company_btn" :loading="submit_loading"  block size="large">创 建</van-button>
      </div>

      <div class="submit_btn_box login_butto">

        <van-button hairline plain v-show="false" type="info" size="small" round block
                    @click="$router.push({name:'scanqr'})">加入已有组织
        </van-button>
      </div>

      <!--</scroller>-->
    </div>
    <van-popup v-model="industry_columns_show" position="bottom">
      <van-picker :columns="industry_columns" @confirm="onIndustryChange" show-toolbar/>
    </van-popup>
    <van-popup v-model="scale_columns_show" position="bottom">
      <van-picker :columns="scale_columns" @confirm="onScaleChange" show-toolbar @cancel="scale_columns_show = false"/>
    </van-popup>
  </div>
</template>

<script>
import Vue from 'vue'
import {setToken} from '@/utils/auth'
import request from '@/utils/request'
import {Picker} from 'vant'

Vue.use(Picker)
export default {
  name: 'create_company',
  data () {
    return {
      submit_loading: false,
      formdata: {
        tel: '',
        employee_name: '',
        name: '',
        industry: '互联网',
        scale: '1-10人'
      },
      industry_columns: ['互联网', '外贸', '加工制造', '教育培训', '餐饮', '酒店旅游', '医疗', '环保', '其它'],
      industry_columns_show: false,
      scale_columns: ['1-10人', '10-50人', '50-200人', '200-500人', '500-1000人', '1000人以上'],
      scale_columns_show: false
    }
  },
  created () {
    document.body.addEventListener('blur', function (e) {
      setTimeout(() => {
        e.target.parentNode.parentNode.parentNode.classList.remove('field-focus')
        self.input_focus = false
      }, 100)
    }, true)
    document.body.addEventListener('focus', function (e) {
      e.target.parentNode.parentNode.parentNode.classList.add('field-focus')
      setTimeout(() => {
        self.input_focus = true
      }, 100)
    }, true)
  },
  methods: {
    get_company_info (id) {
      let self = this
      request('get', '/addons/ems/index/get_company_info', {id: id}).then((res) => {
        if (res.data.code == 1) {
          self.company_info = res.data.data
        } else {
          if (res.data.code == 999) {
            // 没有组织
            self.$router.push({name: 'create_company'})
          }
        }
      })
    },
    company_change () {
      let self = this
      self.submit_loading = true
      request('post', '/api/site/create', self.formdata).then((res) => {
        self.submit_loading = false
        if (res.data.code === 1) {
          // this.$store.dispatch('setBuyPopup', false)
          this.$nextTick(() => {
            self.$router.push({name: 'login_company_list'})
          })
        } else {
          self.$toast(res.data.msg)
        }
      }).finally(e => {
        self.submit_loading = false
      })
    },
    create_company_btn () {
      let self = this
      self.$validator.validate().then(result => {
        if (!result) {
          self.$notify({type: 'danger', message: self.$validator.errors.items[0].msg})
        } else {
          self.company_change()
        }
      })
    },
    login (site_id) {
      let self = this
      request('post', '/api/employee-login', {site_id: site_id}, 'token').then(res => {
        if (res.data.code == 1) {
          setToken(res.data.data.token)
          self.$router.push({name: 'home'})
          // 得到员工的token，把token存好，然后就登录了
        } else {
          self.$toast(res.data.msg)
        }
      })
    },
    onIndustryChange (data) {
      this.formdata.industry = data
      this.industry_columns_show = false
    },
    onScaleChange (data) {
      this.formdata.scale = data
      this.scale_columns_show = false
    }
  }
}
</script>

<style scoped>
  .van-nav-bar__title {
    font-weight: bold;
  }

  .submit_btn_box {
    padding: 0.5rem 0.32rem 0;
  }

  .body_com .van-cell {
    padding: 0.1rem 0.32rem 0.15rem !important;
    margin-bottom: 0.15rem;
    letter-spacing: 0.005rem;
  }

  .body_com .company_name {
    font-size: 0.3rem;
    padding: 0.5rem 0.32rem 0.1rem 0.32rem;
  }

  .body_com .van-cell .login_pwd {
    width: 0.37rem;
    height: 0.37rem;
    color: #b8b8b8;
    margin-top: -0.05rem;
    margin-left: -0.06rem;
    padding-right: 0rem;
    border-right: none;
  }

  .body_com .company_name::before {
    display: none;
    position: absolute;
    left: 2rem;
    color: #f44;
    font-size: 0.3rem;
    content: '*';
  }

  .body_com .company_scale {
    font-size: 0.3rem;
    padding: 0.2rem 0.32rem 0.1rem 0.32rem;
  }

  .body_com .company_scale::before {
    display: none;
    position: absolute;
    left: 2rem;
    color: #f44;
    font-size: 0.3rem;
    content: '*';
  }

  .body_com .company_area {
    font-size: 0.3rem;
    padding: 0.2rem 0.32rem 0.1rem 0.32rem;
  }

  .body_com .van-cell--required::before {
    display: none;
  }

  /deep/ .body_com input {
    font-size: 0.36rem !important;
    color: #1c1c1c;
    letter-spacing: 0.005rem;
  }

  .body_com ::-webkit-input-placeholder {
    font-size: 0.32rem;
    color: #b8b8b8 !important;
    letter-spacing: 0.005rem;
  }

  .body_com input:-ms-input-placeholder {
    font-size: 0.32rem;
    color: #b8b8b8 !important;
    letter-spacing: 0.005rem;
  }

  .body_com ::-moz-input-placeholder {
    font-size: 0.32rem;
    color: #b8b8b8 !important;
    letter-spacing: 0.005rem;
  }

  /* .body_com .field-focus ::-webkit-input-placeholder{
    color:#238cf9 !important;
  }
  .body_com .field-focus:after{
    border-bottom: 0.02rem #238cf9 solid !important;
  } */
  .body_com .van-cell:not(:last-child):after {
    left: 0.32rem;
    right: 0.32rem;
  }

  .body_com .van-button {
    color: #fff;
    height: 1rem;
    line-height: 0.8rem;
    background-color: #238dfa;
    border: 0.02rem solid #238dfa;
    border-radius: 0.04rem;
  }
</style>
