<template>
  <div class="user-manage">
    <el-skeleton :rows="10" animated v-if="!isLoaded" :throttle="500" />
    <div class="main-container" v-if="isLoaded">
      <div class="top-screen" ref="topScreenRef">
        <el-form :model="screenForm" ref="screenFormRef" inline size="small">
          <el-form-item label="作业名称" prop="name">
            <div class="screen-item">
              <el-input v-model="screenForm.name"></el-input>
            </div>
          </el-form-item>
          <el-form-item label="作业分类" prop="type">
            <div class="screen-item">
              <el-select v-model="screenForm.type" value-key="" placeholder="" clearable>
                <el-option v-for="item in selectItems['type']" :key="item.key" :label="item.value" :value="item.key">
                </el-option>
              </el-select>
            </div>
          </el-form-item>
          <el-form-item label="对象名称" prop="objectName">
            <div class="screen-item">
              <el-input v-model="screenForm.objectName"></el-input>
            </div>
          </el-form-item>
          <el-form-item label="对象分类" prop="name">
            <div class="screen-item">
              <el-select v-model="screenForm.objectParentIds" multiple clearable>
                <el-option v-for="item in objectTypes" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="search" size="small" @click="restSearch">查询</el-button>
            <el-button icon="Refresh" size="small" @click="clearScreen(screenFormRef)">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="main-table">
        <qu-table :tableData="tableData" v-model:tableHeader="tableHeader" :height="tableHeight" showIndex showSelect
          :custom="false" :showPage="false" v-loading="tableLoading" ref="mainTablRef"
          @selectionChange="chooseOperation"></qu-table>
      </div>
    </div>
    <div class="foot-action-buttons">
      <el-button type="" size="default" @click="$emits('update:showOperation', false)">取消</el-button>
      <el-button type="primary" size="default" @click="save">确定</el-button>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted, computed, nextTick } from "vue";
import templateHooks from "@/Hooks/templateHooks";
import { planTaskService } from "@/ApiService/taskCenterService";
import { dropdownService } from "@/ApiService/dropdownService";
const props = defineProps({
  defaultProps: {
    type: Object,
    default: () => { },
  },
  showOperation: {
    type: Boolean,
    default: true,
  },
  selectedOperations: {
    type: Array,
    default: () => [],
  },
  objectIds: {
    type: Array,
    default: () => [],
  },
});
const tableHeader = [
  { enName: "name", cnName: "作业名称", isTableShow: true },
  {
    enName: "type",
    cnName: "作业分类",
    fieldType: "select",
    param: "0:其他;1:清洁;2:消毒;3:养护;4:巡检",
    isTableShow: true,
  },
  { enName: "objectName", cnName: "对象名称", isTableShow: true },
  { enName: "objectParentName", cnName: "对象分类", isTableShow: true },
  { enName: "standard", cnName: "作业标准", isTableShow: true },
  { enName: "toolNames", cnName: "作业工具", isTableShow: true },
  { enName: "method", cnName: "作业方法", isTableShow: true },
];
const isLoaded = ref(false);
const tableLoading = ref(false);
const topScreenRef = ref();
const buttonGroupRef = ref();
const tableHeight = ref(500);
const selectItems = computed(() => {
  return $common.selectItems(tableHeader);
});
const objectTypes = ref([]);
const selectOperations = ref([]);
const $emits = defineEmits(["update:showOperation", "OK"]);
const mainTablRef = 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 = () => {
  planTaskService
    .planoprationPageList({
      districtId: props.defaultProps.districtId,
      ...screenForm,
      objectIds: props.objectIds,
    })
    .then((res) => {
      isLoaded.value = true;
      if (res.code == 0) {
        tableData.value = res.data;
        console.log(props.selectedOperations);
        if (props.selectedOperations.length != 0) {

          nextTick(() => {
            props.selectedOperations.map((item) => {
              tableData.value.map((item2) => {
                if (item2.id == item.id) {
                  mainTablRef.value.toggleRowSelection(item2, true);
                }
              });
            });
          });
        }
      } else {
        $message.error(res.err);
      }
    });
};
const fetchParentObject = () => {
  dropdownService
    .getParentObject({ districtId: props.defaultProps.districtId })
    .then((res) => {
      if (res.code == 0) {
        objectTypes.value = res.data;
      } else {
        $message.error(res.err);
      }
    });
};
const chooseOperation = (obj) => {
  selectOperations.value = obj;
};
const save = () => {
  $emits("OK", selectOperations.value);
  $emits("update:showOperation", false);
};
const {
  $route,
  $router,
  $store,
  $common,
  $message,
  screenForm,
  screenFormRef,
  tableData,
  currentRow,
  buttonsClickFun,
  restSearch,
  clearScreen,
} = templateHooks(fetchData);
// 函数定义 end
onMounted(() => {
  fetchData();
  fetchParentObject();
});
// 生命周期 end
</script>
<script>
export default {
  name: "choose-operation",
};
</script>
<style scoped>
.foot-action-buttons {
  width: 100%;
  padding: 20px;
  text-align: center;
}
</style>
