<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.columnName" clearable placeholder="列名"></el-input>
        </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  row-key="id"
        style="width: 100%">
        <el-table-column label="序号" type="index" ref="dataForm"></el-table-column>
        <el-table-column prop="columnName" label="列名"> </el-table-column>
        <el-table-column prop="isShow" label="是否展示">
          <template slot-scope="scope">
            <span>{{ isShowMap[scope.row.isShow] }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="columnDesc" label="列描述"></el-table-column>
        <el-table-column prop="columnType" label="列类型">
          <template slot-scope="scope">
            <span>{{ columnTypeMap[scope.row.columnType] }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="number" label="排序"></el-table-column>
         <el-table-column prop="width" label="宽度"></el-table-column>
           <el-table-column prop="lableRule" show-overflow-tooltip="true" label="字典替换规则"></el-table-column>
        <el-table-column prop="clickFuc" label="事件"></el-table-column>
          <el-table-column prop="disabledFuc" label="禁用方法"></el-table-column>
        <el-table-column label="操作">
          <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>
    </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="columnName" class="query-form-item">
              <el-input v-model="subData.columnName" 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="columnType">
              <el-select v-model="subData.isShow" 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="columnDesc" class="query-form-item">
             <el-input v-model="subData.columnDesc" 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="columnType">
              <el-select v-model="subData.columnType" placeholder="请选择列类型" style="width: 80%">
                <el-option label="输入框" value="input" />
                 <el-option label="下拉框" value="select" />
                 <el-option label="远程搜索" value="selectServer" />
                  <el-option label="区间时间选择框" value="datePicker" />
                   <el-option label="单时间选择框" value="data" />
              </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="number" class="query-form-item">
              <el-input v-model="subData.number" style="width: 80%" placeholder="请输入排序"
                        auto-complete="off"></el-input>
              <div style="color: red">数字越大字段排在越前面</div>
            </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="width" class="query-form-item">
              <el-input v-model="subData.width" 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="20" class="el-col">
            <el-form-item label="字典替换规则"  class="query-form-item">
              <div style="display:flex" :key="i" v-for="(item, i) in conditionForm.lableList">
                <el-form-item label="值" :prop="'lableList.' + i + '.value'" >
                  <el-input  type="input" v-model="item.value" placeholder="请输入值"></el-input>
                </el-form-item>
                <el-form-item label="中文名" :prop="'lableList.' + i + '.name'">
                  <el-input  type="input" v-model="item.name" placeholder="请输入中文名"></el-input>
                </el-form-item>
                <i v-if="i === 0" @click="addLableList" style="font-size:20px;color:#25c4fe;margin:8px 0 0 10px;" class="el-icon-circle-plus"></i>
                <i  @click="deleteLableList(i)" style="font-size:20px;color:#25c4fe;margin:8px 0 0 10px;" class="el-icon-remove"></i>
              </div>
            </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="clickFuc" class="query-form-item">
              <el-input v-model="subData.clickFuc" 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="clickFuc" class="query-form-item">
              <el-input v-model="subData.disabledFuc" 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>
  </div>
</template>

<script>
  import {
    list,
    saveCustomConfig,
    devCustomConfig
  } from "@/api/system/sysCustomConfigDetail";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  import Treeselect from "@riophae/vue-treeselect";
  import {
    isBlank
  } from "@/utils/strUtil";

  export default {
    name: "info",
    props: {
      info: {
        type: Object,
        required: true
      },
      type: {
        type: String,
        required: true
      }
    },
    data() {
      return {
        //---------------仓库相关-------------------
        query: {
          columnName: null,
          configId: this.info.configId,
          type: this.type,
        },
        loading: true,
        list: [],
        formName: null,
        formMap: {
          add: "配置界面详细-新增",
          edit: "配置界面详细--编辑",
        },
        conditionForm: {
          lableList: [{
            name: '',
            value: ''
          }],
          colorList: [{
            type: '',
            value: '',
            color: ''
          }],
          buttonList: [{
            type: '',
            size: '',
            style: '',
            name: '',
            clickFuc: ''
          }]
        },
        formVisible: false,
        subData: {},
        formRules: {
          columnName: [{ required: true, message: "请输入列名", trigger: "blur" }],
          columnDesc: [
            { required: true, message: "请输入列名", trigger: "blur" },
          ],
          columnType: [
            { required: true, message: "请选择类型", trigger: "blur" },
          ],
        },
        isExpandAll: true,
        total: 0,
        typeMap: {
          1: "列表",
          2: "表单",
        },
        upUerMap:{
          true: "是",
          false: "否",
        },
        isShowMap: {
          "1": "显示",
          "2": "隐藏",
        },
        columnTypeMap: {
          "input": "输入框",
          "select": "下拉框",
          "data": "单时间选择框",
          "datePicker": "区间时间选择框",
          "selectServer":"远程搜索",
        },
      };
    },
    watch: {
      info: function () {
        this.getList();
      },
    },
    methods: {
      //----------------仓库相关-----------------
      /* 重置按钮  点击事件 */
      onReset() {
        this.$router.push({
          path: "",
        });
        this.query = {
           configId: this.info.configId,
          type: this.type,
          columnName: "",
        };
        this.getList();
      },
      /* 查询按钮点击事件 */
      onSubmit() {
        this.getList();
      },
      getList() {
        if (isBlank(this.info.configId)) {
          return;
        }
        this.query.configId=this.info.configId;
        this.query.type=this.type;
        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) {
        if (isBlank(this.info.configId)) {
          this.$message.warning("请先选择配置！");
          return;
        }
        this.formName = formName;
        this.subData = JSON.parse(JSON.stringify(data));
        this.subData.configId = this.info.configId,
          this.subData.type = this.type;
        this.formVisible = true;
        if("edit" == formName){
          const lableRule =  this.subData.lableRule;
          var lableList = [{name: '', value: ''}]
          if(lableRule){
            var jsonObj = JSON.parse(lableRule);
            var lableList = []
            for(var index in jsonObj){
              lableList.push({
                name: jsonObj[index],
                value: index,
              })
            }
          }
          this.conditionForm.lableList = lableList;
        }
      },

      /* 删除按钮点击事件 */
      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() {
        var lableRule = {};
        this.conditionForm.lableList.forEach(obj => {
          if(obj.name != ""){
            lableRule[`${obj.value}`] = obj.name;
          }
        })
        this.subData.lableRule = "";
        if(JSON.stringify(lableRule) != "{}"){
          this.subData.lableRule = JSON.stringify(lableRule);
        }


        // 新增，编辑---提交
        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;
              });
          }
        });
      },
      // 新增
      addLableList () {
        this.conditionForm.lableList.push({
          name: '',
          value: ''
        })
      },
      // 删除
      deleteLableList (index) {
        this.conditionForm.lableList.splice(index, 1)
      },
      // 新增
      addColorList () {
        this.conditionForm.colorList.push({
          type: '',
          value: '',
          color: ''
        })
      },
      // 删除
      deleteColorList (index) {
        this.conditionForm.colorList.splice(index, 1)
      },
      // 新增
      addButtonList () {
        this.conditionForm.buttonList.push({
          type: '',
          size: '',
          style: '',
          name: '',
          clickFuc: ''
        })
      },
      // 删除
      deleteButtonList (index) {
        this.conditionForm.buttonList.splice(index, 1)
      },
    },
  };
</script>
