<template>
  <el-container class="home">
    <!-- 顶部导航栏 -->
    <el-header class="header">
      <Select width="200" radius @change="testClick" :selectdata="dataSelect3" :placeholder="'请选择'" />
      <Button radius @click="createProject" type="primary" :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">
          <div class="showType" v-show="!1">
            <el-radio-group v-model="isPub" size="small">
              <el-radio-button label="已发布">已发布</el-radio-button>
              <el-radio-button label="未发布">未发布</el-radio-button>
            </el-radio-group>
            <div class="head-right">
              <el-input placeholder="搜索" prefix-icon="el-icon-search" size="small" v-model="queryText">
              </el-input>
              <Dropdown class="Dropdown" v-model="selVal" :data="dataSelect">
                <span class="drop-text">{{selText}}</span>
              </Dropdown>
            </div>
          </div>
          <div class="showAction" v-show="1">
            <el-checkbox v-model="checkAll">全选</el-checkbox>
            <span class="sum">已选择<span style="color:#252b30">{{selectCard.length}}<span>项目</span>
                <el-button size="mini">移动到</el-button>
                <el-button size="mini">下载</el-button>
                <el-button size="mini">删除</el-button>
          </div>
        </div>
        <div class="main-body">
          <template v-for="t in cardList">
            <topoImageCard :data="t" :key="t.id"></topoImageCard>
          </template>
        </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 },
      ],
      queryText: "",
      isPub: "已发布", // 发布类型()
      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: [],
      cardList: [
        {
          id: 1,
          name: '中央供冷系统中央供冷系统中央供冷系统中央供冷系统',
          version: 'V1.2.2',
          putUser: '六千',
          updateTime: '2020-20-20 16:16:16',
          tagList: [
            { id: 1, name: '范德萨' },
            { id: 2, name: '范333德萨' },
            { id: 3, name: '范333德萨' }
          ],
          img: 'https://www.baidu.com/img/flexible/logo/pc/result.png',
        },
        {
          id: 2,
          name: '中央供冷系456',
          version: 'V1.2.2',
          putUser: '六千',
          updateTime: '2020-20-20 16:16:16',
          tagList: [
            { id: 1, name: '范德萨' },
            { id: 2, name: '范333德萨' },
            { id: 3, name: '范333德萨' }
          ],
          img: 'https://www.baidu.com/img/flexible/logo/pc/result.png',
        }
      ],
      checkAll: false,
      selectCard: [],
    };
  },
  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 {
        position: relative;
        width: 100%;
        margin-bottom: 10px;
        .showType {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          /deep/
            .el-radio-button__orig-radio:checked
            + .el-radio-button__inner {
            color: #0091ff;
            border-color: #0091ff;
            background: #e1f2ff;
          }
          .head-right {
            display: flex;
            align-items: center;
            .Dropdown {
              min-width: 100px;
              margin-left: 20px;
              .drop-text {
                font-size: 14px;
                color: #1f2329;
                line-height: 16px;
              }
            }
          }
        }
        .showAction {
          span.sum {
            border-left: 1px solid #ccc;
            margin: 0 8px;
            color: #778089;
            padding-left: 14px;
          }
        }
      }
      .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>
