<template>
  <div class="page-header-index-wide">
    <a-card :bordered="false" :bodyStyle="{ padding: '16px 0', height: '100%' }" :style="{ height: '100%' }">
      <div class="account-settings-info-main" :class="device">
        <div class="account-settings-info-left">
          <a-menu
            :mode="device == 'mobile' ? 'horizontal' : 'inline'"
            :style="{ border: '0', width: device == 'mobile' ? '560px' : 'auto' }"
            :default-selected-keys="['1']"
            :selectedKeys="selectedKey"
            @click="changemenu"
            type="inner"
          >
            <a-menu-item key="1"> 小程序配置 </a-menu-item>
          </a-menu>
        </div>
        <div class="account-settings-info-right">
          <div class="account-settings-info-view">
            <a-spin :spinning="confirmLoading">
              <a-row :gutter="16" v-if="selectedKey[0] === '1'">
                <a-col :md="24" :lg="16">
                  <a-form layout="vertical" :form="form">
                    <a-form-item label="小程序名称">
                      <a-input
                        placeholder="请输入小程序名称"
                        v-decorator="[
                          'appname',
                          {
                            validateFirst: true,
                            rules: [
                              { required: true, message: '请输入小程序名称' },
                              { max: 50, message: '名称最多50个字' }
                            ]
                          }
                        ]"
                      />
                    </a-form-item>
                    <a-form-item label="公众号二维码" has-feedback>
                      <a-upload
                        name="file"
                        list-type="picture-card"
                        class="avatar-uploader"
                        :show-upload-list="false"
                        v-decorator="[
                          'officialqrcode',
                          {
                            validateFirst: true,
                            rules: [
                              { required: true, message: '请上传公众号二维码' },
                              { max: 200, message: '二维码最多200个字' }
                            ]
                          }
                        ]"
                        :customRequest="handleUploadOfficial"
                      >
                        <img
                          v-if="currentInfo.officialqrcodeurl"
                          style="max-height:200px;max-width:400px;"
                          :src="currentInfo.officialqrcodeurl"
                          alt="Logo"
                        />
                        <div v-else>
                          <a-icon :type="uploading ? 'loading' : 'plus'" />
                          <div class="ant-upload-text">
                            上传二维码
                          </div>
                        </div>
                      </a-upload>
                    </a-form-item>
                    <a-form-item label="秘书处二维码" has-feedback>
                      <a-upload
                        name="file"
                        list-type="picture-card"
                        class="avatar-uploader"
                        :show-upload-list="false"
                        v-decorator="[
                          'secrataryqrcode',
                          {
                            validateFirst: true,
                            rules: [
                              { required: true, message: '请上传秘书处二维码' },
                              { max: 200, message: '二维码最多200个字' }
                            ]
                          }
                        ]"
                        :customRequest="handleUploadSecratary"
                      >
                        <img
                          v-if="currentInfo.secrataryqrcodeurl"
                          style="max-height:200px;max-width:400px;"
                          :src="currentInfo.secrataryqrcodeurl"
                          alt="Logo"
                        />
                        <div v-else>
                          <a-icon :type="uploading1 ? 'loading' : 'plus'" />
                          <div class="ant-upload-text">
                            上传二维码
                          </div>
                        </div>
                      </a-upload>
                    </a-form-item>
                    <a-form-item label="秘书处电话">
                      <a-input
                        placeholder="请输入秘书处电话"
                        v-decorator="[
                          'secrataryphone',
                          {
                            validateFirst: true,
                            rules: [
                              { required: true, message: '请输入秘书处电话' },
                              { max: 50, message: '电话最多50个字' }
                            ]
                          }
                        ]"
                      />
                    </a-form-item>
                    <a-form-item label="企业微信AppId">
                      <a-input
                        placeholder="请输入企业微信AppId"
                        v-decorator="[
                          'qyappid',
                          {
                            validateFirst: true,
                            rules: [
                              { required: true, message: '请输入企业微信AppId' },
                              { max: 50, message: '企业微信appid最多50个字' }
                            ]
                          }
                        ]"
                      />
                    </a-form-item>
                    <a-form-item label="客服链接">
                      <a-input
                        placeholder="请输入企业微信客服链接"
                        v-decorator="[
                          'qyserviceurl',
                          {
                            validateFirst: true,
                            rules: [
                              { required: true, message: '请输入企业微信客服链接' },
                              { max: 200, message: '客服链接最多200个字' }
                            ]
                          }
                        ]"
                      />
                    </a-form-item>
                    <a-form-item label="访客初始值">
                      <a-input
                        placeholder="请输入访客初始值"
                        type="number"
                        v-decorator="[
                          'viewercnt',
                          {
                            validateFirst: true,
                            rules: [
                              {
                                validator: (rule, value, callback) => {
                                  if (value < 0) {
                                    callback('初始值不可小于0')
                                  } else {
                                    callback()
                                  }
                                }
                              }
                            ]
                          }
                        ]"
                      />
                    </a-form-item>
                    <a-form-item label="访客量范围最小值">
                      <a-input
                        placeholder="访客量范围最小值"
                        type="number"
                        v-decorator="[
                          'viewercntmin',
                          {
                            validateFirst: true,
                            rules: [
                              {
                                validator: (rule, value, callback) => {
                                  if (value < 0) {
                                    callback('初始值不可小于0')
                                  } else {
                                    callback()
                                  }
                                }
                              }
                            ]
                          }
                        ]"
                      />
                    </a-form-item>
                    <a-form-item label="访客量范围最大值">
                      <a-input
                        placeholder="访客量范围最大值"
                        type="number"
                        v-decorator="[
                          'viewercntmax',
                          {
                            validateFirst: true,
                            rules: [
                              {
                                validator: (rule, value, callback) => {
                                  if (value < 0) {
                                    callback('初始值不可小于0')
                                  } else {
                                    callback()
                                  }
                                }
                              }
                            ]
                          }
                        ]"
                      />
                    </a-form-item>
                    <a-form-item label="智造团介绍">
                      <a-textarea
                        style="display: none"
                        :rows="4"
                        placeholder="请输入智造团介绍"
                        v-decorator="['appdesc']"
                      />
                      <WangEditor ref="contentRef" :value="html" :uploadConfig="uploadConfig" />
                    </a-form-item>
                    <a-form-item label="隐私协议">
                      <a-textarea
                        style="display: none"
                        :rows="4"
                        placeholder="请输入隐私协议"
                        v-decorator="['privacydesc']"
                      />
                      <WangEditor ref="contentRefP" :value="htmlP" :uploadConfig="uploadConfig" />
                    </a-form-item>
                    <a-form-item>
                      <a-button type="primary" @click="submitUserInfo">更新基本信息</a-button>
                    </a-form-item>
                  </a-form>
                </a-col>
              </a-row>
            </a-spin>
          </div>
        </div>
      </div>
    </a-card>
    <previewimg ref="PreImg"></previewimg>
  </div>
