<template>
    <div class="app-container">
        <div class="nav_text" style="position: relative;">
            <van-nav-bar :title="title" left-text="返回" left-arrow @click-left="$router.go(-1);"/>
        </div>
        <!--查詢框-->
        <div class="search">
                <van-search v-model="dataform.queryStr" placeholder="請輸入編號或者姓名查詢"
                    show-action
                    @search="onSearch"
                    clearable
                    @clear="cLearSearch">
                  <template #action>
                    <div @click="onSearch">搜索</div>
                 </template>
                </van-search>
          </div>
        <!-- 顯示列表 滾動條https://my.oschina.net/u/4261744/blog/3315859 -->
        <vue-scroll :ops="ops" style="width:100%;height:100%">
            <div class="data-box">
                <van-row class="th-row" style="display:flex;">
                    <van-col style="width:40px">
                        <van-button size="mini" type="danger" style="display: flex;margin-top:4px;" @click="checkAll">
                            全選
                        </van-button>
                    </van-col>
                    <van-col style="width:80px">編號</van-col>
                    <van-col style="width:80px">姓名</van-col>
                    <van-col style="width:80px">工資</van-col>
                    <van-col style="width:80px">保額</van-col>
                    <van-col style="width:80px">時間</van-col>
                    <van-col style="width:80px">備注</van-col>
                </van-row>
                <!-- 數(shù)據(jù)循環(huán)展示，checkbox可以進行選擇-->
                <van-checkbox-group ref="checkboxGroup" @change="checkChange" v-model="checkedVal">
                    <van-row class="td-row" :style="{background:index %2==0?'#fff':'#ffcccc'}" v-for="(item,index) in accountList" :key="index" >
                        <van-col style="width:40px">
                            <van-checkbox style="padding-top: 4px;padding-left:10px;" icon-size="18px" :name="item" v-model="item.checked">
                            </van-checkbox>
                        </van-col>
                        <van-col class="common-ellipsis" @click="showContent (item.workerNo)">{{item.workerNo}}</van-col>
                        <van-col class="common-ellipsis" @click="showContent(item.workerName)">{{item.workerName}}</van-col>
                        <van-col class="common-ellipsis" @click="showContent(item.salary)">{{item.salary}}</van-col>
                        <van-col class="common-ellipsis" @click="showContent(item.amount)">{{item.amount}}</van-col>
                        <van-col class="common-ellipsis" @click="showContent(item.amountTime,1)">{{item.amountTime |dateFormat}}</van-col>
                        <van-col class="common-ellipsis" @click="showContent(item.remark)">{{item.remark}}</van-col>
                    </van-row>
                </van-checkbox-group>
            </div>
        </vue-scroll>
        <!-- 彈出省略的內(nèi)容 -->
        <van-popup v-model="showPopup" class="hidden-wrap">
          <van-row class="hidden-content">{{ ellContent }}</van-row>
        </van-popup>
  </div>
 </template>   
     <script>
    export default {
      name: "vantTable",
      filters:{
        dateFormat:function(val){
            //省略......
            return val;
        }
      },
      data() {
        return {
          title:"測試",
          dataform:{
              queryStr:'',
          },
          isCheckAll:false,
          showPopup: false, // 顯示省略的內(nèi)容
          ellContent: "", // 省略的內(nèi)容
          costName: "",
          checkedVal:[],
          accountList: [
            { workerNo: "122212122", workerName: "張良-牛牛牛牛", salary: "1000", amount: "50000", amountTime: "20021201" ,remark:"what are you 弄啥咧" },
            { workerNo: "133131331", workerName: "天明-牛牛", salary: "1111", amount: "40000", amountTime: "20021203" ,remark:"what are you 弄啥咧" },
            { workerNo: "1423241232", workerName: "少司命-牛牛牛牛牛", salary: "1222", amount: "60000", amountTime: "20021001"  ,remark:"what are you 弄啥咧"},
            { workerNo: "15231313133", workerName: "高漸離-牛牛牛牛牛", salary: "1333", amount: "20000", amountTime: "20021021" ,remark:"what are you 弄啥咧" },
            { workerNo: "162342342342", workerName: "雪女-牛牛牛牛牛牛", salary: "1444", amount: "10000", amountTime: "20020801",remark:"what are you 弄啥咧"  },
          ],
          ops: {
            vuescroll: {},
            scrollPanel: {},
            rail: {
            keepShow: true
            },
            bar: {
            hoverStyle: true,
            onlyShowBarOnScroll: false, //是否只有滾動的時候才顯示滾動條
            background: "#F5F5F5",//滾動條顏色
            opacity: 0.5,//滾動條透明度
            "overflow-y": "hidden" //使用橫向滾動 豎向就是"overflow-x": "hidden"
            }
        }
        };
      },
      created() {},
      methods: {
        // 顯示省略的內(nèi)容
        showContent(content,type) {
          if (content == "") {
            return;
          } else {
          if(type==1){
            var format = this.$options.filters['dateFormat'];
            //日期通過過濾器格式化一下
            this.ellContent = format(content)
          }else{
            this.ellContent = content;
          }
            this.showPopup = true;
          }
        },
        checkAll(){
            if(!this.isCheckAll){
                this.$refs.checkboxGroup.toggleAll(true);
                this.isCheckAll=true;
            }else{
                this.$refs.checkboxGroup.toggleAll();
                this.isCheckAll=false;
            }
        },
        onSearch(){
        },
        cLearSearch(){
        },
        checkChange(){
        },
      },
    };
 </script>
<style lang="less" scoped>
     .data-box{
        font-size:13px;
        margin:12px 0px;
        border:1px solid #fd7273;
        .th-row{
            height:30px;
            line-height:30px;
            padding:0px 12px;
            background:#fd7273;
        }
        .td-row{
            height:30px;
            line-height:30px;
            padding:0px 12px;
        }
    }
    // 超出 1 行顯示省略號
    .common-ellipsis {
      width:80px;
      height: 100%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    // 滾動條位置 --展示的是豎向
    // /deep/.__bar-is-vertical {
    // right: -1px !important;
    // }
    // // 隱藏橫向滾動條
    // /deep/.__bar-is-horizontal {
    // display: none !important;
    // }
    // 滾動條位置 --展示橫向
    /deep/.__bar-is-vertical {
        display: none !important;
    }
    // 隱藏橫向滾動條
    /deep/.__bar-is-horizontal {
        bottom: -1px !important;
    }
</style>