<template>
  <div class="layout-no-flex">
    <el-toolbar>
      <el-button @click="goBack" 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="confirm" :loading="confirmLoading" :priv="this.ID === 'new' ? 'ContentAdvance.PublishPoint.Add':'ContentAdvance.PublishPoint.Save'"><span><i class="fa fa-save"></i>保存</span></el-button>
    </el-toolbar>
    <div class="detail-panel">
      <div class="panel-header">
        <div class="title">{{panelTitle}}</div>
      </div>
      <el-form :model="tmpPublishPointData" :rules="publishPointDataRules" ref="publishPointDataForm" label-width="110px">
        <el-form-item label="名称：" prop="name">
          <el-input class="e-input" v-model="tmpPublishPointData.name"></el-input>
        </el-form-item>
        <el-form-item label="源目录：" prop="sourceDir">
          <path-picker :path.sync="tmpPublishPointData.sourceDir" :readonly="true" select-title="选择分发源目录" class="e-input"></path-picker>
        </el-form-item>
        <el-form-item label="URL前缀：" prop="URLPrefix">
          <el-input class="e-input" v-model="tmpPublishPointData.URLPrefix"></el-input>
        </el-form-item>
        <el-form-item label="备注：" prop="memo">
          <el-input class="e-input" v-model="tmpPublishPointData.memo"></el-input>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import util from '@src/common/util.js'
import PathPicker from '../contentcore/components/PathPicker.vue'

export default {
  components: {
    'path-picker': PathPicker
  },
  props: {
    ID: [String, Number]
  },
  data() {
    return {
      panelTitle: '',
      publishPointID: null,
      confirmLoading: false, // 新建发布点对话框确认按钮加载动画
      tmpPublishPointData: {}, // 新建发布点表单数据
      publishPointDataRules: {
        name: [
          {
            required: true,
            message: '不能为空',
            trigger: 'blur'
          },
          {
            max: 15,
            message: '长度不能超过15个字符',
            trigger: 'blur'
          }
        ],
        sourceDir: [
          {
            required: true,
            message: '不能为空',
            trigger: 'blur'
          }
        ],
        URLPrefix: [
          {
            required: true,
            message: '不能为空',
            trigger: 'blur'
          }
        ]
      } // 发布点表单数据匹配规则
    }
  },
  mounted() {
    this.publishPointID = this.ID
    this.panelTitle = this.ID === 'new' ? '新建发布点' : '基本信息'
    if (this.ID !== 'new') {
      this.init()
    }
  },
  methods: {
    async init() {
      let res = await axios.get(`/ui/publishpoint/${this.publishPointID}`)
      this.tmpPublishPointData = res.data.data
    },
    goBack() {
      this.$router.back()
    },
    //  确认新建发布点
    async confirm() {
      this.confirmLoading = true
      try {
        await util.validateForm(this.$refs['publishPointDataForm'])
      } catch (e) {
        util.showErrorMessageBox(e)
        this.confirmLoading = false
        return
      }
      let res
      try {
        if (this.publishPointID === 'new') {
          res = await axios.post('/ui/publishpoint', this.tmpPublishPointData)
        } else {
          res = await axios.put(`/ui/publishpoint/${this.ID}`, this.tmpPublishPointData)
        }
      } catch (e) {
        util.showErrorMessageBox(e)
        this.confirmLoading = false
        return
      }

      util.showResponseMessage(res.data)
      this.confirmLoading = false
      if (res.data.status === 1 && this.publishPointID === 'new') {
        this.publishPointID = res.data.ID
        this.panelTitle = '基本信息'
        this.$router.replace(`/datachannel/publishPoint/${this.publishPointID}`)
      }
    }
  }
}
</script>
<style scoped>

.e-input {
  width: 90%;
  max-width: 300px;
}
</style>
