<template>
  <div class="layout-no-cols" v-loading="dataLoading">
    <el-toolbar>
      <el-button @click="save" :loading="saveLoading" :priv="'SocialMedia.MediaConfig.Save'">
        <i class="fa fa-save"></i>保存
      </el-button>
    </el-toolbar>
    <div class="margin-top-8">
    <el-row :gutter="16">
      <el-col :sm="24" :lg="12" :class="`info-col info-col-${index+1}`" v-for="(item,index) in configs" :key="item.code">
        <div class="panel-card" :key="item.code">
          <div class="media-panel">
            <el-row>
              <el-col :span="7">
                <img :src="`assets/images/socialmedia/${item.code.toLowerCase()}-logo.png`" onerror="this.src='assets/images/picture404-'+((row.ID||row.$index) % 4)+'.png';"
                  :title="item.name" style="width:60px;height:60px;margin-left:10px;" />
              </el-col>
              <el-col :span="17" class="media-title">
                {{item.name}}
              </el-col>
            </el-row>
            <el-form label-width="110px" label-suffix="：" :model="item.configKeys">
              <el-form-item v-for="(label,prop) in item.configKeys" :label="label" :prop="prop" :key="prop">
                <el-input v-model="item.configData[prop]" :type="(label!='平台名称'&&label!='AppID'&&label!='ClientID'&&label!='ClientKey') ? 'password' : 'text'" class="media-form-item"></el-input>
              </el-form-item>
            </el-form>
            <br/>
            <el-row><el-col :span="24" class="tac">
              <el-button @click="gotoLimitConfig(item)">配置{{item.name}}限制条件</el-button>
            </el-col></el-row>
          </div>
        </div>
      </el-col>
    </el-row>
    </div>
  </div>
</template>
<script>
import util from '@src/common/util.js'
export default {
  data() {
    return {
      dataLoading: true,
      saveLoading: false,
      configs: []
    }
  },
  computed: {
  },
  created() {
    this.loadConfigs()
  },
  methods: {
    async save() {
      this.saveLoading = true
      let params = {
        platCode: []
      }
      this.configs.forEach(config => {
        params.platCode.push(config.code)
        for (let i in config.configData) {
          Vue.set(params, config.code + '_' + i, config.configData[i])
        }
      })
      params.platCode.join(',')
      params = Object.assign(params, {platCode: params.platCode.join(',')})
      let res
      try {
        res = await axios.put('/ui/mediaconfig', params)
        this.saveLoading = false
      } catch (e) {
        this.saveLoading = false
        return
      }
      util.showResponseMessage(res.data)
    },
    gotoLimitConfig(item) {
      let conditionRelObj = {
        SinaWeiBo: 'Weibo',
        WeChatMedia: 'WeChat',
        TouTiaoMedia: 'TouTiao',
        QQNewsPlat: 'OMQQ'
      }
      let code = conditionRelObj[item.code]
      this.$router.push(`/socialmedia/mediaConditionList/${code}`)
    },
    async loadConfigs() {
      this.dataLoading = true
      let res
      try {
        res = await axios.get('/ui/mediaconfig')
        this.dataLoading = false
      } catch (e) {
        this.dataLoading = false
        return
      }
      this.configs = res.data.data
    }
  }
}
</script>
<style scoped>
.media-panel {
  width: 500px;
  height:380px;
  margin: 10px auto 5px;
}

.media-title {
  font-size: 24px;
  font-weight: bold;
  padding-left: 40px;
  line-height: 80px;
  margin-bottom: 5px;
}

.media-form-item {
  width: 85%;
}
</style>
