<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 slot-scope="scope">
          <span>{{scope.row.sysType}}</span>
        </template>
      </el-table-column>
      <el-table-column width="100" align="center" label="版本号">
        <template slot-scope="scope">
          <span>{{scope.row.version}}</span>
        </template>
      </el-table-column>
      <el-table-column width="100" align="center" label="版本名称">
        <template slot-scope="scope">
          <span> {{scope.row.versionName}}</span>
        </template>
      </el-table-column>
      <el-table-column width="100" align="center" label="包的大小">
        <template slot-scope="scope">
          <span>{{scope.row.packagesize}}</span>
        </template>
      </el-table-column>

      <el-table-column width="220" align="center" label="下载地址">
        <template slot-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 slot-scope="scope">
          <span>{{scope.row.crtTime}}</span>
        </template>
      </el-table-column>
      <el-table-column width="150" align="center" label="是否可下载/强制下载">
        <template slot-scope="scope">
          <span>{{scope.row.downloadSwitch}}/{{scope.row.isCompel}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="版本详情">
        <template slot-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="130" fixed="right">
        <template slot-scope="scope">
          <el-button size="small" class="el-button el-button--text el-button--small" @click="compileAppUpload(scope.row)">编辑
          </el-button>
          <el-button class="el-button el-button--text el-button--small" style="color:red" size="small" @click="deleteApp(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="1">是</el-radio-button>
                  <el-radio-button style="margin-bottom: 10px;" label="0">否</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="multipleb"
                  class="upload-demo"
                  :action="BASE_API+'/api/universal/file/app/unauth/zip'"
                  :headers="getHeaderWithToken"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :on-success="handleAvatarSuccess"
                  :file-list="fileList">
                  <el-button size="small" type="primary">点击上传</el-button>
                  <div slot="tip" class="el-upload__tip">只能上传apk/ipa文件，且不超过50Mb</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,
    getOne,
    updateAppVersion,
    removeAppVersion
  } 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 {
        fileList: [],
        multipleb: false,
        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,
        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 ? timestamp2Date(key.crtTime) : null
          key.downloadSwitch = this.downloadSwitchObj[key.downloadSwitch]
          key.isCompel = this.isCompelObj[key.isCompel]
          key.sysType = this.sysTypeObj[key.sysType]
          key.visible2 =false
        }
      },
      handleSizeChange(val) {
        this.query.limit = val;
        this.getList();
      }
      ,
      handleCurrentChange(val) {
        this.query.page = val;
        this.getList();
      },
      handleFilter() {
        this.getList()
      },
      /**
       * 新建app版本
       */
      newAppVersion() {
        this.template()
        this.modalTitle = '创建'
        this.activeName = 'first'
        this.versionPopup = true
      },
      /**
       *  编辑窗口
       */
      compileAppUpload(row) {
        getOne(row.id).then(res => {
          this.versionRow = res.data;
          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.template()
        this.versionPopup = false;
        this.activeName = "";
      },
      /**
       *  添加
       *
       */
      insertAppVersion() {
        insertAppVersion(this.versionRow).then(res => {
          if (res.status === 200) {
            this.$notify({
              title: '成功',
              message: '添加成功',
              type: 'success',
              duration: 2000
            });
            this.getList();
          } else {
            this.$notify({
              title: '失败',
              message: '添加失败！',
              type: 'error',
              duration: 2000
            });
          }
          this.versionPopup = false
        })
      },
      /**
       * 修改
       */
      updateAppVersion() {
        updateAppVersion( this.versionRow).then(res=>{
          if (res.status === 200) {
            this.$notify({
              title: '成功',
              message: '修改成功',
              type: 'success',
              duration: 2000
            });
            this.getList();
          } else {
            this.$notify({
              title: '失败',
              message: '修改失败！',
              type: 'error',
              duration: 2000
            });
          }
          this.versionPopup = false
        })
      },
      deleteApp(row){
        console.log(JSON.stringify(row))
        this.$confirm('确定删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          removeAppVersion(row.id).then(res=>{
            if (res.status==200) {
              this.$notify.success({
                title: '删除成功',
                message: `success`
              })
            } else {
              this.$notify.warning({
                title: '删除失败',
                message: `failed`
              })
            }
            this.getList()
          })
        })
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleAvatarSuccess(res, file) {
        console.log('handleAvatarSuccess:res' + res.data);
        console.log('handleAvatarSuccess:file' + file);

        this.versionRow.downloadUrl = res.data;
      },
      template() {
        this.fileList=[]
        this.versionRow =
          {
            sysType: 0,
            version: undefined,
            versionName: undefined,
            weigh: undefined,
            downloadUrl: undefined,
            packagesize: undefined,
            downloadSwitch: 1,
            isCompel: 0,
            content: ""
          }
      }
    }
  }


</script>
<style>
  .v-modal{
    z-index: 1000 !important;
  }
  .el-dialog__wrapper{
    z-index: 1008 !important;
  }
</style>
