<template>
  <el-row>
    <el-row style="padding-top: 50px;width: 1500px;padding-left: 30px">
      <el-form ref="form" :model="form" :rules="formRules" label-width="120px">
        <el-row>
          <el-col :span="12">
            <el-row>
              <el-form-item label="标题" prop="bannerTitle">
                <el-input v-model="form.bannerTitle" placeholder="在这里输入标题" show-word-limit maxlength="40"></el-input>
              </el-form-item>
            </el-row>
            <el-row style="height: 350px;width: 615px;margin-top: 10px">
              <el-form-item label="缩略图" prop="imageUrl">
                <material-dialog v-model="form.imageUrl" sourceType="banner" style="height: 350px;width: 615px;border-radius: 4px"></material-dialog>
              </el-form-item>
            </el-row>
            <el-row style="margin-top: 30px">
              <el-form-item label="网址">
                <el-input v-model="form.bannerUrl" placeholder="在这里输入URL"></el-input>
              </el-form-item>
            </el-row>
          </el-col>

          <el-col :span="11" :offset="1" style="margin-top: 61px">
            <el-row>
              <div style="height: 350px;width: 615px;"><img :src="OSS_URL + form.imageUrl" style="height: 350px;width: 615px;border-radius: 4px"></div>
            </el-row>
          </el-col>
        </el-row>
      </el-form>
    </el-row>
    <el-row style="padding: 3px 150px;text-align: left;">
      <el-button type="primary" @click="toBack">取消</el-button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <el-button type="primary" @click="handleSave">保存</el-button>
    </el-row>
  </el-row>
</template>

<script>
  import materialDialog from '@/views/material/dialog'
  import bannerDetailApi from '@/api/bannerDetailApi'

  export default {
    name: 'bannerDetail',
    components: {
      'material-dialog': materialDialog
    },
    data () {
      return {
        form: {
          id: '',
          bannerTitle: '',
          imageUrl: '',
          bannerUrl: '',
          bannerOn: 0
        },
        formRules: {
          bannerTitle: { required: true, message: '请输入标题', trigger: 'blur' },
          imageUrl: { required: true, message: '请选择缩略图', trigger: 'blur' }
        }
      }
    },
    mounted () {
      this.form['id'] = this.$route.params.msgKey
      this.findById()
      var s = document.getElementsByClassName('el-card is-hover-shadow')
      s[0].style.height = '350px'
      s[1].style.height = '350px'
    },
    methods: {
      toBack () {
        this.$confirm('是否取消创建/修改文章?，并退出编辑页面', {
          confirmButtonText: '继续退出',
          cancelButtonText: '留下',
          type: 'primary'
        }).then(() => {
          this.$router.push({name: 'Banner'})
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已退出编辑页面'
          })
        })
      },
      handleSave () {
        this.$refs['form'].validate((valid) => {
          if (!valid) {
            return false
          }
          this.$confirm('是否马上发布文章?', {
          confirmButtonText: '是',
          cancelButtonText: '否',
          type: 'primary'
        }).then(() => {
            bannerDetailApi.save(this.form).then(data => {
              this.$router.push({name: 'Banner'})
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消发布'
          })
        })
        })
      },
      findById () {
        if (this.form['id']) {
          bannerDetailApi.findById(this.form['id']).then(data => {
            this.form['id'] = data.id
            this.form['bannerTitle'] = data.bannerTitle
            this.form['imageUrl'] = data.imageUrl
            this.form['bannerUrl'] = data.bannerUrl
            this.form['bannerOn'] = data.bannerOn
          })
        }
      }
    }
  }
</script>

<style scoped>
  .el-icon-circle-plus {
    font-size: 50px;
  }
  /deep/ .el-dialog {
    margin-top: 10vh
  }
  /deep/ .el-button--primary {
    background-color: #2493e5;
    border-color: #2493e5;
  }
  /deep/ .el-button--mini, .el-button--mini.is-round{
    padding: 9px 19px;
  }
  /deep/ .el-input--mini .el-input__inner{
    height: 32px;
  }
  /deep/ .el-icon-circle-plus-outline{
    margin-top: 100px;
  }
</style>