
<template>
  <div class="tels-group-container layout-pd">
    <el-card shadow="never">
      <!-- 通用搜索 -->
      <el-form :model="state.queryParams" ref="searchFormRef" :inline="true" @submit.native.prevent class="mt15">
        <el-form-item label="分机号" prop="TelNo">
          <el-input v-model="state.queryParams.TelNo" placeholder="请输入分机号" clearable @keyup.enter="handleQuery" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery" :loading="state.loading" v-waves> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
          <el-button @click="resetQuery(searchFormRef)" v-waves class="default-button" :loading="state.loading">
            <SvgIcon name="ele-Refresh" class="mr5" />重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card shadow="never">
      <!-- 表格 -->
      <el-table :data="state.tableData" v-loading="state.loading">
        <el-table-column prop="telNo" label="分机号" show-overflow-tooltip></el-table-column>
        <el-table-column prop="groupName" label="所属分机组" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作" width="100" fixed="right" align="center">
          <template #default="{ row }">
            <el-button link type="primary" @click="onEditGroup(row)" v-auth="'tels:group:edit'" title="配置分机组"> 配置 </el-button>
          </template>
        </el-table-column>
        <template #empty>
          <Empty />
        </template>
      </el-table>
      <!-- 分页 -->
      <pagination
          :total="state.total"
          v-model:page="state.queryParams.pageIndex"
          v-model:limit="state.queryParams.pageSize"
          @pagination="queryList"
      />
    </el-card>

    <!-- 配置分机组 -->
    <el-dialog v-model="state.dialogVisible" draggable :title="dialogTitle" width="500px">
      <el-form :model="state.ruleForm" label-width="100px" ref="ruleFormRef">
        <el-form-item label="分机组" prop="obj" :rules="[{ required: false, message: '请选择分机组', trigger: 'change' }]">
          <el-select v-model="state.ruleForm.obj" placeholder="请选择分机组,为空则清除之前配置" class="w100" value-key="groupId" clearable>
            <el-option v-for="item in state.groupList" :key="item.groupId" :label="item.groupName" :value="item" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
				<span class="dialog-footer">
					<el-button @click="state.dialogVisible = false" class="default-button">取 消</el-button>
					<el-button type="primary" @click="save(ruleFormRef)" :loading="state.loading">保 存</el-button>
				</span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts" name="telsGroup">
import {onMounted, reactive,ref} from "vue";
import {auth} from "/@/utils/authFunction";
import {ElMessage, FormInstance} from "element-plus";
import {getGroupList,getTelsListWex,editWexGroup} from "/@/api/tels/group";
import {throttle} from "/@/utils/tools";


// 定义变量内容
const state = reactive<any>({
  loading: false, // 加载状态
  queryParams: {
    // 查询参数
    pageIndex: 1, // 当前页码
    pageSize: 10, // 每页条数
    TelNo:'', // 分机号
  },
  total:0, // 总条数
  tableData: [],  // 表格数据
  dialogVisible: false, // 弹窗显示隐藏
  ruleForm:{ // 表单数据
    obj:{}
  },
  groupList:[], // 分机组列表
  currentRow:{}, // 当前行数据
});
const dialogTitle = ref('配置分机组');
const ruleFormRef = ref<RefType>();  // 表单ref
const searchFormRef = ref<RefType>();  // 表单ref
/** 搜索按钮操作 节流操作 */
const handleQuery = throttle(() => {
  state.queryParams.PageIndex = 1;
  queryList();
}, 300);
/** 重置按钮操作 */
const resetQuery = throttle((formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
  handleQuery();
}, 300);
/** 获取分机组设置 */
const queryList = () => {
  if (!auth('tels:group:query')) ElMessage.error('抱歉，您没有权限查看分机组设置！');
  else {
    state.loading = true;
    getTelsListWex(state.queryParams)
        .then((response: any) => {
          state.tableData = response.result?.items ?? [];
          state.total = response.result.total ?? 0;
          state.loading = false;
        })
        .catch(() => {
          state.loading = false;
        });
  }
};
// 配置分机组
const onEditGroup = async (row:any) => {
  try {
    state.currentRow = row;
    const response = await getGroupList();
    state.groupList = response.result ?? [];

    let obj = {
      groupId: '',
      groupName: '',
      zuoGroupName: '',
    };

    if(row.groupName){
      obj = {
        groupId: row.groupId,
        groupName: row.groupName,
        zuoGroupName: row.grouzuoGroupNamepName,
      };
    } else {
      ruleFormRef.value?.resetFields();
    }
    state.ruleForm.obj = obj;
    state.dialogVisible = true;
  } catch (e) {
    console.error('Error in onEditGroup:', e);
  }
}
// 保存分机组
const save = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate((valid: boolean) => {
    if (!valid) return;
    const params = {
      groupId:state.ruleForm.obj.groupId,
      telNo:state.currentRow.telNo,
      id:state.currentRow.id,
      groupName:state.ruleForm.obj.groupName,
      zuoGroupName:state.currentRow.groupName,
    }
    editWexGroup(params)
        .then(() => {
          ElMessage.success('保存成功！');
          state.dialogVisible = false;
          queryList();
        })
        .catch(() => {
          state.loading = false;
        });
  })
};
onMounted(() => {
  queryList();
})
</script>