<template>
  <div class="user-task m-4">
    <a-form
      ref="formRef"
      :model="addForm"
      labelAlign="left"
      :rules="data.rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-form-item label="防火站点名称" name="siteName">
        <a-input v-model:value="addForm.siteName" placeholder="请输入" />
      </a-form-item>
      <a-form-item label="防火站点地址" name="siteAddress">
        <a-space>
          <a-input v-model:value="addForm.siteAddress" placeholder="请输入" />
          <a-button type="primary" @click="mapVisible = true">选择</a-button>
        </a-space>
      </a-form-item>
      <a-form-item label="站点负责人姓名" name="director">
        <a-input v-model:value="addForm.director" placeholder="请输入" />
      </a-form-item>
      <a-form-item label="负责人电话" name="phone">
        <a-input v-model:value="addForm.phone" placeholder="请输入" />
      </a-form-item>
      <a-form-item label="是否有人值守" name="isonduty">
        <a-radio-group name="radioGroup" v-model:value="addForm.isonduty">
          <a-radio :value="true">是</a-radio>
          <a-radio :value="false">否</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="是否接收进山消息" name="isreceive">
        <a-radio-group name="radioGroup" v-model:value="addForm.isreceive">
          <a-radio :value="true">是</a-radio>
          <a-radio :value="false">否</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-space>
        <span>消息接收人员（扫码信息消息接收人员）</span>
        <a-button danger @click="addPerson">添加人员</a-button>
      </a-space>
      <a-table :columns="data.columns" :data-source="accountList" bordered :pagination="false">
        <template #bodyCell="{ column, text, record }">
          <template v-if="['name'].includes(column.dataIndex)">
            <div>
              {{ text }}
            </div>
          </template>
          <template v-else-if="['account'].includes(column.dataIndex)">
            <div>
              {{ text }}
            </div>
          </template>
          <template v-else-if="column.dataIndex === 'operation'">
            <a-button danger @click="onDelete(record.id)" size="small" class="ml-2">删除</a-button>
          </template>
        </template>
      </a-table>
    </a-form>
    <a-modal
      width="60%"
      v-model:open="accountVisible"
      title="选择人员"
      @ok="handleFormulaOk"
      :destroyOnClose="true"
    >
      <SelectAccount ref="SelectAccountRef" />
    </a-modal>
    <a-modal
      width="60%"
      v-model:open="mapVisible"
      title="选择位置"
      @ok="handlePostionOk"
      :destroyOnClose="true"
    >
      <Map ref="PostionRef" />
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
  import { SelectAccount } from './page';
  import { reactive, ref, onMounted, watch, defineProps } from 'vue';
  import { Map } from './page';

  const labelCol = { span: 3 };
  const wrapperCol = { span: 6 };
  const SelectAccountRef = ref<any>();
  const accountVisible = ref(false);
  const mapVisible = ref(false);
  const accountList = ref([]);
  const addForm: any = ref({});
  const formRef = ref<any>();
  const data = reactive({
    rules: {
      siteName: [{ required: true, message: '防火站点名称不能为空' }],
      siteAddress: [{ required: true, message: '防火站点地址不能为空' }],
      director: [{ required: true, message: '站点负责人姓名不能为空' }],
      phone: [{ required: true, message: '负责人电话不能为空' }],
    },
    columns: [
      { title: '用户姓名', dataIndex: 'name' },
      { title: '联系电话', dataIndex: 'account' },
      { title: '操作', dataIndex: 'operation' },
    ],
    tableData: [],
  });
  const PostionRef = ref();
  onMounted(() => {});
  const addPerson = () => {
    accountVisible.value = true;
  };
  function onDelete(id) {
    const index = accountList.value.findIndex((item) => item.id === id);
    accountList.value.splice(index, 1);
  }

  const handleFormulaOk = () => {
    const list = SelectAccountRef.value.getRow();
    accountList.value = list;
    accountVisible.value = false;
  };
  const handlePostionOk = () => {
    const data = PostionRef.value.getPosition();
    console.log(data);
    mapVisible.value = false;
  };
  const createSite = () => {
    const params = {
      ...addForm.value,
      accountList: accountList.value,
    };
    return params;
  };
  // 校验表单
  function validateForm() {
    formRef.value
      .validate()
      .then(async () => {
        return true;
      })
      .catch(async () => {
        return false;
      });
  }
  defineExpose({
    createSite,
    validateForm,
  });
</script>

<style scoped>
  ::v-deep .ant-alert-info {
    margin-bottom: 20px;
  }

  ::v-deep .ant-table-wrapper {
    margin-top: 20px;
  }
</style>
