<template>
  <el-container class="content-height-fit">
    <el-container class="resize-fit-container">
      <div class="app-container">
        <div class="filter-container blue-top-border">
          <el-input
            v-model="listQuery.deviceNo"
            placeholder="客户端ID"
            class="filter-item"
            clearable
            @change="getList"
          />
          <el-button
            v-waves
            class="filter-item"
            type="primary"
            icon="el-icon-search"
            size="small"
            @click="handleFilter"
          >查询</el-button>
          <el-button
            v-waves
            class="filter-item"
            type="primary"
            icon="el-icon-edit"
            size="small"
            @click="handleCreate"
          >新增</el-button>
        </div>
        <div class="content-container">
          <el-table
            v-loading="listLoading"
            row-key="id"
            :data="list"
            border
            fit
            highlight-current-row
            style="width: 100%"
            height="calc(100vh - 276px)"
          >
            <el-table-column label="序号" type="index" width="50" align="center" />
            <el-table-column label="客户端key" prop="deviceNo" :show-overflow-tooltip="true" align="center" />
            <el-table-column label="客户端Secret" prop="deviceName" :show-overflow-tooltip="true" align="center" />
            <el-table-column label="过期时间" prop="categoryName" :show-overflow-tooltip="true" align="center" />
            <el-table-column
              label="操作"
              align="center"
              width="110"
              class-name="small-padding fixed-width"
            >
              <template slot-scope="{ row }">
                <el-button
                  type="primary"
                  size="mini"
                  @click="handleUpdate(row)"
                >修改</el-button>
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(row)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <el-dialog
          :title="textMap[dialogStatus]"
          :close-on-click-modal="false"
          :visible.sync="dialogFormVisible"
        >
          <el-form
            ref="dataForm"
            v-loading="formLoading"
            :rules="rules"
            :model="entity"
            label-position="right"
            label-width="120px"
          >
            <el-row :gutter="16">
              <el-col :span="12">
                <el-form-item label="客户端key" prop="client_key">
                  <el-input v-model="entity.deviceNo" :show-overflow-tooltip="true" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="16">
              <el-col :span="12">
                <el-form-item label="客户端Secret" prop="client_secret">
                  <el-input v-model="entity.deviceName" :show-overflow-tooltip="true" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="过期时间" prop="expires_in">
                  <el-select v-model="entity.deviceType" class="w100p">
                    <el-option
                      v-for="item in deviceTypes"
                      :key="item.key"
                      :value="item.key"
                      :label="item.name"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button
              :disabled="formLoading"
              @click="dialogFormVisible = false"
            >取消</el-button>
            <el-button
              :disabled="formLoading"
              type="primary"
              @click="dialogStatus === 'create' ? createData() : updateData()"
            >确认</el-button>
          </div>
        </el-dialog>
      </div>
    </el-container>
  </el-container>
</template>

<script>
import * as clientSettingApi from '@/api/client-setting'

import waves from '@/directive/waves' // waves directive

