<template>
  <!-- 盒条件-基础管理-品规管理 -->
  <div id="qualitytesting">
    <!-- 导航条  -->
    <van-nav-bar title="品规列表" left-arrow @click-left="onClickLeft" z-index="1" id="topDiv">
      <template #right>
        <van-icon v-if="show" name="search" size="22" @click="icons"/>
        <span v-else class="cancel" @click="icons">取消</span>
      </template>
    </van-nav-bar>
    <div v-show="!show" class="dropdown">
      <van-dropdown-menu ref="menuRef">
        <van-dropdown-item v-model="value" :options="options"/>
        <van-dropdown-item title="筛选" ref="itemRef">
          <div style="padding: 5px 16px 10px 16px;">
            <van-search v-model="value1" placeholder="请输入卷烟名称" placeholder-style="font-size:30px"/>
            <van-search v-model="value2" placeholder="请输入卷烟代码" placeholder-style="font-size:30px"/>
            <van-search v-model="value3" placeholder="请输入本地简码" placeholder-style="font-size:30px"/>
            <van-button class="btn" type="primary" block round @click="search">
              搜索
            </van-button>
          </div>
        </van-dropdown-item>
      </van-dropdown-menu>
    </div>
    <list v-show="flag" :height="listHeight" :get-data-api="listBrand" :query-params="queryParams"
          class="scrollwrap">
      <template #default="{ dataList }">
        <div v-for="(item, index) in dataList" :key="index" class="divAll">
          <div class="cellAll">
            <van-cell title="序号" :value="index + 1"/>
            <div class="bdr"></div>
            <van-cell title="卷烟名称" :value="item.name"/>
            <div class="bdr"></div>
            <van-cell title="条形码(件)" :value="item.barcodePiece"/>
            <div class="bdr"></div>
            <van-cell title="卷烟编码" :value="item.code"/>
          </div>
        </div>
      </template>
    </list>
    <van-popup v-model:show="showPicker" round position="bottom">
      <van-picker :columns="columns" @cancel="showPicker = false" @confirm="onConfirm"/>
    </van-popup>
    <van-popup v-model:show="showPickers" round position="bottom">
      <van-datetime-picker v-if="this.fieldValue != '年'" v-model="currentDate" :type="columnsType" title="选择年月日"
                           @confirm="confirms" :min-date="minDate" :max-date="maxDate"/>
      <van-picker v-else title="选择年份" :default-index="defaultPickerIndex" show-toolbar :columns="yearColumns"
                  @cancel="showPickers = false" @confirm="confirmYear"/>
    </van-popup>
  </div>
</template>

<script>
import {
  Search,
  Button,
  NavBar,
  Empty,
  Card,
  Cell,
  CellGroup,
  Icon,
  Picker,
  Popup,
  Field,
  DatetimePicker
} from "vant";
import {listBrand} from "@/api/qrcode/device/brand/brand";
import List from '@/components/list/List.vue'

export default {
  components: {
    [Search.name]: Search,
    [Button.name]: Button,
    [NavBar.name]: NavBar,
    [Empty.name]: Empty,
    [Card.name]: Card,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Icon.name]: Icon,
    [Picker.name]: Picker,
    [Popup.name]: Popup,
    [Field.name]: Field,
    [DatetimePicker.name]: DatetimePicker,
    List
  },
  created() {
    this.$nativeQRCode.setCallBackFun((res) => {
    });
  },
  setup() {
    return {
      listBrand
    }
  },
  data() {
    return {
      currentDate: new Date(new Date().getFullYear() + ',' + (new Date().getMonth() + 1 < 10 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1) + ',' + (new Date().getDate() < 10 ? '0' + (new Date().getDate()) : new Date().getDate())),
      columnsType: 'date',
      loading: false,
      fieldValue: "",
      finished: false,
      yearValue: "",
      listHeight: 0,
      defaultPickerIndex: "",
      showPicker: false,
      showPickers: false,
      yearColumns: [],
      // searchKey: '',
      refreshing: false,

      //查询参数
      queryParams: {
        // pageSize:10,
        // pageNum:1,
        name: "",
        localCode: "",
        code: '',
      },

      //绑定输入框的值
      value1: '',
      value2: '',
      value3: '',

      flag: true,
      orderDate: '',
      total: 0,
      show: true,
      value: "",

      minDate: new Date(2000, 0, 1),
      maxDate: new Date(2050, 5, 1),
    }
  },
  mounted() {
    this.initHeight()
  },
  methods: {
    // 搜索
    search() {
      this.queryParams.name = this.value1
      this.queryParams.localCode = this.value2
      this.queryParams.code = this.value3
      this.listBrand;
      this.show = !this.show
    },
    // 展示 不展示
    icons() {
      this.show = !this.show
    },
    // 时间选择器
    confirms(val) {
      this.value1 = val.getFullYear() + '-' + (val.getMonth() + 1 < 10 ? '0' + (val.getMonth() + 1) : val.getMonth() + 1) + '-' + (val.getDate() < 10 ? '0' + (val.getDate()) : val.getDate())
      this.showPickers = false
    },
    // 筛选
    onConfirm(val) {
      this.fieldValue = val.text
      if (val.text == '年') {
        this.value1 = new Date().getFullYear()
        for (let i = 2000; i < 2099; i++) {
          this.yearColumns.push(i)
        }
        this.yearColumns.forEach((item, index) => {
          if (this.value1 == this.yearColumns[index]) {
            this.defaultPickerIndex = index
          }
        })
      } else if (val.text == '月') {
        this.columnsType = 'year-month'
        this.value1 = new Date().getFullYear() + '-' + (new Date().getMonth() + 1 < 10 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1)
      } else {
        this.columnsType = 'date'
        this.value1 = new Date().getFullYear() + '-' + (new Date().getMonth() + 1 < 10 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1) + '-' + (new Date().getDate() < 10 ? '0' + (new Date().getDate()) : new Date().getDate())
      }
      this.showPicker = false
    },
    // 获取屏幕高度
    initHeight() {
      this.$nextTick(() => {
        // 屏幕高度
        let windowH = document.documentElement.clientHeight;

        // 顶部内容区域高度
        let topDivH = document.getElementById('topDiv').offsetHeight;
        this.listHeight = windowH - topDivH - 46;
      })
    },
    // 返回
    onClickLeft() {
      window.history.go(-1);
    },
  },
  computed: {},

};
</script>

