<template>
  <el-dialog
    class="datav-add-dialog"
    style="overflow: hidden;"
    fullscreen
    destroy-on-close
    ref="datavAddDialog"
    :close-on-click-modal="false"
    :visible.sync="dialogVisible"
  >
    <el-container class="container">
      <el-header ref="header" class="container__header" height="48px">

          <div class="navbar-default box-shadow flex">
            <el-page-header @back="close">
              <template v-slot:content>添加大屏</template>
            </el-page-header>
          </div>

      </el-header>
    <el-container class="container__body">
      <el-main>
          <div class="fullheight app_center_container">
            <div>
              <div>
                <el-input
                  placeholder="请输入模板名称"
                  v-model="searchForm.appName"
                  @keyup.enter.native="search(1)"
                  class="input-search"
                  :clearable="true">
                  <el-button slot="append" icon="el-icon-search" @click="search(1)"></el-button>
                </el-input>
              </div>
              <el-row class="content">
                <el-col :span="4">
                  <el-card
                          shadow="hover"
                          class="card"
                          @click.native="add"
                          v-if="apps.length<24">
                    <i class="el-icon-circle-plus-outline" style="font-size: 100px"></i>
                  </el-card>
                </el-col>
                <el-col
                    :span="4"
                    v-for="app in apps"
                    :key="app.id">
                  <div class="card-item" :class="{ checked: app.checked }">
                    <div class="sticky" @click="itemClick(app, $event)">
                      <label class="card-checkbox">
                        <input type="checkbox" />
                        <span></span>
                      </label>
                    </div>
                    <el-card
                            shadow="hover"
                            class="card"
                            :body-style="{ padding: '0px' }">
                      <div class="card-background" :style="{background:app.iconColor?app.iconColor:'#1339E0'}">
                        <el-image class="app-image" :src="app.icon" v-if="app.icon && app.icon.indexOf('icon')<0"></el-image>
                        <i :class="app.icon?app.icon:'icon-hotent-H'" style="color:#FFFFFF;padding-top: 10px" v-else></i>
                      </div>

                      <span class="card-title">{{app.name}}</span>
                      <div class="card-item-actions">
                        <el-button round   class="actions__btn">管理</el-button>
                        <el-button round   class="actions__btn">标签</el-button>
                        <el-button round   class="actions__btn">权限</el-button>
                        <el-popconfirm title="确定删除" @onConfirm="confirm(app.id)" class="actions__btn confirm__btn">
                          <el-button slot="reference" round type="danger">删除</el-button>
                        </el-popconfirm>
                      </div>
                    </el-card>
                  </div>
                </el-col>
              </el-row>
              <el-pagination
                  background
                  layout="prev, pager, next"
                  :total="pageResult.total"
                  :page-size="pageResult.pageSize"
                  :current-page="pageResult.page"
                  class="pagination"
                  @current-change="currentChange">
              </el-pagination>
            </div>
          </div>
      </el-main>
      </el-container>

      <el-dialog
        title="新建大屏"
        :visible.sync="newDialogVisible"
        class="datavAdd"
        append-to-body
        width="40%"
        top="25vh"
        :close-on-click-modal="false">
        <div style="height:300px;padding-left: 20px ;">
            <el-form v-model="newDatav" data-vv-scope="datavForm">
              <ht-form-item label="大屏名称" label-width="100px" prop="name">
                <ht-input
                  v-model="newDatav.name"
                  autocomplete="off"
                  :validate="{required:true}"
                  placeholder="请输入大屏名称"
                  :maxlength="50"
                  :showWordLimit="true"
                ></ht-input>
              </ht-form-item>
              <ht-form-item label="大屏别名" label-width="100px" prop="name">
                <ht-input
                  v-model="newDatav.alias"
                  autocomplete="off"
                  :validate="{
                    required: true,
                    isExist: '${portal}/portal/sysIndexLayoutManage/sysIndexLayoutManage/v1/checkKey?key=',
                    regex: {
                      exp: '^[a-zA-Z][a-zA-Z0-9_]*$',
                      message: '只能输入字母、数字、下划线，且以字母开头'
                    }
                  }"
                  :maxlength="50"
                  :showWordLimit="true"
                  placeholder="请输入别名"
                ></ht-input>
              </ht-form-item>
              <ht-form-item label="布局类型" label-width="100px" style="width:100%;">
                  <el-radio-group v-model="newDatav.layoutType">
                    <el-radio-button label="0">管理端</el-radio-button>
                    <el-radio-button label="2">应用端</el-radio-button>
                  </el-radio-group>
              </ht-form-item>
              <ht-form-item label="大屏尺寸" label-width="100px" prop="memo" >
                <el-input type="number" v-model="newDatav.width" style="width:220px;">
                  <template slot="prepend">宽</template>
                  <template slot="append">px</template>
                </el-input>
                <el-input type="number" v-model="newDatav.height" style="width:220px;margin-left:5px;">
                  <template slot="prepend">高</template>
                  <template slot="append">px</template>
                </el-input>
              </ht-form-item>
              <ht-form-item label="布局描述" label-width="100px" prop="memo" >
                <ht-input
                  type="textarea"
                  :rows="3"
                  v-model="newDatav.memo"
                  autocomplete="off"
                  placeholder="请输入描述信息"
                  :maxlength="200"
                  :showWordLimit="true"
                ></ht-input>
              </ht-form-item>
            </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="newDialogVisible = false">取 消</el-button>
          <el-button
            type="primary"
            @click="addNew()">确 定</el-button>
            </span>
      </el-dialog>
    </el-container>
  </el-dialog>
