<template>
  <el-form :model="currentRow.data" ref="editFormRef" :rules="editFormRules" label-width="80px" :inline="false">
    <el-form-item label="所属站点" prop="districtId">
      <div class="form-item">
        <district-screen v-model:districtId="currentRow.data.districtId" ref="districtRef"
          @districtChange="districtChange" :disabled="currentRow.data.id"></district-screen>
      </div>
    </el-form-item>
    <el-form-item label="班组名称" prop="workGroupName">
      <div class="form-item">
        <el-input v-model="currentRow.data.workGroupName"></el-input>
      </div>
    </el-form-item>
    <!-- <el-form-item label="服务区域" prop="serviceAreas">
            <div class="form-item">
                <el-cascader :options="serviceAreaOptions" :props="serviceAreaProps" :show-all-levels="false"
                    collapse-tags v-model="currentRow.data.serviceAreas" clearable ref="serviceAreasRef" />
            </div>
        </el-form-item>
        <el-form-item label="服务事项" prop="serviceEvents">
            <div class="form-item">
                <el-select v-model="currentRow.data.serviceEvents" multiple clearable value-key="id">
                    <template v-for="item in eventData" :key="item.id">
                        <el-option :label="item.name" :value="item"></el-option>
                    </template>
                </el-select>
            </div>
        </el-form-item> -->
    <el-form-item label="备注" prop=" note">
      <el-input type="textarea" placeholder="请输入备注信息（非必填，限500字以内）" v-model="currentRow.data.note"
        :autosize="{ minRows: 2, maxRows: 4 }" maxlength="500" show-word-limit></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submit(editFormRef)">提交</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
export default {
  name: "team-edit-form",
};
</script>
<script setup>
import { ref, reactive, onMounted } from "vue";
import { dropdownService } from "@/ApiService/dropdownService.js";
import { workGroupService } from "@/ApiService/userCenterService.ts";
import templateHooks from "@/Hooks/templateHooks";
const { $common, $message } = templateHooks();
const props = defineProps({
  currentRow: Object,
  showEditForm: Boolean,
});
const $emits = defineEmits(["update:showEditForm", "OK"]);
const editFormRules = reactive({
  districtId: [
    { required: true, message: "请选择所属站点", trigger: "change" },
  ],
  workGroupName: [
    { required: true, message: "请输入班组名称", trigger: "change" },
  ],
});
const serviceAreaOptions = ref([]);
const eventData = ref([]);
const serviceAreaProps = reactive({
  multiple: true,
  children: "childNode",
  label: "name",
  value: "id",
  emitPath: false,
});
const serviceAreasRef = ref();
const districtRef = ref();
const editFormRef = ref();
// 数据定义 end
// 监听站点变化
const districtChange = (obj) => {
  //   props.currentRow.data.serviceEvents = "";
  //   props.currentRow.data.serviceAreas = "";
  //   if (obj) {
  //     fetchGridTree();
  //     fetchMatter();
  //   } else {
  //     serviceAreaOptions.value = [];
  //     eventData.value = [];
  //   }
};
// 获取服务区域
const fetchGridTree = () => {
  dropdownService
    .gridTree({ districtId: props.currentRow.data.districtId })
    .then((res) => {
      if (res.code == 0) {
        serviceAreaOptions.value = res.data.childNode;
      } else {
        $message.error(res.err);
      }
    });
};
// 获取服务事项
const fetchMatter = () => {
  dropdownService
    .selectMatter({ districtId: props.currentRow.data.districtId })
    .then((res) => {
      if (res.code == 0) {
        eventData.value = res.data;
      } else {
        $message.error(res.err);
      }
    });
};

const submit = (editFormRefDom) => {
  editFormRefDom.validate((res) => {
    if (res) {
      const { districtId, id, note, serviceEvents, workGroupName } =
        props.currentRow.data;
      workGroupService
        .addOrUpdate({
          districtId,
          id,
          note,
          serviceEvents,
          workGroupName,
        })
        .then((res) => {
          if (res.code == 0) {
            $emits("update:showEditForm", false);
            $message.success("操作成功");
            $emits("OK", true);
          } else {
            $message.error(res.err);
          }
        });
    }
  });
};
onMounted(() => {
  districtRef.value.fetchDistricts();
  if (props.currentRow.data.districtId) {
    fetchGridTree();
    fetchMatter();
  }
});
</script>
