<template>
  <div class="panel">
    <a-form-item label="响应级别：">
      <a-select style="width: 200px">
        <a-select-option v-for="item in callLevel" :key="item" :value="item">{{
          item
        }}</a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item label="选择牵头单位及负责人">
      <a-select placeholder="请选择" />
      <a-table bordered :columns="tableColums" class="table-box" :scroll="{ y: 40 }">
        <template #customIndex="{ index }">
          {{ index + 1 }}
        </template>
      </a-table>
    </a-form-item>
    <a-form-item label="选择协同单位及负责人">
      <a-select placeholder="请选择" />
      <a-table bordered :columns="tableColums" class="table-box" :scroll="{ y: 40 }">
        <template #customIndex="{ index }">
          {{ index + 1 }}
        </template>
      </a-table>
    </a-form-item>
  </div>
</template>
<script lang="ts" setup>
  const callLevel = ['无', 'Ⅰ级', 'Ⅱ级', 'Ⅲ级', 'Ⅳ级', 'Ⅴ级'];
  const tableColums = [
    { title: '序号', dataIndex: 'index', customRender: 'customIndex', width: 40 },
    {
      title: '单位名称',
      dataIndex: 'unityname',
      width: 120,
    },
    {
      title: '姓名',
      dataIndex: 'name',
      width: 120,
    },
    {
      title: '部门',
      dataIndex: 'unity',
      width: 120,
    },
    {
      title: '职务',
      dataIndex: 'position',
      width: 120,
    },
    {
      title: '联系方式',
      dataIndex: 'phone',
      width: 120,
    },
    {
      title: '备注',
      dataIndex: 'remark',
      width: 120,
    },
  ];
</script>
<style less="less" scoped>
  .panel {
    border: solid 3px #ccc;
    margin-left: 50px;
    padding: 10px;
    height: 440px;
    max-height: 480px;
    overflow: auto;
  }

  :deep(.ant-col) {
    /* width: 300px; */
    display: contents;
  }

  :deep(.ant-row) {
    margin-bottom: 10px;
  }

  :deep(.ant-table-body) {
    max-height: 60px;
    height: 80px;
  }

  :deep(.ant-table-placeholder) {
    display: none;
  }
</style>