</template>
<script>
import req from '@/request'
import {mapState} from 'vuex'
export default {
  name: "datav-add",
  components: {
  },
  data() {
    return {
      dialogVisible: false,
      newDialogVisible:false,
      apps:[],
      selectIdList: [],
      pageResult: {
        page: 1,
        pageSize: 15,
        total: 0
      },
      searchForm: {
        appName: "",
        isPublish: false,
        notPublish: false
      },
      tempDatav:{
        name:'',
        alias:'',
        layoutType:'2',
        width:1920,
        height:1080,
        memo:'',
      },
      newDatav:{}
    }
  },
  computed: mapState({
    uploadHeaders: function (mapState) {
      return {Authorization: 'Bearer ' + mapState.login.currentUser.token}
    },
  }),
  mounted() {
    this.$validator = this.$root.$validator
  },
  methods: {
    showDialog() {
      this.$set(this,'newDatav',JSON.parse(JSON.stringify(this.tempDatav)))
      this.dialogVisible = true;
    },
    close(){
      this.dialogVisible = false;
    },
    loadData(query){
      let loading = this.$loading({
        target: document.querySelector(".content")
      });
      let param = {
        pageBean: this.pageResult,
        querys: [],
        sorter:[{direction: 'ASC',property: 'sn_'}]
      }
      if (query) {
        param.querys = query;
      }
      portal.getSysAppList(param).then(data => {
        this.apps = data.rows;
        this.pageResult = {
          page: data.page,
          pageSize: data.pageSize,
          total: data.total
        }
      }).finally(() => {
        loading.close();
      })
    },
    add(){
      this.newDialogVisible = true;
    },
    addNew(){
      if(!this.newDatav.name){
        this.$message.warning("请输入大屏名称。");
        return ;
      }
      if(!this.newDatav.alias){
        this.$message.warning("请输入大屏别名。");
        return ;
      }
      this.newDialogVisible = false;
      this.dialogVisible = false;
      this.$emit('toDesignDatav',{type:'new',data:this.newDatav});
    },
    currentChange(page) {
      this.search(page);
    },
    itemClick(item,$event) {
      $event.preventDefault();
      if (this.selectIdList.includes(item.id)) {
        this.selectIdList.remove(item.id);
        this.$set(item,"checked",false);
      }else {
        this.selectIdList.push(item.id);
        this.$set(item,"checked",true);
      }
    },
  },
}
</script>

<style lang="scss" scoped>
@import '@/assets/css/element-variables.scss';
@import '@/assets/css/form-editor.scss';
.app_center_container{
    height: 100%;
    overflow: auto;
}
.container__body {
  position: relative;
  padding: 0 5px;
  margin-top: 1px;
  padding-left: 0;
}
.container >>> .el-header{
  padding: 0px;
}
.card {
  margin: 5px;
  min-height: 200px;
  text-align: center;
}
.card i {
  font-size: 60px;
  display: block;
  margin: 10px 0;
}
.card-item-actions {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        background: #fafafa;
        justify-content: center;
        padding: 10px 10px 0 10px;
        margin-top: 22px;
        .actions__btn{
            margin-bottom: 10px;
        }
        .confirm__btn{
            margin-left: 10px;
        }
    }
    .pagination {
        // position: absolute;
        // bottom: 0;
        margin-top: 20px;
    }
