<!--
<android-table :activeTab="activeTab"></android-table>

import androidTable from '@/components/haoban/android-table.vue'
components: {
  androidTable
}
-->
<template>
  <div class="android-content border-box">
    <el-table v-loading="loading" :data="tableData" class="table-no-line-wrap">
      <el-table-column prop="categoryName" label="版本号">
        <template slot-scope="scoped">
          {{ scoped.row.version }}
        </template>
      </el-table-column>
      <el-table-column prop="code" label="强制更新">
        <template slot-scope="scoped">
          {{ scoped.row.forcedUpdating == 1 ? '是' : '否' }}
        </template>
      </el-table-column>
      <el-table-column prop="parentCode" label="最近编辑" show-overflow-tooltip>
        <template slot-scope="scoped">{{ scoped.row.operatorName }}</template>
      </el-table-column>
      <el-table-column prop="code" label="最后更新时间">
        <template slot-scope="scoped">
          {{ scoped.row.updateTime }}
        </template>
      </el-table-column>
      <el-table-column prop="code" label="状态">
        <template slot-scope="scoped">
          <el-switch v-model="scoped.row.status" active-text="" inactive-text="" @change="changeStatus(scoped.$index, scoped.row)"></el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="opr" label="操作" width="200">
        <template slot-scope="scoped">
          <el-button @click="toShow(scoped.$index, scoped.row)" type="text">查看</el-button>
          <el-button v-if="activeTab == 'android'" @click="toDownload(scoped.$index, scoped.row)" type="text">下载</el-button>
          <el-button @click="toEdit(scoped.$index, scoped.row)" type="text">编辑</el-button>
          <el-button :disabled="scoped.row.status == 1 ? true : false" @click="toDel(scoped.$index, scoped.row)" type="text">删除</el-button>
        </template>
      </el-table-column>
      <template slot="empty">
        <div class="no-data-wrap">
          <div class="no-data-icon">
            <img src="../../../static/img/no-data_icon.png" alt="" />
          </div>
          <p>暂无数据</p>
        </div>
      </template>
    </el-table>
  </div>
