<template>
  <div class="layout-no-cols">
    <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" :priv=" isEdit() ?'com.zving.cms.Link.Edit.'+ ID : 'LinkManage.Add'" class="el-button el-button--default save" :loading="confirmLoading" @click="confirm"><span><i class="fa fa-save"></i>保存</span></el-button>
    </el-toolbar>
    <div>
      <div class="detail-panel">
        <el-form :model="tmpLinkData" ref="createLinkForm" label-width="120px" v-loading="dataLoading" label-suffix="：">
          <el-form-item label="链接名称" prop="name" :verify="['NotNull','Length<101']">
            <el-input v-model="tmpLinkData.name"></el-input>
          </el-form-item>
          <el-form-item label="链接URL" prop="URL" :verify="['NotNull','Regex=^https?://\\S+$|请输入以https或者http开头的链接','Length<201']">
            <el-input v-model="tmpLinkData.URL"></el-input>
          </el-form-item>
          <el-form-item label="图片">
            <logo-path
              :path.sync="tmpLinkData.imagePath"
              edit-position="right"
              :resource-dialog-props="resourceDialogProps"
            ></logo-path>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>

import util from '@src/common/util.js'
import LogoPath from '../../contentcore/components/LogoPath.vue'
export default {
  components: {
    'logo-path': LogoPath
  },

  props: {
    ID: String,
    linkID: String
  },

  data() {
    return {
      dataLoading: false,
      confirmLoading: false,
      tmpLinkData: {}, // 新建/编辑链接弹框中表单数据
      resourceDialogProps: {}
    }
  },

  created() {
    this.initData()
  },

  methods: {
    async initData() {
      this.confirmLoading = false
      if (!this.isEdit()) {
        this.tmpLinkData = {
          linkGroupID: this.ID,
          name: '',
          URL: 'http://',
          imagePath: '', // 数据库存储相对路径
          resourceID: 0
        }
      } else {
        this.dataLoading = true
        let res = await axios.get(`/ui/links/${this.ID}/items/${this.linkID}`)
        this.tmpLinkData = res.data.data
        this.dataLoading = false
      }

      this.resourceDialogProps = {
        dataType: 'Link',
        dataID: this.linkID,
        resourceType: 'image',
        catalogID: 0,
        imageWidth: 120,
        imageHeight: 120,
        resourceID: this.tmpLinkData.resourceID,
        inputType: 'radio'
      }
    },
    // 新建/编辑链接确认点击事件
    async confirm() {
      try {
        await util.validateForm(this.$refs['createLinkForm'])
      } catch (e) {
        util.showErrorMessageBox(e)
        return
      }
      this.confirmLoading = true
      let res
      if (!this.isEdit()) {
        res = await axios.post(`/ui/links/${this.ID}/items`, this.tmpLinkData)
      } else {
        res = await axios.put(
          `/ui/links/${this.ID}/items/${this.linkID}`,
          this.tmpLinkData
        )
      }
      this.confirmLoading = false
      util.showResponseMessage(res.data)
      if (res.data.status === 1) {
        this.goBack()
      }
    },

    isEdit() {
      return this.linkID && this.linkID !== 'new'
    },

    goBack() {
      this.$router.back()
    }
  }
}
</script>
<style scoped>
</style>
