<template>
  <el-container class="home">
    <!-- 顶部导航栏 -->
    <el-header class="header">
      <Select
        width="200"
        radius
        @change="testClick"
        :selectdata="dataSelect3"
        :placeholder="'请选择'"
      />
      <Button radius @click="createProject" type="primary" size="large" :text="'新建拓扑图'">primary</Button>
    </el-header>
    <!-- body部分 -->
    <el-container class="bodys">
      <!-- 左侧树状导航栏部分 -->
      <el-aside class="aside" width="200px">
        <leftAsideTree></leftAsideTree>
      </el-aside>
      <!-- 展示部分 -->
      <el-main class="main">
        <div class="main-head">
          <el-button-group>
            <el-button size="small">已发布</el-button>
            <el-button size="small">未发布</el-button>
          </el-button-group>
          <div class="head-right">
            <el-input size="medium" placeholder="请输入内容" v-model="input2"></el-input>
            <Dropdown class="Dropdown" v-model="selVal" :data="dataSelect">
              <span class="drop-text">{{selText}}</span>
            </Dropdown>
          </div>
        </div>
        <div class="main-body">
          <topoImageCard></topoImageCard>
          <topoImageCard></topoImageCard>
          <topoImageCard></topoImageCard>
          <topoImageCard></topoImageCard>
          <topoImageCard></topoImageCard>
          <topoImageCard></topoImageCard>
          <topoImageCard></topoImageCard>
          <topoImageCard></topoImageCard>
          <topoImageCard></topoImageCard>
          <topoImageCard></topoImageCard>
        </div>
      </el-main>
    </el-container>

    <!-- 弹框 -->
    <el-dialog class="create-dialog" title="新建拓扑图" :visible.sync="outerVisible">
      <el-dialog
        class="create-dialog-inner"
        width="30%"
        title="所属类别"
        :visible.sync="innerVisible"
        append-to-body
      >
        <div class="inner-dialog-body">
          <div class="left">1</div>
          <div class="right">2</div>
        </div>
      </el-dialog>
      <div class="dialog-bodys">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
          label-position="top"
        >
          <el-form-item label="所属类别" prop="region">
            <el-button @click="getprojectType">请选择所属类别</el-button>
          </el-form-item>
          <el-form-item label="活动名称" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="标签" prop="resource">
            <el-select
              v-model="value"
              multiple
              filterable
              allow-create
              default-first-option
              width="100%"
              placeholder="请选择文章标签"
            ></el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="outerVisible = false">取 消</el-button>
        <el-button type="primary" @click="innerVisible = true">确定</el-button>
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
import { Select, Button, Dropdown } from "meri-design";
import leftAsideTree from "@/components/homeView/leftAsideTree.vue";
import topoImageCard from "@/components/homeView/topoImageCard.vue";
export default {
  name: "home",
  data() {
    return {
      dataSelect3: [
        { id: "test1", name: "选择项", sub: "hello111" },
        { id: "test2", name: "单平米", sub: "hola111" },
        {
          id: "test3",
          name: "下级分项",
          sub: "bonjour",
          divider: true,
        },
        { id: "test4", name: "滑动平均滑动平均", sub: "hi" },
      ],
      selVal: "totalEnergy",
      selText: "总量",
      dataSelect: [
        { id: "totalEnergy", name: "总量" },
        { id: "singleParty", name: "单平米" },
        { id: "lowerLevel", name: "下级分项" },
        { id: "average", name: "滑动平均", disabled: true },
      ],
      input2: "",
      outerVisible: true,
      innerVisible: true,
      ruleForm: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        region: [
          { required: true, message: "请选择活动区域", trigger: "change" },
        ],
        date1: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
        date2: [
          {
            type: "date",
            required: true,
            message: "请选择时间",
            trigger: "change",
          },
        ],
        type: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个活动性质",
            trigger: "change",
          },
        ],
        resource: [
          { required: true, message: "请选择活动资源", trigger: "change" },
        ],
        desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }],
      },
      value: [],
    };
  },
  methods: {
    testClick(data) {
      console.log(data);
    },
    // 创建拓扑图
    createProject() {},
    // 获取所属类别
    getprojectType() {
      this.innerVisible = true;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
  components: { Select, Button, leftAsideTree, Dropdown, topoImageCard },
};
</script>
<style lang="less" scoped>
.home {
  width: 100%;
  height: 100%;
  .header {
    width: 100%;
    height: 60px;
    background: #f7f9fa;
    padding: 0 16px 0 16px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .bodys {
    width: 100%;
    height: 100%;
    .main {
      width: 100%;
      height: 100%;
      background: #fff;
      padding: 10px 20px;
      box-sizing: border-box;
      .main-head {
        width: 100%;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .head-right {
          display: flex;
          align-items: center;
          .Dropdown {
            min-width: 100px;
            margin-left: 20px;
            .drop-text {
              font-size: 14px;
              color: #1f2329;
              line-height: 16px;
            }
          }
        }
      }
      .main-body {
        display: flex;
        flex-wrap: wrap;
      }
    }
  }
  .create-dialog {
    .dialog-bodys {
      width: 367px;
      margin: 0 auto;
    }
  }
  .create-dialog-inner {
    .inner-dialog-body {
      width: 100%;
      display: flex;
      .left {
        flex: 1;
        border-right: 1px solid #ccc;
      }
    }
  }
}
</style>
