<template>
  <div class="boxbig">
    <div class="mean-content">
      <div class="right-btns">
        <!-- 按钮 -->
        <a-button class="table"
                  @click="handleTable">
          <a-icon type="table" />
        </a-button>
        <!-- 弹出框 -->
        <div class="tableSelect"
             v-if="tableSelectVisible">
          <a-checkbox-group :value="checkValue"
                            :options="colOptions" />
          <a-button class="table"
                    @click="tableSelectVisible=false">
            关闭
          </a-button>
        </div>
      </div>

      <div class="pqc-table">
        <!-- 表格内容 -->
        <a-table :dataSource="expertList"
                 :rowKey='record=>record.id'
                 :pagination="false"
                 style="width:100%"
                 class="wocao"
                 :scroll="{ x: 900,y:332 } ">

          <a-table-column v-if="colIsTrue[0]"
                          title="a"
                          dataIndex="a"
                          key="a"
                          class="hang"
                          style="width:80px" />
          <a-table-column v-if="colIsTrue[1]"
                          title="b"
                          dataIndex="b"
                          style="width:80px"
                          class="maxhang"
                          key="b" />
          <a-table-column v-if="colIsTrue[2]"
                          title="c"
                          class="hang"
                          style="width:80px"
                          dataIndex="c"
                          key="c" />
          <a-table-column v-if="colIsTrue[3]"
                          title="d"
                          class="hang"
                          style="width:80px"
                          dataIndex="d"
                          key="d" />
          <a-table-column v-if="colIsTrue[4]"
                          title="e"
                          class="hang"
                          style="width:80px"
                          dataIndex=e
                          key="e" />
          <a-table-column v-if="colIsTrue[5]"
                          title="f"
                          class="hang"
                          style="width:80px"
                          dataIndex='f'
                          key="f" />
          <a-table-column v-if="colIsTrue[6]"
                          title="g"
                          dataIndex='g'
                          style="width:80px"
                          class="hang"
                          key="g" />
          <a-table-column v-if="colIsTrue[7]"
                          title="h"
                          dataIndex='h'
                          style="width:80px"
                          class="hang"
                          key="h" />
          <a-table-column v-if="colIsTrue[8]"
                          title="i"
                          class="hang"
                          style="width:80px"
                          dataIndex='i'
                          key="i" />
          <a-table-column v-if="colIsTrue[9]"
                          title="j"
                          dataIndex='j'
                          style="width:80px"
                          class="hang"
                          key="j" />
          <a-table-column v-if="colIsTrue[10]"
                          title="k"
                          dataIndex='k'
                          style="width:80px"
                          class="hang"
                          key="k" />
          <a-table-column v-if="colIsTrue[11]"
                          title="l"
                          dataIndex='l'
                          class="hang"
                          style="width:80px"
                          key="l" />
          <a-table-column v-if="colIsTrue[12]"
                          title="m"
                          dataIndex='m'
                          style="width:80px"
                          class="hang"
                          key="m" />
          <a-table-column v-if="colIsTrue[13]"
                          title="n"
                          dataIndex='n'
                          style="width:80px"
                          class="hang"
                          key="n" />
          <a-table-column v-if="colIsTrue[14]"
                          title="o"
                          dataIndex='o'
                          class="hang"
                          style="width:80px"
                          key="o" />
          <a-table-column v-if="colIsTrue[15]"
                          title="p"
                          dataIndex='p'
                          style="width:80px"
                          class="hang"
                          key="p" />

          <a-table-column v-if="colIsTrue[16]"
                          title="q"
                          dataIndex='q'
                          class="hang"
                          style="width:80px"
                          key="q" />
          <a-table-column v-if="colIsTrue[17]"
                          title="r"
                          dataIndex='r'
                          style="width:80px"
                          class="hang"
                          key="r" />
          <a-table-column v-if="colIsTrue[18]"
                          title="s"
                          dataIndex='s'
                          class="hang"
                          style="width:80px"
                          key="s" />
          <a-table-column v-if="colIsTrue[19]"
                          title="t"
                          dataIndex='t'
                          style="width:80px"
                          class="hang"
                          key="t" />
          <a-table-column v-if="colIsTrue[20]"
                          title="u"
                          dataIndex='u'
                          class="hang"
                          style="width:80px"
                          key="u" />
          <a-table-column v-if="colIsTrue[21]"
                          title="v"
                          dataIndex='v'
                          style="width:80px"
                          class="hang"
                          key="v" />
          <a-table-column v-if="colIsTrue[22]"
                          title="w"
                          dataIndex='w'
                          class="hang"
                          style="width:80px"
                          key="w" />
          <a-table-column v-if="colIsTrue[23]"
                          title="x"
                          dataIndex='x'
                          class="hang"
                          style="width:80px"
                          key="x" />
          <a-table-column v-if="colIsTrue[24]"
                          title="y"
                          dataIndex='y'
                          style="width:80px"
                          class="hang"
                          key="y" />

          <a-table-column v-if="colIsTrue[25]"
                          title="z"
                          dataIndex='z'
                          style="width:80px"
                          class="hang"
                          key="z" />
          <a-table-column v-if="colIsTrue[26]"
                          title="A"
                          dataIndex='A'
                          class="hang"
                          style="width:80px"
                          key="A" />
          <a-table-column v-if="colIsTrue[27]"
                          title="B"
                          dataIndex='B'
                          class="hang"
                          style="width:80px"
                          key="B" />
          <a-table-column v-if="colIsTrue[28]"
                          title="C"
                          dataIndex='C'
                          style="width:80px"
                          class="hang"
                          key="C" />
          <a-table-column v-if="colIsTrue[29]"
                          title="D"
                          dataIndex='D'
                          class="hang"
                          style="width:80px"
                          key="D" />
          <a-table-column v-if="colIsTrue[30]"
                          title="E"
                          dataIndex='E'
                          class="hang"
                          style="width:80px"
                          key="E" />
          <a-table-column v-if="colIsTrue[31]"
                          title="F"
                          class="hang"
                          dataIndex='F'
                          style="width:80px"
                          key="F" />

          <!-- <a-table-column title="操作"
                      key="action">
        <template slot-scope="record">
          <a-button size="small"
                    icon="edit"
                    type="primary"
                    @click="openUpd(record.id)">编辑</a-button>
          <a-button size="small"
                    icon="delete"
                    type="primary"
                    @click="openDel(record)">删除</a-button>
        </template>
      </a-table-column> -->
        </a-table>
      </div>
      <div class="table-pagination">

        {{colIsTrue}}
        {{checkValue}}
        <a-config-provider :locale="$store.getters.language === 'en' ? enUS : zhCN">
          <a-pagination :show-total="
                    (total, range) =>
                      `${$t('Implementation.sum')} ${2}${$t(
                        'Implementation.count'
                      )}`
                  "
                        size="small"
                        show-size-changer />
        </a-config-provider>
      </div>
    </div>
  </div>
