<template>
  <div id="qualitytesting">
    <van-nav-bar title="单据确认" @click-left="onClickLeft" z-index="1" id="topDiv" left-arrow>
      <template #right>
        <div @click="barRight">
          <van-icon class="icontxt" v-show="!iconTxt" name="search"/>
          <span v-show="iconTxt" class="outCancel">取消</span>
        </div>
      </template>
    </van-nav-bar>
    <div v-show="iconTxt" class="orderForGoodsSearch">
      <div class="orderForGoodsSearchItem">
        <van-search
            label="开始时间"
            placeholder="开始时间"
            v-model="startDate"
            @search="gotoSearch"
            @click="showStartDatePicker = true"
            readonly
        />
        <van-datetime-picker
            type="date"
            title="选择开始日期"
            :min-date="initializationStartTime"
            :max-date="maxDate"
            @confirm="setStartDate"
            @cancel="DisstartDate"
            v-show="showStartDatePicker"
        />
      </div>
      <div class="orderForGoodsSearchItem">
        <van-search
            label="结束时间"
            placeholder="结束时间"
            v-model="endDate"
            @search="gotoSearch"
            @click="showEndDatePicker = true"
            readonly
        />
        <van-datetime-picker
            type="date"
            title="选择结束日期"
            :min-date="startDate ? new Date(startDate) : initializationStartTime"
            :max-date="maxDate"
            @confirm="setEndDate"
            @cancel="DisendDate"
            v-show="showEndDatePicker"
        />
      </div>
<!--      <div class="orderForGoodsSearchItem">-->
<!--        <van-field-->
<!--            v-model="codeType"-->
<!--            is-link-->
<!--            readonly-->
<!--            label="换货类型"-->
<!--            placeholder="选择换货类型"-->
<!--            @click="showPickerCodeType = true"-->
<!--            class="sortingSelect"-->
<!--        />-->
<!--        <van-popup-->
<!--            round-->
<!--            v-model:show="showPickerCodeType"-->
<!--            position="bottom"-->
<!--            :style="{ height: '50%' }"-->
<!--        >-->
<!--          <van-picker-->
<!--              show-toolbar-->
<!--              :columns="codeTypeOptions"-->
<!--              @confirm="onCodeTypeConfirm"-->
<!--              @cancel="DisshowPickerCodeType"-->
<!--          />-->
<!--        </van-popup>-->
<!--      </div>-->
      <div @click="gotoSearch" class="sBTN">
        搜索
      </div>
    </div>
    <list
        v-show="flag"
        :height="listHeight"
        :get-data-api="recordList"
        :query-params="queryParams"
        class="scrollwrap"
    >

      <template #default="{dataList}">
        <van-cell v-for="(item,index) in dataList" :key="item">
          <van-card>
            <template #bottom>
              <van-cell-group>
                <van-cell title="单据创建日期">
                  <span class="highlight">{{ new Date(item.createTime).toLocaleDateString() }}</span>
                </van-cell>
                <van-cell title="单据号">
                  <span class="highlight">{{ item.barterNo }}</span>
                </van-cell>
                <van-cell title="卷烟厂名称">
                  <span class="highlight">{{ item.recordName }}</span>
                </van-cell>
                <van-cell title="创建人">
                  <span class="highlight">{{ item.userName }}</span>
                </van-cell>

                <van-cell title="换货状态">
    <span :style="TypeColor(item.status)">
      <template v-if="item.status == 10">待确认</template>
      <template v-else-if="item.status == 20">待替换</template>
      <template v-else-if="item.status == 30">替换完成</template>
    </span>
                </van-cell>
                <van-cell>
                  <van-button
                      round
                      class="cardlist_four_btn"
                      @click="processor(item)"
                  >
                    确认
                  </van-button>
                </van-cell>
              </van-cell-group>
            </template>
          </van-card>
        </van-cell>
      </template>
    </list>
  </div>
</template>

<script>
import {
  getSortLine,
} from "@/api/requestfun/token";
import {
  Search, Button, NavBar, Empty, Card, Cell, CellGroup, DatetimePicker, Icon, Picker, Popup, Field, Checkbox,
  CheckboxGroup, Notify
} from "vant";
import List from '@/components/list/List.vue'
import {ref} from 'vue';
import {recordList} from "@/api/qrcode/relation/qrDiscardCode";


