<template>
  <el-card class="container">
    <el-row :gutter="20" class="content">
      <el-col :xs="8" :sm="8" :md="6" :lg="4">
        <div class="custom-menu">
          <el-menu
            ref="customMenu"
            :default-active="defaultActive"
            @select="onSelect"
          >
            <el-menu-item
              v-for="(type, index) in typeList"
              :key="'type' + index"
              :index="type.id.toString()"
            >{{ type.name }}</el-menu-item>
          </el-menu>
        </div>
      </el-col>
      <el-col :xs="16" :sm="16" :md="18" :lg="20">
        <div class="top-container" style="display: flex;justify-content: space-between">
          <el-form
            :model="searchForm"
            inline
            label-width="80px"
            @submit.native.prevent
          >
            <el-form-item label="">
              <el-input v-model="searchForm.instanceName" clearable placeholder="设备名称">
                <el-button slot="append" icon="el-icon-search"></el-button>
              </el-input>
            </el-form-item>
          </el-form>
          <div class="buttons-group">
            <el-button type="primary" @click="showAddItem">新增实例</el-button>
          </div>
        </div>
        <el-table
          :data="dataTable"
          border
        >
          <el-table-column
            prop="name"
            label="设备名称"
          />
          <el-table-column
            prop="description"
            label="设备描述"
          />
          <el-table-column
            prop="businessId"
            label="设备业务ID"
          />
          <el-table-column
            prop="deviceModel"
            label="设备型号"
          />
          <el-table-column
            prop="createTime"
            label="创建时间"
            :formatter="$moment"
          />
          <el-table-column
            prop="updateTime"
            label="修改时间"
            :formatter="$moment"
          />
          <el-table-column
            label="操作"
            min-width="80"
          >
            <template slot-scope="scope">
              <el-button type="text" @click="editItem(scope.row)">编辑</el-button>
              <el-popconfirm
                title="这是一段内容确定删除吗？"
              >
                <el-button
                  slot="reference"
                  class="padding-left"
                  type="text"
                  @click="deleteItem(scope.row.id)"
                >删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          class="margin-top-20 text-align-right"
          :current-page="pageForm.pageNum"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageForm.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageForm.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-col>
    </el-row>
    <el-dialog
      :title="add ? '新增实例' : '编辑实例'"
      :visible.sync="dialogVisible"
      width="700px"
    >
      <el-form
        v-if="dialogVisible"
        ref="instanceForm"
        :model="instanceForm"
        label-width="90px"
        :rules="rules"
      >
        <el-form-item
          label="设备名称:"
          prop="name"
        >
          <el-input v-model="instanceForm.name" />
        </el-form-item>
        <el-form-item
          label="设备描述:"
          prop="description"
        >
          <el-input
            v-model="instanceForm.description"
            type="textarea"
            :row="2"
          />
        </el-form-item>
        <el-form-item
          label="设备业务ID:"
        >
          <el-input v-model="instanceForm.businessId" />
        </el-form-item>
        <el-form-item
          label="设备型号:"
        >
          <el-input v-model="instanceForm.deviceModel" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addItem">确 定</el-button>
      </span>
    </el-dialog>
  </el-card>
</template>

<script>
export default {
  name: 'EquipmentInstance',
  props: {},
  data() {
    return {
      fakeData: {
        '1': [
          {
            id: 1,
            deviceTypeId: '1',
            name: '鼓风机',
            description: '1968-06-9',
            businessId: 1,
            deviceModel: 1,
            createTime: 1596697194035,
            updateTime: 1596697194035
          }
        ],
        '2': [
          {
            id: 1,
            deviceTypeId: '2',
            name: '机床',
            description: '1968-06-9',
            businessId: 1,
            deviceModel: 1,
            createTime: 1596697194035,
            updateTime: 1596697194035
          }
        ],
        '3': [],
        '4': []
      },
      dataTable: [],
      dataHeader: [],
      defaultActive: null,
      typeList: [
        {
          id: 1,
          name: '类型一'
        },
        {
          id: 2,
          name: '类型二'
        },
        {
          id: 3,
          name: '类型三'
        },
        {
          id: 4,
          name: '类型四'
        }
      ],
      searchForm: {},
      pageForm: {
        pageSize: 10,
        pageNum: 1,
        total: 0
      },
      dialogVisible: false,
      instanceForm: {
        deviceTypeId: null,
        name: null,
        description: null,
        businessId: null,
        deviceModel: null
      },
      add: true,
      rules: {
        name: [
          { required: true, message: '请输入设备名称', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '请输入设备描述', trigger: 'blur' }
        ]
      }
    }
  },
  created() {},
  mounted() {
    if (this.typeList.length > 0) {
      const type = this.typeList[0]
      const indexPath = type.id.toString()
      this.defaultActive = indexPath
      this.getInstanceList(indexPath)
    }
  },
  methods: {
    showAddItem() {
      this.instanceForm = {
        deviceTypeId: null,
        name: null,
        description: null,
        businessId: null,
        deviceModel: null
      }
      this.dialogVisible = true
      this.add = true
    },
    onSelect(index, indexPath) {
      const activeType = this.typeList[parseInt(index) - 1]
      this.instanceForm.deviceTypeId = activeType.id
      this.getInstanceList(indexPath[0])
    },
    getInstanceList(indexPath) {
      const data = [...this.fakeData[indexPath]]
      this.dataHeader = []
      for (const key in data[0]) {
        if (Object.prototype.hasOwnProperty.call(data[0], key)) {
          this.dataHeader.push({
            label: key,
            prop: key
          })
        }
      }
      this.dataTable = data
    },
    handleSizeChange(val) {
      this.pageForm.pageSize = val
    },
    handleCurrentChange(val) {
      this.pageForm.pageNum = val
    },
    editItem(row) {
      const { id, deviceTypeId, name, description, businessId, deviceModel } = row
      this.instanceForm = {
        id,
        deviceTypeId,
        name,
        description,
        businessId,
        deviceModel
      }
      this.dialogVisible = true
      this.add = false
    },
    deleteItem(id) {},
    addItem() {
      this.$refs.instanceForm.validate()
        .then(_ => {})
        .catch(_ => {})
    }
  }
}
</script>

<style lang="scss" scoped>
.container{
  min-height: calc(100vh - 95px);
  .content{
    display: flex;
    min-height: calc(100vh - 135px);
    .padding-left{
      padding-left: 10px;
    }
    .custom-menu{
      width: 100%;
      background-color: #efeff1;
      height: 100%;
      .el-menu{
        background-color: initial;
        border-right: none;
        border-top: solid 1px #e6e6e6;
        border-left: solid 1px #e6e6e6;
        .el-menu-item.el-menu-item{
          min-width: initial;
          background-color: #efeff1;
        }
        .el-menu-item.is-active{
          background-color: #fff;
          color: #303133;
        }
      }
    }
    .top{
      display: flex;
      justify-content: space-between;
    }
  }
}
</style>
