<template>
  <div class="dk-link">
    <el-tabs v-model="activeName">
      <el-tab-pane label="系统链接" name="system">
        <dk-link-container :link-list="systemLinkList" @choose="handleChoose" />
      </el-tab-pane>
      <el-tab-pane label="应用链接" name="addons">
        <dk-link-container :link-list="addonsLinkList" @choose="handleChoose" />
      </el-tab-pane>
      <el-tab-pane label="自定义链接" name="zdy">
        <div class="u-p-40">
          <el-form ref="form" :model="zdy" label-width="80px" size="small" style="height: 200px">
            <el-form-item label="链接备注">
              <el-input v-model="zdy.title" />
            </el-form-item>
            <el-form-item label="链接地址">
              <el-input v-model="zdy.url" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">确定</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { getLinkInput } from '../../../api/common'
import DkLinkContainer from './DkLinkContainer'

export default {
  name: 'DkLink',
  components: { DkLinkContainer },
  props: {
    url: {
      default() {
        return {}
      },
      type: [Object, String]
    }
  },
  data() {
    return {
      zdy: {},
      activeName: 'system',
      systemLinkList: [],
      addonsLinkList: []
    }
  },
  computed: {},
  watch: {
    url() {
      this.urlInit()
    }
  },
  mounted() {
    this.getLinkInput()
    this.urlInit()
  },
  methods: {
    onSubmit() {
      this.$emit('choose', this.zdy)
      this.zdy = {}
    },
    handleChoose(link) {
      this.$emit('choose', link)
    },
    getLinkInput() {
      getLinkInput().then(res => {
        this.systemLinkList = res.data['system']
        this.addonsLinkList = res.data['addons']
      })
    },
    urlInit() {
      if (typeof this.url === 'string') {
        this.zdy = { url: this.url }
      } else {
        this.zdy = this.url
      }
      if (this.zdy.url) {
        this.activeName = 'zdy'
      }
    }
  }
}
</script>

<style scoped lang="scss">
.dk-link {

}
</style>
