<template>
  <div>
    <van-nav-bar :title="this.title" left-text="返回" @click-left="$route_back" left-arrow></van-nav-bar>
    <!--  right-text="保存" @click-right="save_btn"  -->
    <div class="body_com has_header">
      <scroller>
        <van-cell-group>
          <van-cell title="公司LOGO" is-link class="company_info">
            <template slot="default">
              <img :src="user_info.company_info.logo_url?user_info.company_info.logo_url:'static/images/default_company_logo.png'" class="needsclick company_img" @click.stop="select_img" />
            </template>
          </van-cell>
        </van-cell-group>
        <van-cell-group class="company_name">
          <van-cell title="公司名称" is-link :value="user_info.company_info.name" @click="showPopup" />
          <!-- <van-cell title="行业" is-link :value="" @click="" /> -->
          <!-- <van-cell title="联系电话" is-link :value="" @click="" /> -->
          <!-- <van-cell title="联系人" is-link :value="" @click="" /> -->
          <!-- <van-cell title="公司地址" is-link :value="" @click="" /> -->
          <!-- <van-cell title="企业规模" is-link :value="" @click="" /> -->
        </van-cell-group>
      </scroller>
      <vue-img-cropper
        ref="cropper"
        :height="400"
        :width="400"
        :maxScale="6"
        :compressionRatio="0.5"
        @cutImg="showCutImg"
        @showLoading="showLoading"
        @hideLoading="hideLoading"
        @showError="showError">
      </vue-img-cropper>

      <van-dialog v-model="show" title="修改公司名称" class="edit_com_popup" show-cancel-button @confirm="save_btn">
        <van-cell-group>
          <input type="text" class="edit_com_input" ref="input" v-model="edit_com_name" name="公司名称" v-validate="'required'" placeholder="请填写公司名称" style=" box-sizing: border-box; width: 100%;">
        </van-cell-group>
      </van-dialog>
    </div>
  </div>
</template>

<script>
import request from '@/utils/request'
import Vue from 'vue'
import VueImgCropper from '@/components/common/vue-img-cropper'
import { Notify, Image } from 'vant'
Vue.use(Notify).use(Image)
export default {
  // 状态
  data () {
    return {
      title: '公司信息',
      show: false,
      action_sheet_show: false,
      actions: [
        { name: '选项', color: '#07c160' },
        { name: '禁用选项', disabled: true }
      ],
      company_info: this.$store.getters.user_info.company_info,
      user_info: this.$store.getters.user_info,
      click_count: 0,
      edit_com_name: ''
    }
  },
  // 组件
  components: {
    VueImgCropper
  },
  // 方法
  methods: {
    select_img () {
      let self = this
      if (this.click_count == 0) {
        self.$refs.cropper.getImg()
        setTimeout(function () {
          self.click_count = 0
        }, 20)
      }
    },
    showCutImg (d) {
      let self = this
      self.$toast.loading({
        mask: true,
        message: '正在处理'
      })
      self.company_info.logo_url = d.url
      request('post','/api/site/update',self.company_info).then((res) => {
        localStorage.setItem('company_info', JSON.stringify(self.company_info))
        self.$keep_alive_update('company_info', self.company_info)
      })
    },
    showLoading () {
      this.$toast.loading({
        mask: true,
        message: '正在处理'
      })
    },
    hideLoading () {
      this.$toast.clear()
    },
    showError (d) {},
    // 获取部门列表
    get_department_list () {
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true
      })
      request('get','/api/department/tree').then((res) => {
        if (res.data.code == 1) {
          this.company_info = res.data.data.company
          localStorage.setItem('company_info', JSON.stringify(res.data.data.company))
          this.$toast.clear()
        } else {
          this.$toast(res.data.msg)
        }
      }).catch((e) => {

      })
    },
    // 保存
    save_btn () {
      let self = this
      self.$validator.validate().then(result => {
        if (!result) {
          Notify({ type: 'danger', message: self.$validator.errors.items[0].msg })
        } else {
          self.showLoading()
          self.company_info.name = self.edit_com_name
          request('post','/api/site/update', self.company_info).then((res) => {
            self.company_info = res.data.data
            localStorage.setItem('company_info', JSON.stringify(self.company_info))
            // this.$keep_alive_update('company_info', self.company_info)
            this.$store.dispatch('get_employee_map', true).then(res => {})
            self.$toast.clear()
            self.$toast('修改成功')
          })
        }
      })
    },
    // 弹窗
    showPopup () {
      let self = this
      self.edit_com_name = self.company_info.name
      self.show = true
      self.$nextTick(() => {
        self.$refs.input.focus()
      })
    }
  },
}
</script>

<style scoped>
  .body_com {
    height: calc(100% - 1rem);
    position: relative;
  }
  .company_img{
    width: 1.28rem;
    height: 1.28rem;
    border-radius: 0.1rem;
  }
  .company_info .van-cell__title,.company_info .van-icon {line-height: 1.42rem;}
  .com_name_popup{
    width: 50vw;
    height: auto;
  }
  .edit_com_popup{
    top: 3rem
  }
  /deep/.edit_com_popup .van-dialog__content{
    padding: 0.2rem;
  }
  .edit_com_input{
    border: 0.02rem solid #efefef;
    border-radius: 0.1rem;
    padding: 0.2rem 0.14rem;
    margin-bottom: 0.2rem;
    width: 100%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
  }
  .company_name .van-cell{
    padding: 0.24rem 0.32rem;
  }
  .company_name .van-cell__value{
    width: 50%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  /deep/ .van-hairline--top-bottom:after, .van-hairline-unset--top-bottom:after{
    border:none;
  }
  /deep/ .van-cell{
    padding: 0.15rem 0.32rem;
  }
  /deep/ .van-cell .van-cell__value{
    font-size:0.28rem;
  }
</style>
