<template>
  <div>
    <el-row :gutter="24" class="index-admin">
      <el-col :xs="24" :sm="24" :lg="16" class="index-admin-left">
        <div class="grid-content bg-purple">
          <component :is="currentTubiao"/>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8" class="index-admin-right">
        <div class="grid-content bg-purple-light">

        </div>
      </el-col>


      <div style="clear: both;"></div>

      <el-col :xs="24" :sm="24" :lg="7">
        <div class="bg-purple">

        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="grid-content bg-purple">

        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="9">
        <div class="grid-content bg-purple">

        </div>
      </el-col>
    </el-row>


    <!-- 修改个人资料和密码 -->


    <el-dialog title="修改个人资料" :visible.sync="(dialogProfileVisible)" :show-close="enabled_close" width="800px"
               @open="loadEmployeeDetail" :close-on-click-modal="false" append-to-body>


      <el-tabs v-model="ProfileActiveName">
        <el-tab-pane label="个人资料" name="first">


        </el-tab-pane>
        <el-tab-pane label="修改头像" name="second">


        </el-tab-pane>
        <el-tab-pane label="修改密码" name="third">

        </el-tab-pane>

      </el-tabs>


      <span v-show="ProfileActiveName == 'first'" slot="footer" class="dialog-footer">

    <el-button @click="dialogProfileVisible = false" :disabled="click_close">取 消</el-button>
    <el-button type="primary" @click="EditInformationSend">确 定</el-button>
  </span>
      <span v-show="ProfileActiveName == 'third'" slot="footer" class="dialog-footer">
    <el-button @click="dialogProfileVisible = false" :disabled="click_close">取 消</el-button>
    <el-button type="primary" @click="submitPasswordForm">确 定</el-button>
  </span>

    </el-dialog>


    <el-dialog title="完善资料" :visible.sync="(dialogProfileVisibleinit)" :show-close="false" width="450px" :close-on-click-modal="false" append-to-body>


      <el-form :model="compnayInfoForm" :rules="rules" ref="compnayInfoForm" label-width="70px" class="demo-ruleForm" style="padding:0 30px;">
        <el-form-item label="姓　名" prop="contacts">
          <el-input v-model="compnayInfoForm.contacts"></el-input>
        </el-form-item>
        <el-form-item label="公司名" prop="name">
          <el-input v-model="compnayInfoForm.name"></el-input>
        </el-form-item>

      </el-form>


      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="sendInfomaitionData" :loading="send_site_info_loading">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>


<script>
  import tubiao from '@/views/dashboard/components/tubiao'

  import anniu from '@/views/dashboard/components/anniu'

  import jclb from '@/views/dashboard/components/jclb'
  import dashboarde from '@/views/dashboard/components/dashboarde'

  import EmployeeProfile from '@/views/integral/EmployeeProfile'
  import EmployeePwd from '@/views/integral/EmployeePwd'
  import avatarUpload from '@/views/integral/avatarUpload'
  import qs from 'qs'
  export default {
    components: {
      tubiao,

      anniu,

      jclb,
      dashboarde,

      EmployeeProfile,
      EmployeePwd,
      avatarUpload
    },
    data() {
      return {
        dialogProfileVisibleinit:false,
        compnayInfoForm:{
          name:'',
          contacts:'',
        },
        send_site_info_loading:false,
        enabled_close: false,
        ProfileActiveName: 'first',
        dialogProfileVisible: false,
        currentTubiao: 'tubiao',
        activeName2: 'first',
        click_close: false,

        rules:{
          name: [
            { required: true, message: '请输入公司名称', trigger: 'blur' },
            { min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'blur' }
          ],
          contacts: [
            { required: true, message: '请输入姓名', trigger: 'blur' },
            { min: 2, max: 7, message: '长度在 2 到 7 个字符', trigger: 'blur' }
          ]
        }

      };
    },
    methods: {

      sendInfomaitionData(){
        console.log('333')
        var form = this.$refs['compnayInfoForm']
        var self = this

        form.validate((valid) => {
          if (valid) {
            self.send_site_info_loading = true
            if (form) {
              this.$http('post','/integral.php/ajax_request_common/sys_init_info',qs.stringify({row:self.compnayInfoForm}),
              //   headers: {
              //     'Content-Type': 'application/x-www-form-urlencoded'
              //   }
              // }
              ).then((ret)=>{

                self.send_site_info_loading = false

                if(ret.status != '200'){
                  self.$message({
                    message: '网络错误',
                    type: 'error'
                  })
                }else{
                  if(ret.data.code == 1){

                    form.clearValidate()

                    self.$message({
                      message: ret.data.msg,
                      type: 'success'
                    })
                    self.$store.getters.user_info.name = self.compnayInfoForm.contacts
                    self.$store.getters.user_info.company_info.name = self.compnayInfoForm.name
                    self.dialogProfileVisibleinit = false
                  }else{
                    self.$message({
                      message: ret.data.msg,
                      type: 'error'
                    })
                  }
                }


              })
            }
          } else {
            return false
          }
        })
      },

      loadEmployeeDetail() {
        const self = this
        this.$nextTick(() => {
          self.$refs['EditInformation'].loadEmployeeDetail(self.$store.getters.user_info.id)
        })

        if (this.$store.getters.user_info.name == '') {
          this.click_close = true
        } else {
          this.click_close = false
        }
      },
      EditInformationSend() {
        this.$refs['EditInformation'].submitForm('detailForm')
      },
      submitPasswordForm() {
        this.$refs['submitPasswordFormCom'].submitPasswordForm('passwordForm')
      },


      handleClick(tab, event) {
        // console.log(tab, event);
      }
    },
    created() {
      /*this.$nextTick(()=>{
        this.$intro().setOptions({'prevLabel':'&larr; 上一步','nextLabel':'下一步 &rarr;','skipLabel':'跳过'}).start();
      })*/

      if (this.$store.getters.user_info.name == '创始人') {
        this.dialogProfileVisibleinit = true
        //设置的第一步，是完善当前的账号信息
        /*this.click_close = true
        this.dialogProfileVisible = true
        this.loadEmployeeDetail()*/
      } else {
        this.click_close = false
      }
      if (this.$store.getters.user_info.manager_type == 4) {
        this.currentTubiao = 'tubiaoAdmin'
      } else if (this.$store.getters.user_info.manager_type == 0) {
        this.currentTubiao = 'tubiaoEmployee'
      }
    }
  };
</script>


<style>

  @media screen and (max-width: 1366px) {
    .index-admin-right {
      width: 100%;
    }

    .index-admin-left {
      width: 100%;
    }

    .index-admin-right .el-col-lg-8 {
      width: 16.66667%;
    }
  }

  @media screen and (max-width: 960px) {
    .card-panel-right {
      width: 100%;
    }

    .card-panel-left {
      width: 100%;
    }
  }

  .index-admin .el-tabs {
    background-color: #fff;
  }

  .el-tabs__item {

    height: 50px;
    line-height: 50px;

  }

  .el-tabs__item {
    font-size: 16px;
  }

  .el-row {
    padding: 0;

  &
  :last-child {
    margin-bottom: 0;
  }

  }
  .el-col {
    margin-bottom: 10px;
  }

  .index-admin .el-tabs__header {
    padding: 0;
    position: relative;
    margin: 0 0 15px !important;
  }
</style>
