<template>
  <div class="grid-container">
    <v-tour
      v-if="isPublic || isPrivate || isHeadOps || isBranchAdmin"
      name="creatOneTour"
      :steps="oneSteps"
      :options="tourOptions"
    />
    <v-tour
      v-if="isPublic || isPrivate || isHeadOps || isBranchAdmin"
      name="creatTwoTour"
      :steps="twoSteps"
      :options="tourOptions"
    />
    <!-- 一级网格 -->
    <el-card
      id="firstGird"
      v-hasRole="['admin', 'headPublic', 'headPrivate', 'headOps', 'headAdmin']"
      class="grid-card"
    >
      <div slot="header" class="clearfix clearfixZh">
        <span style="font-weight: bold">总行行政网格</span>
      </div>
      <p class="content-des">总行使用行政区划建立一级网格、进行分配。</p>
      <div class="operate-btn-one zongHbtn">
        <el-button
          size="small"
          class="import_btn"
          type="primary"
          @click="goDrawArea"
        >
          行政区域查看</el-button>
        <template v-if="!isHeadAdmin">
          <el-button
            id="creatFirstGird"
            size="small"
            class="import_btn"
            type="primary"
            @click="goToCreateFirGrid"
          >
            去创建总行行政网格</el-button>
          <el-button
            id="expordFirstGird"
            size="small"
            class="import_btn"
            type="primary"
            @click="importCreate"
          >批量导入创建</el-button>
          <el-button
            v-if="stashObj.hasTopRegion"
            size="small"
            type="plain"
            class="import_btn"
            @click="onTopStashEdit"
          >继续创建</el-button>
        </template>
      </div>
    </el-card>
    <!-- 二级网格 -->
    <el-card
      id="secondGird"
      v-hasRole="['admin', 'branchAdmin', 'outletAdmin', 'commonManager']"
      class="grid-card grid-card-tow"
    >
      <div slot="header" class="clearfix clearfixZhiHa">
        <span style="font-weight: bold">支行行政网格</span>
      </div>
      <p class="content-des">
        支行使用总行分配的行政区划建立二级网格、进行分配。
      </p>
      <div class="operate-btn-one">
        <div class="zhiHbtn">
          <el-button
            size="small"
            class="import_btn"
            type="primary"
            @click="goDrawArea"
          >
            行政区域查看</el-button>
          <template v-if="!isOutletAdmin && !isCommonManager">
            <el-button
              id="creatSecondGird"
              size="small"
              type="primary"
              @click="goToCreateScoGrid"
            >
              去创建支行行政网格</el-button>
            <el-button
              id="expordSecondtGird"
              size="small"
              type="primary"
              @click="importCreateScoGrid"
            >
              批量导入创建</el-button>
            <el-button
              v-if="stashObj.hasSecRegion"
              size="small"
              type="plain"
              @click="onScoStashEdit"
            >继续创建</el-button>
          </template>
        </div>
      </div>
    </el-card>
    <!-- 自定义地图网格 -->
    <el-card
      id="mapGird"
      v-hasRole="[
        'admin',
        'branchAdmin',
        'headPublic',
        'headPrivate',
        'headOps',
        'headAdmin',
      ]"
      class="grid-card grid-card-three"
    >
      <div slot="header" class="clearfix clearfixMap">
        <span style="font-weight: bold">自绘地图网格</span>
      </div>
      <p class="content-des">
        打破行政区划限制，基于自由绘制的物理边界区域，创建不同类型的特色网格，如菜场、商圈、园区等，进行分配。
      </p>
      <section class="operate-btn-one mapBtn">
        <el-button size="small" type="primary" @click="goSpecialDrawarea">
          特色区域绘制</el-button>
        <el-button
          v-if="!isHeadAdmin && !isCommonManager"
          size="small"
          type="primary"
          @click="goToCreateFeaturedGrid"
        >
          去创建自绘地图网格</el-button>
        <el-button
          v-if="stashObj.hasDraw && !isHeadAdmin && !isCommonManager"
          size="small"
          type="plain"
          @click="onFeaturedStashEdit"
        >继续创建</el-button>
      </section>
    </el-card>
    <!-- 自建名单网格 -->
    <el-card
      id="mdGird"
      v-hasRole="[
        'admin',
        'branchAdmin',
        'headPublic',
        'headPrivate',
        'headOps',
        'commonManager',
      ]"
      class="grid-card grid-card-four"
    >
      <div slot="header" class="clearfix clearfixFour">
        <span style="font-weight: bold">自建名单网格</span>
      </div>
      <p class="content-des">
        打破行政区划与物理边界限制，支持使用导入名单、选择已有客群等方式创建自建名单网格，进行分配。
      </p>
      <section class="operate-btn-one mdBtn">
        <el-button size="small" type="primary" @click="goToCreateVirGrid">
          去创建自建名单网格</el-button>
        <el-button
          v-if="stashObj.hasVirtual"
          size="small"
          type="plain"
          @click="onVirStashEdit"
        >继续创建</el-button>
      </section>
    </el-card>
  </div>
