<template>
  <div>
    <el-dialog title="" v-model="dialogVisible">
      <div>
        <el-form ref="formRef" :model="form" label-width="180px">
          <el-form-item
            label="选择补贴的商品分类"
            prop="categoryId"
            :rules="{
              required: true,
              message: '请选择补贴的商品分类',
              trigger: 'change'
            }"
          >
            <el-cascader
              :props="cascaderProps"
              collapse-tags
              clearable
              v-model="form.categoryId"
            ></el-cascader>
          </el-form-item>
          <el-form-item
            label="上门服务补贴金额"
            prop="houseServicePrice"
            :rules="{
              required: true,
              message: '请输入上门服务补贴金额',
              trigger: 'blur'
            }"
          >
            <el-input
              v-model="form.houseServicePrice"
              placeholder="请输入上门服务补贴金额"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item
            label="非上门服务补贴金额"
            prop="nonHouseServicePrice"
            :rules="{
              required: true,
              message: '请输入非上门服务补贴金额',
              trigger: 'blur'
            }"
          >
            <el-input
              v-model="form.nonHouseServicePrice"
              placeholder="请输入非上门服务补贴金额"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item
            label="补贴对象"
            prop="subsidyTargetIds"
            :rules="{
              required: true,
              message: '请输入非上门服务补贴金额',
              trigger: 'blur'
            }"
          >
            <el-select
              v-model="form.subsidyTargetIds"
              placeholder="请选择补贴对象"
              multiple
              clearable
            >
              <el-option
                v-for="item in subsidyTargetList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="备注信息"
            prop="comment"
            :rules="{
              required: true,
              message: '请输入备注信息',
              trigger: 'blur'
            }"
          >
            <el-input
              type="textarea"
              :autosize="{
                minRows: 8
              }"
              v-model="form.comment"
              placeholder="请输入备注"
            ></el-input>
          </el-form-item>
          <el-form-item label="">
            <el-button type="primary" @click="handleSubmit">确 定</el-button>
            <el-button @click="dialogVisible = false">取 消</el-button>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div></div>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { request } from "@/utils";
import { ElMessage } from "element-plus";
import { ref, computed, defineProps, defineEmits, watch, reactive } from "vue";
const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  id: {
    type: Number
  }
});
const emits = defineEmits(["update:show", "success"]);
const dialogVisible = computed({
  get() {
    return props.show;
  },
  set(n) {
    emits("update:show", n);
  }
});

watch(
  () => dialogVisible.value,
  n => {
    if (n) {
      getSubsidyTarget();
      initData();
    } else {
      resetForm();
    }
  }
);

const form = reactive({
  categoryId: undefined,
  houseServicePrice: undefined,
  nonHouseServicePrice: undefined,
  subsidyTargetIds: [],
  comment: undefined,
  id: undefined
});
const list = ref([]);

const formRef = ref();
const subsidyTargetList = ref([]);
const cascaderProps = {
  lazy: true,
  lazyLoad(node, resolve) {
    const { level, value } = node;
    console.log("node", node);
    request
      .get("/mallService/mechanism/category", {
        params: {
          page: 1,
          pageSize: 1000,
          parentId: value
        }
      })
      .then(resp => {
        let nodes = resp.data.list.map(v => {
          return {
            ...v,
            value: v.categoryId,
            label: v.categoryName,
            leaf: level >= 1
          };
        });

        resolve(nodes);
      });
  }
};
const handleSubmit = () => {
  formRef.value.validate(valid => {
    if (!valid) return;
    request
      .post(
        form.id
          ? "mallService/mechanism/subsidy/service/update"
          : "mallService/mechanism/subsidy/service",
        {
          ...form,
          categoryId: form.categoryId.at(-1)
        }
      )
      .then(resp => {
        ElMessage.success(resp.message);
        emits("success");
        dialogVisible.value = false;
      });
  });
};

const getSubsidyTarget = () => {
  request.get("mallService/mechanism/subsidy/targets").then(resp => {
    subsidyTargetList.value = resp.data;
  });
};

const resetForm = () => {
  formRef.value.resetFields();
  form.id = undefined;
};
const initData = () => {
  if (props.id) {
    request
      .get(`mallService/mechanism/subsidy/service?id=${props.id}`)
      .then(resp => {
        let {
          category,
          categoryId,
          houseServicePrice,
          nonHouseServicePrice,
          comment,
          targets,
          id
        } = resp.data;
        form.categoryId = [category.parentId, categoryId];
        form.houseServicePrice = houseServicePrice;
        form.nonHouseServicePrice = nonHouseServicePrice;
        form.comment = comment;
        form.subsidyTargetIds = targets.map(v => v.id);
        form.id = id;
      });
  }
};
</script>
