<template>
  <div class="layout-no-flex" v-loading="dataLoading">
    <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" priv="SocialMedia.MediaCondition.Save"><span><i class="fa fa-save"></i>保存</span></el-button>
    </el-toolbar>
    <el-form :model="tmpMediaCondition" ref="mediaConditionForm" label-suffix="：" label-width="160px" class="media-condition-form">
      <component v-bind:is="code+'Condition'" :condition-form.sync="tmpMediaCondition">
      </component>
    </el-form>
  </div>
</template>
<script>
import util from '@src/common/util.js'
import OMQQCondition from './OMQQCondition.vue'
import QQWeiboCondition from './QQWeiboCondition.vue'
import TouTiaoCondition from './TouTiaoCondition.vue'
import WeChatCondition from './WeChatCondition.vue'
import WeiboCondition from './WeiboCondition.vue'
import ZhiHuCondition from './ZhiHuCondition.vue'
export default {
  components: {
    OMQQCondition,
    QQWeiboCondition,
    TouTiaoCondition,
    WeChatCondition,
    WeiboCondition,
    ZhiHuCondition
  },
  props: {
    code: String
  },
  data() {
    return {
      dataLoading: true,
      saveLoading: false,
      tmpMediaCondition: {
        imgText: {
          coverImageFormat: '',
          imgFormat: '',
          thumbFormat: '',
          audioFormat: '',
          videoFormat: ''
        },
        img: {
          coverImageFormat: '',
          imgFormat: '',
          thumbFormat: '',
          audioFormat: '',
          videoFormat: ''
        },
        common: {
          coverImageFormat: '',
          imgFormat: '',
          thumbFormat: '',
          audioFormat: '',
          videoFormat: ''
        },
        audio: {
          coverImageFormat: '',
          imgFormat: '',
          thumbFormat: '',
          audioFormat: '',
          videoFormat: ''
        },
        video: {
          coverImageFormat: '',
          imgFormat: '',
          thumbFormat: '',
          audioFormat: '',
          videoFormat: ''
        },
        imgGroup: {
          coverImageFormat: '',
          imgFormat: '',
          thumbFormat: '',
          audioFormat: '',
          videoFormat: ''
        }
      }
    }
  },
  async created() {
    let res = ''
    try {
      res = await axios.get(`/ui/mediaconditions/${this.code}`)
    } catch (e) {
      this.dataLoading = false
      return
    }
    this.tmpMediaCondition = Object.assign(this.tmpMediaCondition, res.data.data)
    for (let obj in this.tmpMediaCondition) {
      if (this.tmpMediaCondition[obj].coverImageFormat) {
        this.tmpMediaCondition[obj].coverImageFormat = this.tmpMediaCondition[obj].coverImageFormat.split(',')
      } else {
        this.tmpMediaCondition[obj].coverImageFormat = []
      }
      if (this.tmpMediaCondition[obj].imgFormat) {
        this.tmpMediaCondition[obj].imgFormat = this.tmpMediaCondition[obj].imgFormat.split(',')
      } else {
        this.tmpMediaCondition[obj].imgFormat = []
      }
      if (this.tmpMediaCondition[obj].thumbFormat) {
        this.tmpMediaCondition[obj].thumbFormat = this.tmpMediaCondition[obj].thumbFormat.split(',')
      } else {
        this.tmpMediaCondition[obj].thumbFormat = []
      }
      if (this.tmpMediaCondition[obj].audioFormat) {
        this.tmpMediaCondition[obj].audioFormat = this.tmpMediaCondition[obj].audioFormat.split(',')
      } else {
        this.tmpMediaCondition[obj].audioFormat = []
      }
      if (this.tmpMediaCondition[obj].videoFormat) {
        this.tmpMediaCondition[obj].videoFormat = this.tmpMediaCondition[obj].videoFormat.split(',')
      } else {
        this.tmpMediaCondition[obj].videoFormat = []
      }
    }
    this.dataLoading = false
  },
  methods: {
    async save() {
      this.saveLoading = true
      try {
        await util.validateForm(this.$refs.mediaConditionForm)

        let params = JSON.parse(JSON.stringify(this.tmpMediaCondition))
        for (let obj in params) {
          params[obj].coverImageFormat = params[obj].coverImageFormat.join(',')
          params[obj].imgFormat = params[obj].imgFormat.join(',')
          params[obj].thumbFormat = params[obj].thumbFormat.join(',')
          params[obj].audioFormat = params[obj].audioFormat.join(',')
          params[obj].videoFormat = params[obj].videoFormat.join(',')
        }
        let res = await axios.put(`/ui/mediaconditions/${this.code}`, params)
        util.showResponseMessage(res.data)
        this.saveLoading = false
      } catch (e) {
        util.showErrorMessageBox(e)
        this.saveLoading = false
      }
    }
  }
}
</script>

<style>
.media-condition-form {
  /* margin-top: 10px; */
}
.media-condition-form label.el-checkbox {
  padding: 0 10px 0 0;
}
.media-condition-form span.el-checkbox__label {
  padding-left: 5px;
}
.media-condition-form .el-checkbox + .el-checkbox {
  margin-left: 0px;
}
</style>
