<!-- 客户信息 -->
<template>
  <div>
    <!-- <el-button @click="backStep" type="primary" icon="el-icon-back">返回</el-button> -->
    <el-card shadow="never"
             class="aui-card--fill">
      <el-row>
        <el-tag type="info"
                class="eltag"
                size="medium"
                style="width:100%;margin-top:10px">客户信息
        </el-tag><br /><br />
        <el-form :inline="false"
                 :model="dataForm.customerInfoDTO"
                 :rules="dataRule"
                 ref="dataForm"
                 :label-width="'120px'">
          <el-form-item label="客户名称"
                        prop="customerName">
            <el-input class="item_width_1"
                      v-model="dataForm.customerInfoDTO.customerName"
                      placeholder="客户名称"></el-input>
          </el-form-item>

          <el-form-item prop="logo"
                        label="Logo">
            <el-upload class="item_width_1 avatar-uploader"
                       :action="uploadUlr"
                       :show-file-list="false"
                       :on-success="handleImgSuccess"
                       :before-upload="beforeImgUpload">
              <img v-if="dataForm.customerInfoDTO.logo"
                   :src="dataForm.customerInfoDTO.logo"
                   style="width:70px;height:70px"
                   class="function-icon">
              <i v-else
                 class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-button size="mini"
                     class="btn_save"
                     type="primary"
                     @click="saveInfo()">保存客户信息</el-button>

        </el-form>
      </el-row>
      <el-row>
        <el-tag type="info"
                class="eltag"
                size="medium"
                style="width:100%;margin-top:10px">根级组织信息
        </el-tag><br /><br />

        <el-form :inline="false"
                 :model="dataForm.rootAgencyDTO"
                 ref="dataForm"
                 :label-width="'120px'">
          <el-form-item class="item_width_1"
                        label="组织名称">
            <span class="item_width_1">{{dataForm.rootAgencyDTO.agencyName}}</span>
          </el-form-item>

          <el-form-item class="item_width_1"
                        label="组织级别">
            <span class="item_width_1">{{dataForm.rootAgencyDTO.level|showInfo}}</span>
          </el-form-item>

          <el-form-item class="item_width_1"
                        label="地区编码">
            <span class="item_width_1">{{dataForm.rootAgencyDTO.areaCode}}</span>
          </el-form-item>
          <el-form-item class="item_width_1"
                        label="所属地区">
            <span class="item_width_1">{{dataForm.rootAgencyDTO.province+dataForm.rootAgencyDTO.city+dataForm.rootAgencyDTO.district}}</span>
          </el-form-item>

        </el-form>
      </el-row>
      <el-row>
        <el-tag type="info"
                class="eltag"
                size="medium"
                style="width:100%;margin-top:10px">跟管理员信息
        </el-tag><br /><br />
        <el-form :inline="false"
                 :model="dataForm.managers[0]"
                 ref="dataForm"
                 :label-width="'120px'">
          <el-form-item class="item_width_1"
                        label="姓名">
            <span>{{dataForm.managers[0].realName}}</span>
          </el-form-item>

          <el-form-item class="item_width_1"
                        label="性别">
            <span>{{dataForm.managers[0].gender|showGender}}</span>
          </el-form-item>

          <el-form-item class="item_width_1"
                        label="电话">
            <span>{{dataForm.managers[0].mobile}}</span>
          </el-form-item>

        </el-form>
      </el-row>
      <!-- <el-row>
        <el-tag type="info"
                class="eltag"
                size="medium"
                style="width:100%;margin-top:10px">配置信息
        </el-tag><br /><br />

        <el-row v-for="(val, index) in data.managers"
                :key="index"
                style="margin:10px;font-size:16px;height:30px;line-height:30px;border-bottom:1px solid grey;"
                :gutter="20">
          <el-col :span="6">{{val.realName}}</el-col>
          <el-col :span="4">{{val.gender|genderName}}</el-col>
          <el-col :span="14">{{val.mobile}}</el-col>
        </el-row>
      </el-row> -->
    </el-card>
  </div>
</template>
<script>
import { Loading } from 'element-ui' // 引入Loading服务

