<template>
  <div class="info-container">
    <!-- 布控信息 -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="布控标题">
        <el-input v-model="formInline.user" placeholder="Approved by" clearable />
      </el-form-item>
      <el-form-item label="预警标签模型">
        <el-select v-model="formInline.region" placeholder="Activity zone" clearable>
          <el-option label="Zone one" value="shanghai" />
          <el-option label="Zone two" value="beijing" />
        </el-select>
      </el-form-item>
      <el-form-item label="所属警钟">
        <el-select v-model="formInline.region" placeholder="Activity zone" clearable>
          <el-option label="Zone one" value="shanghai" />
          <el-option label="Zone two" value="beijing" />
        </el-select>
      </el-form-item>
      <el-form-item label="布控对象">
        <el-select v-model="formInline.person" placeholder="Activity zone" clearable>
          <el-option label="Zone one" value="shanghai" />
          <el-option label="Zone two" value="beijing" />
        </el-select>
      </el-form-item>
    </el-form>
    <!-- 按钮 -->
    <div class="btns">
      <el-button type="primary">新增</el-button>
      <el-button type="danger">批量删除</el-button>
    </div>
    <MyTable
      :tableData="pageData.tableData"
      :tableColumn="pageData.tableColumn"
      :key="pageData.keyCount"
      :tableConfiger="pageData.tableConfiger"
      :controlsWidth="pageData.controlsWidth"
      @chooseData="chooseData"
    >
      <template #photo="{ row }">
        <img width="30" src="@/assets/images/icon100.png" alt="" />
      </template>
      <template #controls="{ row }">
        <el-button size="small" type="primary" link>查看档案</el-button>
        <el-button size="small" type="primary" link>编辑</el-button>
        <el-button size="small" type="danger" link>删除</el-button>
      </template>
    </MyTable>
  </div>
</template>
<script setup>
  import { reactive } from "vue";
  import MyTable from "@/components/aboutTable/MyTable.vue";

  const formInline = reactive({
    user: "",
    region: "",
    date: ""
  });
  const pageData = reactive({
    tableData: [
      {
        photo: "",
        name: "某三",
        gender: "男",
        idNumber: "500352199705022365",
        currentAddress: "西藏特警...",
        phoneNumber: "1525421452",
        uploadStatus: "smsj",
        carNumber: "藏A12345",
        vehicleNumber: "AKBC123",
        specialLicense: "已同步上传",
        personTag: "网络延迟"
      }
    ], //表格数据
    keyCount: 0,
    tableConfiger: {
      rowHieght: 61,
      showSelectType: "checkBox",
      loading: false,
      size: "small",
      border: false
    },
    total: 0,
    pageConfiger: {
      pageSize: 20,
      pageCurrent: 1
    }, //分页
    controlsWidth: 220, //操作栏宽度
    tableColumn: [
      { label: "照片", prop: "photo", showSolt: true },
      { label: "姓名", prop: "name" },
      { label: "性别", prop: "gender" },
      { label: "身份证号", prop: "idNumber" },
      { label: "户籍地", prop: "户籍地" },
      { label: "现居住地", prop: "currentAddress" },
      { label: "手机号", prop: "phoneNumber" },
      { label: "同步上传", prop: "uploadStatus" },
      { label: "车牌号", prop: "carNumber" },
      { label: "车号", prop: "vehicleNumber" },
      { label: "特许证号", prop: "specialLicense" },
      { label: "人员标签", prop: "personTag" }
    ]
  });

  const onSubmit = () => {
    console.log("submit!");
  };
  // 选择
  const chooseData = () => {};
</script>

<style lang="scss" scoped>
  // .demo-form-inline .el-input {
  //   --el-input-width: 220px;
  // }

  // .demo-form-inline .el-select {
  //   --el-select-width: 220px;
  // }
  .info-container {
    .btns {
      margin-bottom: 10px;
    }
  }
</style>
