<template>
    <div class="h100">
      <van-popup
        v-model="moreSearchShow"
        class="more-search"
        position="right"
        :style="{ width: '75%',height: '100%', overflow: 'hidden' }">
        <div class="title font-bold font-16">下单时间</div>
        <van-row type="flex" justify="space-around" class="commn-padding">
          <van-col class="text-center" v-for="(item,index) in dataType" :key="index">
            <van-tag :plain="!item.active" color="#1989fa" size="large" round @click="onQuickDateChoose(index)">{{item.name}}</van-tag>
          </van-col>
        </van-row>
        <time-choose :startTime="moreSearchInfo.time.start" :endTime="moreSearchInfo.time.end" @confirm="timeConfirm"></time-choose>
        <div class="high-info-list">
          <div class="high-info">
            <van-collapse v-model="consignorNames">
              <van-collapse-item name="1">
                <template #title>
                  <div class="title font-bold font-16"><span style="color: red;">* </span>货主</div>
                </template>
                <div @click="showPost('consignor')" v-if="moreSearchInfo.consignor.length === 0" style="background-color: #EFF5F9;" contenteditable="false" placeholder="请选择货主" class="inputInfo">{{consignor}}</div>
                <div v-for="(item,index) in moreSearchInfo.consignor" :key="index" @click="showPost('consignor')" contenteditable="false" placeholder="请选择货主" class="nom inputInfo">
                  {{consignorInfoStitching(item)}}</div>
              </van-collapse-item>
            </van-collapse>
          </div>
          <div class="high-info">
            <!-- <div class="title font-bold font-16"><span style="color: red;">* </span>供应商</div> -->
            <!-- <div :class="moreSearchInfo.consignor.length !== 0 ? 'nom inputInfo': 'select inputInfo'" contenteditable="false" placeholder="请选择供应商">{{supplier}}</div> -->
            <van-collapse v-model="supplierNames">
              <van-collapse-item name="1">
                <template #title>
                  <div class="title font-bold font-16"><span style="color: red;">* </span>供应商</div>
                </template>
                <div @click="showPost('supplier')" v-if="moreSearchInfo.supplier.length === 0" :class="moreSearchInfo.consignor.length !== 0 ? 'nom inputInfo': 'select inputInfo'" contenteditable="false" placeholder="请选择供应商"
                >{{supplier}}</div>
                <div v-for="(item,index) in moreSearchInfo.supplier" :key="index" @click="showPost('supplier')" :class="moreSearchInfo.consignor.length !== 0 ? 'nom inputInfo': 'select inputInfo'"
                contenteditable="false" placeholder="请选择供应商"
                >{{supplierInfoStitching(item)}}</div>
              </van-collapse-item>
            </van-collapse>
          </div>
          <div class="high-info">
            <!-- <div class="title font-bold font-16"><span style="color: red;">* </span>客户</div> -->
            <!-- <div :class="isSelectConsignorSupplier === true ? 'nom inputInfo': 'select inputInfo'" contenteditable="false" placeholder="请选择客户">{{client}}</div> -->
            <van-collapse v-model="clientNames">
              <van-collapse-item name="1">
                <template #title>
                  <div class="title font-bold font-16"><span style="color: red;">* </span>客户</div>
                </template>
                <div @click="showPost('client')" v-if="moreSearchInfo.client.length === 0" :class="isSelectConsignorSupplier === true ? 'nom inputInfo': 'select inputInfo'" contenteditable="false" placeholder="请选择客户"
                >{{client}}</div>
                <div v-for="(item,index) in moreSearchInfo.client" :key="index" @click="showPost('client')" :class="isSelectConsignorSupplier === true ? 'nom inputInfo': 'select inputInfo'" contenteditable="false" placeholder="请选择客户"
                >{{clientInfoStitching(item)}}</div>
              </van-collapse-item>
            </van-collapse>
          </div>
          <div class="high-info" @click="showPost('orderNo')">
            <div class="title font-bold font-16">请输入订单号</div>
            <div @keyup="changeData($event)" :class="isSelectClient === true ? 'nom input': 'select input'" :contenteditable="isSelectClient === true ? 'true': 'false'" class="inputInfo" placeholder="请输入订单号"></div>
            <!-- <input :class="isSelectConsignorSupplier === true ? 'nom input': 'select input'" :disabled="!isSelectConsignorSupplier" v-model="moreSearchInfo.orderNo" placeholder="请输入订单号" class="input" type="text"> -->
          </div>
          <div class="high-info" @click="showPost('goods')">
            <div class="title font-bold font-16">商品</div>
            <div :class="isSelectClient === true ? 'nom inputInfo': 'select inputInfo'" contenteditable="false" placeholder="请选择商品">{{goods}}</div>
          </div>
        </div>
        <div class="action-bottom">
          <van-button type="default" @click="onCleanClick">重置</van-button>
          <van-button type="info" class="submit" @click="onSearchClick">查询</van-button>
        </div>
      </van-popup>
      <!-- 供应商 -->
      <search-in-supplier
        v-model="moreSearchDialog.supplierShow"
        :customer="!moreSearchInfo.supplier ? {}:moreSearchInfo.supplier"
        :consignor="moreSearchInfo.consignor"
        @cancleclick="showPost"
        @confirmclick="postConfirm"
      ></search-in-supplier>
       <!-- 货主 -->
      <search-in-consignor
        v-model="moreSearchDialog.consignorShow"
        :customer="!moreSearchInfo.consignor ? []:moreSearchInfo.consignor"
        :chinfo="chinfo"
        @cancleclick="showPost"
        @confirmclick="postConfirm"
      ></search-in-consignor>
      <!-- 商品 -->
      <search-goods
        v-model="moreSearchDialog.goodsShow"
        :customer="!moreSearchInfo.goods ? {}:moreSearchInfo.goods"
        :consignor="moreSearchInfo.consignor"
        :supplier="moreSearchInfo.supplier"
        @cancleclick="showPost"
        @confirmclick="postConfirm"
      ></search-goods>
      <!-- 客户 -->
      <search-in-client
        v-model="moreSearchDialog.clientShow"
        :customer="!moreSearchInfo.client ? {}:moreSearchInfo.client"
        :consignor="moreSearchInfo.consignor"
        :supplier="moreSearchInfo.supplier"
        :chinfo="chinfo"
        @cancleclick="showPost"
        @confirmclick="postConfirm"
      ></search-in-client>
    </div>
