<template>
  <!-- 装修-店铺装修 -->
  <div>
    <div class="i-layout-page-header">
      <!-- 顶部标题 -->
      <PageHeader
        class="product_tabs"
        :title="$route.meta.title"
        hidden-breadcrumb
        :style="'padding-right:' + (menuCollapse ? 105 : 20) + 'px'"
      >
        <div slot="title">
          <div class="float-l">
            <span v-text="$route.meta.title" class="mr20"></span>
          </div>
          <!--          <div style="float: right;" v-if="cardShow==1 || cardShow==2">-->
          <!--            <Button class="bnt" type="primary" @click="submit" :loading="loadingExist">保存</Button>-->
          <!--            <Button class="bnt ml20" @click="reast">重置</Button>-->
          <!--          </div>-->
        </div>
      </PageHeader>
    </div>
    <Row class="ivu-mt box-wrapper acea-row">
      <Col class="left-wrapper">
        <!-- 左侧菜单 -->
        <Menu :theme="theme3" :active-name="1" width="auto">
          <MenuGroup>
            <MenuItem
              :name="item.id"
              v-for="(item, index) in menuList"
              :key="index"
              @click.native="bindMenuItem(index)"
            >
              {{ item.name }}
            </MenuItem>
          </MenuGroup>
        </Menu>
      </Col>
      <!-- 右侧主题表格 -->
      <Col class="right-wrapper">
        <Card :bordered="false" dis-hover v-if="cardShow == 0">
          <Row v-if="cardShow == 0">
            <Col
              style="
                width: 310px;
                height: 550px;
                margin-right: 30px;
                position: relative;
              "
              v-if="isDiy"
            >
              <iframe
                class="iframe-box"
                :src="imgUrl"
                frameborder="0"
                ref="iframe"
              ></iframe>
              <div class="mask"></div>
            </Col>
            <Col :class="isDiy ? 'tableDiv' : 'table'">
              <div class="acea-row row-between-wrapper">
                <Row type="flex">
                  <Col v-bind="grid">
                    <div class="button acea-row row-middle">
                      <Button type="primary" @click="add">添加主题</Button>
                    </div>
                  </Col>
                </Row>
              </div>
              <Table
                :columns="columns1"
                :data="list"
                ref="table"
                class="mt25"
                :loading="loading"
                highlight-row
                no-userFrom-text="暂无数据"
                no-filtered-userFrom-text="暂无筛选结果"
              >
                <template slot-scope="{ row, index }" slot="region">
                  <div class="font-blue">
                    {{
                      row.type == 1
                        ? '默认模板'
                        : row.type == 2
                        ? '行业模板'
                        : '活动模板'
                    }}
                  </div>
                </template>
                <template slot-scope="{ row, index }" slot="action">
                  <a @click="edit(row)" v-if="row.status || row.is_diy">编辑</a>
                  <div
                    v-if="row.id != 1 && row.is_diy"
                    style="display: inline-block"
                  >
                    <Divider type="vertical" v-if="row.status || row.is_diy" />
                    <a @click="del(row, index)">删除</a>
                  </div>
                  <div style="display: inline-block" v-if="row.status != 1">
                    <Divider type="vertical" v-if="row.status || row.is_diy" />
                    <a @click="setStatus(row, index)">设为首页</a>
                  </div>
                  <div
                    v-if="row.status || row.is_diy"
                    style="display: inline-block"
                  >
                    <Divider type="vertical" />
                    <!--<a class="copy-data"v-clipboard:copy="BaseURL+'pages/annex/special/index?id='+row.id"-->
                    <!--v-clipboard:success="onCopy"-->
                    <!--v-clipboard:error="onError">预览</a>-->
                    <a class="copy-data" @click="preview(row)">预览</a>
                  </div>
                  <div style="display: inline-block" v-if="!row.is_diy">
                    <Divider type="vertical" />
                    <a @click="recovery(row, index)">恢复初始设置</a>
                    <Divider type="vertical" />
                    <a @click="del(row, index)">删除</a>
                  </div>
                </template>
              </Table>
              <div class="acea-row row-right page">
                <Page
                  :total="total"
                  :current="diyFrom.page"
                  show-elevator
                  show-total
                  @on-change="pageChange"
                  :page-size="diyFrom.limit"
                />
              </div>
            </Col>
          </Row>
        </Card>
        <goodClass
          v-if="cardShow == 1"
          ref="category"
          @parentFun="getChildData"
        ></goodClass>

        <newGoods
          v-if="cardShow === 2"
          ref="newGoods"
          @parentFun="getChildData"
        ></newGoods>

        <users
          v-if="cardShow == 3"
          ref="users"
          @parentFun="getChildData"
        ></users>
      </Col>
    </Row>
    <Card
      :bordered="false"
      dis-hover
      class="fixed-card"
      :style="{ left: `${!menuCollapse ? '200px' : isMobile ? '0' : '80px'}` }"
      v-show="cardShow == 1 || cardShow == 2 || cardShow == 3"
    >
      <div class="acea-row row-center-wrapper">
        <Button
          class="bnt"
          type="primary"
          @click="submit"
          :loading="loadingExist"
          >保存</Button
        >
        <Button class="bnt ml20" @click="reast" v-if="cardShow==1">重置</Button>
      </div>
    </Card>
    <Modal v-model="modal" title="预览" footer-hide>
      <div>
        <div v-viewer class="acea-row row-around code">
          <div class="acea-row row-column-around row-between-wrapper">
            <div class="QRpic" ref="qrCodeUrl"></div>
            <span class="mt10">公众号二维码</span>
          </div>
          <div class="acea-row row-column-around row-between-wrapper">
            <div class="QRpic">
              <img v-lazy="qrcodeImg" />
            </div>
            <span class="mt10">小程序二维码</span>
          </div>
        </div>
      </div>
    </Modal>
  </div>
