<template>
  <div class="tenant">
    <div class="content">
      <byTable :source="sourceList.data" :pagination="sourceList.pagination" :config="config" :loading="loading" highlight-current-row @get-list="getList">
      </byTable>
    </div>

    <el-dialog title="修改编码规则" v-if="dialogVisible" v-model="dialogVisible" width="600" v-loading="loadingDialog">
      <byForm :formConfig="formConfig" :formOption="formOption" v-model="formData.data" :rules="rules" ref="submit"> </byForm>
      <template #footer>
        <el-button @click="dialogVisible = false" size="large">取 消</el-button>
        <el-button type="primary" @click="submitForm()" size="large">确 定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { computed, ref } from "vue";
import byTable from "@/components/byTable/index";
import byForm from "@/components/byForm/index";
import useUserStore from "@/store/modules/user";
import { ElMessage } from "element-plus";
import { updateUser } from "@/api/system/user";

const { proxy } = getCurrentInstance();
const sourceList = ref({
  data: [],
  pagination: {
    total: 0,
    pageNum: 1,
    pageSize: 10,
    tenantId: useUserStore().user.tenantId,
    keyword: "",
  },
});
const loading = ref(false);
const config = computed(() => {
  return [
    {
      attrs: {
        label: "部门",
        prop: "deptName",
      },
    },
    {
      attrs: {
        label: "姓名",
        prop: "nickName",
      },
    },
    {
      attrs: {
        label: "业务员代码",
        prop: "userCode",
      },
    },
    {
      attrs: {
        label: "操作",
        width: "120",
        align: "center",
      },
      renderHTML(row) {
        return [
          {
            attrs: {
              label: "编辑",
              type: "primary",
              text: true,
            },
            el: "button",
            click() {
              update(row);
            },
          },
        ];
      },
    },
  ];
});
const getList = async (req) => {
  sourceList.value.pagination = { ...sourceList.value.pagination, ...req };
  loading.value = true;
  proxy.get("/tenantUser/list", sourceList.value.pagination).then((res) => {
    res.rows.map((item) => {
      item.deptName = item.dept ? item.dept.deptName : item.dept;
    });
    sourceList.value.data = res.rows;
    sourceList.value.pagination.total = res.total;
    setTimeout(() => {
      loading.value = false;
    }, 200);
  });
};
getList();
const dialogVisible = ref(false);
const loadingDialog = ref(false);
const submit = ref(null);
const formOption = reactive({
  inline: true,
  labelWidth: 100,
  itemWidth: 100,
  rules: [],
});
const formConfig = computed(() => {
  return [
    {
      type: "treeSelect",
      prop: "deptId",
      label: "部门名称",
      data: [],
      disabled:true,
    },
    {
      type: "input",
      prop: "nickName",
      label: "姓名",
      required: true,
      itemWidth: 50,
      disabled:true,
      itemType: "text",
    },
    {
      type: "input",
      prop: "userCode",
      label: "业务员代码",
      itemType: "text",
    },
  ];
});
const rules = ref({
  userCode: [{ required: true, message: "请输入业务员代码", trigger: "blur" }],
});
const recursive = (data) => {
  data.map((item) => {
    item.label = item.deptName;
    item.id = item.deptId;
    if (item.children) {
      recursive(item.children);
    } else {
      item.children = [];
    }
  });
};
const getDept = () => {
  proxy
    .get("/tenantDept/list", {
      pageNum: 1,
      tenantId: sourceList.value.pagination.tenantId,
    })
    .then((message) => {
      recursive(message.data);
      formConfig.value[0].data = proxy.handleTree(message.data, "deptId");
      console.log(formConfig.value[0].data);
    });
};
getDept()
const formData = reactive({
  data: {},
});
const submitForm = () => {
  submit.value.handleSubmit(() => {
    loadingDialog.value = true;
    updateUser(formData.data).then(() => {
      ElMessage({
        message: "编辑成功",
        type: "success",
      });
      dialogVisible.value = false;
      getList();
    });
  });
};
const update = (row) => {
  formData.data = proxy.deepClone(row);
  loadingDialog.value = false;
  dialogVisible.value = true;
};
</script>

<style lang="scss" scoped>
.tenant {
  padding: 20px;
}
::v-deep(.el-input-number .el-input__inner) {
  text-align: left;
}
</style>
