<template>
  <div class="app-container">
    <div v-loading.fullscreen.lock="loadingFull" />
    <div>
      <el-input v-model="searchParams.search_name" placeholder="请输入版本号" size="small" style="width:250px" />
      <el-button
        type="primary"
        size="small"
        @click="searchParams.page_index = 1;getList()"
      >
        查询
      </el-button>
      <el-button
        type="primary"
        size="small"
        @click="visible.version = true; editFlag = false"
      >
        添加
      </el-button>
    </div>
    <el-table
      :data="table"
      :header-cell-style="{ background: '#f8fbfc' }"
      class="tableBorder"
      border
      stripe
    >
      <el-table-column
        prop="version"
        label="版本号"
        align="center"
        width="150"
      />
      <el-table-column
        prop="url"
        label="下载地址"
        align="center"
      >
        <template slot-scope="{ row }">
          <el-button type="text">{{ row.url }}</el-button>
        </template>
      </el-table-column>
      <el-table-column
        prop="updated_at"
        label="更新时间"
        align="center"
      />
      <el-table-column
        prop="message"
        label="版本简介"
        align="center"
      />
      <el-table-column
        prop="status"
        label="版本状态"
        align="center"
      >
        <template slot-scope="{ row }">
          <el-tag :type="row.status === 0 ? 'success' : 'info'">{{ row.status === 0 ? '最新版本' : `${row.version}版本` }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="200"
        align="center"
      >
        <template slot-scope="{ row }">
          <el-button type="text" :disabled="row.status === 0" @click="handleUpVersion(row)">版本更新</el-button>
          <el-button type="text" @click="handleEdit(row)">修改</el-button>
          <el-button type="text" :disabled="row.status === 0" @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="batch-container">
      <!-- 分页 -->
      <pagination
        :total="tableTotal"
        :limit="searchParams.page_size"
        :page="searchParams.page_index"
        style="margin-top:0"
        @pagination="changePagination"
        @update:limit="changePagination"
      />
    </div>
    <!-- 添加/修改 -->
    <el-dialog
      :title="editFlag ? '修改版本' : '添加版本'"
      :visible.sync="visible.version"
      :before-close="handleClose"
      :close-on-click-modal="false"
      :close-on-press-escap="false"
    >
      <el-form ref="versionForm" label-width="100px" :model="versionForm" :rules="versionRule">
        <el-form-item label="版本号:" prop="version">
          <el-input v-model="versionForm.version" placeholder="例: 1.0.0" />
        </el-form-item>
        <el-form-item label="下载地址:" prop="url">
          <el-input v-model="versionForm.url" placeholder="请检查是否为正确的地址" />
        </el-form-item>
        <el-form-item label="版本简介:">
          <el-input v-model="versionForm.message" placeholder="关于版本更新的简介" type="textarea" :rows="4" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" @click="handleSure">{{ editFlag ? '修改' : '添加' }}</el-button>
          <el-button size="small" @click="handleClose">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
// api
import { getList, uploadVersion, editVersion, upVersion, deleteVersion } from '@/api/system/version'
export default {
  data() {
    return {
      searchParams: {
        page_index: 1,
        page_size: 10,
        search_name: ''
      },
      versionForm: {
        id: '',
        version: '',
        url: '',
        message: ''
      },
      table: [],
      tableTotal: 0,
      editFlag: false,
      visible: {
        version: false
      },
      versionRule: {
        version: [
          { required: true, message: '请输入版本号', trigger: 'blur' }
        ],
        url: [
          { required: true, message: '请输入下载地址', trigger: 'blur' }
        ]
      },
      loadingFull: false
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 获取列表
    async getList() {
      this.loadingFull = true
      try {
        const res = await getList(this.searchParams)
        const { code, message } = res
        if (code === 200) {
          const { data } = res
          const { list, total } = data
          this.table = list
          this.tableTotal = total
        } else {
          this.$message.error(message)
        }
      } catch (e) {
        this.$message.error('获取app版本列表失败!!')
      }
      this.loadingFull = false
    },
    // 上传
    async uploadVersion(data) {
      try {
        const res = await uploadVersion(data)
        const { code, message } = res
        if (code === 200) {
          this.handleClose()
          this.getList()
          this.$message.success(message)
        } else {
          this.$message.error(message)
        }
      } catch (e) {
        this.$message.error(`上传app新版本失败: ${e}`)
      }
    },
    // 关闭弹窗
    handleClose() {
      this.$refs.versionForm.resetFields()
      this.versionForm.id = ''
      this.versionForm.message = ''
      this.versionForm.url = ''
      this.versionForm.version = ''
      this.editFlag = false
      this.visible.version = false
    },
    // 修改
    async editVersion(data) {
      try {
        const res = await editVersion(data)
        const { code, message } = res
        if (code === 200) {
          this.handleClose()
          this.getList()
          this.$message.success(message)
        } else {
          this.$message.error(message)
        }
      } catch (e) {
        this.$message.error(`修改app新版本失败: ${e}`)
      }
    },
    // 版本上线
    handleUpVersion(row) {
      const { id, version } = row
      this.$confirm(`是否确定将${version}版本设定为最新版本,进行app更新?`, '版本更新', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.upVersion(id)
      })
    },
    // 版本上线
    async upVersion(id) {
      try {
        const res = await upVersion({ id })
        const { code, message } = res
        if (code === 200) {
          this.getList()
          this.$message.success(message)
        } else {
          this.$message.error(message)
        }
      } catch (e) {
        this.$message.error(`app新版本上线失败: ${e}`)
      }
    },
    // 修改
    handleEdit(row) {
      const { id, version, url, message } = row
      this.versionForm.id = id
      this.versionForm.url = url
      this.versionForm.version = version
      this.versionForm.message = message
      this.editFlag = true
      this.visible.version = true
    },
    // 上传添加/修改
    handleSure() {
      this.$refs.versionForm.validate((valid) => {
        if (valid) {
          if (this.editFlag) {
            this.editVersion(this.versionForm)
          } else {
            const { version, url, message } = this.versionForm
            this.uploadVersion({
              version,
              url,
              message
            })
          }
        } else {
          return false
        }
      })
    },
    // 删除
    async deleteVersion(id) {
      try {
        const res = await deleteVersion({ id })
        const { code, message } = res
        if (code === 200) {
          this.getList()
          this.$message.success(message)
        } else {
          this.$message.error(message)
        }
      } catch (e) {
        this.$message.error(`删除app版本失败: ${e}`)
      }
    },
    // 删除
    handleDelete(row) {
      const { id, version } = row
      this.$confirm(`是否确定将${version}版本删除?`, '删除确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteVersion(id)
      })
    },
    // 分页页码变化
    changePagination(data) {
      const { page, limit } = data
      this.searchParams.page_size = limit
      this.searchParams.page_index = page
      this.getList()
    }
  }
}
</script>
