<template>
  <div>
    <!-- 系统参数 -->
    <p-card title="系统参数配置">
      <span slot="extra">
        <p-button type="primary" style="margin-right: 10px" @click="showmodel()">新增</p-button>
        <!-- <p-button type="primary" style="margin-right:10px">导入</p-button> -->
        <!-- <p-button type="primary">批量删除</p-button> -->
      </span>
      <p-grid-form :label-col="{ span: 8 }" :span="8" :items="config.items" @submit="hanlderSubmit" />
      <p-table ref="table" row-key="id" bordered :columns="config.columns" :remoteUrl="config.remoteUrl" :remoteParams="remoteParams" :scroll="{ x: true }" :rowSelectType="false" :data-source="data">
        <template slot="operation" slot-scope="text, record">
          <a @click="showmodel(text)">修改</a>
          <!-- <a-divider type="vertical" /> -->
          <!-- <a @click="del(text)">删除</a> -->
        </template>
      </p-table>
    </p-card>

    <p-modal title="详情" width="50%" :visible="visible" :confirm-loading="confirmLoading" @ok="handleOk" @cancel="handleCancel">
      <p-grid-form :label-col="{ span: 8 }" ref="model" :span="8" :items="config.Modelitems" @submit="hanlderSubmit" />
    </p-modal>
  </div>
</template>

<script>
import config from "./config.js";
import { savesysParam, updatesysParam, delsysParam } from "./api";

export default {
  data() {
    return {
      config,
      data: [],
      remoteParams: {
        paramNo: "",
        remark: "",
      },
      visible: false,
      confirmLoading: false,
      updateModelitems: [
        {
          span: 24,
          type: "input",
          name: "paramNo",
          disabled: true,
          required: true,
          label: "参数编号",
          value: "",
        },
        {
          span: 24,
          type: "input",
          name: "id",
          hidden: true,
          label: "id",
          value: "",
        },
        {
          span: 24,
          type: "input",
          required: true,
          name: "paramValue",
          label: "参数值",
          value: "",
        },
        {
          span: 24,
          type: "select",
          name: "paramType",
          required: true,
          label: "参数类型",
          value: "",
          options: [
            { label: "字符串", value: 1 },
            { label: "整数", value: 2 },
            { label: "小数", value: 3 },
          ],
        },

        {
          span: 24,
          type: "select",
          required: true,
          name: "isReadOnly",
          disabled: true,
          label: "是否只读",
          value: "",
          options: [
            { label: "否", value: 0 },
            { label: "是", value: 1 },
          ],
        },
        {
          span: 24,
          type: "input",
          name: "remark",
          label: "备注",
          value: "",
        },
      ],
    };
  },
  mounted() {
    // this.getinfo()
  },
  methods: {
    hanlderSubmit(e, form) {
      e.preventDefault();
      form.validateFields((error, values) => {
        console.log(error, values, "valuesvaluesvaluesvaluesvalues");
        // this.queryName = values.name
        // this.queryType = values.type
        // this.getlistCompanyByAuthId()
        if (!error) {
          this.remoteParams = { ...this.remoteParams, ...values };
        }
      });
    },
    handleOk(e) {
      this.$refs.model.form.validateFields(async (err, value) => {
        if (!err) {
          console.log(value);
          this.confirmLoading = true;
          if (this.type) {
            let res = await updatesysParam(value);
            console.log(res);
            if (res.success) {
              this.visible = false;
              this.remoteParams = { ...this.remoteParams };
            } else {
              this.$exception(res);
            }
          } else {
            let res = await savesysParam(value);
            console.log(res);
            if (res.success) {
              this.visible = false;
              this.remoteParams = { ...this.remoteParams };
            } else {
              this.$exception(res);
            }
          }

          this.confirmLoading = false;
          //
        }
      });
    },
    handleCancel(e) {
      console.log("Clicked cancel button");
      this.visible = false;
    },
    //点击弹出
    showmodel(data) {
      console.log(data);
      this.visible = true;

      if (data) {
        //修改

        // paramNo  isReadOnly
        // this.config.Modelitems.forEach((item) => {
        //   item.name == "paramNo" && (item.disabled = true);
        //   item.name == "isReadOnly" && (item.disabled = true);
        // });

        // this.config.Modelitems = this.updateModelitems
        this.$nextTick(() => {
          this.$refs.model.form.resetFields();
          this.$refs.model.form.setFieldsValue(data);
        });
        this.type = true;
      } else {
        //新增
        // this.config.Modelitems = config.Modelitems
        // this.config.Modelitems.forEach((item) => {
        //   item.name == "paramNo" && (item.disabled = false);
        //   item.name == "isReadOnly" && (item.disabled = false);
        // });
        this.$nextTick(() => {
          this.$refs.model.form.resetFields();
        });
        this.type = false;
      }
    },
    del(text) {
      let that = this;
      console.log(text);
      this.$confirm({
        title: "确定是否要删除?",
        content: "",
        async onOk() {
          let res = await delsysParam({ id: text.id });
          if (res.success) {
            that.$message.success("删除成功");
            that.remoteParams = { ...that.remoteParams };
          } else {
            that.$exception(res);
          }
        },
        onCancel() {},
      });
    },
  },
};
</script>

<style lang="less" scoped></style>
