<template>
  <div class="routerWapper">
    <div class="layoutMargin layoutPadding" v-if="$route.name == 'sysInfoSetting'">
      <!-- <a-modal title="资料上传" :visible="logoConfigFormvisible" @ok="handleSubmitLogoConfig" :confirmLoading="confirmLoading" @cancel="logoConfigFormvisible = false" okText="确认" cancelText="取消"> -->
        <a-tabs default-active-key="1">
          <a-tab-pane tab="系统信息" key="1">
            <a-form :form="prjConfigForm">
              <a-form-item label="项目名" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
                <a-input v-decorator="['prjName', { rules: [{ required: true, message: '请输入项目名!' }] }]" />
              </a-form-item>

              <a-form-item label="图片" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
                <img @click="previewVisible = true" :src="logoConfigDatas.previewImage" alt="" width="105" height="105"  >
                <a-upload
                  listType="picture-card"
                  :fileList="fileList"
                  :customRequest="(data) =>{handleUpload(data,fileList)}"
                  @preview="handlePreview"
                  :beforeUpload="beforeUpload"
                  :accept="fileUpload.acceptTypes">
                  <div v-if="fileList.length < 1">
                    <a-icon type="cloud-upload" />
                    <div class="ant-upload-text" style="fontSize:12px">图片仅支持jpg、png、jpeg格式</div>
                  </div>
                </a-upload>
                <a-button @click="delImg">删除图片</a-button>
              </a-form-item>

                <!-- <a-form-item label="项目名" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
                  <a-button @click="delImg">删除图片</a-button>
                </a-form-item> -->
            </a-form>
            <a-row>
              <a-col :span='16'></a-col>
              <a-col :span='8'>
                <a-button type='default' @click="handleSubmitLogoConfig">保存信息</a-button>
              </a-col>
            </a-row>
            <!-- <a-button type='default' @click="handleSubmitLogoConfig">保存信息</a-button> -->
            <a-modal :visible="previewVisible" style="text-align:center" :width="600" :footer="null" @cancel="previewVisible = false">
              <img alt="项目logo" style="width: 80%;height:auto" :src="logoConfigDatas.previewImage" />
            </a-modal>
          </a-tab-pane>
        </a-tabs>  
        <!-- </a-modal> -->
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      isShowChangePwd: false,
      collapsed: false,
      username: '',
      logoConfig: {
        logoName: '',
        logoImg: ''
      },
      logoConfigDatas: {
        isDelImg: false,
        previewImage: '',
        file: ''
      },
      // 模态框
      logoConfigFormvisible: true,
      confirmLoading: false,
      // form
      formLayout: 'horizontal',
      prjConfigForm: this.$form.createForm(this),
      //上传
      previewVisible: false,
      fileList: [],
      fileUpload: {
        acceptTypes: '.jpg,.jpeg,.png',
        acceptTypesArray: ['jpg', 'jpeg', 'png']
      },
      postParams: {},
    }
  },
  created(){ 
    this.getLogo()  
    this.getInfo()
  },
  methods: {
    getInfo() {
      this.$ajax.get({
        url: this.$api.GET_USER_INFO,
      }).then(res => { 
        // 本地存储用户基本信息 

        let userInfo = res.data.content, name
        if(!res.data || !res.data.content){
          userInfo = {}
          name = '' 
        }else{
          userInfo = res.data.content
          name = userInfo.username = res.data.content.name||res.data.content.phone
          this.$store.commit('SET_USERINFO', userInfo)
          this.$cookie.set('userName', name)
          this.$store.commit('SET_USERNAME', name)  
        }

      })
    },
    getLogo(){
      this.$ajax.get({
        url: this.$api.GET_PROJECT,
      }).then(res => {  
        if (res.code==200) {
          const logConfig = this.$com.confirm(res, 'data.content', {})
          this.logoConfig.logoName = !logConfig.prjName?'':logConfig.prjName
          this.logoConfig.logoImg = !logConfig.titleImg?'':logConfig.titleImg
          this.logoConfigDatas.previewImage = this.logoConfig.logoImg
          document.title = this.logoConfig.logoName
          this.showLogoConfigFormModal()
        }
      })
    },
    beforeUpload(file) {
      const fileNameArr = file.name.split('.')
      const fileSuffix = fileNameArr[fileNameArr.length-1].toLowerCase()
      const isAccept = this.$com.oneOf(fileSuffix, this.fileUpload.acceptTypesArray)
      const isLt5M = file.size / 1024 / 1024 < 5
      let message = ''
      if(!isAccept){
        message += !isAccept?('文件格式限定为'+this.fileUpload.acceptTypes+'；'):''
      }
      if(!isLt5M){
        message += !islt200m?'一寸照需小于5M；':''
      }
      if(isAccept && isLt5M){
        return true
      }else{
        this.$modal.error({
          title: '上传文件验证未通过',
          content: message,
          okText: '确认',
          cancelText: '取消',
        })
        return false
      }
    },
    handleUpload(data) {
      const formData = new FormData()
      formData.append('file', data.file)
      data.onProgress()
      this.$ajax.post({
        url: this.$api.UPLOAD_TEMP,
        params: formData
      }).then(res => { 
        if (res.code === '200') {
          const data = this.$com.confirm(res, 'data.content', {})
          this.logoConfigDatas.file = !data.titleImg?'':data.titleImg
          this.logoConfigDatas.previewImage = !data.titleImg?'':data.titleImg
          this.fileList = []
        }
      })
    },
    handlePreview() {
      this.previewVisible = true
    },
    delImg(){
      this.fileList = []
      this.logoConfig.logoImg = ''
      this.logoConfigDatas.previewImage = ''
      this.logoConfigDatas.isDelImg = true
    },
    showLogoConfigFormModal() {
      console.log(this.logoConfig)
      this.logoConfigDatas.isDelImg = false
      this.logoConfigFormvisible = true
      this.$nextTick(function () {
        this.prjConfigForm.setFieldsValue({ prjName: this.logoConfig.logoName})
      })
    },
    handleSubmitLogoConfig() {
      this.prjConfigForm.validateFields((err) => {
        if (!err) {
          const postParams = {
            'file': this.logoConfigDatas.file,
            'prjName': this.prjConfigForm.getFieldValue('prjName'),
            'isDelImg': this.logoConfigDatas.isDelImg,
          }
          this.$ajax.post({
            url: this.$api.POST_PROJECT,
            params: postParams,
            contentType: 'application/x-www-form-urlencoded'
          }).then(res => { 
            if (res.code == '200') {
              this.logoConfigFormvisible = false
              const logConfig = this.$com.confirm(res, 'data.content', {})
              this.logoConfig.logoName = !logConfig.prjName?'':logConfig.prjName
              this.logoConfig.logoImg = !logConfig.titleImg?'':logConfig.titleImg
              this.logoConfigDatas.previewImage = this.logoConfig.logoImg
              document.title = this.logoConfig.logoName
            }else {
              this.$message.error(res.msg)
            }
          })
        }
      })
    },
  },
}
</script>