<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>
        <time-choose :startTime="moreSearchInfo.time.start" :endTime="moreSearchInfo.time.end" @confirm="timeConfirm"></time-choose>
        <div class="high-info-list">
          <div class="high-info" @click="showPost('consignor')">
            <div class="title font-bold font-16">货主</div>
            <!-- <textarea :value="consignor" class="inputInfo" type="text"></textarea> -->
            <div contenteditable="false" class="inputInfo">{{consignor}}</div>
          </div>
          <div class="high-info">
            <div class="title font-bold font-16">请输入订单号</div>
            <!-- <div contenteditable="true" class="inputInfo">{{orderNo}}</div> -->
            <input :value="orderNo" class="input" type="text">
          </div>
          <div class="high-info">
            <div class="title font-bold font-16">发票号</div>
            <!-- <div contenteditable="true" class="inputInfo">{{orderNo}}</div> -->
            <input :value="invoiceNo" class="input" type="text">
          </div>
          <div class="high-info" @click="showPost('supplier')">
            <div class="title font-bold font-16">供应商</div>
            <div contenteditable="false" class="inputInfo">{{supplier}}</div>
          </div>
          <div class="high-info" @click="showPost('goods')">
            <div class="title font-bold font-16">商品</div>
            <div contenteditable="false" class="inputInfo">{{goods}}</div>
          </div>
          <div class="high-info" @click="showPost('client')">
            <div class="title font-bold font-16">客户</div>
            <div contenteditable="false" class="inputInfo">{{client}}</div>
          </div>
        </div>
        <!-- <van-cell-group class="high-info">
          <van-cell class="flex4" is-link
            :value="consignor"
            @click="showPost('consignor')">
            <template #title>
              <span type="danger" class="font-bold">货主</span>
            </template>
          </van-cell>
          <van-field class="common" placeholder="请输入订单号" v-model="moreSearchInfo.orderNo">
            <template #label>
              <span type="danger" class="font-bold">订单号</span>
            </template>
          </van-field>
          <van-cell class="flex4" is-link
            :value="supplier"
            @click="showPost('supplier')">
            <template #title>
              <span type="danger" class="font-bold">供应商</span>
            </template>
          </van-cell>
          <van-cell class="flex4" is-link
            :value="goods"
            @click="showPost('goods')">
            <template #title>
              <span type="danger" class="font-bold">商品</span>
            </template>
          </van-cell>
          <van-cell class="flex4" is-link
            :value="client"
            @click="showPost('client')">
            <template #title>
              <span type="danger" class="font-bold">客户</span>
            </template>
          </van-cell>
        </van-cell-group> -->
        <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"
        :chinfo="chinfo"
        @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>
      <cg-search-goods
        v-model="moreSearchDialog.goodsShow"
        :customer="!moreSearchInfo.goods ? {}:moreSearchInfo.goods"
        @cancleclick="showPost"
        @confirmclick="postConfirm"
      ></cg-search-goods>
      <search-in-client
        v-model="moreSearchDialog.clientShow"
        :customer="!moreSearchInfo.client ? {}:moreSearchInfo.client"
        :chinfo="chinfo"
        @cancleclick="showPost"
        @confirmclick="postConfirm"
      ></search-in-client>
    </div>
</template>

<script>
import TimeChoose from '@/components/TimeChoose'
import {getFormateDate} from '@/utils/common'
// 供应商
import SearchInSupplier from "@/components/SearchInSupplier";
// 货主
import SearchInConsignor from "@/components/SearchInConsignor";
// 商品
import CgSearchGoods from "@/components/CgSearchGoods";
// 客户
import SearchInClient from "@/components/SearchInClient"
export default {
  name: 'HighSearch',
  components: {
    TimeChoose,
    SearchInSupplier,
    CgSearchGoods,
    SearchInConsignor,
    SearchInClient
  },
  data() {
    return {
      moreSearchShow: false,
      moreSearchDialog: {
        consignorShow: false,
        goodsShow: false,
        supplierShow: false,
        goodsShow: false,
        clientShow: false
      },
      moreSearchInfo: {
        supplier: '', // 供应商
        consignor: [], // 货主
        goods: '', // 商品
        client: '', // 客户
        orderNo: '', // 订单号
        invoiceNo: '', // 发票号
        time: {
          start: getFormateDate(new Date(), 'yyyy-MM-dd'),
          end: getFormateDate(new Date(), 'yyyy-MM-dd')
        },
      },
      chinfo: {
        goodsId: '',
        supplier: ''
      }
    }
  },
  computed: {
    // 供应商
    supplier () {
      if (this.moreSearchInfo.supplier.comPartyId) {
        return !this.moreSearchInfo.supplier ? '' : (this.moreSearchInfo.supplier.comPartyId + '/(' + this.moreSearchInfo.supplier.partyOpcode + ')' + this.moreSearchInfo.supplier.partyName)
      } 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 ''
      }
    },
    // 发票号
    invoiceNo () {
      if (this.moreSearchInfo.invoiceNo) {
        return !this.moreSearchInfo.invoiceNo ? '' : this.moreSearchInfo.invoiceNo
      } else {
        return ''
      }
    }
  },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    choosetime: {
      type: Object,
      default: () => {}
    }
  },
  watch: {
    value (val) {
      this.moreSearchShow = val
      // this.time = JSON.parse(JSON.stringify(this.choosetime))
    },
    moreSearchShow (val) {
      this.$emit('input', val)
    }
  },
  methods: {
    timeConfirm (data) {
      this.moreSearchInfo.time = data
    },
    onSearchClick() {
      this.moreSearchShow = false
      console.log(this.moreSearchInfo)
      this.$emit('onsearch', this.moreSearchInfo)
    },
    onCleanClick() {
      this.moreSearchInfo = {
        supplier: '', // 供应商
        consignor: [], // 货主
        goods: '', // 商品
        client: '', // 客户
        orderNo: '',
        invoiceNo: '',
        time: {
          start: getFormateDate(new Date(), 'yyyy-MM-dd'),
          end: getFormateDate(new Date(), 'yyyy-MM-dd')
        },
      }
      console.log(this.moreSearchInfo)
      // this.moreSearchShow = false
      // this.$emit('onsearch', this.moreSearchInfo)
    },
    
    showPost(type) {
      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
          break;
        case data.page === 'goods':
          this.moreSearchInfo.goods = data.value
          break;
        case data.page === 'consignor':
          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.comPartyId + '/(' + model.partyOpcode + ')/' + model.partyName
    }
  }
}
</script>

<style lang="scss" scoped>
  * {
    box-sizing: border-box;
  }
  .more-search {
    .title {
      margin: 30PX 0 0 15PX
    }
    .high-info-list{
      height: calc(100vh - 156px);
      overflow-x: hidden;
      overflow-y: auto;
      .high-info{
        margin: 0PX 15PX;
        font-size: 14PX;
        .title {
          margin: auto
        }
        .inputInfo {
          color: #666666;
          width: 100%;
          max-height: 100%;
          // height: 40PX;
          margin: 10PX auto;
          border-radius: 5PX;
          border:0.5px solid #eeeeee;
          background-color: #EFF5F9;
          min-height: 35PX;
          line-height: 24px;
          outline: 0;
          word-wrap: break-word;
          overflow-x: hidden;
          overflow-y: auto;
          padding: 5PX;
        }
        .inputInfo:empty::before {
           content: attr(placeholder);
           color: #999999;
        }
        .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;
        }
      }
    }
    
    .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>
