<template>
  <div class="page-channel">
    <el-row :gutter="10" style="height: 90vh">
      <el-col :span="6">
        <el-card shadow="never" class="h-full">
          <template #header>
            <div class="flex items-center justify-between">
              <div class="flex items-center">
                <el-input
                  v-model.trim="query.key"
                  clearable
                  placeholder="输入渠道名称进行搜索"
                />
                <el-button
                  type="primary"
                  class="ml-2"
                  @click="onSearch"
                  :icon="Search"
                  >搜索</el-button
                >
              </div>
              <el-button
                type="primary"
                :icon="Plus"
                class="ml-2"
                @click="
                  state.visible = true;
                  state.rowData = {
                    id: undefined
                  };
                "
                >新增渠道</el-button
              >
            </div>
          </template>
          <div>
            <el-table
              :data="state.list"
              style="width: 100%"
              :show-header="false"
              max-height="85vh"
              @row-click="
                row => {
                  state.currentChannel = row;
                }
              "
            >
              <el-table-column prop="name" label="姓名">
                <template #default="{ row }">
                  <div :class="state.currentChannel.id == row.id && 'active'">
                    {{ row.name }}
                  </div>
                </template>
              </el-table-column>
            </el-table>

            <el-pagination
              background
              class="justify-end mt-4"
              layout="total, prev, pager, next"
              :page-size="10"
              :total="state.total"
              @change="handleCurrentChange"
            />
          </div>
        </el-card>
      </el-col>
      <el-col :span="18">
        <el-card shadow="never" v-if="state.currentChannel.id" class="h-full">
          <template #header>
            <div class="flex items-center">
              <el-text tag="b">{{ state.currentChannel.name }}</el-text>
              <div class="ml-8">
                <el-button type="primary" :icon="Edit" link @click="handleEdit"
                  >编辑</el-button
                >
                <el-popconfirm
                  title="确定要删除这个渠道吗？如果创建了部门，部门也会一并删除"
                  width="300"
                  @confirm="handleDelete"
                >
                  <template #reference>
                    <el-button type="danger" :icon="Delete" link
                      >删除</el-button
                    >
                  </template>
                </el-popconfirm>
              </div>
            </div>
          </template>
          <div>
            <PageDepartment
              :channelId="state.currentChannel.id"
              :channelName="state.currentChannel.name"
            />
          </div>
        </el-card>
        <el-card shadow="never" class="h-full" v-else>
          <div>
            <el-empty />
          </div>
        </el-card>
      </el-col>
    </el-row>
    <DialogEditChannel
      v-model:show="state.visible"
      @success="onSearch"
      :rowData="state.rowData"
    />
  </div>
</template>
<script lang="ts" setup>
import { reactive } from "vue";
import { Search, Plus, Edit, Delete } from "@element-plus/icons-vue";
import DialogEditChannel from "./components/DialogEditChannel.vue";
import PageDepartment from "./department.vue";

import { request } from "@/utils";
import { ElMessage } from "element-plus";

const state = reactive({
  visible: false,
  list: [],
  total: 0,
  currentChannel: {
    id: undefined,
    name: ""
  },
  rowData: {}
});
const query = reactive({
  key: "",
  page: 1
});
const initCurrentChannel = () => {
  state.currentChannel.id = "";
  state.currentChannel.name = "";
};
const onSearch = () => {
  query.page = 1;
  getList();
};
const getList = () => {
  request
    .get("archivesService/mechanism/channel/paginate", { params: query })
    .then(resp => {
      state.list = resp.data.list;
      state.total = resp.data.total;
      if (state.currentChannel.id) {
        state.currentChannel = state.list.find(
          v => v.id == state.currentChannel.id
        );
      }
    });
};
const handleCurrentChange = page => {
  query.page = page;
  getList();
};
const handleEdit = () => {
  state.rowData = state.currentChannel;
  state.visible = true;
};
const handleDelete = () => {
  request
    .post(
      `archivesService/mechanism/channel/delete?id=${state.currentChannel.id}`
    )
    .then(resp => {
      ElMessage.success(resp.message);
      initCurrentChannel();
      getList();
    });
};
getList();
</script>
<style lang="scss" scoped>
.active {
  color: var(--el-color-primary);
  border-right: 6px solid var(--el-color-primary);
}
</style>
