<template>
  <el-row :gutter="20" style="padding: 15px">
    <el-col :span="8">
      <el-tag type="primary">配置页名称</el-tag>
      <el-tag type="danger" style="color: red"
        >注意:用户最多只能配置6个首页</el-tag
      >
      <div class="demo-input-suffix" style="margin-top: 15px">
        设置页面名称:<el-input v-model="input" style="width: 420px"> </el-input>
      </div>
      <div class="demo-input-suffix" style="margin-top: 15px">
        设置页面路径:<el-select
          v-model="pathvalue"
          placeholder="请选择首页组件路径"
          style="width: 420px"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <el-tag type="primary" style="margin-top: 15px">布局版式</el-tag>
      <div class="demo-input-suffix" style="margin-top: 15px; margin-left: 25%">
        <el-radio-group v-model="radio" style="margin-top: 15px; width: 100px">
          <el-radio :label="1">布局样式1---3+2*2模式</el-radio
          ><el-image
            style="width: 80px; height: 80px; margin-left: 45%"
            :src="layou1tsrc"
          ></el-image>
          <el-radio :label="2">布局样式2---2*3模式</el-radio
          ><el-image
            style="width: 80px; height: 80px; margin-left: 45%"
            :src="layou2tsrc"
          ></el-image>
          <el-radio :label="3">布局样式3---1+2*3模式</el-radio
          ><el-image
            style="width: 80px; height: 80px; margin-left: 45%"
            :src="layou3tsrc"
          ></el-image>
          <el-radio :label="4">布局样式3---3*3模式</el-radio
          ><el-image
            style="width: 80px; height: 80px; margin-left: 45%"
            :src="layou4tsrc"
          ></el-image>
          <el-radio :label="5">布局样式3---2+1*3模式</el-radio
          ><el-image
            style="width: 80px; height: 80px; margin-left: 45%"
            :src="layou5tsrc"
          ></el-image>
          <el-radio :label="6">布局样式3---1+2+3模式</el-radio
          ><el-image
            style="width: 80px; height: 80px; margin-left: 45%"
            :src="layou6tsrc"
          ></el-image>
        </el-radio-group>
      </div>
    </el-col>
    <el-col :span="10">
      <el-tag type="primary">配置合成表</el-tag>
      <el-table
        stripe
        stripe
        ref="multipleTable"
        :data="layoutData"
        border
        style="width: 100%; margin-top: 10px"
      >
        <el-table-column
          label="布局名称"
          prop="name"
          width="150"
          align="center"
        >
        </el-table-column>
        <el-table-column
          text-align="center"
          prop="component"
          label="合成配置"
          align="center"
        >
        </el-table-column>
      </el-table>
    </el-col>
    <el-col :span="6">
      <el-tag type="primary">组件列表</el-tag>
      <el-tag type="danger" style="color: red"
        >注意:请根据布局板式个数选取组件个数</el-tag
      >
      <el-table
        stripe
        stripe
        ref="multipleTable"
        :data="componentData"
        border
        style="width: 100%; margin-top: 10px"
        @selection-change="handleSelectionChange"
      >
        <el-table-column align="center" type="selection" width="55" prop="id">
        </el-table-column>
        <el-table-column align="center" label="功能名称" prop="name">
        </el-table-column>
        <el-table-column align="center" prop="path" label="组件路径">
        </el-table-column>
        <el-table-column align="center" prop="pathname" label="组件名称">
        </el-table-column>
      </el-table>
    </el-col>
    <el-col :span="24" style="margin-top: 15px; text-align: center">
      <el-button class="el-icon-s-tools" type="primary" @click="organizpage"
        >合成首页</el-button
      >
      <el-button class="el-icon-check" type="primary" @click="submit"
        >确认提交</el-button
      >
    </el-col>
  </el-row>
