<template>
    <div class="tabs">
    </div>
    <div class="main">
        <div class="container system-container panel">
          <div class="box">
          <div class="left">
              <h1>用户名称：</h1>

            <el-select v-model="value"  style="width: 305px">
              <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>


           <img src="/images/search.png">
          </div>
          <div class="right">
            <span @click="onAddClick">添加新用户</span>
          </div>
          </div>

          <div class="tableMessage">
          <el-table :data="tableData" border  style="width: 100%;color: black">
            <el-table-column prop="date" label="序号" width="216px" align="center"/>
            <el-table-column prop="name" label="用户账号" width="300px" align="center"/>
            <el-table-column prop="address" label="电话" width="301px" align="center"/>
            <el-table-column prop="name" label="邮箱" width="351px" align="center"/>
            <el-table-column prop="name" label="操作" width="351px" align="center"/>
          </el-table>
          </div>

        </div>
      <!--弹出框--->
      <el-dialog v-model="dialogFormVisible" title="添加新用户" show-close=false center=true width="961px">
        <el-form :model="form">
          <el-form-item label="用户账号：" :label-width="formLabelWidth">
            <el-input v-model="form.accountNumber" autocomplete="off" style="width: 260px"></el-input>
          </el-form-item>
          <el-form-item label="用户姓名：" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off" style="width: 260px"></el-input>
          </el-form-item>
          <el-form-item label="电话：" :label-width="formLabelWidth">
            <el-input v-model="form.phone" autocomplete="off" style="width: 260px"></el-input>
          </el-form-item>
          <el-form-item label="邮箱：" :label-width="formLabelWidth">
            <el-input v-model="form.mailbox" autocomplete="off" style="width: 260px"></el-input>
          </el-form-item>


        </el-form>
        <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="dialogFormVisible = false" style="color:#FFFFFF;">保存</el-button>
        <el-button  @click="dialogFormVisible = false">取消</el-button>
      </span>
        </template>
      </el-dialog>


    </div>
</template>



<script lang="ts">
    import { reactive, toRefs,ref} from 'vue';

    export default {
        name: 'SystemManagement',
        setup() {
          let option = reactive({
            options:[ {
              value: 'Option1',
              label: 'Option1',
            },
              {
                value: 'Option2',
                label: 'Option2',
              },
              {
                value: 'Option3',
                label: 'Option3',
              }],
            dialogFormVisible:false,
            formLabelWidth:"100px",
            form:{
              name:'',
              accountNumber:'',
              phone:'',
              mailbox:''
            },
            tableData:[
              {
                date: '1',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
              },
              {
                date: '2',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
              },
              {
                date: '3',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
              },
              {
                date: '4',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
              },
            ]

          })
          const onAddClick = ()=>{
            option.dialogFormVisible=true
          }
            return {
              ...toRefs(option),
              value: ref(''),
              onAddClick
            }
        }
    }
</script>
<style lang="less" scoped>
    .system-container {
        width: calc(~"100% - 40px");
        margin: 0 20px;
      .box{
        padding: 28px 20px 0px ;
        display: flex;
        justify-content: space-between;
        .left{
          display: flex;
          justify-content: space-between;

          :deep(.el-input__icon::after){

          }
          h1{
            width: 100px;
            height: 26px;
            font-size: 20px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            line-height: 26px;
            color: #000000;
            opacity: 1;
          }
          img{
            width: 44px;
            height: 44px;
            margin-left: 10px;
            cursor: pointer;
          }
        }
        .right{
          width: 100px;
          height: 26px;
          font-size: 20px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          line-height: 26px;
          color: #498DF0;
          opacity: 1;

          span{
            width: 96px;
            height: 0px;
            border-bottom: 1px solid #498DF0;
            opacity: 1;
            cursor: pointer;
          }

        }
      }
    .tableMessage{
      padding: 56px 20px 20px;
      :deep(.el-table thead){
        color: black;
      }

    }

    }
    :deep(.el-form-item__label){
      text-align: left;
      color: #000000;

    }
    :deep(.el-form){
      display: flex;
      flex-wrap: wrap;
      justify-content: space-evenly;
    }
    :deep(.el-button){
      width: 159px;
      height: 44px;
      opacity: 1;
      border-radius: 4px;
      border: 1px solid #498DF0;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #498DF0;
    }
</style>