<template>
  <div class="custom-input">
    <el-select v-model="select.jumpType" placeholder="请选择" @change="selectType">
      <el-option
        v-for="(item, index) in linkTypes"
        :key="~~index"
        :label="item"
        :value="~~index">
      </el-option>
    </el-select>

    <div class="link-type-input" v-if="select.jumpType === 1">
      <el-input v-model="select.url" placeholder="请输入外部链接" @input="blurFunc"></el-input>
    </div>
    <div class="link-type-input" v-if="select.jumpType === 2">
      <el-select v-model="select.jumpId" placeholder="请选择">
        <el-option
          v-for="item in satelliteList"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </div>
    <div class="link-type-input" v-if="select.jumpType === 3">
      <el-button type="primary" icon="el-icon-plus" v-if="!select.jumpId" @click="visible.news = true">选择动态</el-button>
      <el-tag type="success" v-if="select.jumpId">已选择</el-tag>
    </div>
    <div class="link-type-input" v-if="select.jumpType === 4">
      <el-select v-model="select.jumpId" placeholder="请选择">
        <el-option
          v-for="item in applicationList"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </div>
    <div class="link-type-input" v-if="select.jumpType === 5">
      <el-button type="primary" icon="el-icon-plus" v-if="!select.jumpId" @click="visible.details = true">选择应用详情</el-button>
      <el-tag type="success" v-if="select.jumpId">已选择</el-tag>
    </div>
    <div class="el-form-item__error" v-if="select.jumpType !== 0 && !!hasErr">{{hasErr}}</div>


    <!-- 动态弹窗 -->
    <el-dialog title="星云动态" :visible.sync="visible.news" append-to-body>
      <el-table :data="newsList">
        <el-table-column type="index" label="序号" width="50"></el-table-column>
        <el-table-column property="title" label="标题" width="200"></el-table-column>
        <el-table-column property="address" label="简介"></el-table-column>
        <el-table-column property="address" label="类型"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" @click="selectFunc(scope.row)">选择</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <!-- 应用详情弹窗 -->
    <el-dialog title="选择资讯" :visible.sync="visible.details" append-to-body>
      <el-table :data="detailsList">
        <el-table-column type="index" label="序号" width="50"></el-table-column>
        <el-table-column property="name" label="应用类别" width="200"></el-table-column>
        <el-table-column property="address" label="应用名称"></el-table-column>
        <el-table-column property="address" label="发布时间"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" @click="selectFunc(scope.row)">选择</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

  </div>
</template>

<script>

export default {
  name: "index",
  props: {
    value: {
      type: Object,
      default: () => {}
    }
  },
  watch: {
    value: {
      handler(newVal) {
        this.select.jumpType = newVal.jumpType
        this.select.url = newVal.url
        this.select.jumpId = newVal.jumpId
      },
      deep: true
    }
  },
  data() {
    return {
      //跳转类型
      linkTypes: {
        0: "不跳转",
        1: '外部链接',
        2: '卫星影像',
        3: '星云动态',
        4: '行业应用类别',
        5: '行业应用详情',
      },
      satelliteList: [],//卫星影像
      applicationList: [],//行业应用
      //选择的类型与对应的值
      select: {
        jumpType: 0,
        url: '',
        jumpId: null,
        jumpObj: {}
      },
      visible: {
        news: false,
        details: false
      },
      newsList: [],
      detailsList: [],
      hasErr: ''
    };
  },
  methods: {
    showErr(err) {
      this.hasErr = err
    },
    selectType() {
      this.$emit('reset', this.select.jumpType)
      this.showErr('')
    },
    blurFunc() {
      this.emitInput(this.select.url)
    },
    emitInput(val) {
      this.$emit('input', val)
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.link-type-input {
  display: inline-block;
}
</style>
