<template>
  <d2-container class="page" id="rapidFront_index_scoped">
    <el-row>
      <el-col :span="18">
        <el-tabs value="first">
          <el-tab-pane label="请求响应数据" name="first">
            <el-form ref="form" label-width="140px">
              <el-row> 
                <el-col :span="24">
                  <el-form-item label="响应JSON">
                    <el-input type="textarea" v-model="respJson"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row> 
                <el-col :span="24">
                  <el-form-item label="数据路径">
                    <el-input v-model="respJsonDataPath"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row> 
                <el-col :span="24">
                  <el-form-item label="formData">
                    <el-input v-model="formData"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="24">
                  <el-form-item>
                    <el-button type="primary" @click="parseRespData()">解析</el-button>
                    <el-button type="primary" @click="tranFormData()">转成FORM数据</el-button>
                    <el-button type="primary" @click="showBizJSONWin()">生成业务数据</el-button>
                  </el-form-item>
                </el-col>
              </el-row>

            </el-form>
          </el-tab-pane>
        </el-tabs>
      
      <el-card class="box-card" @click.native="choosedPart = 'gridPart'" :style="choosedPart == 'gridPart'?'border-color:red':''">
        <el-button style="float: right; padding: 3px 0" type="text" @click.native="gridPartToggleOpen = !gridPartToggleOpen">展开/缩小</el-button>
        <el-tabs value="gridPart">
          <el-tab-pane label="列表" name="gridPart" v-show="gridPartToggleOpen">
            是否分页：
            <el-switch
              v-model="isPage"
              >
            </el-switch>
            <span v-if="isPage">
            分页数可选：
            </span>
            <el-switch
              v-if="isPage"
              v-model="isPageChanged"
              >
            </el-switch>
            <br>
            <el-button type="primary" @click.native="gridPart = []">清空</el-button>
            <el-table
              :data="gridPart | orderByAsc"
              style="width: 100%">
              <el-table-column
                prop="id"
                label="id"
                width="120">
              </el-table-column>

              <el-table-column
                prop="label"
                label="列名"
                width="160"
                >
                <template slot-scope="scope">
                  <el-input v-model="scope.row.label"></el-input>
                </template>
              </el-table-column> 
              <el-table-column
                prop="frontSort"
                label="前端排序"
                width="80"
                >
                <template slot-scope="scope">
                  <el-switch
                    v-model="scope.row.frontSort"
                  >
                  </el-switch>
                </template>
              </el-table-column> 

              <el-table-column
                prop="serviceSort"
                label="服务端排序"
                width="100"
                >
                <template slot-scope="scope">
                  <el-switch
                    v-model="scope.row.serviceSort"
                    >
                  </el-switch>            
                </template>
              </el-table-column>
              <el-table-column
                prop="order"
                label="排序"
                width="140">
                <template slot-scope="scope">
                  <el-input-number v-model="scope.row.order" size="mini" :min="1" :max="100" label="描述文字"></el-input-number>

                </template>
              </el-table-column>
              <el-table-column
                label="操作"
                width="200">
                <template slot-scope="scope">
                  <i @click="delRow(gridPart,scope.row.id)" class="el-icon-delete"></i>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>  
      </el-card>
      <br>
      <el-card class="box-card" @click.native="choosedPart = 'queryPart'" :style="choosedPart == 'queryPart'?'border-color:red':''">
        <el-button style="float: right; padding: 3px 0" type="text" @click.native="queryPartToggleOpen = !queryPartToggleOpen">展开/缩小</el-button>

        <el-tabs value="queryPart">
          <el-tab-pane label="查询条件" name="queryPart" v-show="queryPartToggleOpen">
            布局：
                  <el-select v-model="layOutType" placeholder="请选择">
                    <el-option
                      label="1行2列"
                      value="1@2">
                    </el-option>
                    <el-option
                      label="1行3列"
                      value="1@3">
                    </el-option>
                    <el-option
                      label="1行4列"
                      value="1@4">
                    </el-option>
                  </el-select>

            <br>
            <el-button type="primary" @click.native="queryPart = []">清空</el-button>
            <el-button type="primary" @click.native="copyGrid('queryPart')">复制查询配置</el-button>
            <el-button type="primary" @click.native="autoMH">自动补冒号</el-button>
            <el-table
              :data="queryPart | orderByAsc"
              style="width: 100%">
              <el-table-column
                prop="id"
                label="id"
                width="120">
              </el-table-column>

              <el-table-column
                prop="label"
                label="列名"
                width="160"
                >
                <template slot-scope="scope">
                  <el-input v-model="scope.row.label"></el-input>
                </template>
              </el-table-column> 
              <el-table-column
                prop="required"
                label="必填"
                width="80"
                >
                <template slot-scope="scope">
                  <el-switch
                    v-model="scope.row.required"
                  >
                  </el-switch>
                </template>
              </el-table-column> 
              <el-table-column
                prop="readonly"
                label="只读"
                width="80"
                >
                <template slot-scope="scope">
                  <el-switch
                    v-model="scope.row.readonly"
                  >
                  </el-switch>
                </template>
              </el-table-column> 

              <el-table-column
                prop="type"
                label="输入类型"
                width="160"
                >
                <template slot-scope="scope">
                  <el-select v-model="scope.row.type" placeholder="请选择">
                    <el-option
                      v-for="item in typeOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column
                prop="order"
                label="排序"
                width="140">
                <template slot-scope="scope">
                  <el-input-number v-model="scope.row.order"  size="mini" :min="1" :max="100" label="描述文字"></el-input-number>

                </template>
              </el-table-column>
              <el-table-column
                label="操作"
                width="200">
                <template slot-scope="scope">
                  <i @click="delRow(gridPart,scope.row.id)" class="el-icon-delete"></i>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>


        </el-tabs>  
      </el-card>
      <br>
      <el-card class="box-card" @click.native="choosedPart = 'editPart'" :style="choosedPart == 'editPart'?'border-color:red':''">
        <el-button style="float: right; padding: 3px 0" type="text" @click.native="editPartToggleOpen = !editPartToggleOpen">展开/缩小</el-button>

        <el-tabs value="editPart">
          <el-tab-pane label="编辑" name="editPart" v-show="editPartToggleOpen">
            布局：
            <el-select v-model="layOutType" placeholder="请选择">
              <el-option
                label="1行2列"
                value="1@2">
              </el-option>
              <el-option
                label="1行3列"
                value="1@3">
              </el-option>
              <el-option
                label="1行4列"
                value="1@4">
              </el-option>
            </el-select>

            <br>
            <el-button type="primary" @click.native="editPart = []">清空</el-button>
            <el-button type="primary" @click.native="copyGrid('editPart')">复制查询配置</el-button>
            <el-button type="primary" @click.native="autoMH">自动补冒号</el-button>
            <el-table
              :data="editPart | orderByAsc"
              style="width: 100%">
              <el-table-column
                prop="id"
                label="id"
                width="120">
              </el-table-column>

              <el-table-column
                prop="label"
                label="列名"
                width="160"
                >
                <template slot-scope="scope">
                  <el-input v-model="scope.row.label"></el-input>
                </template>
              </el-table-column> 
              <el-table-column
                prop="required"
                label="必填"
                width="80"
                >
                <template slot-scope="scope">
                  <el-switch
                    v-model="scope.row.required"
                  >
                  </el-switch>
                </template>
              </el-table-column> 
              <el-table-column
                prop="readonly"
                label="只读"
                width="80"
                >
                <template slot-scope="scope">
                  <el-switch
                    v-model="scope.row.readonly"
                  >
                  </el-switch>
                </template>
              </el-table-column> 

              <el-table-column
                prop="type"
                label="输入类型"
                width="160"
                >
                <template slot-scope="scope">
                  <el-select v-model="scope.row.type" placeholder="请选择">
                    <el-option
                      v-for="item in typeOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column
                prop="order"
                label="排序"
                width="140">
                <template slot-scope="scope">
                  <el-input-number v-model="scope.row.order"  size="mini" :min="1" :max="100" label="描述文字"></el-input-number>

                </template>
              </el-table-column>
              <el-table-column
                label="操作"
                width="200">
                <template slot-scope="scope">
                  <i @click="delRow(gridPart,scope.row.id)" class="el-icon-delete"></i>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>


        </el-tabs>  
      </el-card>
      </el-col>
      <el-col :span="6">
        <el-button type="primary" @click="mergeColumns()">合并列</el-button>
        <el-button type="primary" @click="setKeys()">设置主键</el-button>
        <br>
        <el-table
          ref="rightTable"
          :data="columns"
          @selection-change="handleSelectedColumnsChange"
          :row-class-name="keysRowClassName"
          style="width: 100%">
          <el-table-column
            prop="checked"
            type="selection"
            width="50">
          </el-table-column>
          <el-table-column
            prop="id"
            label="id"
            width="120">
          </el-table-column>
          <el-table-column
            prop="value"
            label="value"
            >
          </el-table-column>
        

          <!-- 
          <el-table-column
                fixed="right"
                label="操作"
                width="100">
          <template slot-scope="scope">
            <el-button @click="showDetailInfo(scope.row)" type="text" size="small">查看</el-button>
          </template>
          </el-table-column> 
          -->
          
        </el-table>

      </el-col>
    </el-row>

    <el-dialog
      title="提示"
      :visible.sync="showBizJSON"
      width="30%"
      center>
      <span>{{bizJSON}}</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showBizJSON = false">取 消</el-button>
        <el-button type="primary" @click="showBizJSON = false">确 定</el-button>
      </span>
    </el-dialog>

  </d2-container>
