<template>
  <div class="app-container">
    <div class="box-container">
      <div class="contain-title">修改平台信息</div>
    </div>
    <div class="content-container">
      <div class="main-info">
        <el-form :model="formObj" ref="formObj" :rules="rulesObj" label-width="80px" class="update-wrapper demo-ruleForm" v-loading="formLoading">
          <el-row :gutter="25">
            <el-col :span="14">
              <el-row :gutter="20" class="update-main">
                <el-col :span="24">
                  <el-form-item label="平台名称">{{formObj.name}}</el-form-item>
                </el-col>
                <el-col :span="item.span||''" v-for="item in formItem" :key="item.index">
                  <el-form-item v-if="item.prop" :label="item.tit" :prop="item.prop">
                    <el-input v-if="item.textarea" type="textarea" :rows="8" v-model="formObj[item.prop]" placeholder="请填写一个平台的简单介绍，让大家更好地了解平台" :maxlength="item.num||''"></el-input>
                    <cityPicker v-else-if="item.city" @paren="toshow" :addrCode="formObj.addr"></cityPicker>
                    <el-input v-else v-model="formObj[item.prop]" :placeholder="`请填写${item.place||''}${item.tit}`" :maxlength="item.num||''"></el-input>
                  </el-form-item>
                  <el-form-item v-else class="space-form-item"></el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item align="center">
                    <el-button type="primary" @click="submitForm('formObj')">保存</el-button>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="10">
              <uploadFile :upImgsStr="formObj.logo" :uploadImg="uploadImg" @uploadfun="uploadfun"></uploadFile>
            </el-col>
            <el-col :offset="16">
              <el-form-item>
                <div style="line-height: 10px;">
                  <p>最后修改人: {{formObj.modifier}}</p>
                  <p>最后修改时间: {{formObj.modifyTime}}</p>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    queryPlat,
    updatePlat,
    uploadLogo
  } from '@/api/platUpdate'
  import {
    requiredTip,
    limitNumTip,
    checkEmailV,
    checkInterNum
  } from '@/utils/validator'

  import { parseTime } from '@/utils'
  import queryBase from '@/utils/queryBase'
  import cityPicker from '@/components/CityPicker'
  import uploadFile from '@/components/uploadFile'

  export default {
    data() {
      return {
        formItem: [
          {
            span: 24,
            prop: 'url',
            tit: '平台网址',
            required: true
          },
          {
            span: 24,
            prop: 'manageOrg',
            tit: '管理机构',
            required: true
          },
          {
            span: 12,
            prop: 'addr',
            city: true,
            tit: '所在城市',
            required: true
          },
          {
            span: 12,
            prop: 'zipCode',
            tit: '平台邮编',
            num: 20
          },
          {
            span: 24,
            prop: 'location',
            tit: '详细地址',
            num: 50,
            place: '管理机构'
          },
          {
            span: 12,
            prop: 'servicePhone',
            tit: '客服电话',
            num: 50,
            required: true
          },
          {
            span: 12,
            prop: 'serviceEmail',
            tit: '客服邮箱',
            num: 50,
            required: true
          },
          {
            span: 12,
            prop: 'operateTime',
            tit: '工作时间',
            num: 50
          },
          {
            span: 12
          },
          {
            span: 12,
            prop: 'linkman',
            tit: '联系人',
            required: true,
            place: '平台',
            num: 10
          },
          {
            span: 12,
            prop: 'job',
            tit: '职位',
            required: true,
            place: '联系人',
            num: 20
          },
          {
            span: 24,
            prop: 'comp',
            tit: '所在机构',
            required: true,
            place: '联系人',
            num: 50
          },
          {
            span: 12,
            prop: 'linkphone',
            tit: '联系电话',
            num: 50,
            required: true
          },
          {
            span: 12,
            prop: 'linkemail',
            tit: '联系邮箱',
            num: 50
          },
          {
            span: 24,
            prop: 'descp',
            tit: '平台简介',
            textarea: true,
            required: true,
            num: 5000
          }
        ],
        formLoading: true,
        formObj: {
          name: '',
          logo: '',
          url: '',
          manageOrg: '',
          addr: '',
          location: '',
          zipCode: '',
          servicePhone: '',
          serviceEmail: '',
          operateTime: '',
          linkman: '',
          job: '',
          department: '',
          comp: '',
          linkphone: '',
          linkemail: '',
          descp: ''
        },
        rulesObj: {},
        uploadImg: {
          url: uploadLogo,
          tip: '上传平台LOGO图片',
          width: '280px',
          height: '200px'
        }
      }
    },
    components: {
      cityPicker,
      uploadFile
    },
    computed: {
    },
    created() {
      this.pushRulesFn()
      this.queryPlatInfo()
    },
    methods: {
      pushRulesFn() {
        const formItem = this.formItem
        const rulesObj = this.rulesObj
        for (let i = 0; i < formItem.length; ++i) {
          const ru = []
          if (formItem[i].required) {
            ru.push({ required: true, message: requiredTip(formItem[i].tit), trigger: 'blur' })
          }
          if (formItem[i].num) {
            ru.push({ max: formItem[i].num, message: limitNumTip(formItem[i].tit, formItem[i].num), trigger: 'blur, change' })
          }
          switch (formItem[i].prop) {
            case 'linkemail':
              ru.push({ validator: checkEmailV, trigger: 'blur' })
              break
            case 'serviceEmail':
              ru.push({ validator: checkEmailV, trigger: 'blur' })
              break
            case 'zipCode':
              ru.push({ validator: checkInterNum, trigger: 'blur' })
              break
          }
          rulesObj[formItem[i].prop] = ru
        }
      },
      queryPlatInfo() {
        var that = this
        this.$http.get(queryPlat, {}, function(res) {
          that.formLoading = false
          if (res.success) {
            const obj = res.data
            if (obj.modifyTime) {
              obj.modifyTime = parseTime(obj.modifyTime)
            }
            if (obj.modifier) {
              queryBase.getAdminUser(obj.modifier, function(sc, value) {
                if (sc) {
                  obj.modifier = value.name
                }
              })
            }
            that.formObj = obj
          }
        })
      },
      submitForm(formName) {
        var that = this
        this.$refs[formName].validate((valid) => {
          if (valid) {
            that.formLoading = true
            const form = that.formObj
            that.$http.put(updatePlat, {
              id: form.id,
              name: form.name,
              logo: form.logo,
              url: form.url,
              manageOrg: form.manageOrg,
              addr: form.addr,
              location: form.location,
              zipCode: form.zipCode,
              servicePhone: form.servicePhone,
              serviceEmail: form.serviceEmail,
              operateTime: form.operateTime,
              linkman: form.linkman,
              job: form.job,
              department: form.department,
              comp: form.comp,
              linkphone: form.linkphone,
              linkemail: form.linkemail,
              descp: form.descp
            }, function(res) {
              that.formLoading = false
              if (res.success) {
                that.$message({
                  message: '平台信息修改成功！',
                  type: 'success'
                })
                that.$refs[formName].resetFields()
                that.queryPlatInfo()
              }
            })
          } else {
            return false
          }
        })
      },
      uploadfun(value) {
        this.formObj.logo = value
      },
      toshow(value) {
        this.formObj.addr = value
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss">
  .main-info{
    padding: 0 20px;
  }
</style>