<style scoped>
::v-deep .van-loading__text {
  margin-top: 10px;
  display: inline-block;
  margin-left: var(--van-padding-xs);
  color: var(--van-loading-text-color);
  font-size: 0.45rem;
  vertical-align: middle;
}

::v-deep .van-loading__circular {
  margin-top: 5px;
  display: block;
  width: 100%;
  height: 100%;
  color: green;
}

::v-deep .van-loading__spinner {
  position: relative;
  display: inline-block;
  width: var(--van-loading-spinner-size);
  max-width: 100%;
  height: var(--van-loading-spinner-size);
  max-height: 100%;
  vertical-align: middle;
}

.scrollwrap {
  overflow: auto;
}


:deep(.van-cell__value) {
  position: relative;
  overflow: hidden;
  color: var(--van-cell-value-color);
  text-align: right;
  vertical-align: middle;
  word-wrap: break-word;
  flex: 2.5;
  /* font-weight: 400 !important; */
  font-size: 23px !important;
}

.cardlist_four_btn {
  width: 80px;
  height: 30px;
  margin-left: 72%;
  background-color: rgb(22, 155, 213);
  color: white;
}

::v-deep.van-search {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: var(--van-search-padding);
  background: #fff;
  height: 62px;
  margin-top: 10px;
  border-radius: 8px;
  font-size: 28px;
  font-family: Source Han Sans CN,sans-serif;
  font-weight: 400;
  color: #3B3B3B;
}

::v-deep.van-field__control {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  color: var(--van-field-input-text-color);
  line-height: inherit;
  text-align: left;
  background-color: #fff;
  border: 0;
  resize: none;
  -webkit-user-select: auto;
  user-select: auto;
}

::v-deep.van-search__field .van-field__left-icon {
  color: #000 !important;
}

[data-v-ef63022a].van-cell ::-webkit-input-placeholder {
  font-size: 25px;
  font-family: Source Han Sans CN,sans-serif;
  font-weight: 400;
  color: #979797;
  margin-left: 2px;
}

::v-deep.van-cell__right-icon {
  height: var(--van-cell-line-height);
  font-size: var(--van-cell-icon-size);
  line-height: var(--van-cell-line-height);
  margin-top: 20px !important;
  display: flex;
  justify-content: center;
  align-content: center;
}

::v-deep[data-v-ef63022a].van-cell {
  border-radius: 8px;
  margin-top: 10px;
  height: 62px;
  display: flex;
  /* line-height: 62px; */
  flex-direction: row;
  align-items: center;
  padding-left: 24px;
}

.van-search ::-webkit-input-placeholder {
  font-size: 25px;
  font-family: Source Han Sans CN,sans-serif;
  font-weight: 400;
  color: #979797;
}

.btn {
  height: 63px;
  background: #FFFFFF;
  border-radius: 32px;
  margin-top: 20px;
  font-size: 26px;
  font-family: Source Han Sans CN,sans-serif;
  font-weight: 600;
  color: #000000;
}

.all {
  position: relative;
}

.dropdown {
  position: absolute;
  z-index: 999;
  width: 100%;
  background-color: #006953;
}

::v-deep.dropdown[data-v-f7229668] {
  position: absolute;
  z-index: 999;
  width: 100%;
  background-color: #006953;
}

.divAll {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.searchtop {
  position: fixed;
  top: 46px;
  left: 0;
  right: 0;
  z-index: 1;
}

::v-deep.van-cell {
  position: relative;
  display: flex;
  box-sizing: border-box;
  width: 100%;
  padding: var(--van-cell-vertical-padding) var(--van-cell-horizontal-padding);
  overflow: hidden;
  color: var(--van-cell-text-color);
  font-size: 26px;
  font-weight: 600;
  line-height: var(--van-cell-line-height);
  background: var(--van-cell-background-color);
}

.cellAll {
  width: 90%;
  height: 259px;
  background: #FFFFFF;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 33px 20px;
  margin-top: 20px;
}

.bdr {
  width: 100%;
  height: 2px;
  background: #E7E7E7;
}

.cancel {
  color: #fff;
  font-size: 28px;
}
</style>
