<template>
  <div class="custom-input">
    <el-select v-model="select.jumpType" placeholder="请选择" @change="jumpTypeChange">
      <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.value" placeholder="请输入外部链接"></el-input>
    </div>

    <!-- 卫星影像 -->
    <div class="link-type-input" v-if="select.jumpType === 2">
      <el-select v-model="select.value" placeholder="请选择">
        <el-option
          v-for="item in satelliteList"
          :key="item.id"
          :label="item.name"
          :value="item.id + ''">
        </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.value" @click="news.visible = true">选择动态</el-button>
      <!-- 点击为更换的意思 -->
      <el-tag type="success" v-if="select.value" @click="news.visible = true">{{getName('news', select.value, 'title')}}</el-tag>
    </div>

    <!-- 行业应用类别 -->
    <div class="link-type-input" v-if="select.jumpType === 4">
      <el-select v-model="select.value" placeholder="请选择">
        <el-option
          v-for="item in applicationList"
          :key="item.id"
          :label="item.title"
          :value="item.id + ''">
        </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.value" @click="details.visible = true">选择应用详情</el-button>
      <el-tag type="success" v-if="select.value" @click="details.visible = true">{{getName('details', select.value, 'title')}}</el-tag>
    </div>
    <div class="el-form-item__error" v-if="select.jumpType !== 0 && !!hasErr">{{hasErr}}</div>


    <!-- 动态弹窗 news-->
    <el-dialog title="星云动态" :visible.sync="news.visible" append-to-body width="80%" style="height: 100%">
      <el-table size="mini" :data="news.datas" border fit highlight-current-row current-row-key="id"
         @current-change="(val) => handleCurrentChange('news', val)" style="width: 100%" height="500px">
          <el-table-column label="序号" width="50" align="center">
              <template slot-scope="scope">
                  <span>{{scope.row.id}}</span>
              </template>
          </el-table-column>
          <el-table-column label="资讯标题" width="200" align="center">
              <template slot-scope="scope">
                  <span>{{scope.row.title}}</span>
              </template>
          </el-table-column>
          <el-table-column label="缩略图" width="150" align="center">
              <template slot-scope="scope">
                  <span>
                      <img class="icon" :src="scope.row.coverImg"/>
                  </span>
              </template>
          </el-table-column>
          <el-table-column label="简介" align="center">
              <template slot-scope="scope">
                  <span class="introduce">{{scope.row.detail}}</span>
              </template>
          </el-table-column>
          <el-table-column label="类型" width="150" align="center">
              <template slot-scope="scope">
                  <span>{{scope.row.typeName}}</span>
              </template>
          </el-table-column>
          <el-table-column label="状态" align="center">
              <template slot-scope="scope">
                  <span>{{getStatus(scope.row.status)}}</span>
              </template>
          </el-table-column>
          <el-table-column label="操作" width="80" align="center">
              <template slot-scope="scope">
                <el-button type="primary" @click="selectFunc('news', scope.row)">选择</el-button>
              </template>
          </el-table-column>
      </el-table>
      <div style="display: flex; align-item: center; justify-content: center; margin-top: 20px">
        <el-pagination
          :page-size="news.pageParams.limit"
          background
          layout="prev, pager, next"
          :total="news.total" @current-change="(val) => pageChange('news', val)">
        </el-pagination>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="news.visible = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 应用详情弹窗 -->
    <el-dialog title="选择资讯" :visible.sync="details.visible" append-to-body width="80%" style="height: 100%">
      <el-table size="mini" :data="details.datas" border fit highlight-current-row current-row-key="id"
      @current-change="(val) => handleCurrentChange('details', val)" style="width: 100%" height="500px">
          <el-table-column label="序号" width="100" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.id }}</span>
            </template>
          </el-table-column>
          <el-table-column label="应用类别" width="200" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.type }}</span>
            </template>
          </el-table-column>
          <el-table-column label="应用名称" align="center">
            <template slot-scope="scope">
              <span class="introduce">{{ scope.row.title }}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column label="详情图" align="center">
            <template slot-scope="scope">
              <span>
                <img
                  class="icon"
                  :src="scope.row.coverImg"
                />
              </span>
            </template>
          </el-table-column> -->
          <el-table-column label="发布时间" width="150" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.crtTime }}</span>
            </template>
          </el-table-column>
          <el-table-column label="状态" width="150" align="center">
            <template slot-scope="scope">
              <span>{{ getStatus(scope.row.status) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150" align="center">
            <template slot-scope="scope">
              <el-button type="primary" @click="selectFunc('details', scope.row)">选择</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="display: flex; align-item: center; justify-content: center; margin-top: 20px">
        <el-pagination
          :page-size="details.pageParams.limit"
          background
          layout="prev, pager, next"
          :total="details.total" @current-change="(val) => pageChange('details', val)">
        </el-pagination>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="details.visible = false">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { getListApplicationType, getListApplicationInfo } from "@/api/website/industryApplication"//获取行业类别、行业应用详情
import { page } from "@/api/website/satelliteIntroduction"//获取卫星介绍
import { getListNewsInfo } from "@/api/website/newsCategory" //星云动态

export default {
  name: "index",
  props: {
    value: {
      type: Object,
      default: () => {}
    }
  },
  watch: {
    value: {
      handler(newVal) {
        console.log(newVal)
        this.select.jumpType = newVal.jumpType;
        this.select.value = newVal.jumpType === 1 ? newVal.url : newVal.jumpId;

        if (newVal.jumpType === 3) {
          this.news.currRow = newVal.jumpId
        } else if(newVal.jumpType === 5) {
          this.details.currRow = newVal.jumpId
        }
      },
      deep:true
    },
    select: {
      handler(newVal) {
        this.$emit('input', newVal)
      },
      deep: true
    }
  },
  computed: {
    getStatus(status) {
      return (status) => {
        let a = ""
        switch(status) {
          case 1: a = '启用'; break;
          case 2: a = '禁用'; break;
          default: a = '未知';break
        }
        return a
      }
    },
    getName(key, id, name) {
      return (key, id, name) => {
        console.log(this[key])
        let target = this[key].datas.find(v => v.id == id);
        console.log(111, target)
        return (target && target[name]) || null
      }
    }
  },
  data() {
    return {
      //跳转类型 其他还未完善先隐藏
      linkTypes: {
        0: "不跳转",
        1: '外部链接',
        2: '卫星影像',
        3: '星云动态',
        4: '行业应用类别',
        5: '行业应用详情',
      },
      satelliteList: [],//卫星影像
      applicationList: [],//行业应用
      //选择的类型与对应的值
      select: {
        jumpType: 0,
        value: ''
      },
      //星云动态
      news: {
        datas: [],
        visible: false,
        currRow: null,
        total: 100,
        pageParams: {
          page:1,
          limit: 20
        }
      },
      //应用详情
      details: {
        datas: [],
        visible: false,
        currRow: null,
        total: 100,
        pageParams: {
          page:1,
          limit: 20
        }
      },
      hasErr: '',

    };
  },
  mounted() {
    this.init()
  },
  methods: {
    //初始化
    init() {
      this.getSatelliteListFunc();//获取卫星影像介绍
      this.getListApplicationTypeFunc();//获取行业应用类型
      this.getDialogDatas('news', getListNewsInfo)//星云动态
      this.getDialogDatas('details', getListApplicationInfo)//行业应用详情
    },
    getDialogDatas(key, fn) {
      // console.log(this[key].pageParams, '星云和详情')
      fn(this[key].pageParams).then(res => {
        this[key].datas = res.data.data
        this[key].total = res.data.totalCount
      })
    },
    //分页切换
    pageChange(key, val) {
      this[key].pageParams.page = val;
      let fn = key == 'news' ? getListNewsInfo : getListApplicationInfo

      this.getDialogDatas(key, fn)//星云动态 or 行业应用详情
    },
    // //星云动态
    // getListNewsInfoFunc() {
    //   getListNewsInfo(this.news.pageParams).then(res => {
    //     this.news.datas = res.data.data
    //     this.news.total = res.data.totalCount
    //   })
    // },
    // //行业应用详情
    // getListApplicationInfoFunc() {
    //   getListApplicationInfo(this.details.pageParams).then(res => {
    //     this.details.datas = res.data.data
    //     this.details.total = res.data.totalCount
    //   })
    // },
    //行业应用类别
    getListApplicationTypeFunc() {
      let params = {
        page: 1,
        limit: 20
      }
      getListApplicationType(params).then(res => {
        this.applicationList = res.data.data
      })
    },
    //获取卫星影像介绍
    getSatelliteListFunc() {
      page().then(res => {
        this.satelliteList = res.data.data
      })
    },
    //动态。详情翻页
    handleCurrentChange(key, val) {
      this[key].currRow = val;
    },
    //动态。详情选择按钮
    selectFunc(key, val) {
      this[key].visible = false;
      this.select.value = val.id;
      this[key].currRow = val.id;//高亮选中项
    },
    showErr(err) {
      this.hasErr = err
    },
    //跳转类型改变方法
    jumpTypeChange() {
      this.select.value = "";
      this.showErr('')
    }
  }
};
</script>

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