</template>

<script>
import TimeChoose from '@/components/CgTimeChoose'
import {getFormateDate} from '@/utils/common'
// 供应商
import SearchInSupplier from "@/components/SearchInSupplier";
// 供应商
// import SearchInSupplier from "@/components/SearchInOrderSupplier";
// 货主
import SearchInConsignor from "@/components/SearchInConsignor";
// 商品
import SearchGoods from "@/components/SearchGoods";
// 客户
import SearchInClient from "@/components/SearchInClient"
export default {
  name: 'HighSearch',
  components: {
    TimeChoose,
    SearchInSupplier,
    SearchGoods,
    SearchInConsignor,
    SearchInClient
  },
  data() {
    return {
      moreSearchShow: false,
      moreSearchDialog: {
        consignorShow: false,
        goodsShow: false,
        supplierShow: false,
        goodsShow: false,
        clientShow: false
      },
      chinfo: {
        goodsId: '',
        supplier: ''
      },
       dataType: [
        {
          name: '今天',
          active: true
        },
        {
          name: '7天',
          active: false
        },
        {
          name: '30天',
          active: false
        }
        // {
        //   name: '本季',
        //   active: false
        // },
        // {
        //   name: '本年',
        //   active: false
        // }
      ],
      consignorNames: ['1'],
      supplierNames: ['1'],
      clientNames: ['1']
    }
  },
  computed: {
    // 供应商
    supplier () {
      // if (this.moreSearchInfo.supplier) {
      //   return !this.moreSearchInfo.supplier ? '' : this.moreSearchInfo.supplier.partyName
      // } else {
      //   return ''
      // }
      if (this.moreSearchInfo.supplier) {
        return this.supplierStitching()
      } else {
        return ''
      }
    },
    // 货主
    consignor () {
      // if (this.moreSearchInfo.consignor.comPartyId) {
      //   return !this.moreSearchInfo.consignor ? '' : (this.moreSearchInfo.consignor.comPartyId + '/(' + this.moreSearchInfo.consignor.partyOpcode + ')' + this.moreSearchInfo.consignor.partyName)
      // } else {
      //   return ''
      // }
      if (this.moreSearchInfo.consignor) {
        return this.fieldStitching()
      } else {
        return ''
      }
    },
    // 商品
    goods () {
      if (this.moreSearchInfo.goods.comGoodsId) {
        return !this.moreSearchInfo.goods ? '' : (this.moreSearchInfo.goods.comGoodsId + '/(' + this.moreSearchInfo.goods.goodsOpcode + ')' + this.moreSearchInfo.goods.goodsName + '/' + this.moreSearchInfo.goods.goodsDesc + '/' + this.moreSearchInfo.goods.productLocation + '/' + this.moreSearchInfo.goods.packageNum + '/' + this.moreSearchInfo.goods.unitName)
      } else {
        return ''
      }
    },
    // 客户
    client () {
      if (this.moreSearchInfo.client.comPartyId) {
        return !this.moreSearchInfo.client ? '' : (this.moreSearchInfo.client.comPartyId + '/(' + this.moreSearchInfo.client.partyOpcode + ')' + this.moreSearchInfo.client.partyName)
      } else {
        return ''
      }
    },
    // 订单号
    orderNo () {
      if (this.moreSearchInfo.orderNo) {
        return !this.moreSearchInfo.orderNo ? '' : this.moreSearchInfo.orderNo
      } else {
        return ''
      }
    },
    // 货主与供应商是否选择
    isSelectConsignorSupplier () {
      if (this.moreSearchInfo.consignor.length === 0 || this.moreSearchInfo.supplier.length === 0) {
        return false
      }
      return true
    },
    // 货主与供应商是否选择
    isSelectClient () {
      if (this.moreSearchInfo.client.length === 0) {
        return false
      }
      return true
    }
  },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    choosetime: {
      type: Object,
      default: () => {}
    },
    moreSearchInfo: {
      type: Object,
      default: () => {
        return {
          supplier: [], // 供应商
          consignor: [], // 货主
          goods: '', // 商品
          client: [], // 客户
          orderNo: '', // 订单号
          time: {
            start: getFormateDate(new Date(), 'yyyy-MM-dd'),
            end: getFormateDate(new Date(), 'yyyy-MM-dd')
          }
        }
      }
    }
  },
  watch: {
    value (val) {
      this.moreSearchShow = val
      // this.time = JSON.parse(JSON.stringify(this.choosetime))
    },
    moreSearchShow (val) {
      this.$emit('input', val)
    }
  },
  methods: {
    // 删除货主
    deleteRepeat () {

    },
    changeData (event) {
      let str = event.srcElement.innerHTML + ''
      this.moreSearchInfo.orderNo = str
      console.log(this.moreSearchInfo.orderNo)
    },
    timeConfirm (data) {
      this.moreSearchInfo.time = data
    },
    onSearchClick() {
      if (this.moreSearchInfo.consignor.length === 0) {
        this.$toast('请先选择货主！')
        return
      }
      if (this.moreSearchInfo.supplier.length === 0) {
        this.$toast('请先选择供应商！')
        return
      }
      // if (!this.moreSearchInfo.client || !this.moreSearchInfo.client.comPartyId) {
      //   this.$toast('请先选择客户！')
      //   return
      // }
      // if (this.moreSearchInfo.supplier.org === '' || this.moreSearchInfo.supplier.org === null || this.moreSearchInfo.supplier.org === undefined) {
      //   this.$toast('请先供应商！')
      //   return
      // }
      // console.log(this.moreSearchInfo)
      this.moreSearchShow = false
      this.$emit('onsearch', this.moreSearchInfo)
    },
    onCleanClick() {
      this.moreSearchInfo = {
        supplier: [], // 供应商
        consignor: [], // 货主
        goods: '', // 商品
        client: [], // 客户
        orderNo: '',
        time: {
          start: getFormateDate(new Date(), 'yyyy-MM-dd'),
          end: getFormateDate(new Date(), 'yyyy-MM-dd')
        },
      }
      this.onQuickDateChoose(0, '')
      // console.log(this.moreSearchInfo)
      // this.moreSearchShow = false
      this.$emit('onclean', this.moreSearchInfo)
    },
    showPost(type) {
      if (type !== 'consignor') {
        if (this.moreSearchInfo.consignor.length === 0) {
          this.$toast('请先选择货主！')
          return
        }
        if (type !== 'supplier') {
          if (this.moreSearchInfo.supplier.length === 0 ) {
            this.$toast('请先选择供应商！')
            return
          }
          if (type !== 'client' && this.moreSearchInfo.client.length === 0) {
            this.$toast('请先选择客户！')
            return
          }
        }
      }
      switch (true) {
        case type === 'supplier':
          this.moreSearchDialog.supplierShow = !this.moreSearchDialog.supplierShow;
          break;
        case type === 'consignor':
          this.moreSearchDialog.consignorShow = !this.moreSearchDialog.consignorShow;
          break;
        case type === 'goods':
          this.moreSearchDialog.goodsShow = !this.moreSearchDialog.goodsShow
          break;
        case type === 'client':
          this.moreSearchDialog.clientShow = !this.moreSearchDialog.clientShow
          break;
      }
      window.history.pushState(null, null, document.URL);
    },
    postConfirm(data) {
      // console.log(data)
      switch (true) {
        case data.page === 'supplier':
          this.moreSearchInfo.supplier = data.value
          this.chinfo.supplier = this.moreSearchInfo.supplier.comPartyId
          this.moreSearchInfo.goods = ''
          this.moreSearchInfo.client = []
          break;
        case data.page === 'goods':
          this.moreSearchInfo.goods = data.value
          break;
        case data.page === 'consignor':
          this.moreSearchInfo.supplier = []
          this.moreSearchInfo.goods = ''
          this.moreSearchInfo.client = []
          this.moreSearchInfo.consignor = data.value
          break;
        case data.page === 'client':
          this.moreSearchInfo.client = data.value
          break;
      }
      this.showPost(data.page);
    },
    // 货主字段拼接
    fieldStitching() {
      let str = ''
      if (this.moreSearchInfo.consignor.length === 1) {
        str = this.consignorInfoStitching(this.moreSearchInfo.consignor[0])
      } else if (this.moreSearchInfo.consignor.length > 1) {
        str = this.consignorInfoStitching(this.moreSearchInfo.consignor[0]) + '......'
      }
      return str
    },
    // 货主信息拼接
    consignorInfoStitching(model) {
      // return model.companyname + '/(' + model.erp_user + ')'
      let str = ''
      if (this.isJudgeStrNull(model.companyname)) {
        str = model.companyname
      }
      if (this.isJudgeStrNull(model.erp_user)) {
        str = str + '/('+ model.erp_user + ')'
      }
      if (this.isJudgeStrNull(model.partyOpcode)) {
        str = str + '/' + model.partyOpcode
      }
      return str
    },
    // 供应商字段拼接
    supplierStitching() {
      let str = ''
      console.log(this.moreSearchInfo)
      if (this.moreSearchInfo.supplier.length === 1) {
        str = this.supplierInfoStitching(this.moreSearchInfo.supplier[0])
      } else if (this.moreSearchInfo.supplier.length > 1) {
        str = this.supplierInfoStitching(this.moreSearchInfo.supplier[0]) + '......'
      }
      return str
    },
    // 客户信息拼接
    clientInfoStitching(model) {
      return model.comPartyId + '/(' + model.partyOpcode + ')/' + model.partyName
    },
    // 供应商信息拼接
    supplierInfoStitching(model) {
      return model.partyName
    },
    onQuickDateChoose(index, tag) {
      console.log(index,tag)
      let _this = this
      _this.dataType = this.dataType.map(item => {
        item.active = false
        return item
      })
      _this.dataType[index].active = true
      switch (_this.dataType[index].name) {
        case '本年':
          _this.showCustomizeDate = false
          _this.getCurrentYear()
          break
        case '本季':
          _this.showCustomizeDate = false
          _this.getCurrentSeason()
          break
        case '30天':
          _this.showCustomizeDate = false
          _this.getCurrentMonth()
          break
        case '7天':
          _this.showCustomizeDate = false
          _this.getCurrentWeek()
          break
        case '今天':
          _this.showCustomizeDate = false
          _this.getCurrentDate()
          break
        case '自定义':
          _this.showCustomizeDate = true
          break
      }
      // console.log(tag, _this.$refs[tag])
    },
    // 获取当年的开始与结束日期
    getCurrentYear() {
      // 起止日期数组
      // var startStop = []
      // 获取当前时间
      var currentDate = new Date()
      // 获得当前年份4位年
      var currentYear = currentDate.getFullYear()

      // 本年第一天
      var currentYearFirstDate = new Date(currentYear, 0, 1)
      // 本年最后一天
      // var currentYearLastDate = new Date(currentYear, 11, 31)
      var currentYearLastDate = new Date()
      // 添加至数组
      // startStop.push(currentYearFirstDate)
      // startStop.push(currentYearLastDate)
      this.moreSearchInfo.time.start = getFormateDate(currentYearFirstDate, 'yyyy-MM-dd')
      this.moreSearchInfo.time.end = getFormateDate(currentYearLastDate, 'yyyy-MM-dd')
      // 返回
      // return startStop
    },
    // 获取当前季度的开始与结束日期
    getCurrentSeason() {
      // 起止日期数组
      // var startStop = []
      // 获取当前时间
      var currentDate = new Date()
      // 获得当前月份0-11
      var currentMonth = currentDate.getMonth()
      // 获得当前年份4位年
      var currentYear = currentDate.getFullYear()
      // 获得本季度开始月份
      var quarterSeasonStartMonth = this.getQuarterSeasonStartMonth(currentMonth)
      // 获得本季度结束月份
      var quarterSeasonEndMonth = quarterSeasonStartMonth + 2

      // 获得本季度开始的日期
      var quarterSeasonStartDate = new Date(currentYear, quarterSeasonStartMonth, 1)
      // 获得本季度结束的日期
      // var quarterSeasonEndDate = new Date(currentYear, quarterSeasonEndMonth, this.getMonthDays(currentYear, quarterSeasonEndMonth))
      var quarterSeasonEndDate = new Date()
      // 加入数组返回
      // startStop.push(quarterSeasonStartDate)
      // startStop.push(quarterSeasonEndDate)
      // 返回
      // return startStop

      this.moreSearchInfo.time.start= getFormateDate(quarterSeasonStartDate, 'yyyy-MM-dd')
      this.moreSearchInfo.time.end = getFormateDate(quarterSeasonEndDate, 'yyyy-MM-dd')
    },
    // 获取当月的开始与结束日期
    getCurrentMonth () {
      this.moreSearchInfo.time.start = this.getDay(getFormateDate(new Date(), 'yyyy-MM-dd'), -30)
      this.moreSearchInfo.time.end = getFormateDate(new Date(), 'yyyy-MM-dd')
      // 返回
      // return startStop
    },
    // 获得当前星期的开始与结束日期
    getCurrentWeek () {
      var sunday = new Date()
      this.moreSearchInfo.time.start = this.getDay(getFormateDate(sunday, 'yyyy-MM-dd'), -7)
      this.moreSearchInfo.time.end = getFormateDate(sunday, 'yyyy-MM-dd')
    },
    // 获取当天的日期
    getCurrentDate() {
      this.moreSearchInfo.time.start = getFormateDate(new Date(), 'yyyy-MM-dd')
      this.moreSearchInfo.time.end = getFormateDate(new Date(), 'yyyy-MM-dd')
    },
    // 获取本季度开始的月份
    getQuarterSeasonStartMonth(month) {
      var spring = 0 // 春
      var summer = 3 // 夏
      var fall = 6 // 秋
      var winter = 9 // 冬
      // 月份从0-11
      if (month < 3) {
        return spring
      }
      if (month < 6) {
        return summer
      }
      if (month < 9) {
        return fall
      }
      return winter
    },
    getDay(time,day) {　　
      var today = new Date(time);
      var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;　　
      today.setTime(targetday_milliseconds); //注意，这行是关键代码
      　　
      var tYear = today.getFullYear();　　
      var tMonth = today.getMonth();　　
      var tDate = today.getDate();　　
      tMonth = this.doHandleMonth(tMonth + 1);　　
      tDate = this.doHandleMonth(tDate);　　
      return tYear + "-" + tMonth + "-" + tDate;
    },
    doHandleMonth(month) {　　
      var m = month;　　
      if (month.toString().length == 1) {　　
          m = "0" + month;　　
      }　　
      return m;
    },
    /// 判断数值是否为空
    isJudgeStrNull(val) {
      if (val !== null && val !== undefined && val !== '') {
        return true
      }
      return false
    }
  }
}
</script>

