<template>
  <div id="card-1">
    <el-row>
      <el-col :span="24" class="main">
        <el-col :span="24" class="one">
          <search-1 :form="searchForm" @onSubmit="search" @querySearch="querySearch" @toReset="toClose" :shopList="shopList"> </search-1>
        </el-col>
        <data-table
          :select="true"
          :selected="selected"
          @handleSelect="handleSelect"
          :fields="fields"
          :opera="opera"
          @query="search"
          :data="list"
          :total="total"
          @detail="toDetail"
        >
        </data-table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
const _ = require('lodash');
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions } = createNamespacedHelpers('order');
const { mapActions: shop } = createNamespacedHelpers('shop');
export default {
  name: 'card-1',
  props: { statusList: { type: Array } },
  components: { search1: () => import('./search-1.vue') },
  data: function () {
    return {
      searchForm: {},
      list: [],
      total: 0,
      opera: [{ label: '详情', method: 'detail' }],
      fields: [
        { label: '订单号', model: 'no' },
        { label: '下单时间', model: 'buy_time' },
        { label: '顾客', model: 'customer.name' },
        { label: '店铺名称', model: 'goods', format: (i) => this.getShopName(i) },
        { label: '需支付金额', model: 'real_pay' },
      ],
      // 多选值
      selected: [],
      shopList: [],
    };
  },
  async created() {
    await this.search();
  },
  methods: {
    ...shop({ shopQuery: 'query' }),
    ...mapActions(['query', 'fetch', 'create', 'update', 'delete']),
    // 查询
    async search({ skip = 0, limit = 10, ...info } = {}) {
      let condition = _.cloneDeep(this.searchForm);
      if (condition.buy_time) {
        condition[`buy_time@start`] = _.head(condition.buy_time);
        condition[`buy_time@end`] = _.last(condition.buy_time);
        delete condition.buy_time;
      }
      info.status = '0';
      let res = await this.query({ skip, limit, ...condition, ...info });
      if (this.$checkRes(res)) {
        this.$set(this, 'list', res.data);
        this.$set(this, 'total', res.total);
      }
    },
    getShopName(i) {
      let shopname = i.map((e) => e.shop_name);
      return shopname.join(',');
    },
    toDetail({ data }) {
      this.$router.push({ path: '/system/order/detail_order', query: { id: data.id } });
    },
    toClose() {
      this.searchForm = {};
      this.search();
    },
    // 多选
    handleSelect(data) {
      this.$emit('handleSelect');
    },
    // 店铺名称远程查询
    async querySearch(value) {
      let res = await this.shopQuery({ name: value });
      if (this.$checkRes(res)) {
        this.$set(this, 'shopList', res.data);
      }
    },
  },
  computed: {
    ...mapState(['user']),
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="less" scoped>
.one {
  margin: 0 0 10px 0;
}
</style>