</template>
<script>
import { getStatedis } from '@/api/grid/list/gridlist.js'
import { isFirstLogin } from '@/api/login'
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      currentStep: 0,
      oneSteps: [],
      twoSteps: [],
      tourOptions: {
        highlight: true,
        labels: {
          buttonSkip: '跳过',
          buttonPrevious: '上一步',
          buttonNext: '下一步',
          buttonStop: '完成'
        },
        enabledButtons: {
          buttonSkip: true,
          buttonPrevious: true,
          buttonNext: true,
          buttonStop: true
        },
        useKeyboardNavigation: true,
        startTime: 0,
        stopOnTargetNotFound: true,
        debug: false
      },
      stashObj: {
        hasSecRegion: false,
        hasTopRegion: false,
        hasVirtual: false
      }
    }
  },
  computed: {
    ...mapGetters(['roles', 'userName']),
    isTour() {
      return sessionStorage.getItem('isTour')
    },
    isPrevious() {
      return sessionStorage.getItem('isPrevious')
    },
    // 总行
    isHeadAdmin() {
      return this.roles.includes('headAdmin')
    },
    // 对公
    isPublic() {
      return this.roles.includes('headPublic')
    },
    // 对私
    isPrivate() {
      return this.roles.includes('headPrivate')
    },
    // 运管部
    isHeadOps() {
      return this.roles.includes('headOps')
    },
    // 支行
    isBranchAdmin() {
      return this.roles.includes('branchAdmin')
    },
    // 客户经理
    isCommonManager() {
      return this.roles.includes('commonManager')
    },
    // 网点主任
    isOutletAdmin() {
      return this.roles.includes('outletAdmin')
    }
  },
  created() {
    if (
      this.isPublic ||
      this.isPrivate ||
      this.isHeadOps ||
      this.isBranchAdmin
    ) {
      this.initIsFirstLogin()
    }

    if (this.isTour && this.isTour == '2') {
      if (this.isPublic || this.isPrivate || this.isHeadOps) {
        this.twoSteps = [
          {
            target: '#creatFirstGird',
            content:
              '<div style="font-size:20px;line-height:25px">去创建总行行政网格</div><br><span>支持总行使用行政区划建立总行行政网格、进行分配</span>',
            overlay: true,
            params: {
              placement: 'bottom',
              highlight: true,
              mask: true
            }
          },
          {
            target: '#creatFirstGird',
            content:
              '<div style="font-size:20px;line-height:25px">去创建总行行政网格</div><br><span>支持总行使用行政区划建立总行行政网格、进行分配</span>',
            overlay: true,
            params: {
              placement: 'bottom',
              highlight: true,
              mask: true
            }
          },
          {
            target: '#creatFirstGird',
            content: '',
            overlay: true,
            before: () => {
              return this.$router
                .push({ path: '/grid/create/createfirst' })
                .then(() => {
                  return new Promise((resolve) => {
                    const checkElement = () => {
                      sessionStorage.setItem('isTour', 3)
                      if (document.querySelector('#commonMain')) {
                        resolve()
                      } else {
                        setTimeout(checkElement, 100)
                      }
                    }
                    checkElement()
                  })
                })
            }
          }
        ]
      } else if (this.isBranchAdmin) {
        this.twoSteps = [
          {
            target: '#creatSecondGird',
            content:
              '<div style="font-size:20px;line-height:25px">去创建支行行政网格</div><br><span>支持支行使用行政区划建立支行行政网格、进行分配</span>',
            overlay: true,
            params: {
              placement: 'bottom',
              highlight: true,
              mask: true
            }
          },
          {
            target: '#creatSecondGird',
            content:
              '<div style="font-size:20px;line-height:25px">去创建支行行政网格</div><br><span>支持支行使用行政区划建立支行行政网格、进行分配</span>',
            overlay: true,
            params: {
              placement: 'bottom',
              highlight: true,
              mask: true
            }
          },
          {
            target: '#creatSecondGird',
            content: '',
            overlay: true,
            before: () => {
              return this.$router
                .push({ path: '/grid/create/createsecond' })
                .then(() => {
                  return new Promise((resolve) => {
                    const checkElement = () => {
                      sessionStorage.setItem('isTour', 3)
                      if (document.querySelector('#commonMain')) {
                        resolve()
                      } else {
                        setTimeout(checkElement, 100)
                      }
                    }
                    checkElement()
                  })
                })
            }
          }
        ]
      }
    } else {
      if (this.isPublic || this.isPrivate || this.isHeadOps) {
        this.oneSteps = [
          {
            target: '#firstGird',
            content: `
          <div style="font-size:20px;line-height:25px">总行行政网格</div><br><span>总行使用行政区划建立总行行政网格、进行分配</span>
          `,
            overlay: true,
            params: {
              placement: 'right',
              highlight: true,
              mask: true
            }
          },
          {
            target: '#mapGird',
            content:
              '<div style="font-size:20px;line-height:25px">自绘地图网格</div><br><span>打破行政区划限制，基于自由绘制的物理边界区域，创建不同类型的特色网格，如菜场、商圈、园区等，进行分配</span>',
            overlay: true,
            params: {
              placement: 'right',
              highlight: true,
              mask: true
            }
          },
          {
            target: '#mdGird',
            content:
              '<div style="font-size:20px;line-height:25px">自建名单网格</div><br><span>打破行政区划与物理边界限制，支持使用导入名单、选择已有客群等方式创建自建名单网格，进行分配</span>',
            overlay: true,
            params: {
              placement: 'left',
              highlight: true,
              mask: true
            }
          },
          {
            target: '#expordFirstGird',
            content:
              '<div style="font-size:20px;line-height:25px">批量导入创建</div><br><span>支持导入excel文件建立总行行政网格、进行分配</span>',
            overlay: true,
            params: {
              placement: 'bottom',
              highlight: true,
              mask: true
            }
          },
          {
            target: '#expordFirstGird',
            content: '',
            overlay: true,
            before: () => {
              return this.$router
                .push({ path: '/grid/create/importCreate' })
                .then(() => {
                  return new Promise((resolve) => {
                    const checkElement = () => {
                      sessionStorage.setItem('isTour', 1)
                      if (document.querySelector('#uoloadWapper')) {
                        resolve()
                      } else {
                        setTimeout(checkElement, 100)
                      }
                    }
                    checkElement()
                  })
                })
            }
          }
        ]
      } else if (this.isBranchAdmin) {
        this.oneSteps = [
          {
            target: '#secondGird',
            content: `
          <div style="font-size:20px;line-height:25px">支行行政网格</div><br><span>支行使用总行分配的行政区划建立支行行政网格，进行分配</span>
          `,
            overlay: true,
            params: {
              placement: 'right',
              highlight: true,
              mask: true
            }
          },
          {
            target: '#mapGird',
            content:
              '<div style="font-size:20px;line-height:25px">自绘地图网格</div><br><span>打破行政区划限制，基于自由绘制的物理边界区域，创建不同类型的特色网格，如菜场、商圈、园区等，进行分配</span>',
            overlay: true,
            params: {
              placement: 'right',
              highlight: true,
              mask: true
            }
          },
          {
            target: '#mdGird',
            content:
              '<div style="font-size:20px;line-height:25px">自建名单网格</div><br><span>打破行政区划与物理边界限制，支持使用导入名单、选择已有客群等方式创建自建名单网格，进行分配</span>',
            overlay: true,
            params: {
              placement: 'left',
              highlight: true,
              mask: true
            }
          },
          {
            target: '#expordSecondtGird',
            content:
              '<div style="font-size:20px;line-height:25px">批量导入创建</div><br><span>支持导入excel文件建立一级网格、进行分配</span>',
            overlay: true,
            params: {
              placement: 'bottom',
              highlight: true,
              mask: true
            }
          },
          {
            target: '#expordSecondtGird',
            content: '',
            overlay: true,
            before: () => {
              return this.$router
                .push({ path: '/grid/create/createscogrid' })
                .then(() => {
                  return new Promise((resolve) => {
                    const checkElement = () => {
                      sessionStorage.setItem('isTour', 1)
                      if (document.querySelector('#uoloadWapper')) {
                        resolve()
                      } else {
                        setTimeout(checkElement, 100)
                      }
                    }
                    checkElement()
                  })
                })
            }
          }
        ]
      }
    }
    console.log(this.steps, 'steps')
  },
  mounted() {
    this.getInitData()
  },
  methods: {
    initIsFirstLogin() {
      const params = {
        username: this.userName
      }
      isFirstLogin(params).then((res) => {
        if (res.code == 200) {
          // 用户首次登陆
          // 用户已有登录记录
          if (res.msg == '用户首次登陆') {
            setTimeout(() => {
              // this.startTour()
            }, 1000)
          } else {
            if (this.isTour == '0') {
              if (this.isPrevious == 'first') {
                setTimeout(() => {
                  this.startOneTour(3)
                }, 1000)
              } else {
                setTimeout(() => {
                  this.startOneTour(0)
                }, 1000)
              }
            } else if (this.isTour == '2') {
              setTimeout(() => {
                this.startTwoTour(1)
              }, 1000)
            }
          }
        }
      })
    },
    async getInitData() {
      const res = await getStatedis()
      if (res.code === 200) {
        this.stashObj = res.data
      }
    },
    startOneTour(index) {
      this.$tours['creatOneTour'].start(index)
    },
    startTwoTour(index) {
      this.$tours['creatTwoTour'].start(index)
      const tour = this.$tours['creatTwoTour']
      tour.previousStep = function() {
        sessionStorage.setItem('isTour', '1')
        this.$router.push({ path: '/grid/create/importCreate' })
      }
    },
    goToCreateFirGrid() {
      this.$router.push('/grid/create/createfirst')
    },
    goDrawArea() {
      this.$router.push({
        path: '/grid/create/draw-area',
        query: {
          btnType: '1'
        }
      })
    },
    goSpecialDrawarea() {
      this.$router.push({
        path: '/grid/create/draw-area',
        query: {
          btnType: '2'
        }
      })
    },
    onTopStashEdit() {
      this.$router.push({
        path: '/grid/create/createfirst',
        query: {
          isStash: '1'
        }
      })
    },
    importCreate() {
      this.$router.push('/grid/create/importCreate')
    },
    onScoStashEdit() {
      this.$router.push({
        path: '/grid/create/createsecond',
        query: {
          isStash: '1'
        }
      })
    },
    onVirStashEdit() {
      this.$router.push({
        path: '/grid/create/createvirtual',
        query: {
          isStash: '1'
        }
      })
    },
    goToCreateScoGrid() {
      this.$router.push('/grid/create/createsecond')
    },
    importCreateScoGrid() {
      this.$router.push('/grid/create/createscogrid')
    },
    goToCreateVirGrid() {
      this.$router.push('/grid/create/createvirtual')
    },
    goToCreateFeaturedGrid() {
      this.$router.push('/grid/create/createFeature')
    },
    onFeaturedStashEdit() {
      this.$router.push({
        path: '/grid/create/createFeature',
        query: {
          isStash: '1'
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "~vue-tour/dist/vue-tour.css";

.grid-container {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  box-shadow: 0 3px 8px 0 #00000017;
  border-radius: 16px 16px 0 0;
  background-color: #ffffff;
  height: calc(100vh - 135px);
  padding: 30px;
  gap: 18px;
}

.operate-btn {
  display: flex;
  align-items: center;
}

.operate-btn-one {
  padding: 20px;
}

.import_btn {
  margin-left: 10px;
  margin-bottom: 10px;
}

.grid-card {
  flex: 1;
  height: 240px;
  background-color: #eaf5ff;
  border-radius: 8px;
  box-shadow: none;
  border: none;

  ::v-deep .el-card__header {
    padding: 0;
    border: none;
    font-size: 18px;
    font-weight: 600;
    color: #222222;
    line-height: 25px;
  }

  ::v-deep .el-card__body {
    padding: 0;
    font-size: 17px;
    font-weight: 400;
    color: #575e66;
    line-height: 24px;
  }
}

::v-deep .v-step::after {
  content: "";
  position: absolute;
  width: 100px;
  height: 100px;
  background-image: url("../../../../assets/images/arrow.gif");
  background-repeat: no-repeat;
  background-size: contain;
  top: 0;
  left: 50%;
  z-index: 9999999;
}

::v-deep .v-step[data-popper-placement^="top"]::after {
  top: 35px;
  left: 50%;
  transform: translateX(-50%);
}

::v-deep .v-step[data-popper-placement^="bottom"]::after {
  top: -90%;
  left: 37%;
}

::v-deep .v-step[data-popper-placement^="left"]::after {
  top: -50%;
  left: 155%;
}

::v-deep .v-step[data-popper-placement^="right"]::after {
  top: -60%;
  left: -85%;
}

.clearfix {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 66px;
  color: #fff;
}

.clearfixZh {
  background-color: rgb(22, 132, 252);
}

.clearfixZhiHa {
  background-color: rgb(73, 177, 108);
}

.clearfixMap {
  background-color: rgb(238, 132, 21);
}

.clearfixFour {
  background-color: rgb(17, 179, 202);
}

.grid-card-tow {
  background-color: rgb(236, 247, 240);
}

.grid-card-three {
  background-color: rgb(253, 242, 231);
}

.grid-card-four {
  background-color: rgb(231, 247, 250);
}

::v-deep .content-des {
  margin: 24px 30px;
  height: 48px;
}

::v-deep .el-card__header {
  padding: 0 !important;
}

.zongHbtn {
  ::v-deep .el-button {
    background-color: rgb(255, 238, 221);
    color: rgb(57, 133, 218);
    border-color: rgb(57, 133, 218);
  }
}

.zhiHbtn {
  ::v-deep .el-button {
    background-color: rgb(255, 238, 221);
    color: rgb(100, 172, 96);
    border-color: rgb(100, 172, 96);
  }
}

.mapBtn {
  ::v-deep .el-button {
    background-color: rgb(255, 238, 221);
    color: rgb(241, 133, 22);
    border-color: rgb(241, 133, 22);
  }
}

.mdBtn {
  ::v-deep .el-button {
    background-color: rgb(255, 238, 221);
    color: rgb(52, 173, 176);
    border-color: rgb(52, 173, 176);
  }
}
</style>
<style>
@import "../../tour.css";
</style>
