<template>
  <Modal
    v-model="showOriginalModal"
    title="选择原订单编号"
    width="900"
    :mask="true"
    :closable="true"
    :mask-closable="false"
    :footer-hide="true"
    @on-cancel="cancel"
  >
    <div class="conditionContent">
      <div class="itemContent">
        <div class="itemLabel">
          订单编号
        </div>
        <Input
          v-model="originalOrderData.ID"
          clearable
        />
      </div>
      <div class="itemContent">
        <div class="itemLabel">
          平台单号
        </div>
        <Input
          v-model="originalOrderData.TID"
          clearable
        />
      </div>
      <div class="itemContent">
        <div class="itemLabel">
          系统单号
        </div>
        <Input
          v-model="originalOrderData.SOURCECODE"
          clearable
        />
      </div>
      <div class="itemContent">
        <div class="itemLabel">
          物流单号
        </div>
        <Input
          v-model="originalOrderData.LOGISTICSNUMBER"
          clearable
        />
      </div>
      <div class="itemContent">
        <div class="itemLabel">
          所有SKU
        </div>
        <Input
          v-model="originalOrderData.ALLSKU"
          clearable
        />
      </div>
      <div class="itemContent">
        <div class="itemLabel">
          收件人手机号码
        </div>
        <Input
          v-model="originalOrderData.RECEIVMOBILE"
          clearable
        />
      </div>
      <div class="itemContent">
        <div class="itemLabel">
          收件人
        </div>
        <Input
          v-model="originalOrderData.RECEIVNAME"
          clearable
        />
      </div>

      <div class="itemContent">
        <div class="itemLabel">
          买家昵称
        </div>
        <Input
          v-model="originalOrderData.USERNICK"
          style="width:240px"
          clearable
        />
      </div>
    </div>
    <ShrinkOrExtend
      :form-data="originalOrderData"
      :height="shrinkHeight"
      :current-value="isShrink"
      @click="fold(shrinkHeight)"
      @on-reset="reset"
      @on-query="query()"
    />

    <tableFaker
      ref="table"
      :table-height="tableHeight"
      :table-head="columns"
      :table-name="'T_V_OMSONLINEORDER'"
      :fixedcolumns="fixedcolumns"
      :highlight-row="isSingleSelect"
      @on-selectData="onSelect"
    />

    <footer style="display: flex; justify-content: center; margin-top: 12px;padding-top: 16px;border-top: 1px solid #DEDEDE;;">
      <Button
        type="fcdefault"
        @click="cancel"
      >
        取消
      </Button>
      <Button
        type="posdefault"
        style="margin-left: 16px"
        @click="confirm"
      >
        确认
      </Button>
    </footer>
  </Modal>
</template>

<script>
import ShrinkOrExtend from '@yunque/component/customizedContent/shrinkOrExtend'
import tableFaker from '@yunque/component/customizedContent/tableFaker.vue';

export default {
  name: 'SelectOrderModal',

  components: {
    ShrinkOrExtend,
    tableFaker,
  },

  model: {
    prop: 'visible',
    event: 'on-change'
  },

  props: {
    shrinkHeight: {
      type: String,
      default: '58px'
    },
    isShrink: {
      type: Boolean,
      default: false, // 默认展开
    },
    //表格高度
    tableHeight: {
      type: String,
      default: '200'
    },
    // // 查询参数
    // fixedcolumns: {
    //   type: Object,
    //   default: () => {
    //     return {
    //       OrderStatus: ["=5", "=6"]
    //     }
    //   }
    // },
    // 是否单选
    isSingleSelect: {
      type: Boolean,
      default: true,
    },
    visible: {
      type: Boolean,
      default: false,
    },
    columns: {
      default: Array,
      default: () => {
        return [
          {
            title: '订单编号',
            key: 'ID'
          },
          {
            title: '平台单号',
            key: 'TID'
          },
          {
            title: '系统单号',
            key: 'SOURCECODE'
          },
          {
            title: '物流单号',
            key: 'LOGISTICSNUMBER'
          },
          {
            title: '所有SKU',
            key: 'ALLSKU'
          },
          {
            title: '订单状态',
            key: 'ORDERSTATUS'
          },
          {
            title: '商品数量',
            key: 'ALLNUM'
          },
          {
            title: '订单总额',
            key: 'ACTUALAMOUNT'
          }
        ]
      }
    }
  },

  watch: {
    visible(val) {
      this.showOriginalModal = val
    }
  },

  data() {
    return {
      showOriginalModal: false,
      originalOrderData: {
        ID: '', // 订单编号
        TID: '', // 平台单号SOURCECODE
        SOURCECODE: '', // 系统单号
        LOGISTICSNUMBER: '', // 物流单号
        ALLSKU: '', // 所有SKU
        RECEIVMOBILE: '', // 收件人手机号码
        RECEIVNAME: '', // 收件人
        USERNICK: '', // 买家昵称
      },
      selectTableData: {},
      fixedcolumns: {
      }
    };
  },

  mounted() {

  },

  methods: {
    confirm() {
      this.$emit('confirm', this.selectTableData)
    },

    cancel() {
      this.close()
      this.$emit('cancel')
    },

    close() {
      this.$emit('on-change', false)
    },

    // 折叠
    fold(height) {
      this.currentValue = !this.currentValue;
      document.getElementsByClassName('conditionContent')[0].style.maxHeight = this.currentValue ? height : '';
      this.tableHeight = this.currentValue ? '250' : '200';
    },

    // 重置
    reset() {
      this.originalOrderData = {
        ID: '', // 订单编号
        TID: '', // 平台单号 SOURCECODE
        SOURCECODE: '', // 系统单号
        ALLSKU: '', // 所有SKU
        RECEIVMOBILE: '', // 收件人手机号码
        RECEIVNAME: '', // 收件人
        USERNICK: '', // 买家昵称
      };
      this.query();
    },

    // 查询表格
    query() {
      this.fixedcolumns = this.originalOrderData
      setTimeout(() => {
        this.$refs.table.currentPage = 1;
        this.$refs.table.currentPageOfferInfo = 0
        this.$refs.table.getInfoData();
      }, 200)
    },

    // 选中
    onSelect(val, originRows) {
      const originRow = originRows.find(row => row.ID.val === val.ID)
      this.selectTableData = originRow
    }
  },
};
</script>

<style lang="less" scoped>
</style>