export default {
  name: "errorRecovery",
  components: {
    [Notify.name]: Notify,
    [Checkbox.name]: Checkbox,
    [CheckboxGroup.name]: CheckboxGroup,
    [Search.name]: Search,
    [Picker.name]: Picker,
    [Button.name]: Button,
    [NavBar.name]: NavBar,
    [Empty.name]: Empty,
    [Card.name]: Card,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [DatetimePicker.name]: DatetimePicker,
    [Icon.name]: Icon,
    [Popup.name]: Popup,
    [Field.name]: Field,
    List,
  },
  created() {
  },
  setup() {
    const columns = [];
    const result = ref('');
    const showPicker = ref(false);
    const startDate = ref('');
    const endDate = ref('');
    const showStartDatePicker = ref(false);
    const showEndDatePicker = ref(false);
    const today = new Date();
    const formattedToday = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`;
    startDate.value = formattedToday;
    endDate.value = formattedToday;
    const showPickerCodeType = ref(false);
    const showPickerType = ref(false);
    const codeTypeOptions = ref([
      {text: '有码换货', value: 10},
      {text: '无码换货', value: 20},
    ]);
    const exchangeStatusOptions = ref([
      {text: '待替换', value: 20},
      {text: '替换完成', value: 30},
    ]);
    return {
      showPickerCodeType,
      showPickerType,
      codeTypeOptions,
      exchangeStatusOptions,
      startDate,
      endDate,
      showStartDatePicker,
      showEndDatePicker,
      result,
      columns,
      showPicker,
      maxDate: new Date(),
      recordList
    }
  },
  data() {
    return {
      initializationStartTime: new Date(new Date().getFullYear(), 0, 1),
      checkedList: [],
      taskCode: "",
      interval: null,
      sequence: "",
      codeType: null,
      type: null,

      queryParams: {
        userName: null,
        productLineName: null,
        operationType: 2,
        status: 10,
        recordName: null,
        productLineId: null,
        codeType: null,
        content: null,
        subCode: null,
        subName: null,
        operationResult: null,
        params:{
          date: [this.getOrderDate(), this.getOrderDate()],
        }
      },
      code: '',
      orderDate: '',
      retailerName: '',
      lineCode: '',
      batchCode: "",
      orderNumber: "",
      listHeight: 0,
      showDate: false,
      iconTxt: true,
      lineName: '',
      flag: true
    };
  },
  mounted() {
    this.initHeight();
    this.queryParams.subCode = JSON.parse(localStorage.getItem('qrCodeProductLine')).code
    if (localStorage.getItem('detailPage') == '1') {
      this.gotoSearch();
      localStorage.removeItem('detailPage');
    }
  },
  watch: {
    // 监听属性被监听到时调用
    checkedList(newVal, oldVal) {
      this.barZerolocal("纠错查询checkedList", newVal)
    },
  },
  methods: {
    // 颜色
    TypeColor(status) {
      if (status == 10) {
        return "color: red;"
      } else if (status == 20) {
        return "color: blue;"
      } else if (status == 30) {
        return "status: green;"
      }
    },
    // 码类型选择
    onCodeTypeConfirm(value) {
      this.codeType = value.text;
      this.queryParams.codeType = value.value
      this.showPickerCodeType = false;
    },
    // 换货状态选择
    DisonExchangeStatusConfirm() {
      this.type = null
      this.queryParams.type = null
      this.showPickerType = false;
    },
    // 换货状态选择
    onExchangeStatusConfirm(value) {
      this.type = value.text;
      this.queryParams.type = value.value
      this.showPickerType = false;
    },
    // 换货状态选择
    DisshowPickerCodeType() {
      this.codeType = null
      this.queryParams.codeType = null
      this.showPickerCodeType = false
    },
    // 开始时间选择
    DisstartDate() {
      this.startDate = null
      this.showStartDatePicker = false
    },
    // 结束时间选择
    DisendDate() {
      this.endDate = null
      this.showEndDatePicker = false
    },
    // 获取当前时间
    getOrderDate() {
      return 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()));
    },
    // 本地存储
    barZerolocal(key, value) {
      localStorage.setItem(key, JSON.stringify(value))
    },
    // 获取本地存储
    barZerolocalextract(key) {
      return JSON.parse(localStorage.getItem(key))
    },
    // 获取排序线
    selSortLine() {
      getSortLine().then(
          res => {
            res.data.forEach(item => {
              this.columns.push(item.sortLineName)
            })
          }
      );
    },
    // 排序线选择
    barRight() {
      this.iconTxt = !this.iconTxt
    },
    // 日期格式转换
    formatDate(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    // 选择开始时间
    setStartDate(value) {
      this.startDate = this.formatDate(value);
      this.showStartDatePicker = false;
    },
    // 选择结束时间
    setEndDate(value) {
      this.endDate = this.formatDate(value);
      this.showEndDatePicker = false;
    },
    // 查询
    gotoSearch() {
      if (!this.startDate || !this.endDate) {
        Notify({type: "danger", message: "请选择开始和结束日期"});
        return;
      }
      if (new Date(this.startDate) > new Date(this.endDate)) {
        Notify({type: "danger", message: "结束日期必须大于开始日期"});
        return;
      }
      this.queryParams.params.date = [this.startDate, this.endDate]
      this.flag = true
      this.iconTxt = false
    },
    // 初始化高度
    initHeight() {
      this.$nextTick(() => {
        // 屏幕高度
        let windowH = document.documentElement.clientHeight;
        // 顶部内容区域高度
        let topDivH = document.getElementById('topDiv').offsetHeight;
        this.listHeight = windowH - topDivH - 10;
        console.log(this.listHeight)
      })
    },
    // 处理事件
    processor(item) {
      this.$router.push({
        path: "/replace_hand_examine",
        query: {id: item.id},
      });
    },
    // 返回上一页
    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; */
}

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

:deep(.van-checkbox__label) {
  line-height: 100px;
  margin-left: var(--van-checkbox-label-margin);
  color: var(--van-checkbox-label-color);
}

.cardlist_four_btn {
  width: 150px;
  height: 50px;
  margin-left: 77%;
  background: linear-gradient(-90deg, rgba(0, 105, 83, 1), rgba(33, 143, 120, 0.6));
  color: white;
}

:deep(.van-search) {
  background: none;
  width: 100%;
  padding-right: 0;
}


:deep(.van-search__content) {
  background: none;
  background-color: rgba(240, 240, 240, 1);
  height: 60px;
  line-height: 60px;
  border-radius: 12px;
  align-items: center;

}

:deep(.van-search__content .van-cell) {
  line-height: 60px;
}

.orderForGoodsSearchbtn {
  color: rgba(24, 164, 135, 1);
  background-color: rgba(240, 240, 240, 1);
  height: 60px;
  width: 100px;
  line-height: 60px;
  font-weight: bold;
  font-size: 26px;
  border-left: 1px solid rgb(205 243 235);
}

:deep(.van-search__action) {
  padding: 0;
  text-align: center;
}

:deep(.van-field__control) {
  font-size: 26px;
}


:deep(.van-cell,.van-cell__value) {
  background: none;
}

:deep(.van-card) {
  background: none;
  padding: 0;
}

:deep(.van-cell__value) {
  border-radius: 15px;
}

:deep(.van-cell__title span) {
  font-size: 26px;
  height: 70px;
  line-height: 70px;
  font-weight: 500;
}

:deep(.van-cell__value span) {
  font-size: 26px;
  height: 70px;
  line-height: 70px;
  font-weight: 400;
}

:deep(.errorValue .van-cell__value span) {
  font-size: 26px;
  height: 70px;
  line-height: 70px;
  font-weight: 400;
  color: red;
}

.sBTN {
  width: 94%;
  font-size: 26px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  color: #000000;
  background-color: rgba(240, 240, 240, 1);
  margin-left: 10px;
  border-radius: 30px;
  margin-bottom: 20px;
  margin-top: 20px;
}

.outCancel {
  font-size: 32px;
  font-weight: 400;
  color: #FFFFFF;
}

.icontxt {
  font-size: 40px;
}

.orderForGoodsSearch {
  background-color: rgba(0, 105, 83, 1);
  width: 100%;
  padding-left: 15px;
  padding-right: 15px;
  overflow: hidden;
}

.orderForGoodsSearchItem {
  width: 94.5%;

}

:deep(.van-field__label) {
  flex: none;
  box-sizing: border-box;
  width: var(--van-field-label-width);
  margin-right: var(--van-field-label-margin-right);
  color: var(--van-field-label-color);
  text-align: left;
  word-wrap: break-word;
  font-size: 22px;
  line-height: 70px;
}

:deep([data-v-b17af26a] .van-search__label) {
  padding: var(--van-search-label-padding);
  color: var(--van-search-label-color);
  font-size: 22px;
  line-height: 70px;
}

.sortingSelect {
  background: none;
  background-color: rgba(240, 240, 240, 1);
  width: 670px;
  margin: auto;
  height: 62px;
  line-height: 60px;
  display: flex;
  align-items: center;
  border-radius: 15px;
  margin-left: 12px;

}

.highlight {
  color: #df1919; /* 红色 */
  /* 你可以添加更多样式，例如字体大小、加粗等 */
  font-weight: bold;
}
</style>
