<template>
  <!-- <el-menu
      :default-active="activeName"
      background-color="#171b22"
      text-color="#fff"
      active-text-color="#00baff"
      @select="handleSelect"
    >
      <el-menu-item
        :index="item.categoryValue"
        :key="item.categoryValue"
        v-for="item in category"
        @click="getList(item.categoryValue)"
      >
        <i class="el-icon-s-order"></i>
        {{item.categoryKey}}
      </el-menu-item>
    </el-menu> -->

  <el-container class="list">
    <!-- <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
    <el-menu-item :index="item.categoryValue" v-for="item in category">{{item.categoryKey}}</el-menu-item>
  </el-menu> -->

    <el-main>
      <el-tabs
        :tab-position="tabPosition"
        @tab-click="handleClick"
        v-model="activeCategoryName"
        style="width: 110px;
            display: inline"
      >
        <el-tab-pane
          :label="item.categoryKey"
          v-for="item in category"
          :key='item.categoryValue'
          :name="item.categoryValue"
        ></el-tab-pane>
      </el-tabs>
      <div class="page">
        <el-pagination
          layout="total, sizes, prev, pager, next, jumper"
          background
          size="mini"
          :current-page='page.page'
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :pageSize="page.size"
          :page="page.page"
          :total="page.total"
        >
        </el-pagination>
      </div>
      <div class="content">
        <div
          class="content__item content__item--add"
          @click="handleAdd"
        >
          <div>
            <i class="el-icon-plus"></i>
            <p>新建大屏</p>
          </div>
        </div>
        <div
          class="content__item"
          v-for="(item,index) in list"
          :key="index"
          @mouseover="item._menu=true"
          @mouseout="item._menu=false"
        >
          <div class="content__info">
            <img
              v-if="item.backgroundUrl"
              :src="item.backgroundUrl"
              alt=""
            />
            <div
              class="content__menu"
              v-show="item._menu"
            >
              <div
                class="content__btn"
                @click="handleEdit(item)"
              >
                编辑
              </div>
              <div
                class="content__btn"
                @click="handleExport(item)"
              >
                导出
              </div>
              <div
                class="content__btn"
                @click="handleRelease(item)"
                v-if='item.status !== 1'
              >
                发布
              </div>
            </div>
          </div>
          <div class="content__main">
            <span class="content__name">{{item.title}}</span>
            <div class="content__menulist">
              <div class="content__view">
                <el-tooltip content="删除">
                  <i
                    class="el-icon-delete"
                    @click="handleDel(item,index)"
                  ></i>
                </el-tooltip>
                <el-tooltip content="编辑">
                  <i
                    class="el-icon-edit"
                    @click="handleUpdate(item,index)"
                  ></i>
                </el-tooltip>
                <el-tooltip content="预览">
                  <i
                    class="el-icon-view"
                    @click="handleViews(item,index)"
                  ></i>
                </el-tooltip>
                <el-tooltip content="复制">
                  <i
                    class="el-icon-copy-document"
                    @click="handleCopy(item,index)"
                  ></i>
                </el-tooltip>
              </div>
              <span
                class="content__status"
                :class="{'content__status--active':item.status}"
              >
                {{item.status?'已发布':'未发布'}}
              </span>
            </div>

          </div>
        </div>
      </div>
    </el-main>
    <el-dialog
      :title="type==='add'?'新建大屏':'编辑大屏'"
      width="35%"
      :visible.sync="box"
    >
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        v-if='box'
        label-width="80px"
      >
        <el-form-item
          label="分组"
          prop='category'
        >
          <el-select
            v-model="form.category"
            style="width: 100%"
            placeholder="请选择分组"
          >
            <el-option
              v-for='item in category'
              :label="item.categoryKey"
              :value="item.categoryValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="大屏名称"
          prop="title"
        >
          <el-input
            style="width: 100%"
            v-model="form.title"
            placeholder="请输入大屏名称"
          />
        </el-form-item>
        <el-form-item
          label="宽度"
          prop="width"
        >
          <el-input
            v-model="form.width"
            placeholder="请输入屏幕宽度"
          />

          <!-- <ht-input
            style="width: 40%;margin-right:10%"
            v-model="form.width"
            :validate="{'required':true}"
          />
          <ht-input
            style="width: 40%;margin-left:10%"
            v-model="form.height"
            :validate="{'required':true}"
          /> -->
        </el-form-item>
        <el-form-item
          label="高度"
          prop="height"
        >
          <el-input
            v-model="form.height"
            placeholder="请输入屏幕高度"
          />
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="box = false">取 消</el-button>
        <el-button
          type="primary"
          @click="handleBuild"
        >确 定</el-button>
      </span>
    </el-dialog>
  </el-container>
