<template lang="html">
  <div class="checkTemplateVue">
    <div class="title">
      <input type="text" name="" value="" class="searchInput" spellcheck="false" placeholder="模板名" v-model="tempName" @keydown.enter="findAllTmp()">
      <div class="right">
        <button type="button" class="btn1" @click="popup.checkTemplateAdd = true" v-if="userInfo.lv>=2">新建模板</button>
        <button type="button" class="btn1" @click="del()" v-if="userInfo.lv>=2">删除模板</button>
      </div>
    </div>
    <div class="table">
      <table>
        <tr>
          <td>编号</td>
          <td>模板名</td>
          <td>渠道</td>
          <td>创建者</td>
          <td v-if="userInfo.lv>=2">详细信息</td>
          <td v-if="userInfo.lv>=2">开关(off/on)</td>
          <td v-if="userInfo.lv>=2">标记</td>
        </tr>
        <tr v-for="n,i in tempData.data">
          <td>{{ i + 1 + (page - 1) * 10 }}.</td>
          <td>
            <p class="lengthLimit" :title="n.tempName">{{ n.tempName }}</p>
          </td>
          <td>{{ n.pt }}</td>
          <td>{{ n.creator }}</td>
          <td v-if="userInfo.lv>=2">
            <button type="button" class="btn2" @click="popup.checkInfoDetails = true, childrenData = n">详情</button>
          </td>
          <td v-if="userInfo.lv>=2">
            <label :for="'toggle' + i" class="toggle">
              <input type="checkbox" name="" value="" :id="'toggle' + i" v-model="toggle[i]">
              <span @click="tempToggle(i)"></span>
            </label>
          </td>
          <td v-if="userInfo.lv>=2">
            <label :for="'checkbox' + i" class="checkbox">
              <input type="checkbox" name="" value="" :id="'checkbox' + i" v-model="checkbox[i]">
              <span></span>
            </label>
          </td>
        </tr>
        <tr class="empty" v-for="n,i in freeList">
          <td><!-- 编号 --></td>
          <td><!-- 模板名 --></td>
          <td><!-- 渠道 --></td>
          <td><!-- 创建者 --></td>
          <td v-if="userInfo.lv>=2"><!-- 详细信息 --></td>
          <td v-if="userInfo.lv>=2"><!-- 开关(off/on) --></td>
          <td v-if="userInfo.lv>=2"><!-- 标记 --></td>
        </tr>
      </table>
      <div class="pageList">
        <div @click="page = page - 1 < 1 ? 1 : page - 1">Provious</div>
        <div @click="page = n" :class="{ 'active': page === n }" v-for="n,i in pageList">{{ n }}</div>
        <div @click="page = page + 1 > pages ? pages : page + 1">Next</div> / 总共 {{ tempData.pageCount || 1 }} 页
      </div>
    </div>

    <!-- 检测模板详情 -->
    <div class="mask" v-if="popup.checkInfoDetails">
      <check-template-details
      @close="popup.checkInfoDetails = false"
      :user-info="userInfo"
      :children-data="childrenData"
      @update="findAllTmp()"
      :all-fields="allFields"
      :pt-selected-data="ptSelectedData" />
    </div>

    <!-- 删除模板 -->
    <div class="mask" v-if="popup.checkTemplateDelete">
      <check-template-delete
      @close="popup.checkTemplateDelete = false"
      :children-data="childrenData"
      @update="findAllTmp()"
      :checked-template="checkedTemplate"
      @clear-checkbox="clearCheckbox()"
      :pt-selected-data="ptSelectedData" />
    </div>

    <!-- 新建模板 -->
    <div class="mask" v-if="popup.checkTemplateAdd">
      <check-template-add
      @close="popup.checkTemplateAdd = false"
      :user-info="userInfo"
      @update="findAllTmp()"
      :all-fields="allFields"
      :pt-selected-data="ptSelectedData" />
    </div>

  </div>
</template>

