<template>
  <Modal
    v-model="modalIsShow"
    :mask-closable="false"
    :width="600"
    title="配置修改"
    @on-visible-change="visibleChange"
  >
    <Form
      v-if="fields.length"
      ref="modalFormComp"
      :model="modalForm"
      :rules="rules"
      :label-width="100"
    >
      <FormItem
        v-for="field in fields"
        :key="field.code"
        :prop="field.prop"
        :label="field.name + '：'"
      >
        <template v-if="field.options">
          <RadioGroup v-model="field.value">
            <Radio
              v-for="item in field.options"
              :key="item.value"
              :label="item.value"
              >{{ item.label }}</Radio
            >
          </RadioGroup>
        </template>
        <template v-else>
          <RadioGroup v-model="field.enable" @change="resetVal(field)">
            <Radio
              v-for="item in OPEN_STATUS"
              :key="item.value"
              :label="item.value"
              >{{ item.label }}</Radio
            >
          </RadioGroup>
          <br />
          <Input
            v-if="field.enable"
            v-model="field.value"
            placeholder="请输入调用地址"
            clearable
          >
          </Input>
        </template>
      </FormItem>
    </Form>
    <div slot="footer">
      <Button @click="cancel">取消</Button>
      <Button type="primary" :loading="loading" @click="confirm">确定</Button>
    </div>
  </Modal>
</template>

<script>
import { axios } from "@/libs/http";

const schoolSetSyncInfo = (schoolId) =>
  axios.post("/system/common/school/sync/select", {}, { params: { schoolId } });
const schoolSetSyncUpdate = (datas) =>
  axios.post("/system/common/school/sync/save", datas, {
    headers: {
      "Content-Type": "application/json;charset=utf-8",
    },
  });

const OPEN_STATUS = [
  {
    label: "开启",
    value: 1,
  },
  {
    label: "关闭",
    value: 0,
  },
];

export default {
  name: "school-set-sync",
  props: {
    school: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      modalIsShow: false,
      loading: false,
      OPEN_STATUS,
      modalForm: {},
      fields: [],
      rules: {},
    };
  },
  methods: {
    visibleChange(visible) {
      if (visible) this.initData();
    },
    async initData() {
      const res = await schoolSetSyncInfo(this.school.id);
      this.fields = res.data.data || [];
      this.fields.forEach((field) => {
        field.enable = field.enable ? 1 : 0;
        field.prop = field.code.split(".").join("_");
        this.$set(this.modalForm, field.prop, field.value);
        if (field.options) return;

        this.rules[field.prop] = [
          {
            validator: (rule, value, callback) => {
              if (!field.value && field.enable) {
                return callback(new Error(`请输入${field.name}请求地址`));
              }

              callback();
            },
            trigger: "change",
          },
        ];
      });
    },
    resetVal(field) {
      if (!field.enable) field.value = "";
    },
    cancel() {
      this.modalIsShow = false;
    },
    open() {
      this.modalIsShow = true;
    },
    async confirm() {
      const valid = await this.$refs.modalFormComp.validate().catch(() => {});
      if (!valid) return;

      if (this.loading) return;
      this.loading = true;
      const datas = {
        param: this.fields.map((item) => {
          let nitem = { ...item };
          nitem.enable = !!nitem.enable;
          return nitem;
        }),
        schoolId: this.school.id,
      };
      const res = await schoolSetSyncUpdate(datas).catch(() => {});
      this.loading = false;
      if (!res) return;

      this.$Message.success("修改成功！");
      this.cancel();
    },
  },
};
</script>
