<template>
  <div class="app-container">
    <el-card>
      <div class="cardbox">
        <div class="top">
          <div class="l">设备列表</div>
          <div class="r">
            <el-input
              v-model="name"
              style="width: 240px"
              placeholder="输入部门名称/ID"
              :suffix-icon="Search"
            />
            <el-date-picker
              v-model="value1"
              type="daterange"
              range-separator="To"
              start-placeholder="Start date"
              end-placeholder="End date"
            />
            <el-button
              type="primary"
              @click="dialogVisible = true"
              :icon="CirclePlus"
              >添加设备</el-button
            >
          </div>
        </div>

        <div class="container">
          <el-table
            :data="tableData"
            class="table"
            border
            style="width: 100%"
            :preserve-expanded-content="true"
          >
            <el-table-column type="expand" align="center">
              <template #default="props">
                <div class="expandbox">
                  <div class="box">
                    <div class="ul">
                      <div>布控球ID</div>
                      <div>状态</div>
                      <div>在线时长（小时）</div>
                      <div>过车次数</div>
                    </div>
                    <div class="ul">
                      <div>001</div>
                      <div>在线</div>
                      <div>16</div>
                      <div>999</div>
                    </div>
                     <div class="ul">
                      <div>001</div>
                      <div>在线</div>
                      <div>16</div>
                      <div>999</div>
                    </div>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="name"
              sortable
              label="序号"
              width="120"
              align="center"
            />
             <el-table-column prop="address" label="关联部门" />
            <el-table-column
              prop="name"
              label="设备数量"
               width="120"
              align="center"
            />
             <el-table-column
              prop="name"
              label="云音响imei"
               width="120"
              align="center"
            />
              <el-table-column
              prop="name"
              label="联系人"
              align="center"
               width="120"
            />
          
            <el-table-column
              prop="date"
              label="添加时间"
              align="center"
              width="140"
            />
            <el-table-column
              fixed="right"
              label="操作"
              width="120"
              align="center"
            >
              <template #default>
                <el-button
                  link
                  type="primary"
                  size="small"
                  @click="handleClick"
                >
                  编辑
                </el-button>
                <el-button link type="primary" size="small" @click="remove()"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="total > 0"
            :total="total"
            v-model:page="pageNum"
            v-model:limit="pageSize"
          />
        </div>
      </div>
    </el-card>
  </div>
  <!-- 添加弹框 -->
  <el-dialog
    v-model="dialogVisible"
    width="500"
    title="添加部门"
    header-class="dialogheader"
    :align-center="true"
    center
  >
    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
        <el-form-item label="关联部门">
        <el-select v-model="form.region" placeholder="please select your zone">
          <el-option label="Zone one" value="shanghai" />
          <el-option label="Zone two" value="beijing" />
        </el-select>
      </el-form-item>
      <el-form-item label="联系人" prop="name">
        <el-input v-model="form.name" />
      </el-form-item>
       <el-form-item label="联系电话" prop="name">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="布控球1 ID:" prop="name">
        <el-input v-model="form.name" />
      </el-form-item>
       <el-form-item label="布控球2 ID:" prop="name">
        <el-input v-model="form.name" />
      </el-form-item>
        <el-form-item label="云音响imei:" prop="name">
        <el-input v-model="form.name" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="resetForm(formEl)">取消</el-button>
        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
import { ref } from "vue";

import { ElMessageBox } from "element-plus";

const formEl = ref();
const total = ref(90);
const pageNum = ref(10);
const pageSize = ref(1);
const name = ref("");
const form = ref({});
const dialogVisible = ref(false);

const tableData = [
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
];
const rules = {
  name: {
    required: true,
    message: "Please select Activity zone",
    trigger: "change",
  },
};
const resetForm = (formEl) => {
  if (!formEl) return;
  dialogVisible.value = false;
  formEl.resetFields();
};
const submitForm = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
    } else {
      console.log("error submit!", fields);
    }
  });
};
function remove() {
  ElMessageBox.confirm("确定删除该部门？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      userStore.logOut().then(() => {
        location.href = "/index";
      });
    })
    .catch(() => {});
}
</script>

<style lang="scss" scoped>
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 15px;
  .l {
    font-weight: 500;
    font-size: 16px;
    color: #333333;
  }
  .r {
    display: flex;
    gap: 20px;
  }
}
.cardbox {
  height: calc(100vh - 84px - 30px - 30px - 30px);
}

.container {
  border-top: 1px solid #eee;
  height: calc(100% - 47px);
  .table {
    height: calc(100% - 60px);
    :deep(.el-table__expand-icon) {
      color: #4d7bff;
      border: 1px solid;
      border-radius: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 17px;
      height: 17px;
    }
    .expandbox {
        background: #f2f6ff;
        margin: -8px 0;
      .box{
         margin: 0px 120px 0 48px;
         border-left: 1px solid #E6E6E6;
          border-right: 1px solid #E6E6E6;
        .ul{
          text-align: center;
          display: flex;
          justify-content: space-between;
          padding: 10px 15px;
          border-bottom: 1px solid #E6E6E6;
          div{
            flex: 1;
            text-align: center;
          }
         
        }
      }
     
    }
  }
}
</style>