</template>

<script>
import Setting from '@/setting'
import ClipboardJS from 'clipboard'
import { diyList, diyDel, setStatus, recovery, getRoutineCode } from '@/api/diy'
import { mapState } from 'vuex'
import QRCode from 'qrcodejs2'
import goodClass from './goodClass'
import newGoods from './newGoods'
import users from './users'

export default {
  name: 'devise_list',
  computed: {
    ...mapState('admin/layout', ['menuCollapse', 'isMobile']),
  },
  components: {
    goodClass,
    newGoods,
    users,
  },
  data() {
    return {
      roterPre: Setting.roterPre,
      grid: {
        sm: 10,
        md: 12,
        lg: 19,
      },
      loading: false,
      theme3: 'light',
      menuList: [
        {
          name: '商城首页',
          id: 1,
        },
        {
          name: '商品分类',
          id: 2,
        },
        {
          name: '商品详情',
          id: 3,
        },
        {
          name: '个人中心',
          id: 4,
        },
      ],
      columns1: [
        {
          title: '页面ID',
          key: 'id',
          width: 80,
        },
        {
          title: '模板名称',
          key: 'name',
          minWidth: 100,
        },
        {
          title: '添加时间',
          key: 'add_time',
          minWidth: 100,
        },
        {
          title: '更新时间',
          key: 'update_time',
          minWidth: 100,
        },
        {
          title: '操作',
          slot: 'action',
          // fixed: "right",
          width: 200,
        },
      ],
      list: [],
      imgUrl: '',
      modal: false,
      BaseURL: Setting.apiBaseURL.replace(/adminapi/, ''),
      cardShow: 0,
      loadingExist: false,
      isDiy: 1,
      qrcodeImg: '',
      diyFrom: {
        type: 1,
        page: 1,
        limit: 10,
      },
      total: 0,
    }
  },
  created() {
    this.getList()
    // var storage = window.localStorage;
    // storage.setItem('imgUrl',imgUrl)
  },
  mounted: function () {},
  methods: {
    getChildData(e) {
      this.loadingExist = e
    },
    submit() {
      switch (this.cardShow) {
        case 1:
          this.$refs.category.onSubmit()
          break
        case 2:
          this.$refs.newGoods.onSubmit()
          break
        case 3:
          this.$refs.users.onSubmit()
          break
      }
      // if (this.cardShow == 1) {
      // this.$refs.category.onSubmit()
      // } else {
      //   this.$refs.users.onSubmit()
      // }
    },
    reast() {
      if (this.cardShow == 1) {
        this.$refs.category.onSubmit(1)
      }
    },
    bindMenuItem(index) {
      this.cardShow = index
    },
    onCopy() {
      this.$Message.success('复制预览链接成功')
    },
    onError() {
      this.$Message.error('复制预览链接失败')
    },
    //生成二维码
    creatQrCode(id, status) {
      this.$refs.qrCodeUrl.innerHTML = ''
      let url = ''
      if (status) {
        url = `${this.BaseURL}pages/index/index`
      } else {
        url = `${this.BaseURL}pages/annex/special/index?id=${id}`
      }
      var qrcode = new QRCode(this.$refs.qrCodeUrl, {
        text: url, // 需要转换为二维码的内容
        width: 160,
        height: 160,
        colorDark: '#000000',
        colorLight: '#ffffff',
        correctLevel: QRCode.CorrectLevel.H,
      })
    },
    //小程序二维码
    routineCode(id) {
      getRoutineCode(id)
        .then((res) => {
          this.qrcodeImg = res.data.image
        })
        .catch((err) => {
          this.$Message.error(err)
        })
    },
    preview(row) {
      this.modal = true
      this.creatQrCode(row.id, row.status)
      this.routineCode(row.id)
    },
    // 获取列表
    getList() {
      let storage = window.localStorage
      this.imgUrl = storage.getItem('imgUrl')
      let that = this
      this.loading = true
      diyList(this.diyFrom).then((res) => {
        this.loading = false
        let data = res.data
        this.list = data.list
        this.total = data.count
        data.list.forEach(function (e) {
          if (e.status == 1) {
            that.isDiy = e.is_diy
            let imgUrl = `${that.BaseURL}pages/annex/special/index?id=${e.id}`
            storage.setItem('imgUrl', imgUrl)
            that.imgUrl = imgUrl
            // let imgUrl = JSON.parse(storage.getItem('menuList'));
            // that.imgUrl = `http://192.168.1.12:8080/pages/annex/special/index?id=${e.id}`;
          }
        })
      })
    },
    pageChange(status) {
      this.diyFrom.page = status
      this.getList()
    },
    // 编辑
    edit(row) {
      if (row.is_diy) {
        // this.$store.commit('userInfo/setPageName', row.template_name || 'moren');
        this.$router.push({
          path: this.roterPre + '/pages/diy',
          query: { id: row.id, name: row.template_name || 'moren' },
        })
      } else {
        let storage = window.localStorage
        storage.setItem('pageName', row.template_name)
        this.$store.dispatch('admin/user/getPageName')
        this.$router.push({
          path: this.roterPre + '/setting/pages/template',
          query: { id: row.id, name: row.template_name },
        })
      }
    },
    // 添加
    add() {
      this.$router.push({
        path: this.roterPre + '/pages/diy',
        query: { id: 0, name: '首页', type: 1 },
      })
    },
    // 删除
    del(row) {
      let delfromData = {
        title: '删除',
        num: 2000,
        url: 'diy/del/' + row.id,
        method: 'DELETE',
        data: {
          type: 1,
        },
      }
      this.$modalSure(delfromData)
        .then((res) => {
          this.getList()
        })
        .catch((res) => {
          this.$Message.error(res.msg)
        })
    },
    // 使用模板
    async setStatus(row) {
      this.$Modal.confirm({
        title: '提示',
        content: '<p>是否把该模板设为首页</p>',
        onOk: () => {
          setStatus(row.id, {
            type: 1,
          })
            .then((res) => {
              let that = this
              if (res.data.status) {
                this.$Message.success(res.data.msg)
                this.$Modal.remove()
                this.getList()
              } else {
                setTimeout((e) => {
                  that.$Modal.confirm({
                    title: '提示',
                    content: '<p>尚未安装模板，请安装后再试！</p>',
                    loading: false,
                    //okText: "点击购买",
                    // onOk: () => {
                    //   window.open("http://s.crmeb.com/goods_cate", `_blank`);
                    // },
                  })
                }, 500)
              }
            })
            .catch((res) => {
              this.$Modal.remove()
              this.$Message.error(res.msg)
            })
        },
      })
    },
    recovery(row) {
      recovery(row.id).then((res) => {
        this.$Message.success(res.msg)
        this.getList()
      })
    },
  },
}
</script>

