<script setup lang="ts">
import { reactive, ref, watch } from "vue";
import type { CheckboxValueType } from "element-plus";
defineOptions({
  name: "AccountManagement"
});
const seachForm = reactive({
  title: "",
  publishDeptName: "",
  status: "1"
});
const accountForm = reactive({
  userName: "",
  role: "",
  department: ""
});
const tabList = ref([
  {
    title: "账号管理",
    id: "1"
  },
  {
    title: "部门管理",
    id: "2"
  },
  {
    title: "角色权限",
    id: "3"
  }
]);
const pagination = reactive({
  total: 0,
  pageSize: 10,
  currentPage: 1,
  background: true
});
const columns: TableColumnList = [
  {
    label: "序号",
    prop: "diseaseName"
  },
  {
    label: "用户名",
    prop: "diseaseName"
  },
  {
    label: "姓名",
    prop: "diseaseName"
  },
  {
    label: "角色",
    prop: "diseaseName"
  },
  {
    label: "所属部门",
    prop: "diseaseName"
  },
  {
    label: "状态",
    prop: "diseaseName"
  },
  {
    label: "备注",
    prop: "diseaseName"
  },
  {
    label: "最新时间",
    prop: "diseaseName"
  },
  {
    label: "操作",
    fixed: "right",
    width: 350,
    slot: "operation"
  }
];
const dataList = ref([]);
const search = () => {
  pagination.currentPage = 1;
  pagination.pageSize = 10;
};

const reset = () => {
  seachForm.title = "";
  seachForm.publishDeptName = "";
  // search();
};
const createFlag = ref(false);

// const create = () => {
//   createFlag.value = true;
//   // search();
// };
// const changeStatus = item => {
//   seachForm.status = item.id;
// };
const checkAll = ref(false);
const indeterminate = ref(false);
const value = ref<CheckboxValueType[]>([]);
const cities = ref([
  {
    value: "Beijing",
    label: "Beijing"
  },
  {
    value: "Shanghai",
    label: "Shanghai"
  },
  {
    value: "Nanjing",
    label: "Nanjing"
  },
  {
    value: "Chengdu",
    label: "Chengdu"
  },
  {
    value: "Shenzhen",
    label: "Shenzhen"
  },
  {
    value: "Guangzhou",
    label: "Guangzhou"
  }
]);
const options = [
  {
    value: "Option1",
    label: "Option1"
  },
  {
    value: "Option2",
    label: "Option2"
  },
  {
    value: "Option3",
    label: "Option3"
  },
  {
    value: "Option4",
    label: "Option4"
  },
  {
    value: "Option5",
    label: "Option5"
  }
];

watch(value, val => {
  if (val.length === 0) {
    checkAll.value = false;
    indeterminate.value = false;
  } else if (val.length === cities.value.length) {
    checkAll.value = true;
    indeterminate.value = false;
  } else {
    indeterminate.value = true;
  }
});

const handleCheckAll = (val: CheckboxValueType) => {
  indeterminate.value = false;
  if (val) {
    value.value = cities.value.map(_ => _.value);
  } else {
    value.value = [];
  }
};
const changeStatus = item => {
  seachForm.status = item.id;
};
</script>