</template>

<script>
import store from "@/store";
import zhCN from "ant-design-vue/es/locale-provider/zh_CN";
import enUS from "ant-design-vue/es/locale-provider/en_US";
export default {
  name: 'checkMeaningShow',



  data () {
    return {
      zhCN,
      enUS,
      tableSelectVisible: false,
      colOptions: [
        { label: 'a', value: 0, onChange: this.colChange },
        { label: 'b', value: 1, onChange: this.colChange },
        { label: 'c', value: 2, onChange: this.colChange },
        { label: 'd', value: 3, onChange: this.colChange },
        { label: 'e', value: 4, onChange: this.colChange },
        { label: 'f', value: 5, onChange: this.colChange },
        { label: 'g', value: 6, onChange: this.colChange },
        { label: 'h', value: 7, onChange: this.colChange },
        { label: 'i', value: 8, onChange: this.colChange },
        { label: 'j', value: 9, onChange: this.colChange },
        { label: 'k', value: 10, onChange: this.colChange },
        { label: 'l', value: 11, onChange: this.colChange },
        { label: 'm', value: 12, onChange: this.colChange },
        { label: 'n', value: 13, onChange: this.colChange },
        { label: 'o', value: 14, onChange: this.colChange },
        { label: 'p', value: 15, onChange: this.colChange },
        { label: 'q', value: 16, onChange: this.colChange },
        { label: 'r', value: 17, onChange: this.colChange },
        { label: 's', value: 18, onChange: this.colChange },
        { label: 't', value: 19, onChange: this.colChange },
        { label: 'u', value: 20, onChange: this.colChange },
        { label: 'v', value: 21, onChange: this.colChange },
        { label: 'w', value: 22, onChange: this.colChange },
        { label: 'x', value: 23, onChange: this.colChange },
        { label: 'y', value: 24, onChange: this.colChange },
        { label: 'z', value: 25, onChange: this.colChange },
        { label: 'A', value: 26, onChange: this.colChange },
        { label: 'B', value: 27, onChange: this.colChange },
        { label: 'C', value: 28, onChange: this.colChange },

        { label: 'D', value: 29, onChange: this.colChange },
        { label: 'E', value: 30, onChange: this.colChange },
        { label: 'F', value: 31, onChange: this.colChange },



      ],
      colIsTrue: [],
      checkValue: [],
      expertList: []
    }
  },
  created () {//当所有数据都加载完成之后，将checkbox设置为全部选中状态
    this.expertList = '1232412412414'.split('').map((v, i) => ({ a: '231', b: '大撒方法为伟大发发大撒方法为伟大发发大撒方法为伟大发发大撒大撒方法为伟大发发大撒方法为伟大发发大撒方法为伟大发发大撒方法为伟大发发方法为伟大发发', c: '大撒方法为伟大发发大撒方法为伟大发发大撒方法为伟大发发大撒方法为伟大发发大撒方法为伟大发发', d: '1111大撒方法为伟大发发大撒方法为伟大发发大撒方法为伟大发发1', e: '', f: '大撒方法为伟大发发大撒方法为伟大发发大撒方法为伟大发发', g: '11111', h: '', i: '', j: '11111', k: '', l: '', m: '11111', n: '', o: '', p: '11111', q: '', r: '', s: '11111', t: '', u: '', v: '11111', w: '', x: '', y: '11111', z: '', A: '11111', B: '', C: '大撒方法为伟大发发大撒方法为伟大发发大撒方法为伟大发发大撒方法为伟大发发大撒方法为伟大发发大撒方法为伟大发发', F: 'wocao大撒方法为伟大发发大撒方法为伟大发发大撒方法为伟大发发大撒方法为伟大发发大撒方法为伟大发发大撒方法为伟大发发', id: i }))
    this.colOptions && this.colOptions.forEach((item, index) => {
      this.colIsTrue.push(true)
      this.checkValue.push(index)
    })
  },
  mounted () {//菜单栏弹出后，点击其它地方，关闭菜单栏
    // let that = this;
    document.getElementsByClassName("pqc-table")[0].addEventListener("click", this.clickHandler, false)
    // $(document).bind("click", function (e) {
    //   var target = $(e.target);
    //   if (target.closest(".tableSelect").length == 0 && target[0].className.indexOf('table') == -1) {
    //     that.tableSelectVisible = false;
    //   }
    // })
    this.colOptions && this.colOptions.forEach((item, index) => {
      this.colIsTrue.push(true)
      this.checkValue.push(index)
    })
  },
  methods: {
    clickHandler () {
      this.tableSelectVisible = false
    },
    colChange (e) {//当checkbox有修改时
      const index = e.target.value;

      this.colIsTrue[index] === true ?
        this.$set(this.colIsTrue, index, false) :
        this.$set(this.colIsTrue, index, true)

      if (e.target.checked) this.checkValue.push(index)
      else {
        this.checkValue.forEach((item, arrIndex) => {
          if (item == index) {
            console.log('item', item, 'index', index)
            this.checkValue.splice(arrIndex, 1)
            this.$set(this, 'checkValue', this.checkValue)
          }
        })
      }
    },
    handleTable () {//打开菜单栏
      this.tableSelectVisible = true;
    },
  }

};
</script>

<style lang="scss" scoped>
.hang {
  width: 100px !important;
}
.right-btns {
  position: relative;
  .tableSelect {
    position: absolute;
    background: #fff;
    border: 1px solid #ecedef;
    display: inline-block;
    top: 33px;
    left: 0;
    z-index: 100;
    padding: 10px;
    width: 80px;
    height: 30vw;
    overflow-y: scroll;
  }
}
.calss-1 {
  width: 100%;
}
.table-pagination {
  text-align: right;

  margin-top: 30px;
}
.pqc-table {
  width: 100vw;
}
.ant-table-fixed {
  th {
    width: 10vw;
  }
}
/deep/.ant-table-tbody > tr > td,
.ant-table-thead > tr > th {
  padding: 0 4px !important;
  // /* word-wrap: break-word; */
  word-wrap: normal;
}
.mean-content {
  width: 100vw;
}
</style>