<style scoped lang="stylus">
.right-wrapper {
  width: calc(100% - 156px);
}

.table {
  width: calc(100% - 156px);
}

.tableDiv {
  width: calc(100% - 350px);
}

.ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu) {
  background: #eff6fe !important;
}

.ivu-mt {
  background-color: #fff;
}

.bnt {
  width: 80px !important;
}

.iframe-box {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  border: 1px solid #eee;
}

.mask {
  position: absolute;
  left: 0;
  width: 100%;
  top: 0;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
}

/deep/.ivu-menu-vertical .ivu-menu-item, .ivu-menu-vertical .ivu-menu-submenu-title {
  text-align: center;
}

.fixed-card {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 200px;
  z-index: 99;
  box-shadow: 0 -1px 2px rgb(240, 240, 240);
}

/deep/ .ivu-menu-vertical .ivu-menu-item-group-title {
  display: none;
}

/deep/ .ivu-menu-vertical.ivu-menu-light:after {
  display: none;
}

/deep/ .ivu-menu {
  z-index: 0 !important;
}

.code {
  position: relative;
}

.QRpic {
  width: 160px;
  height: 160px;

  img {
    width: 100%;
    height: 100%;
  }
}

.left-wrapper {
  background: #fff;
  border-right: 1px solid #dcdee2;
  width: 156px;
}

.picCon {
  width: 280px;
  height: 510px;
  background: #FFFFFF;
  border: 1px solid #EEEEEE;
  border-radius: 25px;

  .pictrue {
    width: 250px;
    height: 417px;
    border: 1px solid #EEEEEE;
    opacity: 1;
    border-radius: 10px;
    margin: 30px auto 0 auto;
    // img{
    // width 100%;
    // height 100%;
    // border-radius: 10px;
    // }
  }

  .circle {
    width: 36px;
    height: 36px;
    background: #FFFFFF;
    border: 1px solid #EEEEEE;
    border-radius: 50%;
    margin: 13px auto 0 auto;
  }
}
</style>
