<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 ref="leftAsideTree" @changeNode="changeNode"></leftAsideTree>
      </el-aside>
      <!-- 展示部分 -->
      <el-main class="main">
        <div class="main-head">
          <div class="showType" v-show="!selectCard.length">
            <el-radio-group v-model="isPub" size="small" @change="changePub">
              <el-radio-button :label="1">已发布</el-radio-button>
              <el-radio-button :label="0">未发布</el-radio-button>
            </el-radio-group>
            <div class="head-right">
              <el-input placeholder="搜索" prefix-icon="el-icon-search" size="small" v-model="queryText" @change="changeQueryText">
              </el-input>
              <Dropdown class="Dropdown" v-model="selVal" :data="dataSelect">
                <span class="drop-text">{{selText}}</span>
              </Dropdown>
            </div>
          </div>
          <div class="showAction" v-show="selectCard.length">
            <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">全选</el-checkbox>
            <span style="margin-left: 10px;">|</span>
            <span class="sum">已选择<span style="color:#252b30;margin: 0 5px;">{{selectCard.length}}</span>项目</span>
            <el-button size="mini" @click="groupMove">移动到</el-button>
            <el-button size="mini" @click="groupDownload" v-if="isPub">下载</el-button>
            <el-button size="mini" @click="groupDelete">删除</el-button>
            <i class="el-icon-close" style="float:right;line-height: 28px;margin-right: 5px;" @click="handleCheckAllChange(false)"></i>
          </div>
        </div>
        <div class="main-body" :class="{'no-data': !cardList.length}">
          <template v-for="t in cardList">
            <topoImageCard :data="t" :key="t.id" @changeCheck="changeCheck" @rename="rename" @publishSuc="updateSuc" @moveTo="moveTo"
              @delete="deleteGraph"></topoImageCard>
          </template>
          <div v-if="!cardList.length" style="margin-top: 112px;">
            <img src="./../assets/images/no-data.png" alt="" style="width: 116px;height:116px;">
            <p style="font-size: 16px;margin-top: 15px;text-align:center;">暂无数据</p>
          </div>
        </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>

    <!-- 重命名 -->
    <rename ref="rename" @updateSuc="updateSuc"></rename>
    <!-- 移动到 -->
    <move ref="move" @moveSuc="moveSuc"></move>
    <!-- 删除二次确认 -->
    <deleteDialog ref="deleteDialog" @deleteSuc="deleteSuc"></deleteDialog>
  </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";
import { queryDraftsGraph, queryPubGraph } from "@/api/home"
import rename from "@/components/homeView/rename"
import move from "@/components/homeView/move"
import deleteDialog from "@/components/homeView/deleteDialog"
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: "lastUpdate", // 排序方式
      selText: "按最后修改", // 排序方式文字
      dataSelect: [
        { id: "lastUpdate", name: "按最后修改" },
        { id: "name", name: "按字母顺序" },
        { id: "createTime", name: "按创建时间" }
      ], // 排序选项
      queryText: "", // 搜索文字
      isPub: 1, // 发布类型()
      outerVisible: false,
      innerVisible: false,
      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: [], // 当前显示的卡片列表
      checkAll: false, // 全选
      selectCard: [], // 当前选中的卡片列表
      isIndeterminate: true, // 全选按钮
      curCategory: {}, // 当前选中的树节点
    };
  },
  mounted() {
  },
  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();
    },
    // 选项改变
    changeCheck(v) {
      const index = this.selectCard.indexOf(v);
      if (index > -1) {
        this.selectCard.splice(index, 1);
      } else {
        this.selectCard.push(v);
      }
    },
    // 全选按钮
    handleCheckAllChange(val) {
      this.cardList = this.cardList.map(t => {
        t.checked = val
        return t;
      })
      this.selectCard = val ? this.cardList.map(t => { t.checked = true; return t }) : [];
      this.isIndeterminate = false;
    },
    // 批量移动到
    groupMove() {
      this.$refs.move.showDialog(this.selectCard)
    },
    // 下载
    groupDownload() {
      console.log('download');
    },
    // 删除
    groupDelete() {
      this.$refs.deleteDialog.showDialog(this.selectCard);
    },
    // 重命名
    rename(data) {
      this.$refs.rename.showDialog(data)
    },
    // 移动到
    moveTo(data) {
      this.$refs.move.showDialog([data])
    },
    // 单独删除
    deleteGraph(data) {
      this.$refs.deleteDialog.showDialog([data]);
    },
    // 更新成功-发布成功
    updateSuc() {
      this.queryGraph()
    },
    // 移动成功
    moveSuc() {
      this.queryGraph()
      this.$refs.leftAsideTree.getCategoryGraph();
    },
    // 删除成功
    deleteSuc() {
      this.queryGraph()
      this.$refs.leftAsideTree.getCategoryGraph();
    },
    // 选中节点变化
    changeNode(data) {
      this.curCategory = data;
      this.queryGraph()
    },
    // 发布修改
    changePub() {
      this.queryGraph()
    },
    // 输入内容变化
    changeQueryText() {
      this.queryGraph()
    },
    /////////////////接口
    // 查询图形信息
    queryGraph() {
      if (!this.curCategory.code) {
        return
      }
      this.selectCard = [];
      const pa = {
        Filters: `categoryId="${this.curCategory.code}"`,
        Orders: `${this.selVal} desc`
      }
      if (this.queryText.trim()) {
        pa.Filters += `;name contain "${this.queryText.trim()}"`
      }
      if (this.isPub) {
        queryPubGraph(pa).then(res => {
          this.cardList = res.content.map(t => {
            t.checked = false;
            return t;
          });
          this.queryText = '';
        })
      } else {
        pa.Filters += ";state=1"
        queryDraftsGraph(pa).then(res => {
          this.cardList = res.content.map(t => {
            t.checked = false;
            return t;
          });
          this.queryText = '';
        })
      }
    }
  },
  components: { Select, Button, leftAsideTree, Dropdown, topoImageCard, rename, move, deleteDialog },
  watch: {
    // 排序方式修改
    selVal(n, o) {
      if (n === o) return;
      this.selText = this.dataSelect.find(d => d.id === n).name;
      this.selectCard = [];
      this.queryGraph()
    }
  }
};
</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: 5px 20px;
      box-sizing: border-box;
      .main-head {
        position: relative;
        width: 100%;
        height: 46px;
        margin-bottom: 5px;
        .showType {
          width: 100%;
          padding: 7px 0;
          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 {
          background: #e1f2ff;
          border-radius: 4px;
          border: 1px solid #82c7fc;
          padding: 8px;
          span.sum {
            margin: 0 10px;
            color: #778089;
          }
        }
      }
      .main-body {
        display: flex;
        flex-wrap: wrap;
        height: calc(100% - 51px);
        &.no-data {
          justify-content: center;
          // align-items: center;
        }
      }
    }
  }
  .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>
