<template>
  <div class="app-container calendar-list-container">
    <div class="filter-container">
      <el-form ref="queryForm" :model="query" label-width="100px">
        <el-row>
          <el-col :span="4">
            <el-form-item label="版本名称">
              <el-input v-model.number="query.versionName" placeholder="版本名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="版本号">
              <el-input v-model.number="query.version" placeholder="版本号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="更新内容">
              <el-input v-model.number="query.content" placeholder="更新内容"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-button class="filter-item" type="primary" v-waves icon="search" @click="handleFilter">搜索</el-button>
      <el-button class="filter-item" style="margin-bottom: 10px;" @click="newAppVersion"
                 type="primary" icon="edit">添加新版本
      </el-button>
    </div>
    <el-table :key='tableKey' :data="list" v-loading.body="listLoading" border fit highlight-current-row
              style="width: 100%">
      <el-table-column width="100" align="center" label="系统类型">
        <template scope="scope">
          <span>{{scope.row.sysType}}</span>
        </template>
      </el-table-column>
      <el-table-column width="100" align="center" label="版本号">
        <template scope="scope">
          <span>{{scope.row.version}}</span>
        </template>
      </el-table-column>
      <el-table-column width="100" align="center" label="版本名称">
        <template scope="scope">
          <span> {{scope.row.versionName}}</span>
        </template>
      </el-table-column>
      <el-table-column width="100" align="center" label="包的大小">
        <template scope="scope">
          <span>{{scope.row.packagesize}}</span>
        </template>
      </el-table-column>

      <el-table-column width="220" align="center" label="下载地址">
        <template scope="scope">
          <span><p><font size="1" face="arial">{{scope.row.downloadUrl}}</font></p></span>
        </template>
      </el-table-column>
      <el-table-column width="200" align="center" label="上传时间">
        <template scope="scope">
          <span>{{scope.row.crtTime}}</span>
        </template>
      </el-table-column>
      <el-table-column width="150" align="center" label="是否可下载/强制下载">
        <template scope="scope">
          <span>{{scope.row.downloadSwitch}}/{{scope.row.isCompel}}</span>
        </template>
      </el-table-column>
      <el-table-column width="581" align="center" label="版本详情">
        <template scope="scope">
          <span><p><font size="1" face="arial">{{scope.row.content}}</font></p></span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="200">
        <template scope="scope">
          <el-button size="small" type="primary" @click="compileAppUpload(scope.row)">编辑
          </el-button>
          <el-button size="small" type="danger" @click="delMembership(scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>


    <div v-show="!listLoading" class="pagination-container">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page.sync="query.page" :page-sizes="[10,20,30, 50]" :page-size="query.limit"
                     layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
    </div>


    <div>
      <el-dialog :title="modalTitle" :visible.sync="versionPopup" :before-close="handleDialogClose">
        <el-form :model="versionRow" ref="appVersion" label-width="150px">
          <el-row>
            <el-col :span="10">
              <el-form-item label="适用系统" prop="sysType">
                <el-radio-group size="large" v-model="versionRow.sysType">
                  <el-radio-button style="margin-bottom: 10px;" label="0">安卓</el-radio-button>
                  <el-radio-button style="margin-bottom: 10px;" label="1">iOS</el-radio-button>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label="版本号" prop="version">
                <el-input type="text" v-model="versionRow.version" placeholder="请填版本号"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label="版本名称" prop="versionName">
                <el-input type="text" v-model="versionRow.versionName" placeholder="版本名称"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label="权重" prop="weigh">
                <el-input type="text" v-model="versionRow.weigh"
                          placeholder="请填权重"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label="下载地址" prop="downloadUrl">
                <el-input type="text" v-model="versionRow.downloadUrl" placeholder="请填下载地址"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="10">
              <el-form-item label="包大小" prop="packagesize">
                <el-input type="text" v-model="versionRow.packagesize" placeholder="请填价格"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="10">
              <el-form-item label="是否可下载" prop="downloadSwitch">
                <el-radio-group size="large" v-model="versionRow.downloadSwitch">
                  <el-radio-button style="margin-bottom: 10px;" label="0">可下载</el-radio-button>
                  <el-radio-button style="margin-bottom: 10px;" label="1">不可下载</el-radio-button>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label="是否强制更新" prop="isCompel">
                <el-radio-group size="large" v-model="versionRow.isCompel">
                  <el-radio-button style="margin-bottom: 10px;" label="0">是</el-radio-button>
                  <el-radio-button style="margin-bottom: 10px;" label="1">否</el-radio-button>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label="上传包" prop="upload">
                <el-upload
                  multiple="false"
                  class="upload-demo"
                  :action="BASE_API+'/api/app/version/upload/installationPackage'"
                  :headers="getHeaderWithToken"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :file-list="fileList">
                  <el-button size="small" type="primary">点击上传</el-button>
                  <div slot="tip" class="el-upload__tip">只能上传apk/ipa文件，且不超过500kb</div>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-tabs v-model="activeName" type="card">
              <el-tab-pane label="详情" name="first">
                <div class="editor-container" v-if="activeName=='first'">
                  <UE :editorId="activeName" :defaultMsg="versionRow.content" :config=config ref="ue"
                      @ready="editorReadyEvent"></UE>
                </div>
              </el-tab-pane>
            </el-tabs>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="cancelSetAppVersion()">取消</el-button>
          <el-button type="primary" v-if="modalTitle=='创建'" @click="insertAppVersion()">确 定</el-button>
          <el-button type="primary" v-else @click="updateAppVersion()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
  import {mapGetters} from 'vuex';
  import {getToken} from 'src/utils/auth';
  import {
    getAppVersions,
    insertAppVersion,
    updateAppVersion,
    removeAppVersion,
    getAppVersion
  } from 'src/api/appManagement/version'
  import {timestamp2Date} from 'src/utils/dateUtils';
  import UE from '../../modal/Ueditor';//百度ue富文本

  export default {
    name: 'appUpload',
    components: {
      UE
    },
    data() {
      return {
        BASE_API: process.env.BASE_API,
        versionRow: {
          sysType: 0,
          version: undefined,
          versionName: undefined,
          weigh: undefined,
          downloadUrl: undefined,
          packagesize: undefined,
          downloadSwitch: 1,
          isCompel: 0,
          content: ""
        },
        activeName: "",
        versionPopup: false,
        modalTitle: '创建',
        list: [],
        config: {
          initialFrameWidth: null,
          initialFrameHeight: 350
        },
        listLoading: true,
        tableKey: 0,
        BASE_API: process.env.BASE_API,
        query: {
          limit: 10,
          page: 1,
          versionName: undefined,
          version: undefined,
          content: undefined
        },
        total: null,
        sysTypeObj: {
          0: '安卓',
          1: 'IOS'
        },
        isCompelObj: {
          0: '否',
          1: '是'
        },
        downloadSwitchObj: {
          0: '可下载',
          1: '不可下载'
        },

      }
    },
    created() {
      this.getList();
    }
    ,
    computed: {
      ...
        mapGetters([
          'elements'
        ]),
      /**
       * 获取token
       */
      getHeaderWithToken() {
        return {Authorization: getToken()};
      },
    },
    methods: {
      getList() {
        console.log(JSON.stringify(this.query))
        getAppVersions(this.query).then(
          res => {
            this.traverse(res.data.list)
            this.list = res.data.list
            this.total = res.data.total;
            this.listLoading = false;
          }
        )
      },
      traverse(list) {
        for (let key of list) {
          key.crtTime = key.crtTime ? null : timestamp2Date(key.crtTime)
          key.downloadSwitch = this.downloadSwitchObj[key.downloadSwitch]
          key.isCompel = this.isCompelObj[key.isCompel]
          key.sysType = this.sysTypeObj[key.sysType]
        }
      },
      handleSizeChange(val) {
        this.query.limit = val;
        this.getList();
      }
      ,
      handleCurrentChange(val) {
        this.query.page = val;
        this.getList();
      },
      handleFilter() {
        this.getList()
      },
      /**
       * 新建app版本
       */
      newAppVersion() {
        if (this.$refs.appVersion) {
          this.$refs.appVersion.resetFields()
        }
        this.modalTitle = '创建'
        this.activeName = 'first'
        this.versionPopup = true
      },
      /**
       *  编辑窗口
       */
      compileAppUpload(row) {
        this.versionRow = row;
        this.modalTitle = '编辑';
        this.activeName = 'first';
        this.versionPopup = true
      },
      /**
       * 点击 X 关闭对话框的回调
       **/
      handleDialogClose() {
        this.activeName = "";
        this.versionPopup = false;
      },
      /**
       * 富文本  营地详情
       * */
      editorReadyEvent(instance) {
        let t = this;
        instance.addListener('contentChange', () => {
          if (t.activeName == "first") {
            t.versionRow.content = instance.getContent();
          }
        });
      },
      cancelSetAppVersion() {
        this.initialize
      },
      initialize() {
        this.versionPopup = false;
        this.versionRow = {};
        this.activeName = "";
      },
      insertAppVersion() {
        insertAppVersion(this.versionRow).then(res=>{

          })
      },
      updateAppVersion() {

      }
    }
  }
</script>
<style>

  .mGrade .el-dialog--small {
    width: 500px;
  }
</style>
