<template>
  <div class="app-container">
    <el-row>
      <el-table
        v-loading="loading"
        :data="distList[0]"
        highlight-current-row
        :height="winHeight"
        @current-change="(e) => handleCurrentChange(e, 1)"
        style="width: 13%; margin-right: 1%"
        border
      >
        <el-table-column
          show-overflow-tooltip
          label="改造类型"
          align="center"
          prop="dictName"
        />
        <el-table-column align="center" class-name="small-padding fixed-width">
          <template #header>
            操作
            <el-icon
              size="18"
              style="margin: 1px 5px; position: absolute"
              color="#53a7ff"
              @click="handleAdd(0)"
              ><CirclePlusFilled
            /></el-icon>
          </template>
          <template #default="scope">
            <el-button
              link
              type="primary"
              icon="Edit"
              @click.stop="handleUpdate(scope.row, 0)"
            ></el-button>

            <el-button
              link
              type="danger"
              icon="Delete"
              @click.stop="handleDelete(scope.row, 0)"

            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-table
        v-loading="loading"
        :data="distList[1]"
        highlight-current-row
        :height="winHeight"
        @current-change="(e) => handleCurrentChange(e, 2)"
        style="width: 19%; margin-right: 1%"
        border
      >
        <el-table-column
          show-overflow-tooltip
          label="改造内容"
          align="center"
          prop="dictName"
        />
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
        >
          <template #header>
            操作
            <el-icon
              size="18"
              style="margin: 1px 5px; position: absolute"
              color="#53a7ff"
              @click="handleAdd(1)"
              ><CirclePlusFilled
            /></el-icon>
          </template>
          <template #default="scope">
            <el-button
              link
              type="primary"
              icon="Edit"
              @click.stop="handleUpdate(scope.row, 1)"
            ></el-button>
            <el-button
              link
              type="danger"
              icon="Delete"
              @click.stop="handleDelete(scope.row, 1)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-table
        v-loading="loading"
        :data="distList[2]"
        highlight-current-row
        :height="winHeight"
        style="width: 19%; margin-right: 1%"
        @current-change="(e) => handleCurrentChange(e, 3)"
        border
      >
        <el-table-column
          show-overflow-tooltip
          label="整改原因"
          align="center"
          prop="dictName"
        />
        <el-table-column align="center" class-name="small-padding fixed-width">
          <template #header>
            操作
            <el-icon
              size="18"
              style="margin: 1px 5px; position: absolute"
              color="#53a7ff"
              @click="handleAdd(2)"
              ><CirclePlusFilled
            /></el-icon>
          </template>
          <template #default="scope">
            <el-button
              link
              type="primary"
              icon="Edit"
              @click.stop="handleUpdate(scope.row, 2)"
            ></el-button>
            <el-button
              link
              type="danger"
              icon="Delete"
              @click.stop="handleDelete(scope.row,2)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-table
        v-loading="loading"
        :data="distList[3]"
        highlight-current-row
        :height="winHeight"
        @current-change="(e) => handleCurrentChange(e, 4)"
        style="width: 19%; margin-right: 1%"
        border
      >
        <el-table-column
          show-overflow-tooltip
          label="整改方案"
          align="center"
          prop="dictName"
        />
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
        >
          <template #header>
            操作
            <el-icon
              size="18"
              style="margin: 1px 5px; position: absolute"
              color="#53a7ff"
              @click="handleAdd(3)"
              ><CirclePlusFilled
            /></el-icon>
          </template>
          <template #default="scope">
            <el-button
              link
              type="primary"
              icon="Edit"
              @click.stop="handleUpdate(scope.row, 3)"
            ></el-button>
            <el-button
              link
              type="danger"
              icon="Delete"
              @click.stop="handleDelete(scope.row,3)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-table
        v-loading="loading"
        :data="distList[4]"
        :height="winHeight"
        style="width: 25%; margin-right: 1%"
        border
      >
        <el-table-column
          show-overflow-tooltip
          label="产品名称"
          align="center"
          prop="prodName"
        />
        <el-table-column
          show-overflow-tooltip
          label="型号"
          align="center"
          prop="prodModel"
        />
        <el-table-column
          show-overflow-tooltip
          label="单价（元）"
          align="center"
          prop="prodPrice"
        />
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
        >
          <template #header>
            操作
            <el-icon
              size="18"
              style="margin: 1px 5px; position: absolute"
              color="#53a7ff"
              @click="handleAdd(4)"
              ><CirclePlusFilled
            /></el-icon>
          </template>
          <template #default="scope">
            <el-button
              link
              type="primary"
              icon="Edit"
              @click.stop="handleUpdate(scope.row, 4)"
            ></el-button>
            <el-button
              link
              type="danger"
              icon="Delete"
              @click.stop="handleDelete(scope.row,4)"

            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>

    <!-- 添加或修改部门对话框 -->
    <el-dialog :title="title" v-model="dialogFlag" width="600px" append-to-body>
      <el-form ref="deptRef" :model="form" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="改造类型" prop="dictName" v-if="DistType == 0">
              <el-input
                v-model="form.dictName"
                placeholder="请输入名称"
                :disabled="DistType != 0"
              />
            </el-form-item>
            <el-form-item label="改造内容" prop="dictName" v-if="DistType == 1">
              <el-input
                v-model="form.dictName"
                placeholder="请输入名称"
                :disabled="DistType != 1"
              />
            </el-form-item>
            <el-form-item label="整改原因" prop="dictName" v-if="DistType == 2">
              <el-input
                v-model="form.dictName"
                placeholder="请输入名称"
                :disabled="DistType != 2"
              />
            </el-form-item>
            <el-form-item label="整改方案" prop="dictName" v-if="DistType == 3">
              <el-input
                v-model="form.dictName"
                placeholder="请输入名称"
                :disabled="DistType != 3"
              />
            </el-form-item>
            <el-form-item label="产品类型" prop="prodName" v-if="DistType == 4">
              <el-input v-model="form.prodName" placeholder="请输入名称" />
            </el-form-item>
            <el-form-item label="型号" prop="prodModel" v-if="DistType == 4">
              <el-input v-model="form.prodModel" placeholder="请输入名称" />
            </el-form-item>
            <el-form-item label="价格" prop="prodPrice" v-if="DistType == 4">
              <el-input v-model="form.prodPrice" placeholder="请输入名称" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="Layers">
