<template>
  <div class="fullheight app_center_container">
    <el-tabs
      tab-position="left"
      class="fullheight big-screen-tabs"
      v-model="activeName"
      @tab-click="handleClick"
    >
      <el-tab-pane name="dataList" label="大屏管理">
        <!-- 顶部搜索及按钮 -->
        <div class="search-bar">
          <el-input
            placeholder="请输入大屏名称"
            v-model="searchForm.datavName"
            @keyup.enter.native="search(1)"
            class="input-search"
            :clearable="true"
            size="small"
          >
            <el-button
              slot="append"
              type="primary"
              @click="search(1)"
              class="big-screen-search"
              >搜索</el-button
            >
          </el-input>
          <!-- <el-checkbox-group
            v-model="searchForm.stateArr"
            size="medium"
            @change="search(1)"
          >
            <el-checkbox-button label="1">已启用</el-checkbox-button>
            <el-checkbox-button label="0">未启用</el-checkbox-button>
          </el-checkbox-group> -->
          <el-divider direction="vertical"></el-divider>
          <el-button
            size="small"
            @click="uploadDialogVisible = true"
            icon="el-icon-back"
            >导入</el-button
          >
          <el-button
            size="small"
            @click="handleExport"
            :disabled="isDisabled"
            icon="el-icon-right"
            >导出</el-button
          >
        </div>
        <!-- 大屏项 -->
        <div class="big-screen-scroll">
          <ul class="big-screen-list">
            <li class="big-screen-list-add">
              <i
                class="el-icon-circle-plus-outline"
                @click="add(0)"
                v-if="datavLists.length < 24"
              ></i>
            </li>
            <li v-for="(row, index) in datavLists" :key="index">
              <div class="sticky" @click="itemClick(row, $event)">
                <label class="card-checkbox" :class="{selected: row.checked}">
                </label>
              </div>
              <div class="row-cover">
                <div
                  class="fullheight"
                  v-on:mouseenter="showCoverDialog(index)"
                  v-on:mouseleave="hideCoverDialog(index)"
                >
                  <datav-cover
                    class="fullheight"
                    :fileId="row.screenCaptureId"
                    :key="row.screenCaptureId ? row.screenCaptureId : row.id"
                  />
                  <!--操作蒙层-->
                  <!--  <div
                    class="handleDialog"
                    v-if="currentShow && index == currentIndex"
                  >
                    <el-button
                      class="cover-button"
                      @click="design(row.id)"
                      type="primary"
                      size="big"
                      icon="el-icon-edit"
                      >编辑</el-button
                    >
                    <el-button
                      class="cover-button"
                      @click="preview(row)"
                      type="primary"
                      size="big"
                      icon="el-icon-view"
                      >预览</el-button
                    >
                  </div> -->
                </div>
              </div>
              <div class="big-screen-list-footer">
                <div class="big-screen-list-footer-title">
                  <span class="opt-icon-title">{{ row.name }}</span>
                  <!-- <i
                    class="el-icon-s-platform opt-icon-title"
                    v-if="row.layoutType == 0"
                    :title="row.name"
                  >
                    {{ row.name }}</i
                  >
                  <i
                    class="el-icon-mobile-phone opt-icon-title"
                    v-if="row.layoutType == 1"
                    :title="row.name"
                  >
                    {{ row.name }}</i
                  >
                  <i
                    class="el-icon-monitor opt-icon-title"
                    v-if="row.layoutType == 2"
                    :title="row.name"
                  >
                    {{ row.name }}</i
                  > -->
                </div>
                <div class="big-screen-list-footer-right">
                  <div @click="preview(row)">
                    <span>预览</span>
                  </div>
                  <div @click="design(row)">
                    <span>编辑</span>
                  </div>
                  <div @click="layoutAuth(row)">
                    <span>授权</span>
                  </div>
                  <div>
                    <el-dropdown trigger="click" @command="handleCommand">
                      <span class="el-dropdown-link send-text"> 发布 </span>
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item
                          :disabled="row.pubMenuCountFront > 0"
                          :command="{row: row, command: 'releaseFront', index: index}"
                          >发布为前端菜单</el-dropdown-item
                        >
                        <el-dropdown-item
                          :disabled="row.pubMenuCountManage > 0"
                          :command="{row: row, command: 'releaseManage', index: index}"
                          >发布为后端菜单</el-dropdown-item
                        >
                        <el-dropdown-item
                          :command="{row: row, command: 'saveTemplet'}"
                          >另存为模板</el-dropdown-item
                        >
                      </el-dropdown-menu>
                    </el-dropdown>
                  </div>
                  <div @click="remove(row)">
                    <span style="color: #f56c6c">删除</span>
                  </div>
                  <!--<div>
                    <el-radio-group
                      v-model="row.enable"
                      size="mini"
                      class="big-screen-radio"
                      @change="enable(row, row.enable)"
                    >
                      <el-radio-button :label="1">已启用</el-radio-button>
                      <el-radio-button :label="0">未启用</el-radio-button>
                    </el-radio-group>
                  </div> -->
                  <!-- <i
                    class="el-icon-s-claim opt-icon"
                    v-if="row.enable === 0"
                    title="启用"
                    @click="enable(row, 1)"
                  ></i>
                  <i
                    class="el-icon-s-release opt-icon"
                    v-if="row.enable === 1"
                    title="禁用"
                    @click="enable(row, 0)"
                  ></i>
                 
                  <i
                    class="el-icon-delete opt-icon"
                    title="删除"
                    @click="remove(row)"
                  ></i> -->
                </div>
              </div>
            </li>
            <div style="width: 420px; height: 0"></div>
            <div style="width: 420px; height: 0"></div>
          </ul>
          <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>
      </el-tab-pane>
      <el-tab-pane name="templateList" label="模板库">
        <div class="search-bar">
          <el-input
            placeholder="请输入模板名称"
            v-model="searchForm.datavName"
            @keyup.enter.native="search(1)"
            class="input-search"
            :clearable="true"
            size="small"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="search(1)"
            ></el-button>
          </el-input>
        </div>
        <!-- 大屏项 -->
        <div class="big-screen-scroll">
          <ul class="big-screen-list">
            <li class="big-screen-list-add">
              <i
                class="el-icon-circle-plus-outline"
                @click="add(1)"
                v-if="datavTemplates.length < 24"
              ></i>
            </li>
            <li v-for="(row, index) in datavTemplates" :key="row.id">
              <div class="sticky" @click="itemClick(row, $event)">
                <label class="card-checkbox" :class="{selected: row.checked}">
                </label>
              </div>
              <div class="row-cover">
                <div
                  class="fullheight"
                  v-on:mouseenter="showCoverDialog(index)"
                  v-on:mouseleave="hideCoverDialog(index)"
                >
                  <datav-cover
                    class="fullheight"
                    :fileId="row.screenCaptureId"
                    :key="row.screenCaptureId ? row.screenCaptureId : row.id"
                  />
                  <!--操作蒙层-->
                  <div
                    class="handleDialog"
                    v-if="currentShow && index == currentIndex"
                  >
                    <el-button
                      class="cover-button"
                      @click="design(row)"
                      type="primary"
                      size="big"
                      icon="el-icon-edit"
                      >编辑</el-button
                    >
                    <el-button
                      class="cover-button"
                      @click="preview(row)"
                      type="primary"
                      size="big"
                      icon="el-icon-view"
                      >预览</el-button
                    >
                  </div>
                </div>
              </div>
              <div class="big-screen-list-footer">
                <div class="big-screen-list-footer-title">
                  <i
                    class="el-icon-s-platform opt-icon-title"
                    v-if="row.layoutType == 0"
                    :title="row.name"
                  >
                    {{ row.name }}</i
                  >
                  <i
                    class="el-icon-mobile-phone opt-icon-title"
                    v-if="row.layoutType == 1"
                    :title="row.name"
                  >
                    {{ row.name }}</i
                  >
                  <i
                    class="el-icon-monitor opt-icon-title"
                    v-if="row.layoutType == 2"
                    :title="row.name"
                  >
                    {{ row.name }}</i
                  >
                </div>
                <div class="big-screen-list-footer-right">
                  <div @click="design(row)">
                    <span>编辑</span>
                  </div>
                  <div @click="layoutAuth(row)">
                    <span>授权</span>
                  </div>
                  <div @click="apply(row.designHtml)">
                    <span>大屏构建</span>
                  </div>
                  <div @click="remove(row)">
                    <span style="color: #f56c6c">删除</span>
                  </div>
                </div>
              </div>
            </li>
            <div style="width: 420px; height: 0"></div>
            <div style="width: 420px; height: 0"></div>
          </ul>
          <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>
      </el-tab-pane>
      <el-tab-pane name="unitList" label="组件库">
        <div class="search-bar">
          <el-input
            placeholder="请输入组件名称"
            v-model="searchForm.datavName"
            @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>
          <el-checkbox-group
            v-model="searchForm.stateArr"
            size="medium"
            @change="search(1)"
          >
            <el-checkbox-button label="1">已启用</el-checkbox-button>
            <el-checkbox-button label="0">未启用</el-checkbox-button>
          </el-checkbox-group>
        </div>
        <div class="big-screen-scroll">
          <ul class="big-screen-list">
            <li class="big-screen-list-add">
              <i
                class="el-icon-circle-plus-outline"
                @click="add(2)"
                v-if="datavLists.length < 24"
              ></i>
            </li>
            <li v-for="(row, index) in datavUnits" :key="index">
              <div class="sticky" @click="itemClick(row, $event)">
                <label class="card-checkbox" :class="{selected: row.checked}">
                </label>
              </div>
              <div class="row-cover">
                <div
                  class="fullheight"
                  v-on:mouseenter="showCoverDialog(index)"
                  v-on:mouseleave="hideCoverDialog(index)"
                >
                  <datav-cover
                    class="fullheight"
                    :fileId="row.screenCaptureId"
                    :key="row.screenCaptureId ? row.screenCaptureId : row.id"
                  />
                  <!--操作蒙层-->
                  <div
                    class="handleDialog"
                    v-if="currentShow && index == currentIndex"
                  >
                    <el-button
                      class="cover-button"
                      @click="design(row)"
                      type="primary"
                      size="big"
                      icon="el-icon-edit"
                      >编辑</el-button
                    >
                    <el-button
                      class="cover-button"
                      @click="preview(row)"
                      type="primary"
                      size="big"
                      icon="el-icon-view"
                      >预览</el-button
                    >
                  </div>
                </div>
              </div>
              <div class="big-screen-list-footer">
                <div class="big-screen-list-footer-title">
                  <i
                    class="el-icon-s-platform opt-icon-title"
                    v-if="row.layoutType == 0"
                    :title="row.name"
                  >
                    {{ row.name }}</i
                  >
                  <i
                    class="el-icon-mobile-phone opt-icon-title"
                    v-if="row.layoutType == 1"
                    :title="row.name"
                  >
                    {{ row.name }}</i
                  >
                  <i
                    class="el-icon-monitor opt-icon-title"
                    v-if="row.layoutType == 2"
                    :title="row.name"
                  >
                    {{ row.name }}</i
                  >
                </div>
                <div class="big-screen-list-footer-right">
                  <div @click="design(row)">
                    <span>编辑</span>
                  </div>
                  <div @click="layoutAuth(row)">
                    <span>授权</span>
                  </div>
                  <div @click="remove(row)">
                    <span style="color: #f56c6c">删除</span>
                  </div>
                  <div>
                    <el-radio-group
                      v-model="row.enable"
                      size="mini"
                      class="big-screen-radio"
                      @change="enable(row, row.enable)"
                    >
                      <el-radio-button :label="1">已启用</el-radio-button>
                      <el-radio-button :label="0">未启用</el-radio-button>
                    </el-radio-group>
                  </div>
                </div>
              </div>
            </li>
            <div style="width: 420px; height: 0"></div>
            <div style="width: 420px; height: 0"></div>
          </ul>
          <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>

          <!-- <el-row class="content">
            <el-col :span="4">
              <el-card
                shadow="hover"
                class="card"
                @click.native="add(2)"
                v-if="datavUnits.length < 24"
              >
                <i
                  class="el-icon-circle-plus-outline"
                  style="font-size: 100px"
                ></i>
              </el-card>
            </el-col>
            <el-col :span="4" v-for="(row, index) in datavUnits" :key="row.id">
              <div class="card-item" :class="{checked: row.checked}">
                <div class="sticky" @click="itemClick(row, $event)">
                  <label class="card-checkbox">
                    <input type="checkbox" />
                    <span></span>
                  </label>
                </div>
                <el-card
                  shadow="hover"
                  class="card"
                  :body-style="{padding: '0px'}"
                >
                  <el-row class="row-cover">
                    <div
                      class="fullheight"
                      v-on:mouseenter="showCoverDialog(index)"
                      v-on:mouseleave="hideCoverDialog(index)"
                    >
                      <datav-cover
                        class="fullheight"
                        :fileId="row.screenCaptureId"
                        :key="
                          row.screenCaptureId ? row.screenCaptureId : row.id
                        "
                      />
                
                      <div
                        class="handleDialog"
                        v-if="currentShow && index == currentIndex"
                      >
                        <el-button
                          class="cover-button"
                          @click="design(row.id)"
                          type="primary"
                          >编 辑</el-button
                        >
                        <el-button
                          class="cover-button"
                          @click="preview(row)"
                          type="primary"
                          >预览</el-button
                        >
                      </div>
                    </div>
                  </el-row>
                  <el-row class="card-item-actions">
                    <el-col :span="12" class="col-title"
                      ><span class="card-title">
                        <i
                          class="el-icon-s-platform opt-icon-title"
                          v-if="row.layoutType == 0"
                          :title="row.name"
                        >
                          {{ row.name }}</i
                        >
                        <i
                          class="el-icon-mobile-phone opt-icon-title"
                          v-if="row.layoutType == 1"
                          :title="row.name"
                        >
                          {{ row.name }}</i
                        >
                        <i
                          class="el-icon-monitor opt-icon-title"
                          v-if="row.layoutType == 2"
                          :title="row.name"
                        >
                          {{ row.name }}</i
                        >
                      </span></el-col
                    >
                    <el-col :span="12">
                      <i
                        class="el-icon-edit opt-icon"
                        title="编辑"
                        @click="design(row.id)"
                      ></i>
                      <i
                        class="el-icon-user-solid opt-icon"
                        title="授权"
                        @click="layoutAuth(row)"
                      ></i>
                      <i
                        class="el-icon-delete opt-icon"
                        title="删除"
                        @click="remove(row)"
                      ></i>
                    </el-col>
                  </el-row>
                </el-card>
              </div>
            </el-col>
          </el-row> -->
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-dialog
      title="上传文件"
      :visible="uploadDialogVisible"
      :before-close="beforeClose"
      name="uploadDialog"
      width="40%"
      top="30vh"
      custom-class="upload-dialog"
    >
      <el-upload
        :action="uploadUrl"
        :http-request="handleImport"
        accept=".zip"
        :file-list="fileList"
        :limit="1"
        :on-exceed="onExceed"
        :auto-upload="false"
        ref="elUpload"
        class="upload-dialog__content"
      >
        <el-button size="small" icon="el-icon-upload">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">只能上传zip文件</div>
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="uploadSubmit">上传</el-button>
        <el-button type="default" @click="beforeClose">取消</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :title="'新建' + dialogName[this.activeName]"
      :visible.sync="newDialogVisible"
      class="datavAdd"
      append-to-body
      width="40%"
      top="25vh"
      :close-on-click-modal="false"
    >
      <div
        :style="{
          minHeight: addType == 'unit' ? '200px' : '280px',
          paddingLeft: '20px'
        }"
      >
        <el-form v-model="newDatav" data-vv-scope="datavForm">
          <ht-form-item
            :label="dialogName[this.activeName] + '名称'"
            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="dialogName[this.activeName] + '别名'"
            label-width="100px"
            prop="name"
          >
            <ht-input
              v-model="newDatav.alias"
              autocomplete="off"
              v-pinyin="newDatav.name"
              :validate="{
                required: true,
                regex: {
                  exp: '^[a-zA-Z][a-zA-Z0-9_]*$',
                  message: '只能输入字母、数字、下划线，且以字母开头'
                }
              }"
              :maxlength="50"
              :showWordLimit="true"
              placeholder="请输入别名"
            ></ht-input>
          </ht-form-item>
          <!-- <ht-form-item
            label="布局类型"
            v-if="addType != 'unit'"
            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-button :label="1">移动端</el-radio-button>
            </el-radio-group>
          </ht-form-item> -->
          <ht-form-item label="大屏尺寸" label-width="100px" prop="memo">
            <el-input
              type="number"
              :disabled="isDisable"
              v-model="newDatav.width"
              style="width: 220px"
              :min="1"
            >
              <template slot="prepend">宽</template>
              <template slot="append">px</template>
            </el-input>
            <el-input
              type="number"
              :disabled="isDisable"
              v-model="newDatav.height"
              style="width: 220px; margin-left: 5px"
              :min="1"
            >
              <template slot="prepend">高</template>
              <template slot="append">px</template>
            </el-input>
          </ht-form-item>
          <ht-form-item
            :label="dialogName[this.activeName] + '描述'"
            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-dialog
      title="发布模板"
      :visible.sync="releaseDialogVisible"
      class="datavAdd"
      append-to-body
      width="40%"
      top="25vh"
      :close-on-click-modal="false"
    >
      <div style="height:'280px',paddingLeft: '20px'">
        <el-form v-model="releaseDatav" data-vv-scope="releaseDatavForm">
          <ht-form-item label="模板名称" label-width="100px" prop="name">
            <ht-input
              v-model="releaseDatav.name"
              autocomplete="off"
              :validate="{required: true}"
              placeholder="请输入名称"
              :maxlength="50"
              :showWordLimit="true"
            ></ht-input>
          </ht-form-item>
          <ht-form-item label="模板别名" label-width="100px" prop="alias">
            <ht-input
              v-model="releaseDatav.alias"
              autocomplete="off"
              v-pinyin="releaseDatav.name"
              :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="模板类型"
            v-if="addType != 'unit'"
            label-width="100px"
            style="width: 100%"
          >
            <el-radio-group :disabled="true" v-model="releaseDatav.layoutType">
              <el-radio-button :label="0">管理端</el-radio-button>
              <el-radio-button :label="2">应用端</el-radio-button>
              <el-radio-button :label="1">移动端</el-radio-button>
            </el-radio-group>
          </ht-form-item>
          <ht-form-item label="大屏尺寸" label-width="100px" prop="width">
            <el-input
              type="number"
              :disabled="true"
              v-model="releaseDatav.width"
              style="width: 220px"
            >
              <template slot="prepend">宽</template>
              <template slot="append">px</template>
            </el-input>
            <el-input
              type="number"
              :disabled="true"
              v-model="releaseDatav.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="releaseDatav.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="releaseDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="releaseNew()">确 定</el-button>
      </span>
    </el-dialog>
    <eip-auth-dialog @onConfirm="layoutAuthConfirm" ref="layoutAuth" />
    <DatavDesignerDialog ref="datavDialog" @close="designClose" @refresh="toLoadData" />

    <el-dialog
      title="温馨提示"
      :visible="myDialogVisible"
      :before-close="beforeClose2"
      name="myDialogVisible"
      width="30%"
      custom-class="upload-dialog"
      top="30vh"
    >
      <span>部分大屏已存在，请确认重复项的导入操作！</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="default" @click="beforeClose2">取消</el-button>
        <el-button type="primary" @click="confirmSubmit('jump')"
          >跳过重复项</el-button
        >
        <el-button type="primary" @click="confirmSubmit('cover')"
          >覆盖更新</el-button
        >
      </span>
    </el-dialog>
    <datav-add-to-menu
      ref="datavAddToMenu"
      name="datavAddToMenu"
      :alias="layoutObj.alias"
      :isFront="isFront"
      :authorizeId="layoutObj.authorizeId"
      append-to-body
      @confirmAddToMenu="confirmAddToMenu"
    />
  </div>
