<template>
  <div class="layout-no-flex">
    <el-toolbar>
      <el-button @click="$router.back()" type="primary" size="medium" round class="shadow-primary"><i class="fa fa-chevron-left"></i> 返回上页</el-button>
      <span class="button-separator"></span>
      <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="`assets/images/socialmedia/${code.toLowerCase()}-logo.png`" style="width: 80px; height: 80px;  margin-top: 50px;" onerror="this.src='assets/images/picture404-'+((row.ID||row.$index) % 4)+'.png';" :title="code | fixPlatformName"/><br/><br/>
        {{code | fixPlatformName}}
      </el-col>
      <el-col :span="14">
      <el-form :model="tmpMediaAccount" ref="mediaAccountForm" label-width="120px" label-suffix="：">
        <el-form-item prop="MName" label="名称" :verify="['NotNull']">
          <el-input v-model="tmpMediaAccount.MName"></el-input>
        </el-form-item>
        <el-form-item prop="AID" :label="code | fixAppName" :verify="['NotNull']">
          <el-input v-model="tmpMediaAccount.AID"></el-input>
        </el-form-item>
        <el-form-item prop="appSecret" :label="code | fixSecretName" :verify="['NotNull']">
          <el-input v-model="tmpMediaAccount.appSecret"></el-input>
        </el-form-item>
        <el-form-item prop="AESToken" label="token" :verify="['NotNull']" v-if="code === 'WeChatAccount'">
          <el-input v-model="tmpMediaAccount.AESToken"></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-item label="留言管理" v-if="code === 'WeChatAccount'">
          <el-checkbox v-model="tmpMediaAccount.configProps.needOpenComment" :true-label="1" :false-label="0">推文允许留言</el-checkbox><span v-show="tmpMediaAccount.configProps.needOpenComment === 1" class="txt-comment-tips txt-warn">需确保公众号拥有留言管理功能</span>
          <div v-show="tmpMediaAccount.configProps.needOpenComment === 1">
            <el-radio-group v-model="tmpMediaAccount.configProps.onlyFansCanComment">
              <el-radio :label="0">所有人可留言</el-radio>
              <el-radio :label="1">仅关注后可留言</el-radio>
            </el-radio-group>
          </div>

        </el-form-item>
      </el-form>
      </el-col>
      <el-col :span="20" :offset="4" class="tips-body" v-if="code === 'WeChatAccount'">
        <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 {
  props: {
    code: String
  },
  filters: {
    fixAppName: function(val) {
      switch (val) {
        case 'WeChatAccount':
          return 'AppID'
        case 'QQNewsSite':
          return 'ClientID'
        case 'ZhiHuAccount':
          return '账号'
      }
    },
    fixSecretName: function(val) {
      switch (val) {
        case 'WeChatAccount':
          return 'AppSecret'
        case 'QQNewsSite':
          return 'ClientSecret'
        case 'ZhiHuAccount':
          return '密码'
      }
    },
    fixPlatformName: function(val) {
      switch (val) {
        case 'WeChatAccount':
          return '微信公众平台'
        case 'QQNewsSite':
          return '企鹅号内容网站'
        case 'ZhiHuAccount':
          return '知乎'
      }
    }
  },
  data() {
    return {
      saveLoading: false,
      tmpMediaAccount: {
        MName: '',
        AID: '',
        appSecret: '',
        AESToken: '',
        typeID: '',
        pCode: this.code,
        configProps: {
          needOpenComment: 0,
          onlyFansCanComment: 0
        }
      },
      accountTypes: []
    }
  },
  async created() {
    let res = await axios.get('/ui/accounttypes')
    this.accountTypes = res.data.data
  },
  methods: {
    async save() {
      this.saveLoading = true
      try {
        await util.validateForm(this.$refs.mediaAccountForm)
      } catch (e) {
        util.showErrorMessageBox(e)
        this.saveLoading = false
        return
      }
      let res
      try {
        res = await axios.post('/ui/mediaaccounts', this.tmpMediaAccount)
      } catch (e) {
        util.showErrorMessageBox(e)
        this.saveLoading = false
        return
      }
      this.saveLoading = false
      util.showResponseMessage(res.data)
      if (res.data.status === 1) {
        // this.$router.push('/socialmedia/accounts')
      }
    }
  }
}
</script>

<style scoped>
.tips-body {
  line-height: 40px;
  font-size: 16px;
  margin-top: 10px;
}
.txt-comment-tips{
  margin-left:10px;
}
.txt-warn {
  color: #f56c6c;
}

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