import {
  list,
  insert,
  remove,
  update,
  listPro,
  insertPro,
  removePro,
  updatePro,
} from "@/api/system/distWater";
import { useRoute,useRouter  } from 'vue-router'
const route = useRouter()
const { proxy } = getCurrentInstance();
const data = reactive({
  // 按钮loading
  buttonLoading: false,
  // 遮罩层
  loading: false,
  // 选中数组
  ids: [],
  // 非单个禁用
  single: true,
  // 非多个禁用
  multiple: true,
  // 显示搜索条件
  showSearch: true,
  // 总条数
  total: 0,
  // 表格数据
  distList: {},

  prodataList: [],
  // 弹出层标题
  title: "",
  // 是否显示弹出层
  dialogFlag: false,
  // 查询参数
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    name: undefined,
  },
  // 表单参数
  form: {},
  // 表单校验
  rules: {
    dictName: [{ required: true, message: "名称不能为空", trigger: "blur" }],
    prodName: [{ required: true, message: "类型不能为空", trigger: "blur" }],
    prodModel: [{ required: true, message: "型号不能为空", trigger: "blur" }],
    prodPrice: [{ required: true, message: "价格不能为空", trigger: "blur" }],
  },
});

const {
  dialogFlag,
  showSearch,
  queryParams,
  form,
  ids,
  rules,
  title,
  distList,
  prodataList,

  total,
  multiple,
  single,
  loading,
  buttonLoading,
} = toRefs(data);

const userSelect = ref("分配用户");
const winHeight = ref(0);
const nameUser = ref(false);

const DistId = ref(0);
const DistType = ref(0);

const userData = ref([]);
const userQuery = ref([]);
const addId = ref(Array(5).fill(undefined));
addId.value[0] = 0;

// 表单重置
function reset() {
  form.value = {
    id: undefined,
    name: undefined,
    prodName: undefined,
    prodModel: undefined,
    prodPrice: undefined,
  };
  proxy.resetForm("deptRef");
}
/** 新增按钮操作 */
function handleAdd(e) {
  if (addId.value[e] !== undefined) {
    DistType.value = e;
    form.value = {};
    reset();
    dialogFlag.value = true;
    title.value = "添加";
  } else {
    proxy.$modal.msgError("请先选择当前的上一级");
  }
}

