<template>
  <div>
    <div v-if="isMerchant" style="height: calc(100vh - 200px)">
      <obj-table-plus
        ref="oTable"
        style="height: 100%"
        :tableCols="tableCols"
        :tableProp="tableProp"
        @query="queryList"
        v-model="dataList"
        :tableEvent="tableEvent"
        :enableAutoQuery="false"
      >
        <template slot="tableTop">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-row v-if="storeList.length > 1">
              <el-col :span="24">
                <!-- <el-form-item label="菜市场">
                  <el-select
                    @change="getData"
                    v-model="formInline.marketId"
                    placeholder="请选择菜市场"
                  >
                    <el-option
                      v-for="item in marketList"
                      :key="item.marketId"
                      :label="item.marketName"
                      :value="item.marketId"
                    ></el-option>
                  </el-select>
                </el-form-item> -->
                <el-form-item label="店铺">
                  <el-select
                    v-model="formInline.shopId"
                    placeholder="请选择店铺"
                  >
                    <el-option
                      v-for="item in storeList"
                      :key="item.shopId"
                      :label="item.shopName"
                      :value="item.shopId"
                    ></el-option>
                  </el-select> </el-form-item
              ></el-col>
            </el-row>
            <el-form-item label="订单号">
              <el-input
                v-model="formInline.name"
                placeholder="订单号搜索"
              ></el-input>
            </el-form-item>
            <el-form-item label="订单商品">
              <el-input
                v-model="formInline.name"
                placeholder="订单名称搜索"
              ></el-input>
            </el-form-item>
            <el-form-item label="定金付款时间">
              <el-date-picker
                value-format="yyyy-MM-dd HH:mm:ss"
                v-model="value1"
                type="datetimerange"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="尾款付款时间">
              <el-date-picker
                value-format="yyyy-MM-dd HH:mm:ss"
                v-model="value1"
                type="datetimerange"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="配送方式">
              <el-select v-model="formInline.name" placeholder="请选择菜市场">
                <el-option
                  v-for="item in [
                    { label: '全部', value: '0' },
                    { label: '快递', value: '1' },
                    { label: '自提', value: '2' }
                  ]"
                  :key="item.marketId"
                  :label="item.marketName"
                  :value="item.marketId"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="$refs.oTable.reload()"
                >查询</el-button
              >
              <el-button type="primary" @click="Reset">重置</el-button>
            </el-form-item>
          </el-form>
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane
              v-for="item in statusList"
              :key="item.value"
              :label="item.label"
              :name="item.value"
            ></el-tab-pane>
          </el-tabs>
          <div class="mb-2">
            <el-button type="primary" size="small" @click="addProduct"
              >批量导出</el-button
            >
          </div>
        </template>
      </obj-table-plus>
      <!-- 详情 -->
      <viewDetails ref="viewDetails"></viewDetails>
    </div>
    <div style="height: calc(100vh - 200px)" v-else>
      <el-empty :image-size="200" description="您不是摊主哦"></el-empty>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import viewDetails from './popup/view-details.vue'
