<template>
  <!-- 系统管理 组织架构 仓库信息页面 -->
  <div>
    <el-card>
      <el-form :inline="true" :model="query" class="query-form" size="mini">
        <el-form-item class="query-form-item" label="页面名称:">
          <el-input v-model="query.remark" clearable placeholder="请输入页面名称"></el-input>
        </el-form-item>
        <el-form-item class="query-form-item" label="页面标识:">
          <el-input v-model="query.businessType" clearable placeholder="页面标识"></el-input>
        </el-form-item>
        <el-form-item label="表单类型:" prop="type">
          <el-select v-model="query.type" placeholder="请选择类型" style="width: 90%">
            <el-option label="列表" :value="1"/>
            <el-option label="表单" :value="2"/>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button-group style="margin-left: 10px; display: flex">
            <el-button type="primary" icon="el-icon-refresh" @click="onReset">重置</el-button>
            <el-button type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
            <el-button type="primary" icon="el-icon-plus" @click="handleSubForm({}, 'add')">新增</el-button>
          </el-button-group>
        </el-form-item>
      </el-form>
      <el-table :data="list" border highlight-current-row
                @current-change="handSubCurrentChange"
                row-key="id"
                style="width: 100%">
        <el-table-column label="序号" type="index" ref="dataForm"></el-table-column>
        <el-table-column prop="remark" label="菜单名称"></el-table-column>
        <el-table-column prop="businessType" label="业务标识"></el-table-column>
        <el-table-column prop="type" label="类型">
          <template slot-scope="scope">
            <span>{{ typeMap[scope.row.type] }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="handleChangeFuc" label="列表点击方法"></el-table-column>
        <el-table-column label="操作" width="220">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click.native="handleSubForm(scope.row, 'edit')"
            >编辑
            </el-button>
            <el-button type="text" @click.native="handleDel(scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="query.page"
        :limit.sync="query.limit"
        @pagination="getList"
      />
    </el-card>

    <!--仓库编辑对话框-->
    <el-dialog :title="formMap[formName]" :close-on-click-modal="false"
               :close-on-press-escape="false" :visible.sync="formVisible" :before-close="hideForm" width="60%"
               top="5vh">
      <el-form :model="subData" ref="dataForm" :rules="formRules" label-width="130px">
        <el-row :gutter="20" class="el-row" type="flex">
          <el-col :span="12" class="el-col">
            <el-form-item label="业务标识" prop="businessType" class="query-form-item">
              <el-input v-model="subData.businessType" style="width: 80%" placeholder="请输入业务标识"
                        auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="el-row" type="flex">
          <el-col :span="12" class="el-col">
            <el-form-item label="描述" prop="remark" class="query-form-item">
              <el-input v-model="subData.remark" style="width: 80%" placeholder="请输入描述"
                        auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="el-row" type="flex">
          <el-col :span="12" class="el-col">
            <el-form-item label="类型" prop="type">
              <el-select v-model="subData.type" placeholder="请选择类型" style="width: 80%">
                <el-option label="列表" value="1"/>
                <el-option label="表单" value="2"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="el-row" type="flex">
          <el-col :span="12" class="el-col">
            <el-form-item label="列表点击方法" prop="handleChangeFuc" class="query-form-item">
              <el-input v-model="subData.handleChangeFuc" style="width: 80%" placeholder="请输入列表点击方法"
                        auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="hideForm">取消</el-button>
        <el-button type="primary" @click.native="forSubmit()">提交
        </el-button>
      </div>
    </el-dialog>

    <el-tabs type="border-card" style="margin: 15px">
      <el-tab-pane>
        <span slot="label">自定义列-详细配置</span>

        <config-detail
          :info="configParms"
          :type="1"
        ></config-detail>
      </el-tab-pane>
      <el-tab-pane>
        <span slot="label">自定义查询框-详细配置</span>
        <config-query-detail
          :info="configParms"
          :type="2"
        ></config-query-detail>
      </el-tab-pane>

      <el-tab-pane>
        <span slot="label">自定义表单-详细配置</span>
        <config-from-detail
          :info="configParms"
          :type="3">
        </config-from-detail>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {
  list,
  saveCustomConfig,
  devCustomConfig
} from "@/api/system/sysCustomConfig";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import configDetail from "@/views/system/customConfig/configDetail";
import configFromDetail from "@/views/system/customConfig/configFromDetail";
import configQueryDetail from "@/views/system/customConfig/configQueryDetail";
import {
  isBlank
} from "@/utils/strUtil";

export default {
  data() {
    return {
      //---------------仓库相关-------------------
      query: {
        name: null,
        remark: null,
        type: null,
        page: 1,
        limit: 10,
      },
      loading: true,
      list: [],
      formName: null,
      formMap: {
        add: "配置界面信息-新增",
        edit: "配置界面信息-编辑",
      },
      configParms: {
        configId: null,
      },
      formVisible: false,
      subData: {},
      formRules: {
        businessType: [{required: true, message: "请输入业务标识", trigger: "blur"}],
        type: [
          {required: true, message: "请选择类型", trigger: "blur"},
        ],
      },
      isExpandAll: true,
      total: 0,
      typeMap: {
        1: "列表",
        2: "表单",
      },
    };
  },
  methods: {
    //----------------仓库相关-----------------
    /* 重置按钮  点击事件 */
    onReset() {
      this.$router.push({
        path: "",
      });
      this.query = {
        name: "",
        type: "",
        remark: "",
        page: 1,
        limit: 10,
      };
      this.getList();

      this.configParms = {
        configId: null
      };
    },
    /* 查询按钮点击事件 */
    onSubmit() {
      this.getList();
    },

    handSubCurrentChange(row) {
      //加载货位信息
      this.configDetail(row);

    },
    configDetail(row) {
      this.configParms = {
        configId: row.id,
        page: 1
      };
    },
    getList() {
      //获取仓库信息
      this.loading = true;
      this.list = [];
      list(this.query)
        .then((response) => {
          this.loading = false;
          this.list = response.data.list || [];
          this.total = response.data.total || 0;
        })
        .catch(() => {
          this.loading = false;
          this.total = 0;
          this.list = [];
        });
    },
    /* 新增 编辑点击事件 */
    handleSubForm(data, formName) {
      this.formName = formName;
      this.subData = JSON.parse(JSON.stringify(data));
      this.formVisible = true;

    },

    /* 删除按钮点击事件 */
    handleDel(row) {
      if (row.id) {
        this.$confirm("确认删除该配置吗?", "提示", {
          type: "warning",
        })
          .then(() => {
            this.deleteLoading = true;
            let para = {
              id: row.id
            };
            devCustomConfig(para)
              .then((response) => {
                this.deleteLoading = false;
                if (response.code !== 20000) {
                  this.$message.error(response.message);
                  return false;
                }
                this.getList();
                this.$message.success("删除成功");
              })
              .catch(() => {
                this.deleteLoading = false;
              });
          })
          .catch(() => {
            this.$message.info("取消删除");
          });
      }
    },

    hideForm() {
      // 新增，编辑---取消
      this.formVisible = false;
      this.resetForm();
      return true;
    },
    // 刷新表单
    resetForm() {
      if (this.$refs["dataForm"]) {
        // 清空验证信息表单
        this.$refs["dataForm"].clearValidate();
        // 刷新表单
        this.$refs["dataForm"].resetFields();
        this.getList();
      }
    },
    forSubmit() {
      this.query.page = 1;
      // 新增，编辑---提交
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          saveCustomConfig(this.subData, this.formName)
            .then((response) => {
              this.formVisible = false;
              if (response.code == 20000) {
                this.getList();
              } else {
                this.$message.error(response.message);
              }
            })
            .catch(() => {
              this.formVisible = false;
            });
        }
      });
    },
  },
  mounted() {
  },
  components: {
    configDetail,
    configFromDetail,
    configQueryDetail,
  },
  created() {
    this.getList();
  },
};
</script>
