<template>
  <div>
    <template v-for="(item,row) in widgets">
      <el-row :gutter="5" style="margin:5px" :key="row">
        <template v-for="(item,col) in item">
          <el-col :span="12" :key="col">
            <el-button
              @click="setWidget(item)"
              style="width:100%"
              plain
              :key="item.fwebtype"
            >{{row*2+(col+1)}}：{{item.name}}</el-button>
          </el-col>
        </template>
      </el-row>
    </template>
  </div>
</template>

<script>
import $ from "jquery";
export default {
  name: "Widget",
  data() {
    return {
      widgets: [],
    };
  },
  methods: {
    setWidget(item) {
      let me = this;
      let attrconfig = null;
      let propCfg = null;
      let vueComName = null;
      $.ajaxSettings.async = false;
      //查询属性
      $.getJSON(
        this.GLOBAL.basePath + "fweb-commons-sort/commons/sort/dict/list/key",
        { itemKey: item.itemKey, r: Math.random() },
        function (data) {
          attrconfig = data;
        }
      );
      //查询模板
      $.getJSON(
        this.GLOBAL.basePath + "fweb-form/design/ui/pc/template/com/page",
        { itemId: item.itemKey, r: Math.random() },
        function (data) {
          if (data.rows && data.rows.length > 0) {
            if (data.rows[0].propCfg) {
              propCfg = JSON.parse(data.rows[0].propCfg);
              for(var i in propCfg){
                if(propCfg[i].indexOf("default") > 0){
                  if(typeof(JSON.parse(propCfg[i]).default) == "object"){
                    propCfg[i] = window.JSON.stringify(JSON.parse(propCfg[i]).default);
                  }else{
                    propCfg[i] = JSON.parse(propCfg[i]).default;
                  }
                }
              }
              var s = 'is="fviz-echarts"';

              var reg = /is=[\'\"]?([^\'\"]*)[\'\"]?/i;
              if (data.rows[0].designerTemplate) {
                var arr = data.rows[0].designerTemplate.match(reg);
                if (arr.length > 0) {
                  reg = /(\w*)is(.*)=(.*)"(.*)"(.*)/g;
                  vueComName = arr[0].replace(reg, "$1$2$3$4");
                }
              }
            }
          }
        }
      );
      $.ajaxSettings.async = true;

      //配置默认值
      let formData = {};
      for (var i = 0; i < attrconfig.length; i++) {
        let ai = attrconfig[i];
        this.$set(
          this.GLOBAL.fwebdesigner.selectedCom,
          ai.dictCode,
          propCfg[ai.dictCode] || null
        );
      }

      if (this.GLOBAL.fwebdesigner.isDpPage()) {
        this.$set(
          this.GLOBAL.fwebdesigner.selectedCom,
          "layoutMode",
          "absolute"
        );
      } else {
        this.$set(this.GLOBAL.fwebdesigner.selectedCom, "layoutMode", "static");
      }

      this.$store.commit("setAll", {
        vueComName: vueComName,
        fwebtype: item.itemKey,
        attrconfig: attrconfig,
        formData: formData,
        name: item.name,
      });
    },
  },
  created() {
    let widgetList = this.GLOBAL.fwebdesigner.widgets;

    for (var i = 0, len = widgetList.length; i < len; i += 2) {
      this.widgets.push(widgetList.slice(i, i + 2));
    }
  },
};
</script>

<style>
</style>