</template>
<script>
import { getRequest, putRequest } from '@/api/api';
export default {
  name: 'tableList',
  props: {
    activeTab: {
      type: String,
      default() {
        return '';
      }
    },
    activeMenuTab: {
      type: [String, Number],
      default() {
        return 15;
      }
    }
  },
  data() {
    return {
      requestProject: 'gic-bizdict',
      platform: this.activeTab == 'android' ? '0' : '1', // 0: 安卓，1: ios
      tableData: [
        /*  {
          version: '2.0.1',
          forceUpdate: 1,
          operatorName: 'admin',
          updateTime: '2019-04-04 13:45',
          status: true
        } */
      ],
      loading: false
    };
  },
  filters: {
    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}`;
    }
  },
  watch: {
    activeTab(newDate) {
      let that = this;
      if (!newDate) {
        return false;
      }
      if (newDate == 'android') {
        that.platform = '0';
        that.getData();
      } else {
        that.platform = '1';
        that.getData();
      }
    }
  },
  mounted() {
    let that = this;
    if (that.activeTab != '') {
      if (that.activeTab == 'android') {
        that.platform = '0';
        that.getData();
      } else {
        that.platform = '1';
        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}`;
    },

    /**
     * 改变状态
     *
     */
    changeStatus(index, row) {
      let that = this;
      if (row.status) {
        row.status = false;
        that
          .$confirm('确认启用该更新？启用后，此更新将可用', '提示', {
            confirmButtonText: '确 定',
            cancelButtonText: '取 消',
            type: 'warning'
          })
          .then(() => {
            that.postStatus(index, row);
          })
          .catch(() => {
            // 重置状态
            row.status = false;
          });
      } else {
        row.status = true;
        that
          .$confirm('确认关闭该更新？关闭后，此更新将不可用', '提示', {
            confirmButtonText: '确 定',
            cancelButtonText: '取 消',
            type: 'warning'
          })
          .then(() => {
            that.postStatus(index, row);
          })
          .catch(() => {
            // 重置状态
            row.status = true;
          });
      }
    },
    postStatus(index, row) {
      let that = this;
      let para = {
        requestProject: that.requestProject,
        packageId: row.packageId,
        status: !!row.status ? '2' : '1'
      };
      putRequest(`/gic-platform-operation/app-package/${row.packageId}/${para.status}`, para)
        .then(res => {
          let data = res.data;
          if (data.errorCode == 0) {
            that.$message({
              message: '更改成功',
              type: 'success'
            });
            row.status = para.status == 1 ? true : false;
          } else {
            that.$message.error(data.message);
          }
        })
        .catch(function(error) {
          that.$message.error(error);
        });
    },
    /**
     * 查看
     *
     */
    toShow(index, row) {
      let that = this;
      that.changeRoute(`/setDetail?packageId=${row.packageId}&activeTab=${that.activeTab}&name=${that.$route.query.name}&icon=${that.$route.query.icon}&code=${that.$route.query.code}&tabCode=${that.$route.query.tabCode || that.activeMenuTab}`);
    },
    /**
     * 下载
     *
     */
    toDownload(index, row) {
      window.open(row.url);
    },

    /**
     * 编辑
     *
     */
    toEdit(index, row) {
      let that = this;
      that.changeRoute(`/addSet?packageId=${row.packageId}&activeTab=${that.activeTab}&name=${that.$route.query.name}&icon=${that.$route.query.icon}&code=${that.$route.query.code}&tabCode=${that.$route.query.tabCode || that.activeMenuTab}`);
    },
    /**
     * 删除
     *
     */
    toDel(index, row) {
      let that = this;
      that
        .$confirm('确认删除吗？删除后无法恢复', '提示', {
          confirmButtonText: '确 定',
          cancelButtonText: '取 消',
          type: 'warning'
        })
        .then(() => {
          that.postDel(index, row);
        });
    },
    postDel(index, row) {
      let that = this;
      let para = {
        requestProject: that.requestProject,
        packageId: row.packageId,
        status: 0
      };
      putRequest(`/gic-platform-operation/app-package/${row.packageId}/0`, para)
        .then(res => {
          let data = res.data;
          if (data.errorCode == 0) {
            that.$message({
              message: '删除成功',
              type: 'success'
            });
            that.tableData.splice(index, 1);
          } else {
            that.$message.error(data.message);
          }
        })
        .catch(function(error) {
          that.$message.error(error);
        });
    },
    /**
     * 获取列表
     *
     */
    async getData() {
      let that = this;
      let homeFlag = await that.getHome();
      if (!!homeFlag) {
        that.getRequestData();
      } else {
        that.$message.error('授权失败!');
      }
    },
    getRequestData() {
      let that = this;
      that.loading = true;
      let para = {
        requestProject: that.requestProject,
        platform: !!that.$route.query.activeTab ? (that.$route.query.activeTab == 'ios' ? '1' : '0') : that.platform
      };
      getRequest(`/gic-platform-operation/app-packages/${that.platform}`, para)
        .then(res => {
          let data = res.data;
          that.loading = false;
          if (data.errorCode == 0) {
            if (!!data.result && !!data.result.length) {
              data.result.forEach(ele => {
                ele.status = ele.status == 1 ? true : false;
                ele.updateTime = that.formatTime(ele.updateTime);
              });
            }
            that.tableData = !!data.result ? data.result : [];
          } else {
            that.$message.error(data.message);
          }
        })
        .catch(function(error) {
          that.loading = false;
          that.$message.error(error);
        });
    },

    async getHome() {
      return new Promise((resolve, reject) => {
        getRequest('/gic-platform-operation/home', {})
          .then(res => {
            let resData = res.data;
            if (resData.errorCode == 0) {
              resolve(true);
            } else {
              reject(false);
            }
          })
          .catch(function(error) {
            reject(false);
          });
      });
    }
  }
};
</script>
<style lang="less" scoped>
.android-content {
  padding: 24px;
}
.menu-name-wrap {
  display: inline-block;
  // padding-left: 16px;
  span {
    font-size: 12px;
    padding: 4px 6px;
    color: #909399;
    border-radius: 4px;
    margin: 0 5px;
    border: 1px dashed #c0c4cc;
    cursor: pointer;
  }
  .num-input-wrap {
    width: 34px;
    margin: 0 10px 0 5px;
    /deep/ .el-input__inner {
      padding: 0 3px;
      text-align: center;
      font-size: 12px;
    }
  }
}
.my-no-data-wrap {
  text-align: center;
  padding-top: 120px;
  i {
    color: #7db6ff;
    font-size: 80px;
    padding-left: 15px;
  }
  h3 {
    padding: 17px 0 23px;
    color: #909399;
    font-size: 14px;
    line-height: 20px;
  }
  /deep/ span {
    letter-spacing: 2px;
  }
  /deep/ .el-button {
    padding: 8px 20px;
  }
}
// .table-no-line-wrap /deep/ .el-table__expand-icon {
//   position: absolute;
// }
</style>
