<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="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" clearable 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"/>
            <van-cell title="二维码" :value="item.qrCode"/>
            <van-cell title="操作类型"
                      :value="item.operationType == 1 ? '关联校验' : item.operationType == 2 ? '关联' : item.operationType == 3 ? '解绑' : item.operationType == 4 ? '条替换' : item.operationType == 5 ? '报废' : item.operationType == 6 ? '件替换' : item.operationType == 7 ? '出库' : item.operationType == 8 ? '查询' : item.operationType == 9 ? '全解绑' : item.operationType == 10 ? '件码激活' : '未知' "/>
            <van-cell title="操作人名称" :value="item.userName"/>
            <van-cell title="操作结果">
              <template #value>
                <span :style="{ color: item.operationResultStr === '成功' ? 'green' : 'red' }">
                  {{ item.operationResultStr }}
                </span>
              </template>
            </van-cell>
            <van-cell title="操作记录时间" :value="item.createTime"/>
          </div>
        </div>
      </template>
    </list>
    <van-popup v-model:show="showPicker" round position="bottom">
      <van-picker :columns="columns" @cancel="handleCancel" @confirm="pitchOn($event)"/>
    </van-popup>
  </div>
</template>

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

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 {}
  },
  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},
        {text: '条替换', value: 4},
        {text: '报废', value: 5},
        {text: '件替换', value: 6},
        {text: '出库', value: 7},
        {text: '查询', value: 8},
        {text: '全解绑', value: 9},
        {text: '件码激活', value: 10},
      ],
      // searchKey: '',
      refreshing: false,
      queryParams: {
        qrCode: "",
        userName: "",
        operationType: '',
        subCode: this.authCode
      },
      flag: true,
      orderDate: '',
      total: 0,
      show: true,
      value: "",

      // 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()),
      // fieldValue: "日",
      // columns: [
      //     { text: '年', value: 'Hangzhou' },
      //     { text: '月', value: 'Ningbo' },
      //     { text: '日', value: 'Wenzhou' },
      // ],
      minDate: new Date(2000, 0, 1),
      maxDate: new Date(2050, 5, 1),

    }
  },
  computed: {
    ...mapState("sysConf", ["authCode", "cloudServerAddress"]),
  },
  mounted() {
    this.initHeight()
  },
  methods: {
    wasteCodeDataList,
    confirmYear(val) {
      this.value1 = val
      this.showPickers = false
    },
    // 取消选择事件
    handleCancel(){
      this.showPicker = false;
      this.queryParams.operationType = '';  // 取消时清空选中内容
      this.fieldValue.text = '';
      this.fieldValue.value = '';
    },
    // 确认选择事件
    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);
    },
  },

};
</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;
  /* animation: van-rotate var(--van-loading-spinner-animation-duration) linear infinite; */
}

.scrollwrap {
  overflow: auto;
}

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

.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: 50px;
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 28px;
  font-family: Source Han Sans CN,sans-serif;
  font-weight: 400;
  color: #3B3B3B;
}



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

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



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

::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;
  background: var(--van-cell-background-color);
  border-bottom: 1px solid #c5c5c5;
}

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


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