<template>
  <div id="device-management">
    <div class="device-management-body" v-loading.fullscreen.lock="fullscreenLoading">
      <div class="order-management-body">
        <div class="order-management-inner">
          <div class="base-info">
            <span>关键词：</span>
            <el-input style="width:220px;" @keyup.enter.native="currentPage=1&&_getCameraData()" 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="showCameraDialog" 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 prop="id" label="客户ID">
              </el-table-column>
              <el-table-column prop="companyName" label="客户名称">
              </el-table-column>
              <el-table-column prop="topLogo" label="顶部logo">
                <template slot-scope="scope">
                  <img :src="scope.row.topLogo" width="100%" height />
                </template>
              </el-table-column>
              <el-table-column prop="floorLogo" label="地面logo">
                <template slot-scope="scope">
                  <img :src="scope.row.floorLogo" width="100%" height />
                </template>
              </el-table-column>
              <el-table-column prop="qrLogo" label="二维码logo">
                <template slot-scope="scope">
                  <img :src="scope.row.qrLogo" width="100%" height />
                </template>
              </el-table-column>
              <el-table-column label="初始logo">
                <template slot-scope="scope">
                  <span>{{scope.row.showLogo==1?'显示':'隐藏'}}</span>
                </template>
              </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>
        <el-dialog width="500px" title="添加客户" :visible.sync="companyVisible">
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
            <el-form-item label="客户名称" prop="companyName">
              <el-input v-model="ruleForm.companyName"></el-input>
            </el-form-item>
            <el-form-item label="客户账号">
              <el-select v-model="ruleForm.managerId" placeholder="请选择">
                <el-option label="无" value="">无</el-option>
                <el-option :label="item.userName" :value="item.id" v-for="(item,i) in clients" :key="i">{{item.userName}}</el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="默认注册相机">
              <el-radio-group v-model="ruleForm.cameraDelete">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="顶部logo" prop="topLogo">
              <el-upload class="avatar-uploader" :headers="{token}" :action="uploadUrl" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                <div @click="currentImgType='topLogo'">
                  <img v-if="ruleForm.topLogo" :src="ruleForm.topLogo" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </div>
              </el-upload>
            </el-form-item>
            <el-form-item label="地面logo" prop="floorLogo">
              <el-upload class="avatar-uploader" :headers="{token}" :action="uploadUrl" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                <div @click="currentImgType='floorLogo'">
                  <img v-if="ruleForm.floorLogo" :src="ruleForm.floorLogo" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </div>
              </el-upload>
            </el-form-item>
            <el-form-item label="二维码logo" prop="qrLogo">
              <el-upload class="avatar-uploader" :headers="{token}" :action="uploadUrl" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                <div @click="currentImgType='qrLogo'">
                  <img v-if="ruleForm.qrLogo" :src="ruleForm.qrLogo" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </div>
              </el-upload>
            </el-form-item>
            <el-form-item label="初始logo">
              <el-radio-group v-model="ruleForm.showLogo">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="companyVisible = false">取 消</el-button>
            <el-button type="primary" @click="submit">确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>
<script>
let tempForm = {
  id: '',
  createTime: '',
  updateTime: '',
  companyName: '',
  topLogo: '',
  floorLogo: '',
  qrLogo: '',
  showLogo: 1,
  cameraDelete: 1,
  managerId: ''
}
export default {
  data () {
    return {
      expands: [],
      expandedArr: [],
      cameras: [],
      currentPage: 1,
      key_input: '',
      fullscreenLoading: false,
      searchKey: '',
      total: 0,
      uploadUrl: this.$server + '/manager/company/uploadLogoImg',
      token: sessionStorage.getItem('token'),
      // expressNum_input: "",
      searchDate: [],
      searchOrderNumber: '',
      searchPhone: '',
      searchExpressNum: '',
      hasClickSearch: false,
      tabIndex: 0,
      companyVisible: false,
      ruleForm: tempForm,
      currentImgType: '',
      rules: {
        companyName: [
          { required: true, message: '请输入客户名称', trigger: 'blur' }
        ]
        // topLogo: [
        //   { required: true, message: '请上传顶部logo', trigger: 'change' }
        // ],
        // floorLogo: [
        //   { required: true, message: '请上传地面logo', trigger: 'change' }
        // ],
        // qrLogo: [
        //   { required: true, message: '请上传二维码logo', trigger: 'change' }
        // ]
      },
      cameraInfo: {
        wifi: '',
        type: '',
        address: '',
        initPoint: '',
        orderNum: ''
      },

      formLabelWidth: '30%',
      value2: true,
      currentChildName: '',
      currentDeviceId: '',
      currentBalance: '',
      pagesize: 10,
      clients: []
    }
  },
  watch: {
    currentPage () {
      this._getCameraData()
    }
  },
  methods: {
    async getclientData () {
      let res = await this.$http.post('/manager/user/managerList')
      if (res.code === 0) {
        this.clients = res.data
      }
    },
    del (id) {
      this.$confirm('此操作将删除该条数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          this.fullscreenLoading = true
          let res = await this.$http.post('/manager/company/deleteById', {
            id: id
          })
          if (res.code === 0) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this._getCameraData()
          } 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/company/list', {
        pageNum: this.currentPage,
        pageSize: this.pagesize,
        companyName: this.searchKey
      })
      this.fullscreenLoading = false
      if (res.code === 0) {
        let temp = res.data.list
        for (var i = 0; i < temp.length; i++) {
          temp[i]['userName'] = temp[i]['userName']
            ? temp[i]['userName']
            : '未绑定'
          temp[i]['activatedTime'] = temp[i]['activatedTime']
            ? new Date(temp[i]['activatedTime']).format('yyyy-MM-dd hh:mm:ss')
            : '/'
        }
        this.cameras = temp
        this.total = res.data.total ? res.data.total : this.total
      }
    },
    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
    },
    showDialog (row) {
      let data = JSON.stringify(row)
      this.ruleForm = JSON.parse(data)
      this.companyVisible = true
    },

    submit () {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          this._editCompany()
        } else {
          return false
        }
      })
    },

    async _editCompany () {
      let {
        id = '',
        createTime,
        updateTime,
        companyName,
        topLogo,
        floorLogo,
        qrLogo,
        showLogo,
        managerId,
        cameraDelete
      } = this.ruleForm

      this.fullscreenLoading = true
      let res = await this.$http.post('/manager/company/insertOrUpdate', {
        id,
        createTime,
        updateTime,
        companyName,
        topLogo,
        floorLogo,
        qrLogo,
        showLogo,
        managerId,
        cameraDelete
      })
      this.fullscreenLoading = false
      if (res.code === 0) {
        this.$alert('该客户信息已成功添加入库', '添加成功', {
          confirmButtonText: '确定'
        })
        this._getCameraData()
        this.ruleForm = tempForm
        this.companyVisible = false
      } else {
        this.$alert(res.msg, '操作失败', {
          confirmButtonText: '确定'
        })
      }
    },
    showCameraDialog (row) {
      this.ruleForm = tempForm
      this.companyVisible = true
    }
  },
  created () {
    this._getCameraData()
    this.getclientData()
  }
}
</script>
<style lang="css" scoped>
@import "./style.css";
</style>
<style type="text/css">
.el-table__expand-icon > i {
  display: none !important;
}

.edit_btn span {
  color: #09e1c0;
}

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