<template>
  <div class="my-right-content border-box">
    <nav-bread :menuData="menuData"></nav-bread>
    <div class="detail-content">
      <el-form ref="form" :model="formData" label-width="110px">
        <el-form-item label="版本号">
          <span>{{ formData.version }}</span>
        </el-form-item>
        <el-form-item label="标题">
          <span>{{ formData.title }}</span>
        </el-form-item>
        <el-form-item label="版本内容">
          <span>{{ formData.content }}</span>
        </el-form-item>
        <el-form-item label="安装包上传" v-if="$route.query.activeTab == 'android'">
          <span>{{ formData.apkName }}</span>
        </el-form-item>
        <el-form-item label="强制更新">
          <span>{{ formData.forcedUpdating == 1 ? '是' : '否' }}</span>
        </el-form-item>
        <el-form-item label="状态">
          <span>{{ formData.status == 1 ? '启用' : '停用' }}</span>
        </el-form-item>
        <el-form-item label="最近编辑">
          <span>{{ formData.operatorName }}</span>
        </el-form-item>
        <el-form-item label="最近更新时间">
          <span>{{ formData.updateTime }}</span>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import navBread from '@/components/haoban/nav-bread.vue';
import { getRequest } from '@/api/api';
export default {
  name: 'tableList',
  components: {
    navBread
  },
  data() {
    return {
      requestProject: 'gic-bizdict',
      menuData: [
        {
          name: this.$route.query.activeTab == 'android' ? '安卓配置' : 'iOS配置',
          path: `/versionList?activeTab=${this.$route.query.activeTab}&name=${this.$route.query.name}&icon=${this.$route.query.icon}&code=${this.$route.query.code}&tabId=${this.$route.query.tabId}`
        },
        {
          name: '查看详情',
          path: ''
        }
      ],
      formData: {
        packageId: '',
        version: '',
        title: '',
        content: '',
        forcedUpdating: '',
        operatorName: '',
        updateTime: '',
        status: '',
        apkName: ''
      },
      loading: false
    };
  },
  mounted() {
    let that = this;
    that.$emit('showTab', '15');
    that.formData.packageId = that.$route.query.packageId;
    if (that.$route.query.activeTab == 'android') {
      that.getData();
    } else {
      that.getData();
    }
  },
  methods: {
    /**
     * 路由跳转
     */
    changeRoute(path) {
      this.$router.push(path);
    },
    /* *
     * 格式化时间戳
     */
    formatTime(data) {
      let date = new Date(data);
      let month = date.getMonth() + 1;
      let day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
      let newMonth = month < 10 ? '0' + month : month;
      let hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
      let minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
      let seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
      return `${date.getFullYear()}-${newMonth}-${day} ${hours}:${minutes}:${seconds}`;
    },

    /**
     * 获取数据
     *
     */
    getData() {
      let that = this;
      that.loading = true;
      let para = {
        requestProject: that.requestProject,
        packageId: that.formData.packageId
      };
      getRequest(`/gic-platform-operation/app-package/${that.formData.packageId}`, para)
        .then(res => {
          let data = res.data;
          that.loading = false;
          if (data.errorCode == 0) {
            if (!!data.result.updateTime) {
              data.result.updateTime = that.formatTime(data.result.updateTime);
            }
            that.formData = data.result ? data.result : {};
            if (!!data.result.url) {
              let urlArr = data.result.url.split('/');
              that.formData.apkName = urlArr[urlArr.length - 1];
            }
          } else {
            that.$message.error(data.message);
          }
        })
        .catch(function(error) {
          that.loading = false;
          that.$message.error(error);
        });
    }
  }
};
</script>
<style lang="less" scoped>
.detail-content {
  padding: 24px;
}
</style>