/** 提交按钮 */
function submitForm() {
  proxy.$refs["deptRef"].validate((valid) => {
    if (valid) {
      buttonLoading.value = true;
      if (form.value.id != null) {
        updateLayers(form.value)
          .then((response) => {
            proxy.$modal.msgSuccess("修改成功");
            name.value = false;
            getList();
          })
          .finally(() => {
            buttonLoading.value = false;
          });
      } else {
        if (DistType.value != 4) {
          if (form.value.dictId) {
            update(form.value).then((response) => {
              proxy.$modal.msgSuccess("修改成功");
              form.value = {};
              DistId.value = addId.value[DistType.value];
              dialogFlag.value = false;
              getList();
            });
          } else {
            let data = {
              dictName: form.value.dictName,
              dictType: DistType.value,
              parentId: addId.value[DistType.value],
            };
            insert(data)
              .then((response) => {
                proxy.$modal.msgSuccess("新增成功");
                form.value = {};
                DistId.value = addId.value[DistType.value];
                dialogFlag.value = false;
                getList();
              })
              .finally(() => {
                buttonLoading.value = false;
              });
          }
        } else {
          if (form.value.prodId) {
            updatePro(form.value).then((response) => {
              proxy.$modal.msgSuccess("修改成功");
              form.value = {};
              dialogFlag.value = false;
              getproList();
            });
          } else {
            let data = {
              prodModel: form.value.prodModel,
              prodName: form.value.prodName,
              prodPrice: form.value.prodPrice,
              dictId: DistId.value,
            };
            insertPro(data)
              .then((response) => {
                proxy.$modal.msgSuccess("新增成功");
                form.value = {};
                dialogFlag.value = false;
                getproList();
              })
              .finally(() => {
                buttonLoading.value = false;
              });
          }
        }
      }
    }
  });
}

// 取消按钮
function cancel() {
  dialogFlag.value = false;
  form.value ={}
  reset();
}

/** 查询列表 */
function getList() {
  loading.value = true;
  list(DistId.value).then((response) => {
    distList.value[DistType.value] = response.data;

    loading.value = false;
  });
}
/** 查询列表 */
function getproList() {
  loading.value = true;
  listPro(DistId.value).then((response) => {
    distList.value[DistType.value] = response.data;
    loading.value = false;
  });
}
function handleCurrentChange(e, type) {
  if (!e) return;
  addId.value[type] = e.dictId;
  DistId.value = e.dictId;
  DistType.value = type;

  for (let i = 0; i < addId.value.length; i++) {
    if (i > type) {
      addId.value[i] = undefined;
    }
  }
  console.log(addId.value);
  type != "4" ? getList() : getproList();
  for (let i in distList.value) {
    if (i > type) {
      distList.value[i] = [];
    }
  }
}
/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}
/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryForm");
  handleQuery();
}

/** 删除按钮操作 */
function handleDelete(row,type) {


  proxy.$modal
    .confirm('是否确认删除当前数据项，删除会清空当前所属的子集数据？')
    .then(() => {
      loading.value = true;
      return  type==4?removePro( row.prodId): remove( row.dictId);
    })
    .then(() => {
      loading.value = false;
      if(addId.value[type+1]==row.dictId){
       for (let i = 0; i < addId.value.length; i++) {
        if (i > type) {
           addId.value[i] = undefined;
           distList.value[i]=[]
        }
       }
      }
      DistId.value= type != "4" ?row.parentId:row.dictId
      DistType.value = type
      type != "4" ? getList() : getproList();
      proxy.$modal.msgSuccess("删除成功");
    })
    .catch(() => {})
    .finally(() => {
      loading.value = false;
    });
}
function handleUpdate(row, type) {
  DistType.value = type;
  form.value = { ...row };
  dialogFlag.value = true;
  title.value = "编辑";
}
onMounted(() => {
  winHeight.value = window.innerHeight - 125;
  getList();
});
</script>
<style lang="scss" scoped>
.dialog-footer {
  display: flex;
  justify-content: end;
}
.el-col-5 {
  width: 20%;
}
</style>
