<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 label="字段是否可以排序" prop="sort">
          <template slot-scope="scope">
            <span>{{ upUerMap[scope.row.sort] }}</span>
          </template>
        </el-table-column>
        <el-table-column label="是否缩略" prop="tooltip">
          <template slot-scope="scope">
            <span>{{ upUerMap[scope.row.tooltip] }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="lableRule" show-overflow-tooltip="true" label="字典替换规则"></el-table-column>
        <el-table-column prop="colorRule" show-overflow-tooltip="true" label="颜色规则"></el-table-column>
        <el-table-column prop="buttonRule" show-overflow-tooltip="true" label="按钮规则"></el-table-column>
        <el-table-column prop="clickFuc" label="点击事件"></el-table-column>
        <el-table-column prop="hasPermi" label="是否展示eval表达式"></el-table-column>
        <el-table-column label="操作" fixed="right" width="100">
          <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="70%" 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="id" />
                <el-option label="复选框" value="selection" />
                <el-option label="单选框" value="radio" />
                <el-option label="字典" value="laber" />
                <el-option label="el-tag" value="eltag" />
                <el-option label="按钮" value="button" />
                <el-option label="默认" value="text" />
                <el-option label="特殊" value="other" />
              </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="12" class="el-col">
            <el-form-item
              label="字段是否可以排序"
              prop="sort"
              class="query-form-item"
            >
              <el-radio-group v-model="subData.sort">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </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="tooltip"
              class="query-form-item"
            >
              <el-radio-group v-model="subData.tooltip">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </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="20" class="el-col">
            <el-form-item label="颜色规则"  class="query-form-item">
              <div style="display:flex" :key="i" v-for="(item, i) in conditionForm.colorList">
                <el-form-item label="判断条件" :prop="'colorList.' + i + '.type'">
                  <el-select clearable v-model="item.type" placeholder="请选择判断条件">
                    <el-option label="默认" value="0" />
                    <el-option label="大于" value=">" />
                    <el-option label="大于等于" value=">=" />
                    <el-option label="小于" value="<" />
                    <el-option label="小于等于" value="<=" />
                    <el-option label="等于" value="=" />
                  </el-select>
                </el-form-item>
                <el-form-item label="值" :prop="'colorList.' + i + '.value'" >
                  <el-input  type="input" v-model="item.value" placeholder="请输入值"></el-input>
                </el-form-item>
                <el-form-item label="颜色" :prop="'colorList.' + i + '.color'">
                  <el-input  type="input" v-model="item.color" placeholder="请输入颜色"></el-input>
                </el-form-item>
                <i v-if="i === 0" @click="addColorList" style="font-size:20px;color:#25c4fe;margin:8px 0 0 10px;" class="el-icon-circle-plus"></i>
                <i @click="deleteColorList(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="20" class="el-col">
            <el-form-item label="按钮规则"  class="query-form-item">
              <div style="display:flex" :key="i" v-for="(item, i) in conditionForm.buttonList">
                <el-form-item label-width="50px" label="类型" :prop="'buttonList.' + i + '.type'">
                  <el-select clearable  style="width: 120px;" v-model="item.type" placeholder="请选择类型">
                    <el-option label="文本" value="text" />
                  </el-select>
                </el-form-item>
                <el-form-item label-width="50px" label="大小" :prop="'buttonList.' + i + '.size'" >
                  <el-select clearable style="width: 120px;" v-model="item.size" placeholder="请选择大小">
                    <el-option label="medium" value="medium" />
                    <el-option label="mini" value="mini" />
                    <el-option label="small" value="small" />
                  </el-select>
                </el-form-item>
                <el-form-item label-width="50px" label="名称" :prop="'buttonList.' + i + '.name'">
                  <el-input  type="input" style="width: 120px;" v-model="item.name" placeholder="请输入名称"></el-input>
                </el-form-item>
<!--                <el-form-item label-width="50px" label="样式" :prop="'buttonList.' + i + '.style'">-->
<!--                  <el-input  type="input" style="width: 120px;" v-model="item.style" placeholder="请输入样式"></el-input>-->
<!--                </el-form-item>-->
                <el-form-item label-width="70px" label="禁用eval表达式" :prop="'buttonList.' + i + '.disabledFuc'">
                  <el-input  type="input" style="width: 120px;" v-model="item.disabledFuc" placeholder="请输入禁用eval表达式"></el-input>
                </el-form-item>
                <el-form-item label-width="70px" label="点击方法" :prop="'buttonList.' + i + '.clickFuc'">
                  <el-input  type="input" style="width: 120px;" v-model="item.clickFuc" placeholder="请输入点击方法"></el-input>
                </el-form-item>
                <el-form-item label-width="70px" label="是否展示eval表达式" :prop="'buttonList.' + i + '.hasPermi'">
                  <el-input  type="input" style="width: 120px;" v-model="item.hasPermi" placeholder="请输入是否展示eval表达式"></el-input>
                </el-form-item>
                <i v-if="i === 0" @click="addButtonList" style="font-size:20px;color:#25c4fe;margin:8px 0 0 10px;" class="el-icon-circle-plus"></i>
                <i @click="deleteButtonList(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>
              <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="是否展示eval表达式" prop="expression" class="query-form-item">
              <el-input v-model="subData.expression" style="width: 80%" placeholder="请输入是否展示eval表达式"
                        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: '',
            hasPermi:'',
          }]
        },
        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: "否",
        },
        columnTypeMap: {
          "id": "序号",
          "selection": "复选框",
          "radio": "单选框",
          "laber": "字典",
          "eltag":"el-tag",
          "button":"按钮",
          "text":"默认",
          "other":"特殊",
        },
        isShowMap: {
          "1": "显示",
          "2": "隐藏",
        },
      };
    },
    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 colorRule =  this.subData.colorRule;
           var colorList = [{type: '', value: '', color: ''}]
           if(colorRule){
              var arr = colorRule.split("|");
              var colorList = []
              arr.forEach(obj =>{
                var arrTemp = obj.split(",");
                colorList.push({
                  type: arrTemp[0],
                  value: arrTemp[1],
                  color: arrTemp[2],
                })
             })
           }
          this.conditionForm.colorList = colorList;

          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;

          const buttonRule =  this.subData.buttonRule;
          var buttonList = [{type: '', size: '', style: '', name: '', clickFuc: '', disabledFuc: '', hasPermi: ''}]
          if(buttonRule){
            var jsonArr = JSON.parse(buttonRule);
            var buttonList = []
            jsonArr.forEach(obj =>{
              buttonList.push({
                type: obj.type,
                size: obj.size,
                style: obj.style,
                name: obj.name,
                clickFuc: obj.clickFuc,
                disabledFuc: obj.disabledFuc,
                hasPermi:obj.hasPermi
              })
            })
          }
          this.conditionForm.buttonList = buttonList;
        }
      },

      /* 删除按钮点击事件 */
      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 colorRule = "";
        this.conditionForm.colorList.forEach(obj => {
            if(obj.type != "" && obj.value != ""  && obj.color != "" ){
              colorRule += obj.type+","+obj.value+","+obj.color+"|"
            }
        })
        this.subData.colorRule = "";
        if(colorRule != ""){
          this.subData.colorRule = colorRule.substring(0, colorRule.length-1);
        }

        var lableRule = {};
        this.conditionForm.lableList.forEach(obj => {
          if(obj.name != "" && obj.value != ""){
            lableRule[`${obj.value}`] = obj.name;
          }
        })
        this.subData.lableRule = "";
        if(JSON.stringify(lableRule) != "{}"){
          this.subData.lableRule = JSON.stringify(lableRule);
        }

        var buttonRule = [];
        this.conditionForm.buttonList.forEach(obj => {
          if(obj.type != "" && obj.name != "" && obj.clickFuc != ""){
            buttonRule.push({
              type: obj.type,
              size: obj.size,
              style: obj.style,
              name: obj.name,
              clickFuc: obj.clickFuc,
              disabledFuc: obj.disabledFuc,
              hasPermi:obj.hasPermi
            })
          }
        })
        this.subData.buttonRule = "";
        if(buttonRule.length > 0){
          this.subData.buttonRule = JSON.stringify(buttonRule);
        }

        // 新增，编辑---提交
        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>
