<template>
  <div class="right-wrap">
    <topNav :navpath="navpath"></topNav>
    <div class="right-content">
      <div class="right-box">
        <div class="attention-wrap">
        <div class="group-contain">
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="110px" class="demo-ruleForm">
            <el-form-item label="集团名称" prop="cliqueName">
              <el-input v-model="ruleForm.cliqueName" @focus="focus('cliqueName',10)" @keyup.native="(value) => toInput(value)">
              <!-- <template slot="append"><label class="input-label">{{inputNumObj.cliqueName}}/10</label></template> -->
              </el-input>
              <label class="input-label">{{inputNumObj.cliqueName}}/10</label>
            </el-form-item>
            <el-form-item label="公司名称" prop="enterpriseName">
              <el-input v-model="ruleForm.enterpriseName"  @focus="focus('enterpriseName',20)" @keyup.native="(value) => toInput(value)">
                <!-- <template slot="append"><label class="input-label">{{inputNumObj.enterpriseName}}/20</label></template> -->
              </el-input>
              <label class="input-label">{{inputNumObj.enterpriseName}}/20</label>
            </el-form-item>
            <el-form-item label="所在地区" prop="region" class="city-area">
             <vue-area-ab :projectName="projectName" :areaOptions="areaOptions" @selected="selected"></vue-area-ab>
            </el-form-item>
            <el-form-item label="详细地址" prop="addressDetail">
              <el-input v-model="ruleForm.addressDetail" @focus="focus('addressDetail',50)" @keyup.native="(value) => toInput(value)">
                 <!-- <template slot="append"><label class="input-label">{{inputNumObj.addressDetail}}/50</label></template> -->
              </el-input>
              <label class="input-label">{{inputNumObj.addressDetail}}/50</label>
            </el-form-item>
            <el-form-item label="集团logo" prop="qcloudImageUrl">
              <div>

                <!-- <img src="" alt=""> -->
                <el-upload
                  class="avatar-uploader"
                  :action="uploadUrl()"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload">
                  <img v-if="ruleForm.qcloudImageUrl" :src="ruleForm.qcloudImageUrl" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                <p class="upload-tip">请上传750*750，大小不超过1Mb的图片</p>
              </div>
            </el-form-item>
            <el-form-item label="关联商户">
              <div class="link-shop">
               <!--  <a v-for="(item,index) in ruleForm.enterpriseList">
                  <img :src="item.qcloudImageUrl" alt=""/>
                  <span>{{item.enterpriseName}}</span>
                </a> -->
                <template v-for="(item,index) in ruleForm.enterpriseList">
                  <router-link tag="a"  target="_blank" :to="{path:'/login',query:{enterpriseId: item.enterpriseId}}" >
                    <img :src="item.qcloudImageUrl" alt=""/>
                    <span>{{item.enterpriseName}}</span>
                  </router-link>
                </template>

              </div>
            </el-form-item>
            <el-form-item label="营业时间模板" prop="storeBusinessTime">
              <!-- <el-time-select
                v-model="ruleForm.date1"
                :picker-options="{
                  start: '00:00',
                  step: '00:15',
                  end: '23:55'
                }"
                placeholder="选择时间">
              </el-time-select>至
              <el-time-select
                v-model="ruleForm.date2"
                :picker-options="{
                  start: '08:30',
                  step: '00:15',
                  end: '18:30'
                }"
                placeholder="选择时间">
              </el-time-select> -->
              <el-time-picker
                is-range
                v-model="ruleForm.storeBusinessTime"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                placeholder="选择时间范围" format="HH:mm">
              </el-time-picker>
            </el-form-item>
            <el-form-item label="客服热线" prop="customerPhone">
              <el-input v-model="ruleForm.customerPhone" @focus="focus('customerPhone',30)" @keyup.native="(value) => toInput(value)">
                 <!-- <template slot="append"><label class="input-label">{{inputNumObj.customerPhone}}/30</label></template> -->
              </el-input>
              <label class="input-label">{{inputNumObj.customerPhone}}/30</label>
            </el-form-item>
            <el-form-item label="集团简介" prop="enterpriseDescription">
              <el-input type="textarea" v-model="ruleForm.enterpriseDescription" style="height: 96px;" @focus="focus('enterpriseDescription',200)" @keyup.native="(value) => toInput(value)">

              </el-input>
               <template><label class="input-label textarea-label">{{inputNumObj.enterpriseDescription}}/200</label></template>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
            </el-form-item>
          </el-form>

        </div>

        </div>
      </div>
    </div>
    <vue-gic-footer></vue-gic-footer>
  </div>
</template>
<script>
import showMsg from '@/common/js/showmsg';
import errMsg  from '@/common/js/error';
import strLength from '@/common/js/strlen';
import newTime from '@/common/js/timeFormat';
import topNav from 'components/nav/nav'
import { getRequest } from '@/api/api';
import qs from 'qs'