<style lang="scss" scoped>
  * {
    box-sizing: border-box;
  }
  .more-search {
    .commn-padding{
      padding: 10px 15px;
      line-height: 24px;
      border-bottom: 1px solid #eee;
    }
    .title {
      margin: 30PX 0 0 15PX
    }
    .high-info-list{
      height: calc(100vh - 200px);
      overflow-x: hidden;
      overflow-y: auto;
      .high-info{
        margin: 0PX 10PX;
        font-size: 14PX;
        /deep/ .van-cell{
          padding: 5px 0px;
        }
        /deep/ .van-cell::after{
          position: fixed;
        }
        /deep/ .van-collapse-item__content{
          padding: 5px 0px;
        }
        /deep/ .van-swipe__indicator{
          background-color: #999999;
        }
        /deep/ .van-cell__right-icon{
          color: #1989fa;
        }
        .title {
          margin: 5px auto;
        }
        .inputInfo {
          color: #666666;
          width: 100%;
          max-height: 100%;
          // height: 40PX;
          margin: 5PX auto;
          border-radius: 5PX;
          border:0.5px solid #bbbbbb;
          min-height: 35PX;
          line-height: 24px;
          outline: 0;
          word-wrap: break-word;
          overflow-x: hidden;
          overflow-y: hidden;
          padding: 5PX;
          border:0.5px solid #eeeeee;
        }
        .inputInfo:empty::before {
           content: attr(placeholder);
           color: #999999;
           font-size: 15PX;
        }
        .nom{
          background-color: #EFF5F9;
        }
        .select {
          background-color: #ddd;
        }
        .input {
          color: #666666;
          width: 100%;
          max-height: 100%;
          // height: 40PX;
          margin: 10PX auto;
          border-radius: 5PX;
          border:0.5px solid #eeeeee;
          // background-color: #EFF5F9;
          -webkit-appearance:none;
          min-height: 35PX;
          line-height: 24px;
          outline: 0;
          word-wrap: break-word;
          overflow-x: hidden;
          overflow-y: auto;
          padding: 5PX;
        }
        input::-webkit-input-placeholder{
          color: #999999;
          font-size: 15PX;
        }
      }
    }

    .search-value {
      margin-top: 45PX;
    }
    .flex4 {
      /deep/ .van-cell__title {
        flex: none;
      }
    }
    .action-bottom {
      position: absolute;
      bottom: 0;
      width: 100%;
      display: flex;

      button {
        flex: 1;
      }
    }
  }
</style>