</template>
<script>
// import { getList, addObj, updateObj, delObj, getCategory, copyObj } from '@/api/visual';
import {getObj} from '@/tripartite/buildBigScreen/src/api/visual'
import report from '@/api/report.js'
export default {
  name: 'list',
  data() {
    return {
      tabPosition: 'left',
      typelist: [],
      index: 0,
      type: '',
      page: {
        page: 1,
        size: 10,
        total: 0
      },
      form: {},
      box: false,
      activeName: '',
      list: [],
      category: [],
      form: {
        category: '5',
        title: '',
        width: 1920,
        height: 1080,
        status: 0
      },
      rules: {
        category: [
          {required: true, message: '请选择分组名称', trigger: 'blur'}
        ],
        title: [{required: true, message: '请输入大屏名称', trigger: 'blur'}],
        height: [{required: true, message: '请输入高度大小', trigger: 'blur'}],
        width: [{required: true, message: '请输入宽度大小', trigger: 'blur'}]
      },
      //分类查询默认查询模块值位置5的数据
      activeCategoryName: '5'
    }
  },
  created() {
    this.getCategory()
  },
  methods: {
    vaildData(id) {
      const list = []
      for (var i = 0; i < 20; i++) {
        list.push(i)
      }
      return list.includes(id)
    },
    getCategory() {
      // getCategory().then(res => {
      //   const data = res.data.data;
      //   this.typelist = data;
      //   this.activeName = (data[0] || {}).categoryValue;
      this.getList()
      // })
      this.getClassificName()
    },
    handleExport(item) {
      getObj(item.id).then(res => {
        const data = res
        let mode = {
          detail: JSON.parse(data.config.detail),
          component: JSON.parse(data.config.component)
        }
        var zip = new window.JSZip()
        zip.file('view.js', `const option =${JSON.stringify(mode, null, 4)}`)
        zip.file('index.html', window.html)
        zip.generateAsync({type: 'base64'}).then(function(content) {
          location.href = 'data:application/zip;base64,' + content
        })
      })
    },
    handleCopy(item) {
      this.$message({
        message: '演示环境不允许复制',
        type: 'danger'
      })
      return
      this.$confirm('确认复制当前大屏', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          copyObj(item.id).then(() => {
            this.$message.success('复制成功')
            this.getList()
          })
        })
        .catch(() => {})
    },
    //大屏管理删除
    handleDel(item, index) {
      // console.log(item, 'item')
      this.$confirm('是否确认永久删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          if (!this.vaildData(index)) {
            this.$message.error('例子模板不允许修改')
            return false
          }
          report.delObj(item.id).then(() => {
            this.list.splice(index, 1)
            this.$message.success('删除成功')
            return this.getList()
          })
        })
        .catch(() => {})
    },
    handleAdd() {
      this.form.title = ''
      this.type = 'add'
      this.box = true
    },
    handleUpdate(item, index) {
      this.type = 'edit'
      this.form = item
      this.form.width = '1920'
      this.form.height = '1080'
      this.form.category = this.form.category + ''
      this.box = true
      this.index = index
    },
    handleEdit(item) {
      let routeUrl = this.$router.resolve({
        path: '/build/' + item.id
      })
      window.open(routeUrl.href, '_blank')
    },
    handleViews(item) {
      let routeUrl = this.$router.resolve({
        path: '/view/' + item.id
      })
      window.open(routeUrl.href, '_blank')
    },
    handleSave(form, done) {
      done()
      if (this.type == 'add') {
        addObj(
          Object.assign(
            {
              category: this.activeName
            },
            this.form
          )
        ).then(res => {
          this.box = false
          this.$message.success('新增成功')
          this.getList()
          const id = res.data.data.id
          this.handleEdit({id})
        })
      } else {
        if (this.vaildData(Number(this.index))) {
          this.$message.error('例子模板不允许修改')
          return false
        }
        updateObj({
          id: this.form.id,
          category: this.form.category,
          password: this.form.password,
          status: this.form.status,
          title: this.form.title
        }).then(() => {
          this.box = false
          this.$message.success('修改成功')
          this.getList()
        })
      }
    },
    handleCurrentChange(val) {
      // console.log(val, '当前要访问的页数')
      this.page.page = val
      this.getList()
    },
    handleSizeChange(val) {
      // console.log(val, '当前页面显示的条数')
      this.page.size = val
      this.getList()
    },
    getList(category) {
      report
        .getList({
          groupTree: {},
          pageBean: {
            page: this.page.page,
            pageSize: this.page.size,
            showTotal: true
          },
          querys: [
            {
              group: 'main',
              operation: 'EQUAL',
              parentGroup: '',
              property: 'b.category_value_',
              relation: 'AND',
              value: this.activeCategoryName
            }
          ],
        })
        .then(res => {
          const data = res
          this.page.total = data.total
          this.list = data.rows
          this.initData()
        })
    },
    initData() {
      this.list.forEach((ele, index) => {
        this.$set(this.list[index], '_menu', false)
      })
    },
    //获取分类管理的名称
    getClassificName() {
      report.getClassific().then(res => {
        this.category = res.rows
        // this.form.category = this.category.slice(0, 1)[0].categoryKey
        // console.log(this.category.slice(0,1)[0].categoryKey)
      })
    },
    //新建大屏
    handleBuild() {
      //验证表格
      this.$refs.form.validate(bool => {
        if (bool) {
          this.box = false
          report
            .buildBigScreen({
              visual: {
                category: this.form.category,
                title: this.form.title,
                status: this.form.status
              },
              config: {
                detail: JSON.stringify({
                  name: this.form.title,
                  width: this.form.width,
                  height: this.form.height,
                  scale: 1,
                  backgroundImage: '/img/bg/bg1.png',
                  url: '',
                  mark: {},
                  gradeShow: false,
                  gradeLen: 30
                }),
                component: '[]'
              }
            })
            .then(res => {
              // console.log(res)
              let routeUrl = this.$router.resolve({
                path: '/build/' + res.message
              })
              window.open(routeUrl.href, '_blank')
              this.getList()
            })
        }
      })
    },
    //模板发布时间
    handleRelease(data) {
      //判断当前是否是已经发布
      if (data.status !== 1) {
        report
          .updateStatus({
            id: data.id,
            status: 1
          })
          .then(res => {
            //重新获取数据
            this.getList()
          })
      }
    },
    //获取点击的分类管理的模块值
    handleClick(tab) {
      // console.log(tab, 'tab')
      this.activeCategoryName = tab.name
      this.page.page = 1
      this.getList()
    }
  }
}
</script>
<style lang="scss">
@import '@/assets/css/big-screen-list.scss';
</style>