<script>
import checkTemplateDetails from '@/components/module/checkTemplateDetails'
import checkTemplateDelete from '@/components/module/checkTemplateDelete'
import checkTemplateAdd from '@/components/module/checkTemplateAdd'
import { bus, requestFindAllTmp, requestStartTmp, requestStopTmp } from '@/vuex/request.js'
import { getPageList } from '@/assets/js/get-page-list.js'

export default {
  components: {
    checkTemplateDetails,
    checkTemplateDelete,
    checkTemplateAdd
  },
  data () {
    return {
      page: 0,
      pages: 7,
      pageList: [1],
      popup: {
        checkInfoDetails: false,
        checkTemplateDelete: false,
        checkTemplateAdd: false
      },
      toggle: [false, false, false, false, false, false, false, false, false, false],
      checkbox: [false, false, false, false, false, false, false, false, false, false],
      tempName: '',
      tempData: {},
      freeList: 10,
      pageSize: 10,
      childrenData: {},
      checkedTemplate: []
    }
  },
  props: ['userInfo', 'allFields', 'ptSelectedData'],
  mounted () {
    this.page = 1
  },
  methods: {
    clearCheckbox () {
      this.checkbox = [false, false, false, false, false, false, false, false, false, false]
    },
    tempToggle (i) {
      let data = {
        templateId: this.tempData.data[i].templateId
      }
      if (!this.toggle[i]) {
        requestStartTmp({}, data, (response) => {
          if (response.data) {
            if (response.data.state) {
              this.findAllTmp()
            } else {
              bus.$emit('alert', response.data.message)
            }
          } else {
            bus.$emit('alert', response + '.')
          }
        })
      } else {
        requestStopTmp({}, data, (response) => {
          if (response.data) {
            if (response.data.state) {
              this.findAllTmp()
            } else {
              bus.$emit('alert', response.data.message)
            }
          } else {
            bus.$emit('alert', response + '.')
          }
        })
      }
    },
    del () {
      if (!this.checkbox.some((n, i) => { return n === true })) {
        bus.$emit('alert', '您没有选择任何选项！')
      } else {
        this.popup.checkTemplateDelete = true
        this.checkedTemplate = []
        this.checkbox.forEach((n, i) => {
          if (n) {
            this.checkedTemplate.push(this.tempData.data[i])
          }
        })
      }
    },
    findAllTmp () {
      let pageSize = this.pageSize
      let data = {
        pageNo: this.page,
        pageSize: pageSize,
        tempName: this.tempName,
        pt: this.ptSelectedData.pt
      }
      requestFindAllTmp({}, data, (response) => {
        if (response.data) {
          if (response.data.state) {
            this.tempData = response.data.data
            this.pages = response.data.data.pageCount
            this.pageList = getPageList({
              displayCount: 7,  // 显示的页面总数（最大值）
              page: Math.max(this.page, 1),    // 当前页面
              pages: Math.max(response.data.data.pageCount, 1)    // 总页数
            })
            this.freeList = this.page === response.data.data.pageCount ? pageSize - (response.data.data.dataCount % pageSize === 0 ? pageSize : response.data.data.dataCount % pageSize) : 0
            if (!response.data.data.data.length) {
              this.freeList = 10
            }
            this.toggle = response.data.data.data.map((n, i) => {
              return n.open
            })
          } else {
            bus.$emit('alert', response.data.message)
          }
        } else {
          bus.$emit('alert', response + '.')
        }
      })
    }
  },
  watch: {
    page (val, oldVal) {
      this.findAllTmp()
    },
    ptSelectedData (val, oldVal) {
      this.findAllTmp()
    }
  }
}
</script>

<style lang="scss" scoped>
.checkTemplateVue{
  padding: 0 50px;
  max-width: 1600px;
  margin: auto;
  .title{
    padding: 15px 0;
    .right{
      float: right;
      height: 100%;
      vertical-align: middle;
      text-align: right;
      line-height: 36px;
      button:nth-of-type(n + 2){
        margin-left: 10px;
      }
    }
  }
}
.pageList{
  margin-top: 30px;
  margin-bottom: 10px;
}
</style>
