<template>
  <!-- 盒条件-基础管理-操作记录copy -->
  <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="queryParams.userName" placeholder="请输入操作人名称"
                        placeholder-style="font-size:30px"/>
            <van-field v-model="fieldValue.text" is-link readonly left-icon="search" placeholder="请选择操作类型"
                       @click="showPicker = true">
              <van-icon name="search" color="#ooo" size="22" @click="icons"/>
            </van-field>
            <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="wasteCodeDataList" :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="item.subName"/>
            <div class="bdr"></div>
            <van-cell title="执行订单号" :value="item.qrCode"/>
            <div class="bdr"></div>
            <van-cell title="操作类型"
                      :value="item.operationType == 1 ? '关联检查' : item.operationType == 2 ? '关联' : item.operationType == 3 ? '解绑' : '无'"/>
            <div class="bdr"></div>
            <van-cell title="操作人名称" :value="item.userName"/>
            <div class="bdr"></div>
            <van-cell title="操作记录时间" :value="item.createTime"/>
          </div>
        </div>
      </template>
    </list>
    <van-popup v-model:show="showPicker" round position="bottom">
      <van-picker :columns="columns" @cancel="showPicker = false" @confirm="pitchOn($event)"/>

    </van-popup>
  </div>
</template>

<script>
import {cartonOrder} from "@/api/requestfun/token";
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'
import OpenDataWap from "@/common/nativeJSdk/OperData";

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) => {
    });
    this.wasteCodeDataList();
  },
  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,
      finished: false,
      yearValue: "",
      listHeight: 0,
      defaultPickerIndex: "",
      showPicker: false,
      showPickers: false,
      yearColumns: [],
      //下拉框所需参数
      fieldValue: {text: '', value: ''},
      columns: [
        {text: '关联检查', value: 1},
        {text: '关联', value: 2},
        {text: '解绑', value: 3},
      ],
      // searchKey: '',
      refreshing: false,
      queryParams: {
        // pageSize:10,
        // pageNum:1,
        qrCode: "",
        userName: "",
        operationType: '',
      },
      flag: true,
      orderDate: '',
      total: 0,
      show: true,
      value: "",

      minDate: new Date(2000, 0, 1),
      maxDate: new Date(2050, 5, 1),

    }
  },
  mounted() {
    this.initHeight()
  },
  methods: {
    // 获取数据
    wasteCodeDataList(){
      let result = OpenDataWap.pkgbox.queryQrCodeInsRelationPo(JSON.stringify({data: ''}));
      let res = this.generateResObject(result);
      console.log(result, 'res')
      return res;
    },
    // 处理返回结果
    generateResObject(str) {
      let res = null;
      try {
        res = JSON.parse(str);
        return res;
      } catch (e) {
        return res;
      }
    },
    // 下拉框确认事件
    pitchOn(value) {
      // 处理确认事件，将选中的索引值赋给fieldValue，并隐藏下拉框
      this.fieldValue.text = value.text;
      this.fieldValue.value = value.value;
      this.queryParams.operationType = value.value;
      this.showPicker = false;
    },
    // 搜索
    search() {
      this.wasteCodeDataList;
    },
    //展示 不展示
    icons() {
      this.show = !this.show
    },
    // 根据时间进行查询
    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>

.scrollwrap {
  overflow: auto;
}

[data-v-3bfd2847].van-cell ::-webkit-input-placeholder {
  font-size: 25px;
  font-family: Source Han Sans CN,sans-serif;
  font-weight: 400;
  color: var(--van-cell-value-color) !important;
  margin-left: 2px;
}

: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;
}

.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;
}

.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;
}

.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>