</template>

<script>
import { mixinDevice } from '@/utils/mixin.js'
import WangEditor from '@/components/Editor/WangEditorV5'
import { Detail, Submit } from '@/api/modular/main/platform'
import { UploadImg } from '@/api/modular/main/upload'
import previewimg from '@/views/components/previewimg'
export default {
  mixins: [mixinDevice],
  components: { WangEditor, previewimg },
  data() {
    return {
      loading: false,
      uploading: false,
      uploading1: false,
      imageUrl: '',
      headimg: '',
      html: '',
      htmlP: '',
      uploadConfig: {
        method: 'http',
        url: 'common/uploadimg'
      },
      confirmLoading: false,
      selectedKey: ['1'],
      userid: 0,
      currentInfo: {},
      form: this.$form.createForm(this)
    }
  },
  mounted() {
    this.GetDetail()
  },
  methods: {
    GetDetail() {
      Detail({}).then(res => {
        if (res.code === 0 && res.data) {
          this.currentInfo = res.data
          this.headimg = res.data.appimg
          this.imageUrl = res.data.appimgurl
          this.form.setFieldsValue({
            appname: res.data.appname,
            secrataryphone: res.data.secrataryphone,
            officialqrcode: res.data.officialqrcode,
            secrataryqrcode: res.data.secrataryqrcode,
            qyappid: res.data.qyappid,
            qyserviceurl: res.data.qyserviceurl,
            viewercnt: res.data.viewercnt,
            viewercntmin: res.data.viewercntmin,
            viewercntmax: res.data.viewercntmax
          })
          this.html = res.data.appdesc
          this.htmlP = res.data.privacydesc
        } else {
          this.form.resetFields()
        }
      })
    },
    changemenu(item) {
      this.selectedKey = [item.key]
      if (item.key === '2') {
      } else {
        this.GetDetail()
      }
    },
    // 上传
    handleUpload(data) {
      const formData = new FormData()
      formData.append('file', data.file)
      this.uploading = true
      UploadImg(formData).then(res => {
        if (res.code === 0) {
          this.imageUrl = res.data.url
          this.headimg = res.data.path
        } else {
          this.$myerror(res.message)
        }
        this.uploading = false
      })
    },
    // 上传公众号二维码
    handleUploadOfficial(data) {
      const formData = new FormData()
      formData.append('file', data.file)
      this.uploading = true
      UploadImg(formData).then(res => {
        if (res.code === 0) {
          this.currentInfo.officialqrcodeurl = res.data.url
          this.form.setFieldsValue({
            officialqrcode: res.data.path
          })
        } else {
          this.$myerror(res.message)
        }
        this.uploading = false
      })
    },
    // 上传秘书处二维码
    handleUploadSecratary(data) {
      const formData = new FormData()
      formData.append('file', data.file)
      this.uploading1 = true
      UploadImg(formData).then(res => {
        if (res.code === 0) {
          this.currentInfo.secrataryqrcodeurl = res.data.url
          this.form.setFieldsValue({
            secrataryqrcode: res.data.path
          })
        } else {
          this.$myerror(res.message)
        }
        this.uploading1 = false
      })
    },
    submitUserInfo() {
      const {
        form: { validateFields }
      } = this
      this.confirmLoading = false
      validateFields((errors, values) => {
        if (!errors) {
          values['appdesc'] = this.$refs.contentRef.gethtml()
          values['appimg'] = this.headimg
          values['privacydesc'] = this.$refs.contentRefP.gethtml()
          Submit(values)
            .then(res => {
              if (res.code === 0) {
                this.$message.success('更新成功')
              } else {
                this.$message.error(res.message)
              }
              this.confirmLoading = false
            })
            .finally(res => {
              this.confirmLoading = false
            })
        } else {
          this.confirmLoading = false
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.account-settings-info-main {
  width: 100%;
  display: flex;
  height: 100%;
  overflow: auto;

  &.mobile {
    display: block;

    .account-settings-info-left {
      border-right: unset;
      border-bottom: 1px solid #e8e8e8;
      width: 100%;
      height: 50px;
      overflow-x: auto;
      overflow-y: scroll;
    }
    .account-settings-info-right {
      padding: 20px 40px;
    }
  }

  .account-settings-info-left {
    border-right: 1px solid #e8e8e8;
    width: 224px;
  }

  .account-settings-info-right {
    flex: 1 1;
    padding: 8px 40px;

    .account-settings-info-title {
      color: rgba(0, 0, 0, 0.85);
      font-size: 20px;
      font-weight: 500;
      line-height: 28px;
      margin-bottom: 12px;
    }
    .account-settings-info-view {
      padding-top: 12px;
    }
  }
}
</style>