export default {
  name: "public_num_attention",
  data() {
    return {
      projectName:  'gic-clique', // 当前项目名
      areaOptions: {
        provinceName: '',
        provinceId: '',
        cityName: '',
        cityId: '',
        countryName: '',
        countyId: ''
      },
      navpath: [{
          name: '首页',
          path: '/'
        },
        {
          name: '集团信息',
          path: ''
        }
      ],

      upUrl: '',// 上传地址



      ruleForm: {
        cliqueName: '',
        enterpriseName: '',
        region: '',
        addressDetail: '',
        qcloudImageUrl: '',
        enterpriseList:[
          {
            enterpriseId: '',
            enterpriseName: '达摩',
            qcloudImageUrl: '/',
          },

        ],
        storeBusinessTime: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
        date1: '',
        date2: '',
        customerPhone: '',
        enterpriseDescription: ''
      },
      rules: {
        cliqueName: [
          { required: true, message: '请输入集团名称', trigger: 'blur' },
        ],
        enterpriseName: [
          { required: true, message: '请输入公司名称', trigger: 'blur' },
        ],
        region: [
          { required: true, message: '请选择所在地区', trigger: 'blur' }
        ],
        addressDetail: [
          { required: true, message: '请输入详细地址', trigger: 'change' }
        ],
        storeBusinessTime: [
          { required: true, message: '请选择营业时间', trigger: 'change' }
        ],
        date1: [
          { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
        ],
        date2: [
          { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
        ],

        customerPhone: [
          { required: true, message: '请输入客服热线', trigger: 'change' }
        ],
        enterpriseDescription: [
          { required: true, message: '请输入集团简介', trigger: 'blur' }
        ]
      },

      inputNumObj: {//输入字数
        cliqueName: 0,
        enterpriseName: 0,
        addressDetail: 0,
        customerPhone: 0,
        enterpriseDescription: 0

      },
      // 记录输入的
      inputFlag: '',
      inputFlagNum: '',

      baseUrl: '', // 域名
    }
  },
  beforeMount() {
    var that = this
    var host = window.location.origin;
    console.log("当前host:",host)
    if (host.indexOf('localhost') != '-1') {
      that.baseUrl = 'http://gicdev.demogic.com';
    }else {
      that.baseUrl = host
    }

    that.upUrl = that.baseUrl + '/api-plug/upload-img?wxFlag=1'
  },
  created() {
    // this.selectReplayStyle()
    console.log("created")

  },
  mounted() {
    var that = this;
    console.log("mounted")
    that.getGroupInfo();
  },

  methods: {

    uploadUrl() {
      var that = this
      var host = window.location.origin;
      var baseUrl;
      console.log("当前host:",host)
      if (host.indexOf('localhost') != '-1') {
        baseUrl = 'http://gicdev.demogic.com';
      }else {
        baseUrl = host
      }

      that.upUrl = baseUrl + '/api-plug/upload-img?wxFlag=1&requestProject=gic-clique'
      console.log(that.upUrl)
      return that.upUrl
    },

    changeRoute(route) {
      var that= this
      that.$router.push(route);
    },

    // 保存
    submitForm(formName) {
      var that= this
      that.$refs[formName].validate((valid) => {
        if (valid) {

          var newFormData = JSON.parse(JSON.stringify(that.ruleForm))
          console.log(newFormData)
          newFormData.storeBusinessTime = newTime.dateToTime(newFormData.storeBusinessTime)
          // 发送的数据
          console.log(newFormData.storeBusinessTime)
          // 保存方法
          that.saveGroupInfo(newFormData)

        } else {
          console.log('error submit!!');
          that.$message.error({
            duration: 1000,
            message: "请填写完信息"
          })
          return false;
        }
      });
    },

    // 上传
    handleAvatarSuccess(res, file) {
      var that = this

      console.log("上传成功回调:",res)
      if (res.errorCode == 0) {
        that.ruleForm.qcloudImageUrl =  res.result[0].qcloudImageUrl;//URL.createObjectURL(file.raw);
        that.ruleForm.imageFiledCode = res.result[0].imageFiledCode;
        that.ruleForm.imageUrl = res.result[0].wxImg;
      }else {
        errMsg.errorMsg(res)
      }

    },
    beforeAvatarUpload(file) {
      var that = this
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        that.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        that.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M && new Promise(function(resolve, reject) {
        let reader = new FileReader();
        reader.onload = function(event) {
          let image = new Image();
          image.onload = function () {
            let width = this.width;
            let height = this.height;
            console.log(width,height)

            if (width !== 750 && height !== 750){
              that.$message.error('图片尺寸必须为750px*750px!');
              reject();
            }

            resolve();
          };
          image.src = event.target.result;
          console.log("上传成功:",event.target.result)
        };
        reader.readAsDataURL(file);
      })
    },

    focus(name,num) {
      var that = this
      console.log(name,num)
      that.inputFlag = name;
      that.inputFlagNum = num;
    },

    // 输入
    toInput: function(value) {
      var that = this;
      console.log(value)

      var temp = '';
      var temp = strLength.getByteVal(value.target.value,that.inputFlagNum)
      console.log(temp)
      that.ruleForm[that.inputFlag] = temp.trim()

      that.inputNumObj[that.inputFlag] = strLength.getZhLen(that.ruleForm[that.inputFlag]);

      console.log(that.ruleForm[that.inputFlag])
    },

    // 省市县选择
    selected(val) {
      console.log(val)
      var that = this
      if (!!val.country) {
        that.ruleForm.region = val;
        console.log(val.areaId)
        that.ruleForm.areaId = val.areaId
      }else {
        that.ruleForm.region = ''
      }
    },
    // 保存集团信息
    saveGroupInfo(form) {
      var that = this
      var para = {

        requestProject: that.projectName,
        cliqueName: form.cliqueName,
        enterpriseName: form.enterpriseName,
        brandName: form.brandName,
        addressDetail: form.addressDetail,
        imageUrl: form.imageUrl,
        imageFieldCode: form.imageFieldCode,
        qcloudImageUrl: form.qcloudImageUrl,
        storeBusinessTime: form.storeBusinessTime,
        customerPhone: form.customerPhone,
        enterpriseDescription: form.enterpriseDescription,
        areaId: form.areaId,
      }

      getRequest('/api-admin/save-enterprise-info',para)
      .then((res) => {
        // console.log(res,res.data,res.data.errorCode)
        var resData = res.data
        if (resData.errorCode == 0) {
          showMsg.showmsg('保存成功','success')
          return;
        }
        // that.userFormVisible = false;
        errMsg.errorMsg(resData)

      })
      .catch(function (error) {
        console.log(error);
        // that.toLogin()
        // that.userFormVisible = false;
        that.$message.error({
          duration: 1000,
          message: error.message
        })
      });
    },

    // 跳转商户
    redirect(e,enterpriseId){
      var that = this
      var para = {
        eid: enterpriseId
      }
      getRequest('/api-auth/do-login-for-clique',para)
      .then((res) => {
        // console.log(res,res.data,res.data.errorCode)
        var resData = res.data
        if (resData.errorCode == 0) {

          var href = that.baseUrl + ''
          window.open(href, '_blank','toolbar=yes, width=1300, height=900');
          return;
        }
        // that.userFormVisible = false;
        errMsg.errorMsg(resData)

      })
      .catch(function (error) {
        console.log(error);
        // that.toLogin()
        // that.userFormVisible = false;
        that.$message.error({
          duration: 1000,
          message: error.message
        })
      });
    },

    // 获取集团信息
    getGroupInfo() {
      var that = this
      var para = {
        requestProject: that.projectName
      }

      getRequest('/api-admin/enterprise-info',para)
      .then((res) => {
        // console.log(res,res.data,res.data.errorCode)
        var resData = res.data
        if (resData.errorCode == 0) {
          // 设置省市县
          var newEnterprise = resData.result.enterprise
          // that.setArea(JSON.parse(JSON.stringify(newEnterprise)));
          //
          console.log(resData.result.enterprise)
          newEnterprise.region = {};
          newEnterprise.region.areaId = newEnterprise.areaId;
          newEnterprise.region.provinceId = newEnterprise.province;
          newEnterprise.region.provinceName = newEnterprise.provinceName;
          newEnterprise.region.cityId = newEnterprise.city;
          newEnterprise.region.cityName = newEnterprise.cityName;
          newEnterprise.region.countyId = newEnterprise.country;
          newEnterprise.region.countryName = newEnterprise.countryName;

          that.areaOptionsNew = {}
          that.areaOptionsNew.provinceName = newEnterprise.provinceName;    // 默认的省市区传值
          that.areaOptionsNew.provinceId = newEnterprise.province;
          that.areaOptionsNew.cityName = newEnterprise.cityName;
          that.areaOptionsNew.cityId = newEnterprise.city;
          that.areaOptionsNew.countryName = newEnterprise.countryName;
          that.areaOptionsNew.countyId = newEnterprise.country;
          var obj = JSON.stringify(that.areaOptionsNew);  // 深拷贝
          that.areaOptions = JSON.parse(obj);
          // that.areaOptions = JSON.parse(JSON.stringify(newEnterprise.region))
          // 时间
          if (!!newEnterprise.storeBusinessTime) {
            newEnterprise.storeBusinessTime = newTime.timeToDate(newEnterprise.storeBusinessTime)
          }


          // 长度
          if (!!newEnterprise.cliqueName) {
            that.inputNumObj.cliqueName = strLength.getZhLen(newEnterprise.cliqueName)
          }
          if (!!newEnterprise.enterpriseName) {
            that.inputNumObj.enterpriseName = strLength.getZhLen(newEnterprise.enterpriseName)
          }

          if (!!newEnterprise.addressDetail) {
            that.inputNumObj.addressDetail = strLength.getZhLen(newEnterprise.addressDetail)
          }

          if (!!newEnterprise.customerPhone) {
            that.inputNumObj.customerPhone = strLength.getZhLen(newEnterprise.customerPhone)
          }

          if (!!newEnterprise.enterpriseDescription) {
            that.inputNumObj.enterpriseDescription = strLength.getZhLen(newEnterprise.enterpriseDescription)
          }



          that.ruleForm = newEnterprise;

          that.ruleForm.enterpriseList = resData.result.enterpriseList


          console.log(that.ruleForm)
          return;
        }
        // that.userFormVisible = false;
        errMsg.errorMsg(resData)

      })
      .catch(function (error) {
        console.log(error);
        // that.toLogin()
        // that.userFormVisible = false;
        that.$message.error({
          duration: 1000,
          message: error.message
        })
      });
    },

    setArea(obj) {
      var that = this
      console.log(obj)
      that.areaOptions.areaId = obj.areaId;
      that.areaOptions.provinceId = obj.province;
      that.areaOptions.provinceName = obj.provinceName;
      that.areaOptions.cityId = obj.city;
      that.areaOptions.cityName = obj.cityName;
      that.areaOptions.countyId = obj.country;
      that.areaOptions.countryName = obj.countryName;
      console.log(that.areaOptions)
    },
   login() {
      var that = this
      getRequest('/api-auth/do-login?loginName=damo123&password=123456&eid=ff80808162ddfe1a0162e0ebd39c0000',)
      .then((res) => {
        // console.log(res,res.data,res.data.errorCode)
        var resData = res.data
        if (resData.errorCode == 0) {

        }
      })
    }
  },
  watch: {

  },
  beforeMount:function(){
    var that = this;
    // that.login()
    console.log("mounted")
    // that.getGroupInfo();
  },

  updated : function(){
    console.log("updated")
    var that = this;
  },
  components: {
    topNav
  },

}

</script>
<style lang="scss" scoped>

.attention-wrap {

  padding: 24px 32px;
  background: #fff;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  .item-label {
    font-size: 14px;
    color: #606266;
    margin-bottom: 30px;
    span {
      display: inline-block;
      width: 80px;
    }
  }
  .attention-content-wrap {}
  /deep/ .el-form-item__label{
    padding: 0 12px 0 0;
  }

  /deep/ .el-form {
    .el-form-item:last-child {
      /*margin-bottom: 0;*/
    }

    .el-form-item__content {
      width: 700px;
    }

    .city-area {
      /deep/ .w-160 {
        width: 228px;
        &+.w-160 {
          /*margin-left: 6px;*/
        }
      }
    }
  }
}

.group-contain {

  .el-input {
    width: 700px;
    &.el-date-editor {
      width: 300px;
    }
  }

  .el-textarea {
    width: 700px;
    /*height: 300px;*/

    /deep/ .el-textarea__inner {
      resize: none;
      height: 96px;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }
  }

  /deep/ .input-label {
    position: absolute;
    right: 10px;
    top: 2px;
    color: #909399;
    font-size: 12px;
  }

  .textarea-label {
    position: absolute;
    right: 10px;
    top: 90px;
    color: #909399;
  }

  .upload-tip {
    color: #909399;
    font-size: 12px;
    line-height: 12px;
  }

  .avatar-uploader  {
    /deep/ .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
  }
  .avatar-uploader .el-upload:hover {
    border-color: #1890ff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
  .avatar {
    width: 100px;
    height: 100px;
    display: block;
  }

  .link-shop {
    width: 800px;
    font-size: 0;
    a {

      display: inline-block;
      width: 250px;
      border: 1px solid #e3e5e9;
      border-radius: 2px;
      padding: 10px 15px;
      margin-right: 16px;
      margin-bottom: 10px;
      color: #333;
      font-size: 14px;
      cursor: pointer;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      &+a {
        /*margin-left: 10px;*/
      }
    }
    img {
      display: inline-block;
      vertical-align: middle;
      width: 60px;
      height: 60px;
    }
    span {
      display: inline-block;
      vertical-align: middle;
    }
  }

  .el-form-item.is-success /deep/ .el-input__inner, .el-form-item.is-success /deep/ .el-input__inner:focus, .el-form-item.is-success /deep/ .el-textarea__inner, .el-form-item.is-success /deep/ .el-textarea__inner:focus {
    border-color: #dcdfe6;
  }
}

</style>