</template>

<script>
import {Message} from 'element-ui'
import utils from '@/hotent-ui-util.js'
import portal from '../../api/portal'
import req from '@/request.js'
const DatavDesignerDialog = () =>
  import('@/components/portal/DatavDesignerDialog.vue')
const eipAuthDialog = () => import('@/components/dialog/EipAuthDialog.vue')
const DatavCover = () => import('@/components/portal/datav/DatavCover.vue')
const DatavAddToMenu = () => import('@/components/portal/DatavAddToMenu.vue')
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import {mapState} from 'vuex'
export default {
  name: 'DatavManager',
  components: {
    DatavDesignerDialog,
    eipAuthDialog,
    DatavCover,
    DatavAddToMenu
  },
  data() {
    return {
      activeName: 'dataList',
      datavLists: [],
      datavTemplates: [],
      datavUnits: [],
      pageResult: {
        page: 1,
        pageSize: 15,
        total: 0
      },
      dialogVisible: false,
      uploadDialogVisible: false,
      newDialogVisible: false,
      releaseDialogVisible: false,
      dialogName: {
        dataList: '大屏',
        templateList: '模板',
        unitList: '组件'
      },
      selectIdList: [],
      fileList: [],
      uploadUrl: '',
      searchForm: {
        datavName: '',
        enable: false,
        disable: false,
        stateArr: [] // 启用 禁用
      },
      tempDatav: {
        name: '',
        alias: '',
        layoutType: 2,
        width: 1920,
        height: 1080,
        memo: ''
      },
      newDatav: {},
      releaseDatav: {
        memo: ''
      },
      isDisable: false,
      addType: '',
      currentTemplate: null,
      currentIndex: 0,
      currentShow: false,
      myDialogVisible: false,
      uploadAddress: '',
      layoutObj: {},
      isDisabled: true,
      isFront:false,
      curRow:{},
    }
  },
  computed: mapState({
    uploadHeaders: function(mapState) {
      return {Authorization: 'Bearer ' + mapState.login.currentUser.token}
    }
  }),
  watch: {
    selectIdList: {
      handler(val) {
        this.isDisabled = val.length < 1 ? true : false
      },
      deep: true
    }
  },
  created() {
    this.toLoadData()
  },
  methods: {
    handleCommand(params) {
      var curRow = params.row
      switch (params.command) {
        case 'releaseManage':
          this.addToMenu('manage', curRow)
          break
        case 'releaseFront':
          this.addToMenu('front', curRow)
          break
        case 'saveTemplet':
          this.release(curRow)
          break
      }
    },
    addToMenu(type, curRow) {
      this.isFront = type === 'front'
      this.layoutObj.alias = curRow.alias
      this.curRow = curRow
      this.$refs.datavAddToMenu.showDialog(type, curRow.alias,'',curRow.id)
    },
    confirmAddToMenu(isFront){
      if(!this.curRow){
        return
      }
      this.curRow.pubMenuCount+=1
      if(isFront){
        this.curRow.pubMenuCountFront = 1
      } else {
        this.curRow.pubMenuCountManage = 1
      }
    },
    handleClick(arg) {
      this.toLoadData(arg.name)
    },
    toLoadData(type) {
      if (!type) {
        type = this.activeName
      }
      let query = []
      switch (type) {
        case 'dataList':
          query.push({
            property: 'type_',
            value: 'datav',
            group: 'type',
            operation: 'EQUAL',
            relation: 'AND'
          })
          break
        case 'templateList':
          query.push({
            property: 'type_',
            value: 'template',
            group: 'type',
            operation: 'EQUAL',
            relation: 'AND'
          })
          break
        case 'unitList':
          query.push({
            property: 'type_',
            value: 'unit',
            group: 'type',
            operation: 'EQUAL',
            relation: 'AND'
          })
          break
      }
      this.loadData(query)
    },
    loadData(query) {
      let loading = this.$loading({
        target: document.querySelector('.content')
      })
      let param = {
        pageBean: this.pageResult,
        querys: [],
        sorter: [{direction: 'DESC', property: 'PORTAL_SYS_LAYOUT_MANAGE.CREATE_TIME_'}]
      }
      if (query) {
        param.querys = query
      }
      let _this = this
      portal
        .getLayoutManagerPage(param)
        .then(data => {
          switch (_this.activeName) {
            case 'dataList':
              _this.datavLists = data.rows
              break
            case 'templateList':
              _this.datavTemplates = data.rows
              break
            case 'unitList':
              _this.datavUnits = data.rows
              break
          }
          _this.pageResult = {
            page: data.page,
            pageSize: data.pageSize,
            total: data.total
          }
        })
        .finally(() => {
          loading.close()
        })
    },
    preview(row) {
      let previewKey =
        Date.parse(new Date()) + '_' + Math.ceil(Math.random() * 99999)
      const designHtml = Base64.decode(row.designHtml)
      sessionStorage.setItem(previewKey, designHtml)
      let routeData = this.$router.resolve({
        name: 'datavPreview',
        query: {key: previewKey, single: true}
      })
      window.open(routeData.href, '_blank')
    },
    enable(row, enable) {
      let typeName = row.type == 'unit' ? '组件' : '大屏'
      this.$confirm(
        `确定${enable == 1 ? '启用' : '停用'}该${typeName}吗?`,
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(() => {
          portal.setlayoutMngEnable(row.id, enable).then(data => {
            if (data.state) {
              this.$message({message: data.message, type: 'success'})
              this.toLoadData()
            } else {
              this.$message({message: data.message, type: 'error'})
            }
          })
        })
        .catch(() => {
          row.enable = enable === 1 ? 0 : 1
        })
    },
    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)
      }
    },
    showCoverDialog(index) {
      this.currentIndex = index
      this.currentShow = true
    },
    hideCoverDialog() {
      this.currentShow = false
    },
    add(type) {
      this.newDatav = JSON.parse(JSON.stringify(this.tempDatav))
      this.addType = 'new'
      if (type == 1) {
        //添加大屏模板
        this.addType = 'template'
        this.$set(this.newDatav, 'type', 'template')
      } else if (type == 2) {
        this.$set(this.newDatav, 'type', 'unit')
        this.addType = 'unit'
      }
      this.currentTemplate = null
      this.isDisable = false
      this.newDialogVisible = true
    },
    apply(designHtml) {
      const designJson = JSON.parse(Base64.decode(designHtml))
      this.currentTemplate = designJson
      this.newDatav = JSON.parse(JSON.stringify(this.tempDatav))
      this.newDatav.width = designJson.config.width
      this.newDatav.height = designJson.config.height
      this.newDialogVisible = true
      this.isDisable = true
      this.addType = 'copyTemplate'
    },
    checkAlias(alias) {
      return new Promise((resolve, reject) => {
        this.$http
          .get(
            '${portal}' +
              `/portal/sysIndexLayoutManage/sysIndexLayoutManage/v1/checkKey?key=${alias}`
          )
          .then(resp => {
            if (resp.data) {
              resolve(false)
            } else {
              resolve(true)
            }
          })
          .catch(() => {
            resolve(false)
          })
      })
      //
    },
    addNew() {
      let patt = new RegExp('^[1-9]{1}[0-9]*$')
      if (!this.newDatav.name) {
        this.$message.warning(
          this.addType != 'unit' ? '请输入大屏名称。' : '请输入组件名称'
        )
        return
      }
      if (!this.newDatav.alias) {
        this.$message.warning(
          this.addType != 'unit' ? '请输入大屏别名。' : '请输入组件别名'
        )
        return
      }
      if (!this.newDatav.width || !this.newDatav.height) {
        this.$message.warning('请输入大屏尺寸！')
        return
      }
      if (!patt.test(this.newDatav.width) || !patt.test(this.newDatav.height)) {
        this.$message.warning('大屏尺寸只能输入大于0的正整数！')
        return
      }
      this.checkAlias(this.newDatav.alias).then(res => {
        if (!res) {
          this.$message.warning('大屏别名已存在！')
          return
        } else {
          utils
            .validateForm(this, 'datavForm')
            .then(() => {
              this.newDialogVisible = false
              this.$refs.datavDialog.showNewDialog({
                type: this.addType,
                data: JSON.parse(JSON.stringify(this.newDatav)),
                config: this.currentTemplate
                  ? JSON.parse(JSON.stringify(this.currentTemplate))
                  : null
              })
            })
            .catch(reason => {
              this.$message.warning(
                '表单校验未通过，请检查表单数据之后重新提交！'
              )
            })
        }
      })
    },
    release(row) {
      this.releaseDatav = {...this.releaseDatav, ...row}
      const designJson = JSON.parse(Base64.decode(row.designHtml))
      this.releaseDatav.width = designJson.config.width
      this.releaseDatav.height = designJson.config.height
      this.releaseDatav.id = ''
      this.releaseDatav.name = ''
      this.releaseDatav.alias = ''
      this.releaseDatav.type = 'template'
      this.releaseDatav.createTime = ''
      this.releaseDatav.enable = 1
      this.releaseDatav.memo = ''
      this.releaseDialogVisible = true
    },
    releaseNew() {
      if (!this.releaseDatav.name) {
        this.$message.warning('请输入模板名称')
        return
      }
      if (!this.releaseDatav.alias) {
        this.$message.warning('请输入模板别名')
        return
      }
      let saveData = {};
      Object.assign(saveData, this.releaseDatav);
      delete saveData.width;
      delete saveData.height;
      req
        .post(
          window.context.portal +
            '/portal/sysIndexLayoutManage/sysIndexLayoutManage/v1/saveLayout',
            saveData
        )
        .then(response => {
          if (response.data.state) {
            this.$message.success('发布模板成功。')
            this.releaseDialogVisible = false
          } else {
            this.$message.error(response.data.message)
          }
        })
    },
    handleExport() {
      if (this.selectIdList.length === 0) {
        this.$message.warning('请选择至少一项记录')
        return
      }
      this.$http.request({
        url: `${window.context.portal}/portal/sysIndexLayoutManage/sysIndexLayoutManage/v1/exportDefaultLayout?isDefault=false`,
        method: 'POST',
        data: this.selectIdList,
        responseType: 'arraybuffer'
      })
    },
    currentChange(page) {
      this.search(page)
    },
    search(page) {
      let query = []
      switch (this.activeName) {
        case 'dataList':
          query.push({
            property: 'type_',
            value: 'datav',
            group: 'type',
            operation: 'EQUAL',
            relation: 'AND'
          })
          break
        case 'templateList':
          query.push({
            property: 'type_',
            value: 'template',
            group: 'type',
            operation: 'EQUAL',
            relation: 'AND'
          })
          break
        case 'unitList':
          query.push({
            property: 'type_',
            value: 'unit',
            group: 'type',
            operation: 'EQUAL',
            relation: 'AND'
          })
          break
      }
      if (this.searchForm.datavName) {
        query.push({
          property: 'name',
          operation: 'LIKE',
          value: this.searchForm.datavName,
          relation: 'AND',
          group: 'a'
        })
      }
      if (this.searchForm.stateArr.includes('1')) {
        query.push({
          property: 'enable',
          operation: 'EQUAL',
          value: 1,
          relation: 'OR',
          group: 'b'
        })
      }
      if (this.searchForm.stateArr.includes('0')) {
        query.push({
          property: 'enable',
          operation: 'EQUAL',
          value: 0,
          relation: 'OR',
          group: 'b'
        })
      }
      this.pageResult.page = page
      this.loadData(query)
    },
    remove(row) {
      this.$confirm('确定要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        dangerouslyUseHTMLString: true
      }).then(() => {
        portal.deleteDatavLayout(row.id).then(data => {
          if (data.state) {
            this.$message({type: 'success', message: data.message})
          }
          this.toLoadData()
          this.selectIdList = []
        })
      })
    },
    design(row) {
      this.$refs.datavDialog.showDialog(row.id, row.pubMenuCount, 
        row.pubMenuCountFront, 
        row.pubMenuCountManage)
    },
    designClose(val) {
      this.toLoadData()
    },
    layoutAuth(row) {
      let this_ = this
      this.curAuthLayoutId = row.id
      this.$http
        .get(
          '${portal}/sys/authUser/v1/getRightsAndDefaultRightType?id=' +
            row.id +
            '&objType=layoutManage'
        )
        .then(function(resp) {
          if (resp.data) {
            let conf = {
              right: resp.data.right,
              permissionList: resp.data.type,
              autoClose: false
            }
            this_.$refs.layoutAuth.showDialog(conf)
          }
        })
    },
    beforeClose() {
      this.uploadDialogVisible = false
      this.fileList.splice(0)
    },
    uploadSubmit() {
      if (this.$refs.elUpload.uploadFiles.length == 0) {
        this.$message.warning('请上传文件')
        return
      }
      this.$refs.elUpload.submit()
    },
    beforeClose2() {
      this.myDialogVisible = false
    },
    handleImport(param) {
      let formData = new FormData()
      formData.append('file', param.file)
      portal.importDatavLayout(formData, this.orgId).then(resp => {
        if (resp.state) {
          if (resp.message && resp.message == 'confirmUpload') {
            this.uploadAddress = resp.value
            this.myDialogVisible = true
          } else {
            this.$message({type: 'success', message: resp.message})
            this.beforeClose()
            this.toLoadData() //重新加载列表数据
          }
        } else {
          this.beforeClose()
        }
      })
    },
    confirmSubmit(arg) {
      const this_ = this
      let url =
        window.context.portal +
        '/portal/sysIndexLayoutManage/sysIndexLayoutManage/v1/confirmImportData?unZipFilePath=' +
        this.uploadAddress +
        '&status=' +
        arg
      req.post(url).then(function(rep) {
        rep = rep.data
        if (rep && rep.state) {
          Message.success(rep.message)
          this_.fileList.splice(0)
          this_.toLoadData()
        } else {
          Message.error(rep.message || '保存失败')
        }
        this_.myDialogVisible = false
        this_.beforeClose()
      })
    },
    layoutAuthConfirm(data) {
      let param = {
        id: this.curAuthLayoutId,
        objType: 'layoutManage',
        ownerNameJson: JSON.stringify(data)
      }
      let this_ = this
      this.$http
        .post('${portal}/sys/authUser/v1/saveRights', param)
        .then(function(resp) {
          if (resp.data) {
            if (resp.data.state) {
              this_.$message.success('授权成功')
              this_.$refs.layoutAuth.closeDialog()
            } else {
              this_.$message.error(resp.data.message)
            }
          }
        })
    },
    onExceed() {
      this.$message.warning('只能选择一个zip文件!')
    }
  }
}
</script>

