<template>
  <div class="autoBox box" style="background: #fff">
    <div class="menu">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: 'home' }">{{
          $t("common.Home")
        }}</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: 'realTimeInfo1' }">{{
          $t("common.NewsData")
        }}</el-breadcrumb-item>
        <el-breadcrumb-item>{{
          $t("common.LatestDevelopment")
        }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="content">
      <div>
        <img
          v-if="$i18n.locale == 'zh'"
          style="width: 100%"
          src="@/assets/img/realTimeInfo/newszh.png"
          alt=""
        />
        <img
          v-if="$i18n.locale == 'en'"
          style="width: 100%"
          src="@/assets/img/realTimeInfo/newsen.png"
          alt=""
        />
      </div>
      <div class="pageTurn">
        <div style="float: left; margin-left: 20px">
          <div class="timeSelect">
            <span>{{ $t("common.Years") }}：</span>
            <el-date-picker
              v-model="years1"
              type="year"
              :placeholder="$t('common.Querybydate')"
            >
            </el-date-picker>
          </div>
          <div class="pageQu">
            <div style="float: left">{{ $t("common.Issue") }}：</div>
            <el-input
              v-model="issue"
              :placeholder="$t('common.PleasEenterIssue')"
            ></el-input>
          </div>
          <el-button class="queryBtn" @click="queryData">{{
            $t("common.WeeklySerch")
          }}</el-button>
          <el-button class="queryBtn" @click="resetQuery">{{
            $t("common.realClear")
          }}</el-button>
          <div style="clear: both"></div>
        </div>
        <div class="pageTitle">
          <div style="display: inline-block" v-if="detailsItem.title">
            <!--                        <span>{{this.data}}</span>-->
            <span v-if="$i18n.locale == 'zh'">每日运行分析</span>
            <span v-if="$i18n.locale == 'en'">Daily Operation Analysis</span>
            <span v-if="$i18n.locale == 'zh'" style="margin-left: 10px"
              >{{ date }}年</span
            >
            <span v-if="$i18n.locale == 'en'" style="margin-left: 10px"
              >{{ date }} Years</span
            >
            <div
              v-if="$i18n.locale == 'zh'"
              style="display: inline-block; margin: 0 10px"
            >
              第<span style="color: red">{{ currentPer }}</span
              >期
            </div>
            <div
              v-if="$i18n.locale == 'en'"
              style="display: inline-block; margin: 0 10px"
            >
              Order by <span style="color: red">{{ currentPer }}</span>
            </div>
          </div>
          <div class="upAndDownload">
            <div class="pageBtn" @click="upPage">
              {{ $t("common.PreviousArticle") }}
            </div>
            <div class="pageBtn" @click="downPage">
              {{ $t("common.NextArticle") }}
            </div>
          </div>
        </div>
        <div style="clear: both"></div>
      </div>
      <div class="details">
        <div class="newList">
          <div class="newscontent">
            <!--                        信息要情-->
            <div class="title">
              <i class="el-icon-document-copy"></i>
              {{ $t("common.ImportantInformation") }}
            </div>
            <div v-if="newsList">
              <div
                v-for="(newsItem, nwesIndex) in newsList" :key="nwesIndex"
                class="newlistDetail"
                @click="getOnlyData(newsItem.id)"
              >
                <div v-if="newsItem">
                  <div class="newstitle">
                    <span>{{ nwesIndex + 1 }}. {{ newsItem.title }}</span>
                    <div class="newstip">
                      {{ newsItem.tag }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div v-else>{{ $t("common.NoData") }}</div>
            <!--                        运行数据-->
            <div class="title">
              <i class="el-icon-s-data"></i>
              {{ $t("common.OperatingData") }}
            </div>
            <div>
              <div
                v-for="(dataItem, dataIndex) in dataListzh" :key="dataIndex"
                class="newlistDetail"
                @click="getRunData(dataItem.id)"
              >
                <div class="newstitle">
                  {{ dataIndex + 1 }}. <span>{{ dataItem.title }}</span>
                   <div class="newstip">
                  {{ dataItem.international }}
                </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          v-if="!detailsItem.title"
          style="width: 100%; text-align: center; margin-top: 30px"
        >
          {{ $t("common.NoData") }}
        </div>
        <div class="detailPDF" v-if="detailsItem.title">
          <div style="text-align: center">
            <span class="pdfsTitle">{{ detailsItem.title }}</span>
            <div class="newstip" v-if="detailsItem.tag">
              {{ detailsItem.tag }}
            </div>
            <div class="newstip" v-if="detailsItem.international">
              {{ detailsItem.international }}
            </div>
          </div>
          <div class="dividing" v-if="detailsItem.title"></div>
          <div v-html="detailsItem.contentHtml" style="line-height: 30px"></div>
          <div
            style="text-align: right; margin-top: 50px"
            v-if="detailsItem.auther"
          >
            (<span>{{ $t("common.Source") }}：{{ detailsItem.auther }}</span
            >)
          </div>
          <div class="dividing"></div>
          <div class="tip">
            {{ $t("common.contentisreproduced") }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getNewInternationalInformationList,
  getNewDataArticle,
  dataArticleGate,
  searchInformationByNextButton,
  searchDataArticleByNextButton,
} from "@/api/operation/baseAdvertisement";
import { getBaseInvestmentGuidelinesInfos } from "@/api/financialService/baseInvestmentGuidelinesInfo";
import { sysAttachmentInfos } from "../../api/cooperation/baseCooperationUnit";
export default {
  name: "RealTimeInfoLatetDevelopment",
  data() {
    return {
      newsList: [],
      dataListzh: [],
      detailsItem: {},
      date: "",
      years1: "",
      id: "",
      tips: [
        {
          title: "1.包括清华大学等十多家机构",
        },
        {
          title: "2.中英气候变化风险评估",
        },
      ],
      currentId: this.$route.query.key,
      currentPer: "",
      pdfSrc: null,
      showPdfDeta: {},
      isRunData: false,
      issue: "",
      currentInfo: {},
    };
  },
  mounted() {
    // this.getOnlyData();
    this.getNewsActive();
  },
  watch: {
    "$i18n.locale"() {
    //   this.getOnlyData();
      this.getNewsActive();
    },
  },
  methods: {
    iniTime(temTime) {
      this.date = temTime;
    },
    upPage() {
      let that = this;
      let params = {
        type: that.newsList[0].type,
        languageDict: that.$i18n.locale.toUpperCase(),
        buttonType: "previous",
        year: that.newsList[0].remark,
      };
      searchInformationByNextButton(params).then((res) => {
        if (res.data) {
          let data = res.data.internationalInformationInfo;
          if (data) {
            that.newsList = data;
            that.detailsItem = data[0];
            that.currentPer = that.newsList[0].type;
            let time = that.newsList[0].remark;
            that.iniTime(time);
            that.getRunnewlist(that.newsList[0].type, that.newsList[0].remark);
          } else if (typeof res.data == "string") {
            if (that.$i18n.locale == "zh") {
              that.$message({
                message: "信息要情" + res.data,
                type: "warring",
              });
            } else {
              that.$message({
                message: " Important Information" + res.data,
                type: "warring",
              });
            }
          } else {
            that.newsList = [];
            that.detailsItem = {};
            that.dataListzh = [];
            if (this.$i18n.locale == "zh") {
              this.$message({
                message: "信息要情暂无数据",
                type: "warring",
              });
            } else {
              this.$message({
                message: "Important Information No Data",
                type: "warring",
              });
            }
          }
        }
      });
    },
    downPage() {
      let that = this;
      let params = {
        type: that.newsList[0].type,
        languageDict: that.$i18n.locale.toUpperCase(),
        buttonType: "next",
        year: that.newsList[0].remark,
      };
      searchInformationByNextButton(params).then((res) => {
        if (res.data) {
          let data = res.data.internationalInformationInfo;
          if (data) {
            that.newsList = data;
            that.detailsItem = data[0];
            that.currentPer = that.newsList[0].type;
            let time = that.newsList[0].remark;
            that.iniTime(time);
            that.getRunnewlist(that.detailsItem.type, time);
          } else if (typeof res.data == "string") {
            if (that.$i18n.locale == "zh") {
              that.$message({
                message: "信息要情" + res.data,
                type: "warring",
              });
            } else {
              that.$message({
                message: " Important Information" + res.data,
                type: "warring",
              });
            }
          } else {
            that.dataListzh = [];
            that.newsList = [];
            that.detailsItem = {};
            if (this.$i18n.locale == "zh") {
              this.$message({
                message: "信息要情暂无数据",
                type: "warring",
              });
            } else {
              this.$message({
                message: "Important Information No Data",
                type: "warring",
              });
            }
          }
        }
      });
    },
    getRunnewlist(type, remark) {
      let that = this;
      let params = {
        type: type,
        language: that.$i18n.locale.toUpperCase(),
        customContentView: remark,
      };
      getNewDataArticle(params).then((res) => {
        if (res.data) {
          let data = res.data.dataArticle;
          if (data) {
            that.dataListzh = data;
          } else if (typeof res.data == "string") {
            if (that.$i18n.locale == "zh") {
              that.$message({
                message: "运行数据" + res.data,
                type: "warring",
              });
            } else {
              that.$message({
                message: " Operating Data" + res.data,
                type: "warring",
              });
            }
          } else {
            that.dataListzh = [];
            if (that.$i18n.locale == "zh") {
              that.$message({
                message: "暂无运行数据",
                type: "warring",
              });
            } else {
              that.$message({
                message: "No running data is available",
                type: "warring",
              });
            }
          }
        }
      });
    },
    queryData() {
      let that = this;
      if (that.years1 && that.issue) {
        let year = that.formatDate(that.years1);
        year = year.split("-");
        let parm = {
          type: that.issue,
          endTime: year[0],
        };
        this.getNewsActive(parm);
      } else {
        if (this.$i18n.locale == "zh") {
          this.$message({
            message: "查询值不能为空",
            type: "warring",
          });
        } else {
          this.$message({
            message: "The query value cannot be empty",
            type: "warring",
          });
        }
      }
    },
    getNewsActive(pram) {
      let that = this;
      let params = {};
      if (pram) {
        params = {
          ...pram,
          language: that.$i18n.locale.toUpperCase(),
        };
      } else {
        params = {
          language: that.$i18n.locale.toUpperCase(),
        };
      }
      getNewInternationalInformationList(params).then((res) => {
        if (res.data.InternationalInformationInfo) {
          that.newsList = res.data.InternationalInformationInfo;
          that.detailsItem = that.newsList[0];
          console.log('---->',that.detailsItem);
          that.currentPer = that.newsList[0].type;
          let time2 = that.newsList[0].remark;
          that.iniTime(time2);
          if (pram) {
            that.getRunDataList(
              pram,
              that.newsList[0].type,
              that.detailsItem.remark
            );
          } else {
            that.getRunDataList(
              "",
              that.newsList[0].type,
              that.detailsItem.remark
            );
            this.getOnlyData();
          }
        } else {
          this.newsList = [];
          this.detailsItem = {};
          this.dataListzh = [];
          if (this.$i18n.locale == "zh") {
            this.$message({
              message: "信息要情暂无数据",
              type: "warring",
            });
          } else {
            this.$message({
              message: "Important Information No Data",
              type: "warring",
            });
          }
        }
      });
    },
    getOnlyData(id) {
      let _this = this;
      _this.isRunData = false;
      _this.id = _this.$route.query.key;
      let params = {
        id: id || _this.id,
        language: _this.$i18n.locale.toUpperCase(),
      };
      getNewInternationalInformationList(params).then((res) => {
        if (res.data.InternationalInformationInfo) {
          let tem = res.data.InternationalInformationInfo;
          _this.detailsItem = tem[0];
        } else {
          _this.detailsItem = {};
        }
      });
    },
    //获取运行数据
    getRunData(value) {
      let that = this;
      that.isRunData = true;
      let params = {
        id: value,
        language: that.$i18n.locale.toUpperCase(),
      };
      dataArticleGate(params).then((res) => {
        if (res.data.dataArticle[0]) {
          that.detailsItem = res.data.dataArticle[0];
          that.detailsItem.author = res.data.dataArticle[0].auther;
        } else {
          that.detailsItem = {};
          if (that.$i18n.locale == "zh") {
            that.$message({
              message: "暂无运行数据",
              type: "warring",
            });
          } else {
            that.$message({
              message: "No running data is available",
              type: "warring",
            });
          }
        }
      });
    },
    getRunDataList(time, type, cud) {
      let that = this;
      let params = {};
      if (time) {
        params = {
          ...time,
          language: that.$i18n.locale.toUpperCase(),
          customContentView: cud,
        };
      } else {
        params = {
          type: type,
          language: that.$i18n.locale.toUpperCase(),
          customContentView: cud,
        };
      }

      getNewDataArticle(params).then((res) => {
        if (res.data) {
          that.dataListzh = res.data.dataArticle;
        } else {
          that.dataListzh = [];
          if (this.$i18n.locale == "zh") {
            this.$message({
              message: "运行数据暂无数据",
              type: "warring",
            });
          } else {
            this.$message({
              message: "No running data is available",
              type: "warring",
            });
          }
        }
      });
    },
    resetQuery() {
      this.years1 = "";
      this.issue = "";
       let parm = {
          type: '',
          endTime: '',
        };
      this.getNewsActive(parm);
    },
  },
};
</script>

<style scoped>
.menu {
  padding: 20px;
  margin-top: 20px;
}
.content {
  padding: 20px;
}
.timeSelect {
  float: left;
}

.pageTurn {
  width: 100%;
  height: 62px;
  line-height: 62px;
  background: #e8eef5;
  margin: 20px 0;
  text-align: right;
}

.pageTitle {
  /*width: 65%;*/
  /*float: right;*/
  text-align: center;
}
.upAndDownload {
  float: right;
}
.pageBtn {
  display: inline-block;
  margin-right: 30px;
  cursor: pointer;
}
.details {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
}
.newList {
  width: 32%;
}
.newscontent {
  width: 95%;
}
.newsLogo {
  width: 100%;
  height: 100px;
}
.title {
  height: 30px;
  margin-top: 20px;
  background: #1b579f;
  color: #fff;
  line-height: 30px;
  padding: 0 10px;
}
.newlistDetail {
  margin-top: 20px;
  cursor: pointer;
  /* display: flex; */
}
.newstitle {
  display: inline-block;
}
.newstip {
  display: inline-block;
  background: #e8f6ff;
  color: #4db8ff;
  padding: 2px 10px;
  margin-left: 20px;
  font-size: 12px;
}
.detailPDF {
  width: 65%;
  padding-top: 20px;
}

.pdfsTitle {
  font-size: 24px;
  color: #2c558a;
}
.dividing {
  width: 100%;
  background: #ccc;
  height: 1px;
  margin: 30px 0;
}
.tip {
  color: #666;
  line-height: 30px;
}
.pageQu {
  float: left;
  margin-left: 20px;
  margin-right: 20px;
}
>>> .el-input__inner {
  width: 100px !important;
  height: 30px;
}
>>> .el-input {
  width: 100px !important;
}
.queryBtn {
  height: 30px;
  margin-top: 18px;
  line-height: 5px;
  background: #0ab8ed;
  color: #fff;
  cursor: pointer;
}
</style>
