<template>
  <div id="device-management">
    <div class="device-management-body" v-loading.fullscreen.lock="fullscreenLoading">
      <div v-if="addVisible" class="order-management-body" style="margin-top:0">
        <!-- 全部 -->
        <div class="device-management_bottom" style="margin-top:0;padding:60px 20px;">
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
            <el-form-item label="上传服务器" prop='fileServerType'>
              <el-select v-model="ruleForm.fileServerType" placeholder="请选择">
                <el-option label="阿里云" value="oss">阿里云</el-option>
                <el-option label="亚马逊" value="s3">亚马逊</el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="代理商标识" prop='agent'>
              <el-autocomplete
                class="inline-input"
                v-model="ruleForm.agent"
                :fetch-suggestions="querySearch"
                placeholder="请输入内容"
                @select="handleSelect"
              ></el-autocomplete>
            </el-form-item>
            <el-form-item label="APP类型" prop='appType'>
              <el-select v-model="ruleForm.appType" placeholder="请选择" @change="appTypeChange">
                <el-option label="IOS" value="IOS">IOS</el-option>
                <el-option label="Android" value="Android">Android</el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="APP包" prop="fileList">
              <!-- uploadUrl token:sessionStorage.getItem('token') :on-change="uploadSectionFile"-->
              <el-upload style="width:340px" class="upload-demo"
              :limit='1' :on-exceed="handleExceed"
              action=''
              :on-change="()=>{this.$refs.ruleForm.validateField('fileList')}"
              :http-request="uploadSectionFile"
              :file-list="ruleForm.fileList"
              :on-remove="fileRemove"
              drag :accept="accept" :multiple="false">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip" slot="tip">
                  <p>1、支持 .ipa、.apk文件，大小不超过1G</p>
                  <p>2、文件格式以4DKanKan+_版本号组成</p>
                </div>
              </el-upload>
              <el-progress v-if="completeshow" style="width: 340px;margin-top: 8px"  :percentage="complete" />
            </el-form-item>
            <el-form-item label="MD5" prop="md5">
                <el-input v-model="ruleForm.md5" :disabled="!md5"></el-input>
            </el-form-item>
            <el-form-item label="版本信息" prop="jsonFile">
              <el-upload style="width:340px" class="upload-demo"
                accept='.json' :limit='1'
                :headers="{
                  token:token
                }"
                :action="uploadUrl"
                :on-change="()=>{this.$refs.ruleForm.validateField('jsonFile')}"
                :before-upload="handleChange"
                :file-list="ruleForm.jsonFile">
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">仅能上传version.josn文件，且不超过10 M</div>
              </el-upload>
              <!-- <el-progress v-if="completeshow" style="width: 340px;margin-top: 8px"  :percentage="complete" /> -->
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="cancel">取 消</el-button>
            <el-button type="primary" @click="submit">确 定</el-button>
          </div>
        </div>
      </div>
      <div v-else class="order-management-body">
        <div class="order-management-inner">
          <div class="base-info">
            <span>代理商标识：</span>
            <el-input style="width:220px;"  v-model="searchKey" placeholder="代理商标识"></el-input>
            <el-button type="primary" @click="()=>{currentPage=1;_getCameraData()}" color='red'>搜索</el-button>
            <el-button icon="el-icon-plus" type="primary" style="float: right;" @click="showadd" color='red'>新增</el-button>
          </div>
        </div>
        <!-- 全部 -->
        <div class="device-management_bottom">
          <div class="order-management-table">
            <el-table ref="order_table" class='e-table' :data="cameras" style="width: 100%">
              <el-table-column  label="序号" type="index" width="50" align="center">
                  <template slot-scope="scope">
                      <span>{{(currentPage - 1) * pagesize + scope.$index + 1}}</span>
                  </template>
              </el-table-column>
              <el-table-column prop="fileServerType" label="上传服务器">
                <template slot-scope="scope">
                  <span>{{scope.row.fileServerType=='s3'?'亚马逊':'阿里云'}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="agent" label="代理商标识">
              </el-table-column>
              <el-table-column prop="appType" label="APP类型">
              </el-table-column>
              <el-table-column prop="name" label="APP包">
              </el-table-column>
              <el-table-column prop="md5" label="MD5">
              </el-table-column>
              <el-table-column width="300" prop="createTime" label="上传时间">
              </el-table-column>
              <!-- <el-table-column width="300" label="上传时间">
                <template slot-scope="scope">
                  <div>{{scope.row.createTime}}</div>
                </template>
              </el-table-column> -->

              <el-table-column label="操作">
                <template slot-scope="scope">
                  <!-- <el-button type="text" @click="showDialog(scope.row)" class="edit_btn">编辑</el-button> -->
                  <el-button type="text" @click="del(scope.row.id)" class="delete_btn">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="order-management-pagination">
            <el-pagination @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="pagesize" layout="total, prev, pager, next, jumper" :total="total">
            </el-pagination>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>
<script>
let tempForm = {
  fileServerType: '',
  agent: '',
  appType: '',
  md5: '',
  name: '',
  fileList: [],
  jsonFile: []
}
export default {
  data () {
    var validateMD5 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入MD5'))
      } else {
        this.chenkMd5(value, callback)
      }
    }
    let validateFileUrl = (rule, value, callback) => {
      console.log('fileList', value, this.ruleForm)
      if (!value) {
        return callback(new Error('请上传文件'))
      }
      if (this.ruleForm.fileList.length < 1) { // 我控制了FileList 长度代表文件个数
        callback(new Error('请上传文件'))
      } else {
        callback()
      }
    }
    let validateJsonFile = (rule, value, callback) => {
      console.log('fileList', value, this.ruleForm)
      if (!value) {
        return callback(new Error('请上传文件'))
      }
      if (this.ruleForm.jsonFile.length < 1) { // 我控制了FileList 长度代表文件个数
        callback(new Error('请上传文件'))
      } else {
        callback()
      }
    }
    return {
      expands: [],
      accept: '.ipa, .apk',
      md5: null,
      complete: 0,
      completeshow: false,
      expandedArr: [],
      cameras: [],
      currentPage: 1,
      key_input: '',
      fullscreenLoading: false,
      searchKey: '',
      total: 0,
      uploadUrl: this.$server + '/manager/app/upload',
      token: sessionStorage.getItem('token'),
      // expressNum_input: "",
      searchDate: [],
      searchOrderNumber: '',
      searchPhone: '',
      searchExpressNum: '',
      hasClickSearch: false,
      tabIndex: 0,
      addVisible: false,
      ruleForm: tempForm,
      currentImgType: '',
      rules: {
        fileList: [{
          required: true, validator: validateFileUrl, trigger: 'change'
        }],
        jsonFile: [{
          required: true, validator: validateJsonFile, trigger: 'change'
        }],
        appType: [
          { required: true, message: '请选择APP类型', trigger: 'change' }
        ],
        agent: [
          { required: true, message: '请选择或输入代理商', trigger: 'blur' }
        ],
        fileServerType: [
          { required: true, message: '请选择上传服务器', trigger: 'change' }
        ],
        companyName: [
          { required: true, message: '请输入客户名称', trigger: 'blur' }
        ],
        md5: [
          { required: true, message: '请输入MD5', trigger: 'blur' },
          { validator: validateMD5, trigger: 'blur' }
        ]
      },
      cameraInfo: {
        wifi: '',
        type: '',
        address: '',
        initPoint: '',
        orderNum: ''
      },

      formLabelWidth: '30%',
      value2: true,
      currentChildName: '',
      currentDeviceId: '',
      currentBalance: '',
      pagesize: 10,
      clients: [],
      restaurants: []
    }
  },
  watch: {
    currentPage () {
      this._getCameraData()
    }
  },
  methods: {
    appTypeChange (val) {
      const list = {
        'Android': '.apk',
        'IOS': '.ipa'
      }
      this.accept = list[val] || '.ipa, .apk'
    },
    async getAgenetList () {
      let res = await this.$http.post('/manager/app/agenetList', {})
      let restaurants = []
      if (res.code === 0) {
        restaurants = res.data.map(ele => {
          return {value: ele}
        })
      }
      this.restaurants = restaurants
    },
    del (id) {
      this.$confirm('此操作将删除该条数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          this.fullscreenLoading = true
          let res = await this.$http.post('/manager/app/delete', {
            id: id
          })
          if (res.code === 0) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          } else {
            this.$message({
              type: 'error',
              message: res.msg
            })
          }
          this._getCameraData()
          this.fullscreenLoading = false
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
          this.fullscreenLoading = false
        })
    },
    async _getCameraData () {
      
      this.fullscreenLoading = true
      if (!Number(this.currentPage)) this.currentPage = 1
      let res = await this.$http.post('/manager/app/list', {
        pageNum: this.currentPage,
        pageSize: this.pagesize,
        keyword: this.searchKey
      })
      this.fullscreenLoading = false
      if (res.code === 0) {
        let temp = res.data.list
        this.cameras = temp
        this.total = res.data.total ? res.data.total : 0
      }
    },
    async chenkMd5 (value, callback) {
      console.log('value', value == 123456)
      if (value == this.md5) {
        callback()
      } else {
        callback(new Error('MD5错误!请重新输入'))
      }
      return true
    },
    uploadFile (file, fileList) {
      // this.ruleForm.fileList = fileList
      console.log('file, fileList)', file, fileList)
    },
    handleExceed (files, fileList) {
      this.$message.warning(`只能选择一个文件上传`)
    },
    handleCurrentChange (val) {
      this.currentPage = val
    },
    handleAvatarSuccess (res, file) {
      this.ruleForm[this.currentImgType] = res.data
    },
    beforeAvatarUpload (file) {
      const isLt2M = file.size / 1024 / 1024 < 5

      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 5MB!')
      }
      return isLt2M
    },
    removeDomain () {
      console.log()
      this.$refs['ruleForm'].validate('md5')
    },

    submit () {
      console.log('submit', this.$refs['ruleForm'])
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
        // this.addVisible = true
          this._editCompany()
        } else {
          return false
        }
      })
    },
    cancel () {
      this.ruleForm = tempForm
      this.$refs['ruleForm'].resetFields()
      this.md5 = null
      this.addVisible = false
    },
    async _editCompany () {
      let {
        fileServerType,
        agent,
        appType,
        md5,
        name
      } = this.ruleForm

      this.fullscreenLoading = true
      let res = await this.$http.post('/manager/app/save', {
        fileServerType,
        agent,
        appType,
        md5,
        name
      })
      this.fullscreenLoading = false
      if (res.code === 0) {
        this.$alert('上传成功', '添加成功', {
          confirmButtonText: '确定'
        })
        this.getAgenetList()
        this._getCameraData()
        this.cancel()
      } else {
        this.$alert(res.msg, '操作失败', {
          confirmButtonText: '确定'
        })
      }
    },
    handleSelect (row) {
      this.$refs.ruleForm.validateField('agent')
    },
    querySearch (queryString, cb) {
      var restaurants = this.restaurants
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    createFilter (queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
      }
    },
    showadd () {
      this.addVisible = true
    },
    fileRemove () {
      this.ruleForm.fileList = []
      this.ruleForm.md5 = ''
      this.md5 = null
    },
    handleChange (file) {
      let fileType = file.type,
        isLt10M = file.size / 1024 / 1024 < 10
      if (!isLt10M) {
        this.$message.error('上传文件不能超过10M，请重新上传')
        return false
      }
      if (file.name !== 'version.json') {
        this.$message.error('请上传文件名称为version.json')
        return false
      }
      this.ruleForm.jsonFile = [file]
    },
    async uploadSectionFile (params) {
      const file = params.file,
        fileType = file.type,
        isImage = fileType.indexOf('image') != -1,
        isLt1G = file.size / 1024 / 1024 / 1024 < 1
      console.log('isLt1G', fileType, params)
      // 这里常规检验，看项目需求而定
      // if (!isImage) {
      //   this.$message.error("只能上传图片格式png、jpg、gif!");
      //   return;
      // }
      if (!isLt1G) {
        this.fileRemove()
        this.$message.error('上传文件过大，请重新上传')
        return
      }
      // 根据后台需求数据格式
      const form = new FormData()
      // 文件对象
      form.append('file', file)
      // 本例子主要要在请求时添加特定属性，所以要用自己方法覆盖默认的action
      // form.append("clientType", 'xxx');
      // 项目封装的请求方法，下面做简单介绍
      console.log('isLt1G', form, file)
      this.completeshow = true
      let res = await this.$http({
        url: '/manager/app/upload',
        method: 'post',
        data: form,
        processData: false,
        contentType: false,
        onUploadProgress: (progressEvent) => {
          this.complete = ((progressEvent.loaded / progressEvent.total) * 100) | 0
          console.log('上传 ' + this.complete)
        }
      })
      this.completeshow = false

      this.complete = 0
      if (res.code === 0) {
        this.ruleForm.fileList = [file]
        this.ruleForm.name = file.name
        this.md5 = res.data || '0'
      }
    }
  },
  created () {
    this._getCameraData()
    this.getAgenetList()
  }
}
</script>
<style lang="css" scoped>
@import "./style.css";
</style>
<style type="text/css">
.inline-input{
  width:340px;
}
.device-management_bottom{

}
.el-table__expand-icon > i {
  display: none !important;
}
.dialog-footer{
  text-align: center;
}
.edit_btn span {
  color: #09e1c0;
}

.delete_btn span {
  color: #f56c6c;
}
</style>