let loading // 加载动画
export default {
  props: {
  },
  data () {
    return {
      customerId: '',
      uploadUlr: window.SITE_CONFIG['apiURL'] + '/oss/file/function/upload',
      dataForm: {
        rootAgencyDTO: {
          agencyName: '成都市',
          level: 'city',
          areaCode: '123456',
          province: '四川省',
          city: '成都市',
          district: 'SN4FHbIZtK',

        },
        customerInfoDTO: {
          customerName: '成都市',
          organizationLevel: 'city',
          logo: ''
        },
        managers: [
          {
            realName: '王显章',
            gender: '1',
            mobile: '18560677960'
          }
        ]
      }
    }

  },
  mounted () {

    this.$nextTick(() => {

      this.customerId = localStorage.getItem('customerId')

      this.loadData()
    })

  },
  methods: {
    //获取客户基本信息
    loadData () {
      this.startLoading()

      // 表单对象
      const url = '/oper/crm/customer/detail'

      let params = {
        customerId: this.customerId,
      }

      window.app.ajax.post(url, params,
        (data, rspMsg) => {
          this.endLoading()
          this.dataForm = data

        },
        (rspMsg, data) => {
          this.endLoading()
          this.$message.error(rspMsg)
        })
    },
    //获取配置信息
    async loadConfigData () {
      // 表单对象
      const url = '/oper/crm/customer/getcustomerparameter'

      let params = {
        customerId: this.customerId,
      }

      window.app.ajax.post(url, params,
        (data, rspMsg) => {
          this.endLoading()
          this.$message.success('修改成功')
          this.diaCancel()
          this.$emit('refresh')
        },
        (rspMsg, data) => {
          this.endLoading()
          this.$message.error(rspMsg)
        })
    },

    saveInfo () {
      // 表单对象
      // let url = 'https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/oper/crm/customer/updatecustomer'
      let url = '/oper/crm/customer/updatecustomer'
      // 表单对象
      let params = {
        customerId: this.customerId,
        customerName: this.dataForm.customerInfoDTO.customerName,
        logo: this.dataForm.customerInfoDTO.logo
      }

      window.app.ajax.post(url, params,
        (data, rspMsg) => {
          this.endLoading()
          this.$message.success('修改成功')
          this.loadData()
        },
        (rspMsg, data) => {
          this.endLoading()
          this.$message.error(rspMsg)
        })

    },

    // 上传大图标成功
    handleImgSuccess (res, file) {
      if (res.code === 0 && res.msg === 'success') {

        this.dataForm.customerInfoDTO.logo = res.data.url

      } else {
        this.$message.error(res.msg)
      }
    },

    beforeImgUpload (file) {
      // const isPNG = file.type === 'image/png'
      const isLt1M = file.size / 1024 / 1024 < 1

      // if (!isPNG) {
      //   this.$message.error('上传图片只能是 PNG 格式!')
      // }
      if (!isLt1M) {
        this.$message.error('上传图片大小不能超过 1MB!')
      }
      // return isPNG && isLt1M
      return isLt1M
    },
    // 开启加载动画
    startLoading () {
      loading = Loading.service({
        lock: true, // 是否锁定
        text: '正在加载……', // 加载中需要显示的文字
        background: 'rgba(0,0,0,.7)' // 背景颜色
      })
    },
    // 结束加载动画
    endLoading () {
      // clearTimeout(timer);
      if (loading) {
        loading.close()
      }
    }
  },
  computed: {

    dataRule () {
      return {
        logo: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        customerName: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ]
      }
    }
  },
  filters: {

    showInfo (key) {
      if (key === 'province') {
        return '省级'
      } else if (key === 'city') {
        return '市级'
      } else if (key === 'district') {
        return '区县级'
      } else if (key === 'street') {
        return '乡（镇、街道）级'
      } else if (key === 'community') {
        return '社区级'
      } else if (key === '') {
        return '————'
      } else {
        return key
      }
    },
    showGender (key) {
      if (key === '1') {
        return '女'
      } else if (key === '0') {
        return '男'
      } else {
        return key
      }
    }
  }

}
</script>
<style scoped>
.item_width_1 {
  width: 300px;
}
.btn_save {
  margin: 0 50px;
}
</style>