<!-- vue 页面模板 -->
<template>
  <div class="user">
    <Space wrap style="margin-bottom: 1em">
      <Button type="primary" icon="ios-search" @click="() => show_edit()">
        新增
      </Button>
      <Input
        v-model="searchText"
        placeholder="请输入搜索内容"
        icon="ios-search"
        @on-click="() => change(1)"
        @on-enter="() => change(1)"
      >
      </Input>
    </Space>
    <Table highlight-row ref="currentRowTable" :columns="columns" :data="list">
      <template #tool="{ row }">
        <Space wrap>
          <Poptip
            transfer
            confirm
            width="90"
            title="删除该用户?"
            @on-ok="() => del_user(row)"
          >
            <Button size="small" type="error"> 删 除 </Button>
          </Poptip>
          <Button size="small" type="primary" @click="() => show_edit(row)">
            修 改
          </Button>
        </Space>
      </template>
    </Table>
    <br />
    <Page
      :total="total"
      show-sizer
      v-model="page"
      @on-change="change"
      @on-page-size-change="sizeChange"
    />

    <Drawer
      :mask-closable="false"
      title="机构详情"
      placement="right"
      v-model="show_user_edit"
    >
      <Form
        ref="formInline"
        :model="user"
        :rules="ruleInline"
        :label-width="80"
      >
        <FormItem label="机构名">
          <Input v-model="user.name" placeholder="请输入机构名"></Input>
        </FormItem>
        <FormItem label="类型">
          <Input v-model="user.category" placeholder="请输入机构类型"></Input>
        </FormItem>
        <FormItem label="所属机构">
          <Select
            v-model="user.pid"
            filterable
            :remote-method="get_regan_data"
            :loading="isLoad"
            @on-change="change_regan"
          >
            <Option
              v-for="(option, index) in organ"
              :value="option.organId"
              :key="index"
            >
              {{ option.name }}
            </Option>
          </Select>
        </FormItem>
        <FormItem label="地域">
          <TreeSelect v-model="user.regionId" :data="region" />
        </FormItem>
        <FormItem label="简介">
          <Input
            v-model="user.info"
            type="textarea"
            :rows="4"
            placeholder="请输入简介"
          ></Input>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="save_user">保 存</Button>
        </FormItem>
      </Form>
    </Drawer>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { Image, Message } from 'view-ui-plus';

import api from '../../api/index.js';

const searchText = ref('');
const total = ref(0);
const page = ref(1);
const pageSize = ref(10);
const formInline = ref(null);
const list = ref([]);
const user = ref({
  headSculpture: [],
  regionId: '',
});
const organ = ref([]);
const region = ref([]);
const show_user_edit = ref(false);
const isLoad = ref(false);

const columns = [
  {
    title: '机构名称',
    key: 'name',
    align: 'center',
  },
  {
    title: '简介',
    key: 'info',
    align: 'center',
  },
  {
    title: '操作',
    slot: 'tool',
    align: 'center',
  },
];
const ruleInline = {
  name: [
    {
      required: true,
      message: '请输入姓名',
      trigger: 'blur',
    },
  ],
};

onMounted(() => {});
get_list();
get_regan_data();
get_region_api();

function change(p) {
  page.value = p;
  get_list();
}

function sizeChange(pageSize) {
  pageSize.value = pageSize;
  get_list();
}

function get_list() {
  api
    .organ_api({
      page: page.value,
      pageSize: pageSize.value,
      name: searchText.value,
    })
    .then(r => {
      list.value = r.records || [];
      total.value = r.total || 0;
    });
}

function show_edit(data) {
  const row = JSON.parse(JSON.stringify(data || {}));
  show_user_edit.value = true;
  user.value = row || {
    headSculpture: [],
    regionId: '',
  };
}

function save_user() {
  formInline.value.validate(valid => {
    if (!valid) return;
    const U = user.value;
    const p = {
      organId: U.organId,
      regionId: U.regionId,
      pid: U.pid,
      level: U.level,
      name: U.name,
      category: U.category,
      authType: U.authType,
      info: U.info,
    };
    if (!U.organId)
      api.organ_create(p).then(() => {
        Message.info('新增成功');
        show_user_edit.value = false;
        get_list();
      });
    else
      api.organ_update(p).then(() => {
        Message.info('修改成功');
        show_user_edit.value = false;
        get_list();
      });
  });
}

function get_regan_data(query) {
  api
    .organ_api({
      page: 1,
      pageSize: 100000,
      name: query,
    })
    .then(r => {
      const li = r.records || [];
      organ.value = li;
    });
}

function get_region_api() {
  api.region_api().then(r => {
    region.value = tree_change(r || []);
  });
}

function tree_change(list) {
  const li = [];
  for (let i = 0; i < list.length; i++) {
    const v = list[i];
    v.title = v.name;
    v.value = v.regionId;
    v.expand = false;
    v.selected = false;
    v.checked = false;
    li.children = tree_change(v.children || []);
    li.push(v);
  }
  return li;
}

function del_user(row) {
  api.organ_del(row.organId).then(() => {
    Message.info('删除成功');
    get_list();
  });
}

function change_regan(val) {
  const v = organ.value.find(v => v.organId == val);
  if (!v) {
    user.value.level = 1;
  } else {
    user.value.level = Number(v.level) + 1;
  }
}
</script>

<style lang="scss"></style>