<template>
  <div class="sublibrary_management app-main-content">
    <!-- <div class="seach">
      <div class="seach-title"><span>子库管理</span></div>
      <el-form :model="seachForm">
        <el-row>
          <el-form-item label="子库名称">
            <el-input v-model="seachForm.title" />
          </el-form-item>
          <el-button class="ml-8" @click="search" type="primary"
            >搜索</el-button
          >
          <el-button @click="reset">重置</el-button>
        </el-row>
      </el-form>
    </div> -->
    <div class="main-table">
      <div class="main-table-header">
        <div class="tab-list">
          <div
            class="tab-list-item"
            :class="[seachForm.status === item.id ? 'actived' : '']"
            v-for="(item, index) in tabList"
            :key="index"
            @click="changeStatus(item)"
          >
            <span>{{ item.title }}</span>
          </div>
        </div>
        <div class="header-btn">
          <el-button @click="search" type="primary">新建账号</el-button>
        </div>
      </div>
      <div class="account_seach" v-if="seachForm.status === '1'">
        <el-form :model="accountForm">
          <el-row>
            <el-form-item label="用户名">
              <el-input v-model="accountForm.userName" />
            </el-form-item>
            <el-form-item class="ml-4" label="角色">
              <el-input v-model="accountForm.role" />
            </el-form-item>
            <el-form-item class="ml-4" label="所属部门">
              <el-select
                v-model="accountForm.department"
                clearable
                placeholder="请选择"
                style="width: 240px"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-button class="ml-8" @click="search" type="primary"
              >搜索</el-button
            >
            <el-button @click="reset">重置</el-button>
          </el-row>
        </el-form>
      </div>
      <pure-table
        showOverflowTooltip
        alignWhole="center"
        :data="dataList"
        :columns="columns"
        :header-cell-style="{
          background: 'var(--el-table-row-hover-bg-color)',
          color: 'var(--el-text-color-primary)'
        }"
      >
        <template #operation="{ row }">
          <el-button link type="danger" @click="handleDelete(row)">
            删除
          </el-button>
        </template></pure-table
      >
    </div>
    <el-drawer
      v-model="createFlag"
      modal-class="drawer_content"
      :with-header="false"
    >
      <div class="drawer_header">
        <span>新建子库</span>
      </div>
      <div class="drawer_box">
        <el-form :model="accountForm">
          <el-form-item label="子库名称">
            <el-input v-model="accountForm.title" autocomplete="off" />
          </el-form-item>
          <el-form-item label="子库编码">
            <el-input v-model="accountForm.title" autocomplete="off" />
          </el-form-item>
          <el-form-item label="关联部门">
            <el-select
              v-model="value"
              multiple
              clearable
              collapse-tags
              placeholder="Select"
              popper-class="custom-header"
              :max-collapse-tags="3"
              style="width: 240px"
            >
              <el-option
                v-for="item in cities"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <el-checkbox
              v-model="checkAll"
              :indeterminate="indeterminate"
              @change="handleCheckAll"
            >
              All
            </el-checkbox>
          </el-form-item>
        </el-form>
        <div class="drawer_footer">
          <el-button plain>重置</el-button>
          <el-button type="primary">确定</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<style lang="scss" scoped>
.sublibrary_management {
  .main-table {
    border-radius: 6px;

    .main-table-header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 24px;
      border-bottom: 1px solid #dfe1e2;

      .tab-list {
        position: relative;
        top: 1px;
        display: flex;
        align-items: center;

        .tab-list-item {
          padding: 16px 34px;
          font-size: 18px;
          color: #333;
          cursor: pointer;
          background: #f5f7f9;
          border: 1px solid #dfe1e2;
          border-bottom: 0;
        }

        .actived {
          color: #0052d9;
          background: #fff;
          border: 0;
          border-top: 3px solid #0052d9;
        }
      }

      .header-btn {
        display: flex;
        align-items: center;
      }

      .main-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 142px;
        height: 32px;
        font-size: 14px;
        color: #fff;
        background: #0052d9;
        border-radius: 6px;
      }
    }
  }

  :deep(.el-drawer__body) {
    padding: 0 !important;
  }

  .drawer_content {
    .drawer_header {
      box-sizing: border-box;
      height: 96px;
      padding: 24px;
      line-height: 65px;
      border-bottom: 1px solid #e9e9e9;

      span {
        padding-left: 8px;
        font-size: 20px;
        border-left: 6px solid #0052d9;
      }
    }

    .drawer_box {
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: calc(100vh - 96px);
      padding: 24px;

      .drawer_footer {
        display: flex;
        justify-content: flex-end;
      }
    }
  }
}
</style>