export default {
  name: 'DeviceMng',
  directives: { waves },
  data() {
    return {
      list: [],
      entity: {
        id: undefined,
        projectId: undefined,
        sectionId: undefined,
        sectionAreaId: undefined,
        deviceNo: '',
        deviceName: '',
        category: undefined,
        categoryName: '',
        spec: '',
        madeFactory: '',
        driverName: '',
        telephone: '',
        deviceType: undefined
      },
      total: 0,
      listLoading: false,
      listQuery: {
        projectId: undefined,
        sectionId: undefined,
        sectionAreaId: undefined,
        deviceNo: '',
        deviceName: '',
        deviceType: undefined,
        skipCount: 0,
        maxResultCount: 20
      },
      dialogFormVisible: false,
      dialogStatus: '',
      formLoading: false,
      textMap: {
        update: '修改',
        create: '创建'
      },
      sections: [],
      rules: {
        client_key: [
          { required: true, message: '请输入客户端Key', trigger: 'blur' },
          { max: 32, message: '长度必须少于32个字符', trigger: 'blur' }
        ],
        client_secret: [
          { required: true, message: '请输入客户端', trigger: 'blur' },
          { max: 64, message: '长度必须少于64个字符', trigger: 'blur' }
        ],
        expires_in: [
          { required: true, message: '请输入过期时间', trigger: 'blur' }
        ]
      },
      areas: [],
      jqjTypes: [],
      ylcTypes: []
    }
  },
  watch: {
  },
  mounted() {
    this.getList()
    this.getJQJTypes()
    this.getYLCTypes()
  },
  methods: {
  //   getJQJTypes() {
  //     dictEntryApi.getJQJTypes().then(res => {
  //       res.forEach(t => {
  //         t.code = t.code - 0
  //       })
  //       this.jqjTypes = res
  //     })
  //   },
  //   getYLCTypes() {
  //     dictEntryApi.getYLCTypes().then(res => {
  //       res.forEach(t => {
  //         t.code = t.code - 0
  //       })
  //       this.ylcTypes = res
  //     })
  //   },
  //   // 树形事件
  //   handleTreeClick(data, node) {
  //     this.listQuery.projectId = undefined
  //     this.listQuery.sectionId = undefined
  //     if (data.isProject) {
  //       this.listQuery.projectId = data.id
  //       this.listQuery.sectionId = undefined
  //     }
  //     if (data.isSection) {
  //       this.listQuery.projectId = data.projectId
  //       this.listQuery.sectionId = data.id
  //       this.getArea()
  //     }
  //     this.getList()
  //   },
  //   getArea() {
  //     this.areas = []
  //     areaApi.lookupBySection(this.listQuery.sectionId).then(res => {
  //       res.forEach(t => {
  //         this.areas.push({
  //           id: t.id,
  //           name: t.name
  //         })
  //       })
  //     })
  //   },
  //   getAreaName(areaId) {
  //     const area = this.areas.find(t => t.id === areaId)
  //     if (area) {
  //       return area.name
  //     } else {
  //       return ''
  //     }
  //   },
  //   // 清空下拉
  //   delValue(parameter) {
  //     this.listQuery[parameter] = undefined
  //   },
  //   // 获取数据列表
  //   getList() {
  //     if (!this.listQuery.projectId) {
  //       this.list = []
  //       return
  //     }
  //     this.listLoading = true
  //     interfaceApi
  //       .getList(this.listQuery)
  //       .then(res => {
  //         this.list = res.items
  //         this.total = res.totalCount
  //       })
  //       .finally(() => {
  //         this.listLoading = false
  //       })
  //   },
  //   // 查询
  //   handleFilter() {
  //     this.listQuery.skipCount = 0
  //     this.getList()
  //   },
  //   // 创建清空
  //   resetStation() {
  //     this.entity = {
  //       id: undefined,
  //       projectId: this.listQuery.projectId,
  //       sectionId: this.listQuery.sectionId,
  //       sectionAreaId: this.listQuery.sectionAreaId,
  //       deviceNo: '',
  //       deviceName: '',
  //       category: undefined,
  //       categoryName: '',
  //       spec: '',
  //       madeFactory: '',
  //       driverName: '',
  //       telephone: '',
  //       deviceType: undefined
  //     }
  //   },
  //   // 创建点击事件
  //   handleCreate() {
  //     if (!this.listQuery.sectionId) {
  //       this.verificationTips('请选择标段')
  //       return
  //     }
  //     this.resetStation()
  //     this.dialogStatus = 'create'
  //     this.dialogFormVisible = true
  //     this.formLoading = false
  //     this.$nextTick(() => {
  //       this.$refs['dataForm'].clearValidate()
  //     })
  //   },
  //   // 提示
  //   verificationTips(message) {
  //     this.$notify({
  //       title: '提示',
  //       message: message,
  //       type: 'error',
  //       duration: 2000
  //     })
  //   },
  //   // 创建
  //   createData() {
  //     this.$refs['dataForm'].validate(valid => {
  //       if (valid) {
  //         if (this.entity.deviceType === 1) {
  //           this.entity.categoryName = this.jqjTypes.find(t => t.code === this.entity.category).name
  //         }
  //         if (this.entity.deviceType === 2) {
  //           this.entity.categoryName = this.ylcTypes.find(t => t.code === this.entity.category).name
  //         }
  //         this.formLoading = true
  //         interfaceApi
  //           .create(this.entity)
  //           .then(() => {
  //             this.getList()
  //             this.dialogFormVisible = false
  //             this.$notify({
  //               title: '成功',
  //               message: '创建成功',
  //               type: 'success',
  //               duration: 2000
  //             })
  //           })
  //           .finally(() => {
  //             this.formLoading = false
  //           })
  //       }
  //     })
  //   },
  //   // 修改点击事件
  //   handleUpdate(row) {
  //     this.entity = Object.assign({}, row) // copy obj
  //     this.dialogStatus = 'update'
  //     this.dialogFormVisible = true
  //     this.formLoading = false
  //     this.$nextTick(() => {
  //       this.$refs['dataForm'].clearValidate()
  //     })
  //   },
  //   // 修改
  //   updateData() {
  //     this.$refs['dataForm'].validate(valid => {
  //       if (valid) {
  //         if (this.entity.deviceType === 1) {
  //           this.entity.categoryName = this.jqjTypes.find(t => t.code === this.entity.category).name
  //         }
  //         if (this.entity.deviceType === 2) {
  //           this.entity.categoryName = this.ylcTypes.find(t => t.code === this.entity.category).name
  //         }
  //         const submitData = Object.assign({}, this.entity)
  //         this.formLoading = true
  //         interfaceApi
  //           .update(submitData.id, submitData)
  //           .then(() => {
  //             this.getList()
  //             this.dialogFormVisible = false
  //             this.$notify({
  //               title: '成功',
  //               message: '修改成功',
  //               type: 'success',
  //               duration: 2000
  //             })
  //           })
  //           .finally(() => {
  //             this.formLoading = false
  //           })
  //       }
  //     })
  //   },
  //   // 删除
  //   handleDelete(row) {
  //     this.$confirm('此操作将删除该项, 是否继续?', '提示', {
  //       confirmButtonText: '确定',
  //       cancelButtonText: '取消',
  //       type: 'warning'
  //     }).then(() => {
  //       this.listLoading = true
  //       interfaceApi
  //         .remove(row.id)
  //         .then(() => {
  //           this.getList()
  //           this.$notify({
  //             title: '成功',
  //             message: '删除成功',
  //             type: 'success',
  //             duration: 2000
  //           })
  //         })
  //         .finally(() => {
  //           this.listLoading = false
  //         })
  //     })
  //   }
  }
}
</script>

<style  scoped>
.number >>> input{
  text-align: left !important;
}
.el-selects >>> .el-input--suffix{
  width: 150px !important;
}
</style>