</template>

<script>
import { mapState, mapActions } from "vuex";

export default {
  components: {},
  computed: {
    ...mapState({
      std: state => state.enrol.StdReg,
      StdImageArray: state => state.enrol.StdImageArray,
      FrameParam: state => state.enrol.FrameParam
    })
  },
  data() {
    return {
      showBizJSON: false,
      bizJSON:{},

      respJson: "",
      respJsonDataPath: "",

      columns: [],
      selectedColumns: [],
      keys:"",

      choosedPart: "", //list edit info
      queryPart: [],
      queryPartToggleOpen: true,

      gridPart: [],
      gridPartToggleOpen: true,

      layOutType: "",
      isPage: true,
      isPageChanged: true,
      editPart: [],
      editPartToggleOpen: true,


      infoPart: [],
      infoPartToggleOpen: true,
      typeOptions: [
        { label: "input", value: "input" },
        { label: "inputNumber", value: "inputNumber" },
        { label: "textarea", value: "textarea" },
        { label: "select", value: "select" },
        { label: "checkbox", value: "checkbox" },
        { label: "radio", value: "radio" },
        { label: "switch", value: "switch" },
        { label: "timePicker", value: "timePicker" },
        { label: "datePicker", value: "datePicker" }
      ],
      formData : ""
    };
  },
  async mounted() {},
  methods: {
    showBizJSONWin(){
      this.bizJSON = {
        query:{
          layout: this.layOutType,
          columns: this.queryPart,
        },
        grid:{
          page: {
            isPage: this.isPage,
            isPageSizeChanged:this.isPageChanged
          },
          columns: this.gridPart,
        },
        edit:{
          layout: this.layOutType,
          columns: this.editPart,
        },
        info:{
          layout: this.layOutType,
          columns: this.editPart,        },
      },
      this.showBizJSON = true;
    },
    delRow(gridPart, id) {
      for (let i = 0; i < gridPart.length; i++) {
        let item = gridPart[i];
        if (item.id === id) {
          gridPart.splice(i, 1);
          return;
        }
      }
    },
    checkedAll(array) {
      for (let i = 0; i < array.length; i++) {
        let item = array[i];
        this.$refs.rightTable.toggleRowSelection(item, true);
      }
    },
    handleSelectedColumnsChange(val) {
      this.selectedColumns = val;
    },
    keysRowClassName({row, rowIndex}) {
      if (this.keys.indexOf(row.id) != -1) {
        return 'warning-row';
      } 
      return '';
    },
    parseRespData() {
      let json = JSON.parse(this.respJson);
      let object;
      //根节点
      if (this.respJsonDataPath === "@") {
        object = json;
      } else {
        object = eval("json." + this.respJsonDataPath);
      }
      this.columns = [];
      for (const key in object) {
        if (object.hasOwnProperty(key)) {
          const value = object[key];
          // console.log(key + ":" + value);
          this.columns.push({
            id: key,
            value: value,
            // checked: true
          });
        }
      }

      let _this = this;
      _this.$nextTick(function() {
        _this.checkedAll(this.columns); //每次更新了数据，触发这个函数即可。
      });
    },
    tranFormData(){
      let s = this.Qs.stringify(JSON.parse(this.respJson));

      this.formData = s;
    },
    mergeColumns() {
      // if(!this.choosedPart) {alert("请选择合并目标");return;}
      let choosedPartDataList;
      let defaultConfig = null;
      switch (this.choosedPart) {
        case "queryPart":
          choosedPartDataList = this.queryPart;
          break;
        case "gridPart":
          choosedPartDataList = this.gridPart;
          break;
        case "editPart":
          choosedPartDataList = this.editPart;
          defaultConfig = {
            readonly: false,
            required: false,
          };
          break;
        case "infoPart":
          choosedPartDataList = this.infoPart;
          break;
        default:
          //test_code
          choosedPartDataList = this.gridPart;
          this.choosedPart = "gridPart";
          defaultConfig = {
            width: "",
            frontSort: false,
            serviceSort: false
          };
          break;
      }
      let existCol;
      for (let i = 0; i < this.selectedColumns.length; i++) {
        let itemNew = this.selectedColumns[i];
        existCol = false;
        for (let j = 0; j < choosedPartDataList.length; j++) {
          let itemOld = choosedPartDataList[j];
          if (itemOld.id === itemNew.id) {
            existCol = true;
            break;
          }
        }
        if(!existCol)
        // _.assignIn() itemNew
          choosedPartDataList.push({
            id: itemNew.id,
            label: "",
            value: "",
            width: "",
            frontSort: false,
            serviceSort: false,
            frontFilter: false,
            serviceFilter: false,
            type:"",
            readonly : false,
            required: false,
            order: 1,
          });
      }
    },
    setKeys(){
      // if(this.keys){
      //   alert(`主键已经设置为:[${this.keys}]，确定设置复合主键?`)
      // }
      let keyArray = [];
      for (let i = 0; i < this.selectedColumns.length; i++) {
        let item = this.selectedColumns[i];
        keyArray.push(item.id);
      }
      if(this.selectedColumns.length > 1){
        alert(`确定设置[${ keyArray.join(",")}]为复合主键?`);
      }
      this.keys = keyArray.join(",");
    },
    autoMH() {
      for (let i = 0; i < this.editPart.length; i++) {
        let element = this.editPart[i];
        element.label += "：";
      }
    },
    copyGrid(part) {
      let clonePart = _.cloneDeep(this.gridPart);
      if(part == 'editPart'){
        this.editPart = clonePart;
      }
      if(part == 'queryPart'){
        this.queryPart = clonePart;
      }
    }
  }
};
</script>

<style lang="scss">
#rapidFront_index_scoped {
  .el-table .cell {
    // height: 20px;
  }
  .el-table .warning-row {
    background: oldlace;
  }
}


</style>