<style lang="scss" scoped>
.app_center_container {
  height: 100%;
  overflow: auto;

  .big-screen-tabs {
    /deep/ .el-tabs__nav-wrap {
      background: #fcfcfc;
    }

    .search-bar {
      display: flex;
      align-items: center;

      .input-search {
        width: 400px;
        margin-right: 58px;
        ::v-deep {
          .el-input-group__append {
            border-radius: 0 2px 2px 0;
          }
        }
      }
    }

    .big-screen-list {
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      margin: 0;
      padding: 0;
      // justify-content: space-around;
      padding-top: 20px;

      > li {
        border-radius: 8px;
        width: 420px;
        height: 288px;
        position: relative;
        box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
        margin-bottom: 24px;
        margin-right: 24px;

        /deep/ .el-image img {
          border-top-left-radius: 8px;
          border-top-right-radius: 8px;
        }
        .handleDialog {
          position: absolute;
          top: 0;
          left: 0;
          z-index: 2;
          background-color: rgba(51, 51, 51, 0.87);
          width: 100%;
          height: 100%;
          border-radius: 4px;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 10px;
        }
        .row-cover {
          height: 240px;
        }
        .big-screen-list-footer {
          display: flex;
          justify-content: space-between;
          align-items: center;
          background: #fcfcfc;
          height: 48px;
          padding: 0 10px;
          border-bottom-left-radius: 8px;
          border-bottom-right-radius: 8px;

          .big-screen-list-footer-title {
            > i {
              display: inline-block;
              width: 90px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }

          .big-screen-list-footer-right {
            display: flex;
            align-items: center;
            > div {
              margin-right: 15px;
              cursor: pointer;
              color: #666666;
              > i {
                font-size: 14px;
              }
              > span {
                font-size: 14px;
              }
              &:last-child {
                margin-right: 0;
              }

              .big-screen-radio {
                /deep/ .el-radio-button--mini .el-radio-button__inner {
                  padding: 7px;
                }
              }
            }
          }
        }
      }
      // 新增按钮
      .big-screen-list-add {
        background: #fcfcfc;
        border: 1px solid #f2f3f6;
        display: flex;
        align-items: center;
        justify-content: center;
        > i {
          font-size: 80px;
          color: #409eff;
          cursor: pointer;
        }
      }
    }

    /deep/ .el-tabs__content {
      height: calc(100% - 20px);
      padding-left: 20px;
      padding-top: 20px;
      .el-tab-pane {
        height: 100%;
        display: flex;
        flex-direction: column;
        .big-screen-scroll {
          flex: 1;
          overflow-y: auto;
        }
      }
    }
    // 搜索按钮颜色
    /deep/ .el-input-group__append {
      background: #409eff;
      color: #fff;
    }
  }
  .card {
    margin: 5px;
    min-height: 190px;
    text-align: center;
  }
  .card-item-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    background: #fafafa;
    justify-content: center;
    // padding: 5px 5px 0 5px;
    height: 30px;
    line-height: 30px;
    // margin-top: 22px;
    .actions__btn {
      margin-bottom: 10px;
    }
    .confirm__btn {
      margin-left: 10px;
    }
  }
  // .pagination {
  //     position: absolute;
  //     bottom: 0;
  //     margin-top: 20px;
  // }
  .form-editor-dialog >>> .el-dialog__header {
    display: none;
  }
  .form-editor-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-size: 14px;
    float: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
  }
  .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;
  }

  .card-item {
    cursor: default;
    display: block;
    position: relative;
  }
  .sticky {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;

    .card-checkbox {
      width: 28px;
      height: 28px;
      background: rgb(240, 240, 240);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;

      &::after {
        opacity: 1;
        content: '';
        width: 6px;
        height: 11px;
        background: transparent;
        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);
      }

      &.selected {
        background: #409eff;
      }
    }
  }
}

.el-button--small.is-round {
  padding: 9px 10px !important;
}
.opt-icon-title {
  font-size: 14px;
  color: #666666;
}
.col-title {
  text-align: left;
}
.send-text{
  cursor: pointer;
  color: #666666;
  font-size:14px;
}
</style>
