<template>
  <div v-loading="loading">
    <div class="white-box">
      <el-form ref="form" :model="form" label-width="100px" style="">
        <el-form-item label="Title"> <!-- 标题 -->
          <el-input v-model="form.title" style="width: 400px;">></el-input>
        </el-form-item>
        <el-form-item label="Ad Location"> <!-- 广告位 -->
          <el-select v-model="form.lid" placeholder="Select Ad Location" style="width: 400px;"> <!-- 请选择广告位 -->
            <el-option v-for="item in allLocation" :label="item.LOCATION_NAME" :value="item.ID"
                       :key="item.ID"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="Type"> <!-- 广告类型 -->
          <el-select v-model="form.type" placeholder="Select Type" style="width: 400px;"> <!-- 请选择广告类型 -->
            <el-option label="External Link" value="1" :key="1"></el-option> <!-- 外链 -->
            <el-option label="Article" value="2" :key="2"></el-option> <!-- 文章 -->
          </el-select>
        </el-form-item>
        <el-form-item v-if="form.type==='1'" label="Url"> <!-- '链接地址' '文章ID' -->
          <el-input v-model="url" style="width: 400px;"></el-input>
          <span class="note"></span> <!-- 注:外链请明确输入 http://或https://，文章则不需要输入 -->
        </el-form-item>
        <el-form-item v-else label="Article"> <!-- '文章ID' -->
          <el-select v-model="article" placeholder="Select Article" style="width: 400px;">
            <el-option v-for="item in allArticle" :label="item.TITLE" :value="item.ID" :key="item.ID"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="Image"> <!-- 广告图片 -->
          <leo-uploader :requestRoute="'ad/upload'" :defaultImageUrl="defaultImageUrl" width="400px" height="160px"
                        @on-success="handleSuccess"></leo-uploader>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :loading="submitButtonStat" @click="onSubmit">Submit<!-- 提交 --></el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import network from '../../utils/network'
import LeoUploader from '../../components/Uploader'
import tool from '@/utils/tool'

export default {
  name: 'ad_edit',
  components: {LeoUploader},
  mounted () {
    if (this.$route.name === 'ad_edit') {
      network.getData('ad/edit/' + this.$route.params.id).then(response => {
        this.form.title = response.oneData.TITLE
        this.form.lid = response.oneData.LID
        this.form.type = response.oneData.TYPE

        this.imageAd = response.oneData.IMAGE;
        this.form.image = tool.getArImage(response.oneData.IMAGE, '/files/');
        this.defaultImageUrl = tool.getArImage(response.oneData.IMAGE, '/files/');

        this.form.content = response.oneData.CONTENT
        if (response.oneData.TYPE === '1') {
            this.url = response.oneData.CONTENT
        } else {
            this.article = response.oneData.CONTENT
        }

        this.allLocation = response.allLocation
        this.allArticle = response.allArticle

        this.loading = false
        this.isEdit = true
      })
    } else {
      network.getData('ad/add').then(response => {
        this.allLocation = response.allLocation
        this.allArticle = response.allArticle
        this.loading = false
      })
    }
  },
  data () {
    return {
      form: {
        title: '',
        lid: null,
        type: '',
        content: '',
        image: '',
      },
      defaultImageUrl: null,
      allLocation: null,
      loading: false,
      submitButtonStat: false,
      isEdit: false,
      imageAd: '',
      allArticle: [],
      url: '',
      article: '',
    }
  },
  methods: {
    onSubmit () {
      this.submitButtonStat = true
      let path = 'ad/add'
      if (this.$route.name === 'ad_edit') {
        path = 'ad/edit/' + this.$route.params.id
      }

      this.form.image = this.imageAd
      this.form.content = this.form.type === '1' ? this.url : this.article
      network.postData(path, this.form).then(response => {
        this.submitButtonStat = false
        this.$message({
          message: response,
          type: 'success'
        })
        this.$router.go(-1)
      }).catch(_ => {
        this.submitButtonStat = false
      })
    },
    handleSuccess (imageUrl) {
      this.imageAd = imageUrl
      this.form.image = tool.getArImage(imageUrl, '/files/');
      this.defaultImageUrl = tool.getArImage(imageUrl, '/files/');
    },
  },
  watch: {
      'form.type': {
          deep: true,
          handler: function handler(modern) {
              if (modern === '1') {
                  this.article = ''
              } else {
                  this.url = ''
              }
          }
      }
  }
}
</script>
<style>
  .note {
    color:red;
  }
</style>
