<script setup>
import { getLineSortList, setLineSortList } from "@/api/process";
const route = useRoute();
const editState = ref(false);
const drawer = ref(false);
const lineArray = ref([]);
const getLineArray = async () => {
  const { data } = await getLineSortList(route.params.id);
  //设置form
  form.value = data;
  if(form.value){
    try{
      form.value = form.value.slice().sort((a, b) => a.lineTag.localeCompare(b.lineTag));
      form.value = form.value.slice().sort((a, b) => a.lineTag.length - b.lineTag.length);
    }catch (e){}
  }
};
const reset = () => {
  drawer.value = false;
  editState.value = false;
};
const confirmClick = async () => {
  await setLineSortList([...form.value]);
  ElMessage.success("操作成功！");
  reset();
};
// 新增分组相关
const input3 = ref("");
const formRef = ref(null);
const form = ref([]);
const rules = {
  productManager: [
    { required: true, message: "产品管理员不能为空", trigger: "blur" },
  ],
};
defineExpose({
  drawer,
});
watch(
  () => drawer.value,
  (val) => {
    if (val == true) {
      getLineArray();
    }
  }
);
</script>

<template>
  <el-drawer v-model="drawer">
    <template #header>
      <h4>分支排序</h4>
      <el-button @click="editState = !editState">{{
        editState ? "取消编辑" : "编辑"
      }}</el-button>
    </template>
    <template #default>
      <el-form ref="formRef" :model="form" label-width="auto" :rules="rules">
        <template v-for="(item, index) in form" :key="index">
          <el-form-item :label="index + 1 + '.分支标识：' + item.lineTag">
          </el-form-item>
          <el-form-item :label="'排序值：'">
            <div class="formLine">
              <template v-if="editState">
                <el-input v-model="form[index].lineTagSort" />
              </template>
              <template v-else> {{ item.lineTagSort }} </template>
            </div>
          </el-form-item>
        </template>
      </el-form>
    </template>
    <template #footer>
      <div style="flex: auto">
        <el-button @click="drawer = false">关闭</el-button>
        <el-button type="primary" @click="confirmClick">保存</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<style scoped lang="scss">
.formLine {
  display: flex;
  align-items: center;
}
</style>
