<template>
  <div class="layout-no-flex" v-loading="initLoading">
    <el-toolbar>
      <el-button type="button" class="el-button el-button--default save" @click="save" :loading="saveLoading"><span><i class="fa fa-save"></i>保存</span></el-button>
    </el-toolbar>
    <el-row class="panel-card">
      <el-col :span="3" :offset="4">
        <img :src="tmpMediaAccount.headImage ? tmpMediaAccount.headImage : (tmpMediaAccount.PCode ? `assets/images/socialmedia/${tmpMediaAccount.PCode.toLowerCase()}-logo.png` : 'assets/images/socialmedia/headimage/auto.jpg')" style="width: 80px; height: 80px; margin: 4px 17px; border: 1px solid #cccccc; border-radius: 50%;" onerror="this.src='assets/images/picture404-'+((row.ID||row.$index) % 4)+'.png';" :title="tmpMediaAccount.MName"/><br/><br/>
      </el-col>
      <el-col :span="11">
      <el-form :model="tmpMediaAccount" ref="accountForm" label-width="120px" label-suffix="：">
        <el-form-item prop="MName" label="名称" :verify="['NotNull']">
          <el-input v-model="tmpMediaAccount.MName" :disabled="isEdit"></el-input>
        </el-form-item>
        <el-form-item prop="AESToken" label="token" :verify="['NotNull']" v-if="tmpMediaAccount.PCode === 'WeChatAccount' || tmpMediaAccount.PCode === 'WeChatMedia'">
          <el-input v-model="tmpMediaAccount.AESToken" :disabled="isEdit"></el-input>
        </el-form-item>
        <el-form-item prop="typeID" label="分类" :verify="['NotNull']">
          <el-select v-model="tmpMediaAccount.typeID" style="width:100%;">
            <el-option v-for="item in accountTypes" :label="item.name" :value="item.ID" :key="item.ID"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      </el-col>
      <el-col :span="20" :offset="4" class="tips-body" v-if="tmpMediaAccount.PCode === 'WeChatAccount' || tmpMediaAccount.PCode === 'WeChatMedia'">
        <div>API地址：  前端访问地址 + api/wechat/callback?appid=微信的AppID。</div>
        <div>例如：  http://www.zving.com/zcms/api/wechat/callback?appid=wx123</div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import util from '@src/common/util.js'

export default {
  data() {
    return {
      saveLoading: false,
      initLoading: true,
      isEdit: false,
      tmpMediaAccount: {
        MName: '',
        AID: '',
        appSecret: '',
        AESToken: '',
        pCode: '',
        typeID: ''
      },
      accountTypes: []
    }
  },
  async created() {
    let res
    try {
      res = await axios.get('/ui/mediaaccounts/accesstoken', {
        params: {
          code: util.url.getQueryValue(location.href, 'code'),
          auth_code: util.url.getQueryValue(location.href, 'auth_code'),
          state: util.url.getQueryValue(location.href, 'state'),
          error_code: util.url.getQueryValue(location.href, 'error_code')
        }
      })
      this.getAccountTypes()
      this.initLoading = false
    } catch (e) {
      window.parent.app.$router.back()
    }
    if (res.data.status !== 1) {
      util.showErrorMessageBox(res.data.message)
      window.parent.app.$router.back()
      return
    }
    this.tmpMediaAccount = res.data.account
    this.isEdit = res.data.accountStatus === 'UPDATE'
  },
  methods: {
    async save() {
      this.saveLoading = true
      try {
        await util.validateForm(this.$refs.accountForm)
      } catch (e) {
        util.showErrorMessageBox(e)
        this.saveLoading = false
        return
      }
      let res = await axios.post('/ui/mediaaccounts/user', this.tmpMediaAccount)
      util.showResponseMessage(res.data)
      if (res.data.status === 1) {
        setTimeout(() => {
          window.parent.app.$router.back()
          window.parent.app.$router.back()
          this.saveLoading = false
        }, 1500)
      } else {
        this.saveLoading = false
      }
    },
    async getAccountTypes() {
      let res = await axios.get('/ui/accounttypes')
      this.accountTypes = res.data.data
      this.tmpMediaAccount.typeID = this.accountTypes[0]['ID']
    }
  }
}
</script>

<style scoped>
.tips-body {
  line-height: 40px;
  font-size: 16px;
  margin-top: 10px;
}

.panel-card {
  padding: 50px 10px;
}
</style>
