<template>
  <div class="user-manage">
    <el-skeleton :rows="10" v-if="!isLoaded" :throttle="500" />
    <div class="main-container">
      <div class="top-screen" ref="topScreenRef">
        <qu-search-area :model="screenForm" @search="restSearch" @reset="clearScreen(screenFormRef)">
          <el-form-item label="所属站点" prop="districtId">
            <div class="screen-item">
              <district-screen
                v-model:districtId="screenForm.districtId"
                ref="districtScreenRef"
              ></district-screen>
            </div>
          </el-form-item>
        </qu-search-area>
      </div>
      <div class="main-table" v-if="isLoaded">
        <qu-table
          :tableData="tableData"
          v-model:tableHeader="tableHeader"
          :height="tableHeight"
          :pageProps="pageProps"
          :rowButtons="rowButtons"
          @rowButtonClick="rowButtonClick"
          @pageChange="pageChange"
          @sortChange="sortChange"
          v-loading="tableLoading"
          :tableButtons="tableButtons"
          @buttonClick="buttonClick"
        ></qu-table>
      </div>
      <div v-if="showAddForm">
        <el-dialog title="编辑" v-model="showAddForm" width="30%">
          <div>
            <el-form
              :model="currentRow.data"
              :rules="rules"
              label-width="150px"
              inline
              ref="addFormRef"
              size="small"
            >
              <el-form-item label="所属站点" prop="districtId">
                <district-screen
                  v-model:districtId="currentRow.data.districtId"
                  ref="districtAddRef"
                  disabled
                ></district-screen>
              </el-form-item>
              <el-form-item label="常规接单限额（个）" prop="commonLimit">
                <el-input-number
                  v-model="currentRow.data.commonLimit"
                  size="small"
                  label=""
                  :min="1"
                  :step="1"
                  :controls="false"
                  controls-position=""
                >
                </el-input-number>
              </el-form-item>
              <el-form-item label="特殊接单限额（个）" prop="specialLimit">
                <el-input-number
                  v-model="currentRow.data.specialLimit"
                  size="small"
                  label=""
                  :min="1"
                  :step="1"
                  :controls="false"
                  controls-position=""
                >
                </el-input-number>
              </el-form-item>
              <el-form-item label="紧急接单限额（个）" prop="urgentLimit">
                <el-input-number
                  v-model="currentRow.data.urgentLimit"
                  size="small"
                  label=""
                  :min="1"
                  :step="1"
                  :controls="false"
                  controls-position=""
                >
                </el-input-number>
              </el-form-item>
              <el-form-item label="人员休息时长（分）" prop="userRestDuration">
                <el-input-number
                  v-model="currentRow.data.userRestDuration"
                  size="small"
                  label=""
                  :min="1"
                  :step="1"
                  :controls="false"
                  controls-position=""
                >
                </el-input-number>
              </el-form-item>
              <el-form-item>
                <el-button @click="showAddForm = false">取消</el-button>
                <el-button type="primary" @click="onSubmit">提交</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted, nextTick } from "vue";
import templateHooks from "@/Hooks/templateHooks";
import { systemParamSetService } from "@/ApiService/systemSetService";

const isLoaded = ref(false);
const tableLoading = ref(false);
const topScreenRef = ref();
const tableHeight = ref(500);
const districtScreenRef = ref();
const showAddForm = ref(false);
const districtAddRef = ref();
const rules = ref({
  commonLimit: [
    { required: true, message: "请输入常规接单限额", trigger: "change" },
  ],
  specialLimit: [
    { required: true, message: "请输入特殊接单限额", trigger: "change" },
  ],
  urgentLimit: [
    { required: true, message: "请输入紧急接单限额", trigger: "change" },
  ],
  userRestDuration: [
    { required: true, message: "请输入人员休息时长", trigger: "change" },
  ],
});
const addFormRef = ref();
// 数据定义 end
const buttonClick = (button) => {
  currentButton.data = button;
  buttonsClickFun.data[button.enName]();
};
const rowButtonClick = ({ row, $column }) => {
  for (let i in row) {
    currentRow.data[i] = row[i];
  }
  currentButton.data = $column;
  buttonsClickFun.data[$column.enName]();
};
const fetchData = () => {
  if (!screenForm.districtId) {
    isLoaded.value = true;
    tableLoading.value = false;
    return;
  }
  const { page, rows, sord, sidx } = pageProps;
  tableLoading.value = true;

  systemParamSetService
    .taskDistrictParamPageList({ page, rows, sord, sidx, ...screenForm })
    .then(
      (res) => {
        if (res.code == 0) {
          tableData.value = res.data.rows;
          pageProps.records = res.data.records;
        } else {
          $message.error(res.err);
        }
        isLoaded.value = true;
        tableLoading.value = false;
      },
      () => {
        isLoaded.value = true;
        tableLoading.value = false;
      }
    );
};
const onSubmit = () => {
  addFormRef.value.validate((rsp) => {
    if (rsp) {
      console.log(currentRow.data);
      $messageBox.confirm("您确定要进行提交吗？", "提示").then((val) => {
        systemParamSetService
          .updateTaskDistrictParam(currentRow.data)
          .then((res) => {
            if (res.code == 0) {
              fetchData();
              showAddForm.value = false;
              $message.success("操作成功");
            } else {
              $message.error(res.err);
            }
          });
      });
    }
  });
};
const {
  $route,
  $router,
  $store,
  $message,
  $messageBox,
  screenForm,
  screenFormRef,
  selectItems,
  tableData,
  tableHeader,
  currentRow,
  currentButton,
  tableButtons,
  rowButtons,
  pageProps,
  buttonsClickFun,
  pageChange,
  sortChange,
  restSearch,
  clearScreen,
} = templateHooks(fetchData);
// 函数定义 end
onMounted(() => {
  buttonsClickFun.data = {
    add: () => {},
    export: () => {},
    edit: () => {
      showAddForm.value = true;
      nextTick(() => {
        districtAddRef.value.fetchDistricts();
      });
    },
    delete: () => {},
  };
  nextTick(() => {
    districtScreenRef.value.fetchDistricts().then((res) => {
      if (res && res.length != 0) {
        screenForm.districtId = res[0].id;
      }
      fetchData();
    });
  });
});
// 生命周期 end
</script>
<script>
export default {
  name: "systemParamSet",
};
</script>
