<!--
 * @Description: 应用程序版本管理面板组件
 * @Author: liusheng sunhuihong
 * @Date: 2022-08-04 11:43:52
-->
<template>
  <div class="body">
   <!-- 过滤条件 -->
    <el-row class="head-line">
        <el-checkbox v-model="checked1" @change="listAppVersions">只显示Android平台发布</el-checkbox>
        <el-checkbox v-model="checked2" @change="listAppVersions" style="margin-right:100px">
          只显示iOS平台发布
        </el-checkbox>
        <el-button size="small" @click="handleRelease" type="primary" icon="el-icon-plus">发 布</el-button>
    </el-row>
    <!-- 版本列表 -->
    <el-table :data="versionList" :header-cell-style="{'background-color':'#EFF5FA'}"
      style="margin-top:20px; width:100%; border: 1px solid #f0f0f0;" >
      <el-table-column prop="name" label="应用名称" min-width="12%"></el-table-column>
      <el-table-column prop="platform" label="平台" min-width="8%"></el-table-column>
      <el-table-column prop="version" label="版本号" min-width="8%"></el-table-column>
      <el-table-column prop="description" label="更新说明" min-width="20%"></el-table-column>
      <el-table-column prop="releaseDate" label="发布日期" min-width="10%"></el-table-column>
      <el-table-column prop="forceUpdate" label="强制更新" min-width="8%">
        <template slot-scope="scope">
          {{scope.row.forceUpdate == 'true' ? '是' : scope.row.forceUpdate == 'false' ? '否' : ''}}
        </template>
      </el-table-column>
      <el-table-column prop="apkFilename" label="apk文件名" min-width="16%"></el-table-column>
      <el-table-column prop="status" label="状态" min-width="8%">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0" active-color="#13ce66" 
            @change="handleStatusSwitch(scope.$index,scope.row.status,scope.row.id)" />
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="10%">
        <template slot-scope="scope">
          <el-button @click="handleUpdate(scope.row)" type="text" size="small">修改</el-button>
          <el-button @click="handleDelete(scope.row)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <app-version-dialog :visible="showDialog" :mode="mode" :appVersionId="appVersionId"
      @close-dialog="handleCloseDialog"/>
  </div>
</template>

<script>
import AppVersionDialog from './AppVersionDialog.vue'

export default {
  name: 'AppVersionList',
  components: {
    'app-version-dialog': AppVersionDialog
  },

  data() {
    return {
      checked1: false,
      checked2: false,
      
      versionList: [],
      showDialog: false,
      mode: '',
      appVersionId: ''
    }
  },
  
  methods: {
    listAppVersions() {
      let platform = '';
      if (this.checked1 && !this.checked2) {
        platform = 'android';
      } else if (this.checked2 && !this.checked1) {
        platform = 'ios';
      }
      let param = {platform: platform};
      this.appAxios("GET", this.commonUrl.URL_LIST_APP_VERSIONS, param).then(result => {
        if(result !== null) {
          this.versionList = result.data;
        }
      })
    },

    handleRelease() {
      this.mode = 'add';
      this.showDialog = true;
    },

    handleUpdate(row) {
      this.mode = 'edit';
      this.appVersionId = row.id;
      this.showDialog = true;
    },

    //启用状态改变
    handleStatusSwitch(index, val, id) {
      let item = this.versionList[index];
      item.status = (val == 1) ? 0 : 1;
      let status = (val == 1) ? "enable" : "disable";
      let strMessage = (val == 1) ? '确认是否启用？' : '确认是否停用？';
      this.$confirm(strMessage, '提示', {
        confirmButtonText: '确 定',
        cancelButtonText: '取 消',
        type: 'warning'
      }).then(() => {
        this.queryStatusChange(id, status);
      });
    },

    queryStatusChange(id, status) {
      let url = this.commonUtil.fillUrlArgments(this.commonUrl.URL_UPDATE_APP_VERSION_STATUS, id, status);
      this.appAxios("PUT", url).then(_result => {
        this.listAppVersions();
      });
    },

    //删除
    handleDelete(row) {
      this.$confirm('确认删除该记录?', '文件删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteVersionItem(row.id)
      });
    },

		deleteVersionItem(id) {
			let url = this.commonUtil.fillUrlArgments(this.commonUrl.URL_DELETE_APP_VERSION, id);
			this.appAxios("DELETE", url).then(result => {
				if (result != null) {
					this.listAppVersions();
				}
			})
		},

    handleCloseDialog(refresh) {
      this.showDialog = false;
      if (refresh) this.listAppVersions();
    },
  },

  mounted() {
    this.listAppVersions();
  }
}
</script>

<style scoped>
.body {
  margin: 0 40px;
  text-align: center;
  border: solid 0px;
}

.head-line {
  margin-bottom: 15px;
  text-align: right;
  border: solid 0px;
}

.search-title {
  color: #657180;
  font-size: 14px;
}
</style>