<template>
  <div class="default-main ">
    <el-alert class="ba-table-alert" v-if="baTable.table.remark" :title="baTable.table.remark" type="info"
              show-icon />
    <el-row>
      <el-col :span="24">

        <!-- 表格顶部菜单 -->
        <TableHeader :buttons="['refresh', 'add', 'edit', 'delete', 'comSearch']"
                     quick-search-placeholder="通过标题模糊搜索"
                     @action="baTable.onTableHeaderAction" />
        <!-- 表格 -->
        <!-- 要使用`el-table`组件原有的属性，直接加在Table标签上即可 -->
        <Table @action="baTable.onTableAction" />

      </el-col>
    </el-row>

    <!-- 表单 -->
    <PopupForm ref="formRef" />

  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, provide } from "vue";
import { district_list, storeEmployee } from "/@/api/controllerUrls";
import Table from "/@/components/table/index.vue";
import TableHeader from "/@/components/table/header/index.vue";
import { defaultOptButtons } from "/@/components/table";
import PopupForm from "./popupForm.vue";
import { baTableApi } from "/@/api/common";
import baTableClass from "/@/utils/baTable";
import useCurrentInstance from "/@/utils/useCurrentInstance";
import _ from "lodash";
import auditDialog from "./auditDialog.vue";
import request from "/@/api/request";
import { ElMessageBox } from "element-plus";

//注销按钮
let cancelBtn: OptButton[] = [
  {
    render: "tipButton",
    name: "reset",
    title: "重置密码",
    text: "",
    type: "danger",
    icon: "el-icon-Lock",
    class: "",
    disabledTip: false
  }
];

let btn = defaultOptButtons(["edit", "delete"]);
btn = btn.concat(cancelBtn);


const baTable = new baTableClass(
  new baTableApi(storeEmployee),
  {
    dblClickNotEditColumn: [undefined, "status"],
    column: [
      { type: "selection", align: "center", operator: false },
      { label: "头像", prop: "defaultHeadPortrait", align: "center", render: "image", operator: false },
      { label: "姓名", prop: "realName", align: "left", operator: "LIKE" },
      {
        label: "性别",
        prop: "sex",
        align: "center",
        render: "tag",
        operator: "=",
        replaceValue: { 1: "男", 2: "女" }
      },
      { label: "所属门店", prop: "storeName", align: "center", operator: false },
      { label: "手机号码", prop: "mobileNumber", align: "center", operator: false },
      { label: "创建人", prop: "creatorName", align: "center", width: "120", operator: false },
      { label: "创建时间", prop: "createTime", align: "center", width: "180", operator: false },
      {
        label: "操作",
        align: "center",
        width: "160",
        render: "buttons",
        buttons: btn,
        operator: false
      }
    ]
  },
  {
    defaultItems: {}
  },
  {
    // 获得编辑数据后
    requestEdit: () => {
      if (baTable.form.items && !baTable.form.items.icon) baTable.form.items.icon = "el-icon-Minus";
    }
  }
);

provide("baTable", baTable);

onMounted(() => {
  baTable.mount();
  baTable.getIndex();
  const { proxy } = useCurrentInstance();
  /**
   * 表格内的按钮响应
   * @param name 按钮name
   * @param row 被操作行数据
   */
  proxy.eventBus.on("onTableButtonClick", (data: { name: string; row: TableRow }) => {
    if (!baTable.activate) return;
    if (data.name == "reset") {
      resetButtonClick(data.row);
    }
  });
});


/** 点击按钮事件 */
const resetButtonClick = (row: TableRow) => {
  if (!row) return;
// 数据来自表格数据,未重新请求api,深克隆,不然可能会影响表格
  let rowClone = _.cloneDeep(row);

  ElMessageBox({
    type: "warning",
    title: "",
    message: "请确认是否重置密码？",
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    showCancelButton: true
  }).then(() => {
    request.edit(storeEmployee, {
      id: rowClone.id,
      password: 123456
    }).then((res: any) => {
      if (res.code == 1) {
        baTable.getIndex();
      }
    });
  }).catch(() => {
  });
};

</script>


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