.datav-add-dialog >>> .el-dialog__header {
  display: none;
}
.datav-add-dialog >>> .el-dialog__body {
  padding: 0;
  height: 100%;
}
.navbar-default {
  height: 100%;
  background-image: none;
  background: #fff;
  border-radius: 0px;
  box-shadow: 0px 2px 5px rgba(86, 96, 117, 0.15);
  border-bottom: 1px solid #ededed;
  justify-content: space-between;
}
.navbar-default span {
  color: #666;
  font-size: 14px;
  line-height: 48px;
  font-weight: bold;
  margin-left: 20px;
}
.header {
  padding: 0;
  background: #fff;
  z-index: 7;
}
.card-title {
  font-weight: bold;
  font-size: 20px;
}
.card-background {
  width: 80px;
  height: 80px;
  margin: 10px auto;
  border-radius: 15px;
}
.image {
  width: 30px;
  height: 30px;
}
.app-image {
  width: 60px;
  height: 60px;
  margin: 10px;
}
.input-search {
  width: 400px;
  margin: 0px 12px 0 6px;
}
  .card-item {
    cursor: default;
    display: block;
    position: relative;
  }
  .sticky {
    width: 1px;
    height: 0px;
    position: absolute;
    top: 0;
    right: 5px;
    border-left: 40px solid #fff;
    border-top: 40px solid #ededed;
  }
  .card-checkbox {
    position: absolute;
    top: -35px;
    right: 0;
  }
.card-checkbox input[type="checkbox"] {
  opacity: 0;
}
.card-checkbox input[type="checkbox"] + span::after {
  opacity: 1;
  content: "";
  position: absolute;
  width: 6px;
  height: 11px;
  background: transparent;
  right: 7px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  -webkit-transform: rotate(35deg);
  -moz-transform: rotate(35deg);
  -o-transform: rotate(35deg);
  -ms-transform: rotate(35deg);
  transform: rotate(35deg);
}
.card-item.checked .el-card {
  outline: 1px solid #5492f5;
}
.card-item.checked .sticky {
  border-top-color: #5492f5;
}
.datavAdd >>> .el-dialog__body{
  padding: 5px 10px;
}
.form {
  padding: 0px 3px;
  height: 100%;
  overflow: hidden;
  .field__tabs {
    height: 100%;
    overflow: hidden;
    min-width: 300px;
    /deep/ .el-tabs__nav-scroll {
      padding: 10px 0 0 10px;
    }
    /deep/ .el-tabs__content {
      height: 100%;
      overflow-x: hidden;
      overflow-y: auto;
    }
    /deep/ .el-collapse-item__header {
      font-weight: bold;
      color: #999;
      padding-left: 10px;
    }
    /deep/ .el-tab-pane {
      height: 100%;
    }
    /deep/ .el-collapse-item__header:hover {
      color: $--color-primary;
    }
    /deep/ .el-collapse-item__content {
      padding: 0 10px 10px;
    }
    /deep/ .el-form-item--small.el-form-item {
      margin-bottom: 5px;
    }
    /deep/ .el-form-item {
      display: inline-block;
      margin-right: 10px;
      vertical-align: top;
    }
    /deep/ .el-form-item--small .el-form-item__label {
        line-height: 32px;
    }
    /deep/ .el-form-item__label {
        float: none;
        display: inline-block;
        width: 100px;
    }
    /deep/ .el-form--label-left .el-form-item__label {
        text-align: left;
    }
  }

  /deep/ .el-form-item__content {
    margin-left: 0px !important;
  }
  /deep/ .el-dialog__body {
    padding: 5px !important;
    color: #606266;
    font-size: 14px;
    word-break: break-all;
  }
  /deep/ .el-dialog__footer {
    padding: 10px !important;
    text-align: right;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  .form-editor-dialog >>> .el-dialog__body {
    padding: 0;
    height: 100%;
  }
  .el-collapse-item__header {
    background: #fcfcfc;
  } 
  .form-table {
    width: 320px;
  }
  >>> .el-input-group__prepend{
    padding: 0 10px;
  }
  >>> .el-input-group__append{
    padding: 0 10px;
  }
  >>> .el-collapse-item{
    max-height: 650px;
    overflow-y: auto;
    overflow-x: hidden;
  }

}
</style>