<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="text" @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
          style="text-align: center"
          :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="text" @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
          style="text-align: center"
          :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>