</template>
<script>
export default {
  data() {
    return {
      input: "",
      options: [
        {
          value: "/home/home1",
          label: "/home/home1",
        },
        {
          value: "/home/home2",
          label: "/home/home2",
        },
        {
          value: "/home/home3",
          label: "/home/home3",
        },
        {
          value: "/home/home4",
          label: "/home/home4",
        },
        {
          value: "/home/home5",
          label: "/home/home5",
        },
        {
          value: "/home/home6",
          label: "/home/home6",
        },
      ],
      pathvalue: "/home/home1",
      radio: null,
      componentData: [
        {
          id: "1",
          name: "功能1组件",
          path: "user-boot/uesr",
          pathname: "uesr",
        },
        {
          id: "2",
          name: "功能2组件",
          path: "user-boot/role",
          pathname: "role",
        },
        {
          id: "3",
          name: "功能3组件",
          path: "user-boot/menu",
          pathname: "menu",
        },
        {
          id: "4",
          name: "功能4组件",
          path: "user-boot/detp",
          pathname: "detp",
        },
        {
          id: "5",
          name: "功能5组件",
          path: "user-boot/aduit",
          pathname: "aduit",
        },
        {
          id: "6",
          name: "功能6组件",
          path: "user-boot/ppp",
          pathname: "ppp",
        },
        {
          id: "7",
          name: "功能7组件",
          path: "user-boot/xxxx",
          pathname: "xxxx",
        },
        {
          id: "8",
          name: "功能8组件",
          path: "user-boot/sss",
          pathname: "sss",
        },
        {
          id: "9",
          name: "功能9组件",
          path: "user-boot/lll",
          pathname: "lll",
        },
        {
          id: "10",
          name: "功能10组件",
          path: "user-boot/fsdf",
          pathname: "fsdf",
        },
        {
          id: "11",
          name: "功能11组件",
          path: "user-boot/ert",
          pathname: "ert",
        },
        {
          id: "12",
          name: "功能12组件",
          path: "user-boot/erter",
          pathname: "erter",
        },
        {
          id: "13",
          name: "功能13组件",
          path: "user-boot/jhd",
          pathname: "jhd",
        },
        {
          id: "14",
          name: "功能14组件",
          path: "user-boot/yyy",
          pathname: "yyy",
        },
        {
          id: "15",
          name: "功能15组件",
          path: "user-boot/ggg",
          pathname: "ggg",
        },
        {
          id: "16",
          name: "功能16组件",
          path: "user-boot/kkk",
          pathname: "kkk",
        },
      ],
      layou1tsrc: require("../../assets/sybju/A.png"),
      layou2tsrc: require("../../assets/sybju/B.png"),
      layou3tsrc: require("../../assets/sybju/C.png"),
      layou4tsrc: require("../../assets/sybju/D.png"),
      layou5tsrc: require("../../assets/sybju/E.png"),
      layou6tsrc: require("../../assets/sybju/G.png"),
      layout: [
        {
          id: 1,
          buju: [
            { x: 0, y: 0, w: 2, h: 6, i: "1" },
            { x: 2, y: 0, w: 2, h: 6, i: "2" },
            { x: 4, y: 0, w: 2, h: 6, i: "3" },
            { x: 0, y: 6, w: 3, h: 8, i: "4" },
            { x: 3, y: 6, w: 3, h: 8, i: "5" },
            { x: 0, y: 12, w: 3, h: 8, i: "6" },
            { x: 3, y: 12, w: 3, h: 8, i: "7" },
          ],
        },
        {
          id: 2,
          buju: [
            { x: 0, y: 0, w: 3, h: 6, i: "1" },
            { x: 3, y: 0, w: 3, h: 6, i: "2" },
            { x: 0, y: 6, w: 3, h: 6, i: "3" },
            { x: 3, y: 6, w: 3, h: 6, i: "4" },
            { x: 0, y: 12, w: 3, h: 6, i: "5" },
            { x: 3, y: 12, w: 3, h: 6, i: "6" },
          ],
        },
        {
          id: 3,
          buju: [
            { x: 0, y: 0, w: 2, h: 6, i: "1" },
            { x: 2, y: 0, w: 4, h: 6, i: "2" },
            { x: 0, y: 6, w: 2, h: 6, i: "3" },
            { x: 2, y: 6, w: 4, h: 6, i: "4" },
            { x: 0, y: 12, w: 2, h: 6, i: "5" },
            { x: 2, y: 12, w: 4, h: 6, i: "6" },
          ],
        },
        {
          id: 4,
          buju: [
            { x: 0, y: 0, w: 2, h: 6, i: "1" },
            { x: 2, y: 0, w: 2, h: 6, i: "2" },
            { x: 4, y: 0, w: 2, h: 6, i: "3" },
            { x: 0, y: 6, w: 2, h: 6, i: "4" },
            { x: 2, y: 6, w: 2, h: 6, i: "5" },
            { x: 4, y: 6, w: 2, h: 6, i: "6" },
            { x: 0, y: 12, w: 2, h: 6, i: "7" },
            { x: 2, y: 12, w: 2, h: 6, i: "8" },
            { x: 4, y: 12, w: 2, h: 6, i: "9" },
          ],
        },
        {
          id: 5,
          buju: [
            { x: 0, y: 0, w: 4, h: 6, i: "1" },
            { x: 4, y: 0, w: 2, h: 6, i: "2" },
            { x: 0, y: 6, w: 4, h: 6, i: "3" },
            { x: 4, y: 6, w: 2, h: 6, i: "4" },
            { x: 0, y: 12, w: 4, h: 6, i: "5" },
            { x: 4, y: 12, w: 2, h: 6, i: "6" },
          ],
        },
        {
          id: 6,
          buju: [
            { x: 0, y: 0, w: 6, h: 8, i: "1" },
            { x: 0, y: 8, w: 2, h: 7, i: "2" },
            { x: 2, y: 8, w: 4, h: 7, i: "3" },
            { x: 0, y: 15, w: 2, h: 6, i: "4" },
            { x: 2, y: 15, w: 2, h: 6, i: "5" },
            { x: 4, y: 15, w: 2, h: 6, i: "6" },
          ],
        },
      ],
      componentlist: [],
      layoutData: [
        {
          id: 1,
          name: "布局1---3+2*2模式",
          component:
            '{"x":0,"y":0,"w":2,"h":6,"i":"1"},' +
            '{"x":2,"y":0,"w":2,"h":6,"i":"2"},' +
            '{"x":4,"y":0,"w":2,"h":6,"i":"3"},' +
            '{"x":0,"y":6,"w":3,"h":8,"i":"4"},' +
            '{"x":3,"y":6,"w":3,"h":8,"i":"5"},' +
            '{"x":0,"y":12,"w":3,"h":8,"i":"6"},' +
            '{"x":3,"y":12,"w":3,"h":8,"i":"7"}',
        },
        {
          id: 2,
          name: "布局1---2*3模式",
          component:
            '{"x":0,"y":0,"w":3,"h":6,"i":"1"},' +
            '{"x":3,"y":0,"w":3,"h":6,"i":"2"},' +
            '{"x":0,"y":6,"w":3,"h":6,"i":"3"},' +
            '{"x":3,"y":6,"w":3,"h":6,"i":"4"},' +
            '{"x":0,"y":12,"w":3,"h":6,"i":"5"},' +
            '{"x":3,"y":12,"w":3,"h":6,"i":"6"}',
        },
        {
          id: 3,
          name: "布局1---1+2*3模式",
          component:
            ' {"x":0,"y":0,"w":2,"h":6,"i":"1"},' +
            '{"x":2,"y":0,"w":4,"h":6,"i":"2"},' +
            '{"x":0,"y":6,"w":2,"h":6,"i":"3"},' +
            '{"x":2,"y":6,"w":4,"h":6,"i":"4"},' +
            '{"x":0,"y":12,"w":2,"h":6,"i":"5"},' +
            '{"x":2,"y":12,"w":4,"h":6,"i":"6"}',
        },
        {
          id: 4,
          name: "布局1---3*3模式",
          component:
            '{"x":0,"y":0,"w":2,"h":6,"i":"1"},' +
            '{"x":2,"y":0,"w":2,"h":6,"i":"2"},' +
            '{"x":4,"y":0,"w":2,"h":6,"i":"3"},' +
            '{"x":0,"y":6,"w":2,"h":6,"i":"4"},' +
            '{"x":2,"y":6,"w":2,"h":6,"i":"5"},' +
            '{"x":4,"y":6,"w":2,"h":6,"i":"6"},' +
            '{"x":0,"y":12,"w":2,"h":6,"i":"7"},' +
            '{"x":2,"y":12,"w":2,"h":6,"i":"8"},' +
            '{"x":4,"y":12,"w":2,"h":6,"i":"9"}',
        },
        {
          id: 5,
          name: "布局1---2+1*3模式",
          component:
            '{"x":0,"y":0,"w":4,"h":6,"i":"1"},' +
            '{"x":4,"y":0,"w":2,"h":6,"i":"2"},' +
            '{"x":0,"y":6,"w":4,"h":6,"i":"3"},' +
            '{"x":4,"y":6,"w":2,"h":6,"i":"4"},' +
            '{"x":0,"y":12,"w":4,"h":6,"i":"5"},' +
            '{"x":4,"y":12,"w":2,"h":6,"i":"6"}',
        },
        {
          id: 6,
          name: "布局1---1+2+3模式",
          component:
            '{"x":0,"y":0,"w":6,"h":8,"i":"1"},' +
            '{"x":0,"y":8,"w":2,"h":7,"i":"2"},' +
            '{"x":2,"y":8,"w":4,"h":7,"i":"3"},' +
            '{"x":0,"y":15,"w":2,"h":6,"i":"4"},' +
            '{"x":2,"y":15,"w":2,"h":6,"i":"5"},' +
            '{"x":4,"y":15,"w":2,"h":6,"i":"6"}',
        },
      ],
      formList: [],
    };
  },
  mounted() {
    this.getcomponent();
  },
  methods: {
    //获取组件
    getcomponent() {},
    //合成首页
    organizpage() {
      if (this.input != "") {
        if (this.radio != null) {
          if (this.radio == 1) {
            if (this.componentlist.length >= 7) {
              for (var j = 0; j < this.componentlist.length; j++) {
                for (var i = 0; i < this.layout[0].buju.length; i++) {
                  this.layout[0].buju[i].component =
                    this.componentlist[i].pathname;
                }
              }
              this.formList = this.layout[0].buju;
             // console.log(this.formList);
              this.$message.success("合成成功，请确认提交录入数据库");
            } else {
              this.$message.warning(
                "选取的组件个数小于布局版式个数,请根据布局板式个数选取组件个数"
              );
            }
          } else if (this.radio == 2) {
            if (this.componentlist.length >= 6) {
              for (var j = 0; j < this.componentlist.length; j++) {
                for (var i = 0; i < this.layout[1].buju.length; i++) {
                  this.layout[1].buju[i].component =
                    this.componentlist[i].pathname;
                }
              }
              this.formList = this.layout[1].buju;
             // console.log(this.formList);
              this.$message.success("合成成功，请确认提交录入数据库");
            } else {
              this.$message.warning(
                "选取的组件个数小于布局版式个数,请根据布局板式个数选取组件个数"
              );
            }
            //console.log(this.layout)
          } else if (this.radio == 3) {
            if (this.componentlist.length >= 6) {
              for (var j = 0; j < this.componentlist.length; j++) {
                for (var i = 0; i < this.layout[2].buju.length; i++) {
                  this.layout[2].buju[i].component =
                    this.componentlist[i].pathname;
                }
              }
              this.formList = this.layout[2].buju;
             // console.log(this.formList);
              this.$message.success("合成成功，请确认提交录入数据库");
            } else {
              this.$message.warning(
                "选取的组件个数小于布局版式个数,请根据布局板式个数选取组件个数"
              );
            }
            // console.log(this.layout)
          } else if (this.radio == 4) {
            if (this.componentlist.length >= 9) {
              for (var j = 0; j < this.componentlist.length; j++) {
                for (var i = 0; i < this.layout[3].buju.length; i++) {
                  this.layout[3].buju[i].component =
                    this.componentlist[i].pathname;
                }
              }
              this.formList = this.layout[3].buju;
             // console.log(this.formList);
              this.$message.success("合成成功，请确认提交录入数据库");
            } else {
              this.$message.warning(
                "选取的组件个数小于布局版式个数,请根据布局板式个数选取组件个数"
              );
            }
            //console.log(this.layout)
          } else if (this.radio == 5) {
            if (this.componentlist.length >= 6) {
              for (var j = 0; j < this.componentlist.length; j++) {
                for (var i = 0; i < this.layout[4].buju.length; i++) {
                  this.layout[4].buju[i].component =
                    this.componentlist[i].pathname;
                }
              }
              this.formList = this.layout[4].buju;
              //console.log(this.formList);
              this.$message.success("合成成功，请确认提交录入数据库");
            } else {
              this.$message.warning(
                "选取的组件个数小于布局版式个数,请根据布局板式个数选取组件个数"
              );
            }
            // console.log(this.layout)
          } else if (this.radio == 6) {
            if (this.componentlist.length >= 6) {
              for (var j = 0; j < this.componentlist.length; j++) {
                for (var i = 0; i < this.layout[5].buju.length; i++) {
                  this.layout[5].buju[i].component =
                    this.componentlist[i].pathname;
                }
              }
              this.formList = this.layout[5].buju;
             // console.log(this.formList);
              this.$message.success("合成成功，请确认提交录入数据库");
            } else {
              this.$message.warning(
                "选取的组件个数小于布局版式个数,请根据布局板式个数选取组件个数"
              );
            }
          }
          //console.log(this.layout)
        } else {
          this.$message.warning("请选择布局版式");
        }
      } else {
        this.$message.warning("请设置页面名称");
      }
    },
    //选取的组件集合
    handleSelectionChange(val) {
      this.componentlist = val;
    },
    //提交数据
    submit() {
      let formData = {
        pageName: this.input,
        path: this.pathvalue,
        componentList: this.formList,
      };
      //console.log(formData);
    },
  },
};
</script>
<style>
.layout4 .app-container .app-container-in .app-main .app-main-in {
  position: relative;
  height: 100%;
  overflow: hidden;
  background: #f0f2f5;
}
</style>