<script>
import { index as typeIndex } from "@/api/categoryType";
import { index as formIndex } from "@/api/system/customForm";
import { save, show, store, index, destroy } from "@/api/category";
import { CreateDialog } from "@/utils/createDialog"
import { deepCopy } from "@/utils";
export default {
  props: {
    options: [Array,Object]
  },
  render(h) {
    let dialog = new CreateDialog(this,[
    ],{
      width: "45%"
    })
    return dialog.render()
  },
  data() {
    return {
      columns: 1,
      row: {},
      formInfo: [
        {
          name: '清单名称',
          field: 'title',
          edit_input: 'text',
          form_show: true,
          // _props: {
          //   type: "textarea",
          //   autoSize: {
          //     minRows: 2
          //   }
          // }
        },
        // {
        //   name: '填报要求',
        //   field: 'require',
        //   edit_input: 'text',
        //   form_show: true,
        //   _props: {
        //     type: "textarea",
        //     autoSize: {
        //       minRows: 4
        //     }
        //   }
        // },
        {
          name: '父栏目',
          field: 'pid',
          _default: 0,
          edit_input: 'el-cascader',
          form_show: true,
          _props: {
            disabled:true,
            options: this.options,
            props: { checkStrictly: true, value: "id", label: "title", disabled: "_disabled" },
          },
          _events: {
            change: (e) => {
              this.form.pid = e.at(-1);
            }
          }
        },
        {
          name: "年份",
          field: "year",
          edit_input: "el-date-picker",
          // edit_input: "text",
          form_show: true,
          _props: {
            'disabled':true,
            type: "year",
            "value-format": "yyyy"
          }
        },
        {
          name: "清单类型",
          field: "type_id",
          edit_input: "radio",
          form_show: true,
          _props:{
            'disabled':true
          },
          _params: []
        },
        // {
        //   name: "考核周期",
        //   field: "measure_duration",
        //   edit_input: "radio",
        //   form_show: true,
        //   _params: [
        //     {
        //       value: "monthly",
        //       label: "月度"
        //     },
        //     {
        //       value: "quarterly",
        //       label: "季度"
        //     },
        //     {
        //       value: "yearly",
        //       label: "年度"
        //     },
        //   ]
        // },
        // {
        //   name: "考核方式",
        //   field: "measure_type",
        //   edit_input: "radio",
        //   form_show: true,
        //   _params: [
        //     {
        //       value: "check",
        //       label: "仅回复是否执行"
        //     },
        //     {
        //       value: "reply",
        //       label: "需回复具体内容"
        //     }
        //   ]
        // },
        // {
        //   name: "考核数量",
        //   field: "measure_reply_quantity",
        //   edit_input: "el-input-number",
        //   form_show: true,
        //   _props: {
        //     precision: 0,
        //     controls: false
        //   }
        // },
        {
          name: '排序值',
          field: 'myindex',
          edit_input: 'el-input-number',
          form_show: true,
          _props: {
            controls: false
          }
        }
      ],
      id: "",
      type: "add",
      dialogVisible: false,
      form: {},
      originalForm: {},
      rules: {
        title: [
          { required: true,message: "请填写清单名称" }
        ],
        // type_id: [
        //   { required: true,message: "请选择清单类型" }
        // ],
        // measure_reply_quantity: [
        //   {
        //     validator:(rule,value,cb) => {
        //       if (this.form['measure_type'] === 'reply') {
        //         value > 0 ? cb() : cb(new Error('数量需大于0'))
        //       } else {
        //         cb()
        //       }
        //     }
        //   }
        // ]
      },
      file: {},
    };
  },
  methods: {
    setRow (row) {
      this.row = row
    },
    init() {
      for (let key in this.form) {
        if (this.formInfo.find(i => i.field === key)?._default) {
          this.form[key] = this.formInfo.find(i => i.field === key)._default
        }
        else if (this.form[key] instanceof Array) {
          this.form[key] = [];
        } else {
          this.form[key] = "";
        }
      }
      this.$refs["elForm"].clearValidate();
    },
    setForm(key = [], value = []) {
      if (key instanceof Array) {
        key.forEach((key, index) => {
          this.form[key] = value[index] ?? "";
        });
      }
      if (typeof key === "string") {
        this.form[key] = value;
      }
      if (!key) {
        this.init();
      }
    },
    show() {
      this.dialogVisible = true;
    },
    hidden() {
      this.dialogVisible = false;
    },
    setType(type = "add") {
      let types = ["add", "editor", "show"];
      if (types.includes(type)) {
        this.type = type;
      } else {
        console.warn("Unknown type: " + type);
      }
    },
    setId(id) {
      if (typeof id == "number") {
        this.id = id;
      } else {
        console.error("error typeof id: " + typeof id);
      }
    },

    async getDetail() {
      const res = await show({ id: this.id });
      this.$integrateData(this.form, res);

      this.formInfo.forEach((i) => {
        if (i && (i.edit_input === "file" || i.edit_input === "files")) {
          res[i._relations.link_with_name]
            ? (this.file[i.field] =
              res[i._relations.link_with_name] instanceof Array
                ? res[i._relations.link_with_name].map((i) => {
                  return {
                    name: i?.name,
                    url: i?.url,
                    response: i,
                  };
                })
                : [
                  {
                    name: res[i._relations.link_with_name]?.name,
                    url: res[i._relations.link_with_name]?.url,
                    response: res[i._relations.link_with_name],
                  },
                ])
            : (this.file[i.field] = []);
        }

        this.form = Object.assign({}, this.form);
        this.originalForm = deepCopy(res);
      });
    },

    submit() {
      if (this.type === "add") {
        if (this.form.hasOwnProperty("id")) {
          delete this.form.id;
        }
        store(this.form).then(res => {
          this.$Message.success({
            content: `${this.type === "add" ? "新增" : "编辑"}成功`,
          });
          this.$emit("refresh");
          this.hidden();
        })
      }
      if (this.type === "editor") {
        Object.defineProperty(this.form, "id", {
          value: this.id,
          enumerable: true,
          configurable: true,
          writable: true,
        });
        save(this.form).then(res => {
          this.$Message.success({
            content: `${this.type === "add" ? "新增" : "编辑"}成功`,
          });
          this.$emit("refresh");
          this.hidden();
        })
      }
    },
  },
  computed: {
    title () {
      if (this.type === 'add') return '新增'
      if (this.type === 'editor') return '编辑'
      if (this.type === 'show') return '查看'
    }
  },
  watch: {
    "form.year":{
      handler:function (newVal) {
        this.form.year = newVal.toString()
      }
    },
    options(val){
      this.$set(this.formInfo.find(i => i.field === 'pid')._props,'options',val)
    },
    formInfo: {
      handler: function (newVal) {
        this.form = {};
        this.file = {};
        newVal.forEach((i) => {
          if (i.field) {
            this.form[i.field] = (i._default || i._default === 0)? i._default : '';
            if (
              i.validation instanceof Array &&
              i.validation.length > 0 &&
              !!i.validation.find((i) => i === "required")
            ) {
            }
            if (i.edit_input === "files") {
              this.form[i.field] = [];
            }
            if (i.edit_input === "files" || i.edit_input === "file") {
              this.file[i.field] = [];
            }
            if (i.edit_input === "checkbox") {
              this.form[i.field] = [];
            }
            if (i._relations) {
              this.form[i._relations?.link_with_name] = [];
            }
          }
        });

        this.columns = newVal.length > 11 ? '2' : '1'
      },
      immediate: true,
    },
    dialogVisible(val) {
      if (val) {
        document.documentElement.style.setProperty(
          "--column-num",
          this.columns
        );
        if (this.type === "editor" || this.type === "show") {
          this.$nextTick(() => this.getDetail());
        }
      } else {
        this.id = "";
        this.type = "";
        this.init();
        this.$refs["elForm"].clearValidate();
        delete this.form.id;
        for (let key in this.file) {
          this.file[key] = [];
        }
      }
    },
  },
  created() {
    typeIndex({ page: 1,page_size: 999 }).then(res => {
      this.formInfo.find(i => i.field === 'type_id')._params = res.data
    })
    formIndex({ page: 1,page_size: 999 }).then(res => {
      this.formInfo.find(i => i.field === 'form_id')._params = res.data
    })

  }
};
</script>

<style>
:root {
  --column-num: 2;
}
</style>
<style scoped lang="scss">
.uploaded-a {
  color: red;
  text-decoration: none;
  transition: all 0.2s;
}

.uploaded-a:hover {
  color: red;
  text-decoration: underline;
}

.form-body {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(var(--column-num), 1fr);
}

::v-deep .el-input-number.is-without-controls .el-input__inner {
  text-align: left;
}

</style>