export default {
  components: { viewDetails },
  data() {
    return {
      value1: '',
      activeName: '5',
      advanceSellStatus: '',
      dataList: [],
      formInline: {
        name: '',
        marketId: '',
        shopId: ''
      },
      tableProp: {
        'auto-resize': true,
        border: true,
        height: 'auto',
        'row-id': 'advanceSellId',
        'show-overflow': false
      },
      statusList: [
        {
          label: '全部',
          value: '5'
        },
        {
          label: '代付定金',
          value: '0'
        },
        {
          label: '代付尾款',
          value: '1'
        },
        {
          label: '待发货',
          value: '2'
        },
        {
          label: '待收货',
          value: '3'
        },
        {
          label: '待评价',
          value: '4'
        },
        {
          label: '已完成',
          value: '6'
        },
        {
          label: '已取消',
          value: '7'
        },
        {
          label: '交易关闭',
          value: '8'
        }
      ],
      productFilterType: 'SALE',
      selectList: []
    }
  },
  created() {
    this.formInline = {
      marketId: this.marketId,
      shopId: this.shopId
    }
    this.$nextTick(() => {
      this.$refs.oTable.reload()
    })
  },
  methods: {
    addProduct() {
      this.$refs.addOrUpdate.toggle().add()
    },
    queryList(pageNo, pageSize) {
      // let res = {
      //   data: [],
      //   total: 0
      // }
      // setTimeout(() => {
      //   this.$refs.oTable.complete(res.data, Number(res.total))
      // }, 1000)
      this.$api.preSale
        .preSaleProducts({
          pageNumber: pageNo,
          pageSize: pageSize,
          ...this.formInline,
          advanceSellStatus: this.advanceSellStatus,
          merchantId: JSON.parse(sessionStorage.getItem('userInfo')).merchantId,
          productQuerySortParam: []
        })
        .then(res => {
          console.log(res)
          this.$refs.oTable.complete(
            res.data.data.data,
            Number(res.data.data.total)
          )
        })
        .catch(err => {
          this.$refs.oTable.complete(false)
        })
    },
    Reset() {
      this.formInline = {
        name: '',
        marketId: this.marketId,
        shopId: this.shopId
      }
      this.$refs.oTable.reload()
    },
    handleClick(e) {
      console.log(e.name)
      if (e.name == '5') {
        this.advanceSellStatus = ''
      } else {
        this.advanceSellStatus = e.name
      }
      this.$refs.oTable.reload()
    }
  },
  computed: {
    tableCols() {
      return [
        // { type: "checkbox", width: "60px", fixed: "left" },
        {
          type: 'seq',
          fixed: 'left',
          width: '60px',
          align: 'center',
          title: '序号'
        },
        {
          title: '订单号',
          align: 'center',
          field: 'id'
        },
        {
          title: '订单商品',
          field: 'productPhotoList',
          align: 'center',
          width: '80px',
          type: 'jsx',
          render: ({ row }) => {
            if (row.productPhotoList.length > 0) {
              return (
                <el-image
                  preview-src-list={row.productPhotoList.map(item => {
                    return item.url
                  })}
                  src={row.productPhotoList[0].url}
                ></el-image>
              )
            } else {
              return <span>暂无商品图</span>
            }
          }
        },
        {
          title: '商品名称',
          align: 'center',
          field: 'name'
        },
        {
          title: '规格/数量',
          align: 'center',
          field: 'name'
        },
        {
          title: '定金支付时间',
          align: 'center',
          field: 'startTime',
          type: 'jsx',
          render: ({ row }) => {
            return (
              <span>
                {row.startTime}至{row.endTime}
              </span>
            )
          }
        },
        {
          title: '尾款支付时间',
          align: 'center',
          field: 'minSalePrice',
          type: 'jsx',
          render: ({ row }) => {
            return (
              <span>
                {row.balancePaymentStartTime}至{row.balancePaymentEndTime}
              </span>
            )
          }
        },
        {
          title: '状态',
          align: 'center',
          field: 'status',
          type: 'jsx',
          render: ({ row }) => {
            if (row.advanceSellStatus == '0') {
              return <span>未开始</span>
            } else if (row.advanceSellStatus == '1') {
              return <span>进行中</span>
            } else if (row.advanceSellStatus == '2') {
              return <span>已结束</span>
            } else if (row.advanceSellStatus == '3') {
              return <span>已关闭</span>
            }
          }
        },
        {
          title: '操作',
          fixed: 'right',
          type: 'jsx',
          align: 'center',
          width: '100px',
          render: ({ row }) => {
            let details = () => {
              this.$refs.viewDetails.toggle(row).update()
            }
            return (
              <div>
                <el-button size="mini" type="primary" onClick={details}>
                  查看
                </el-button>
              </div>
            )
          }
        }
      ]
    },
    tableEvent() {
      return {
        'checkbox-all': ({ records, reserves }) => {
          this.selectList = [...records, ...reserves]
        },
        'checkbox-change': ({ records, reserves }) => {
          this.selectList = [...records, ...reserves]
        }
      }
    },
    ...mapState('userData', [
      'isMerchant',
      'marketList',
      'storeList',
      'marketId',
      'shopId'
    ])
  }
}
</script>

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

