<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.businessType" clearable placeholder="业务标识"></el-input>
        </el-form-item>
        <el-form-item class="query-form-item" label="备注:">
          <el-input v-model="query.remark" 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="businessType" label="业务标识"> </el-table-column>
        <el-table-column prop="remark" 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>
