<template>
  <LayoutContent :breads="[{title: '店铺列表'}]">
    <LayoutFilter @on-filter="onFilter" @on-clear="onClear">
      <i-form ref="filterForm" inline :model="filter">
        <i-form-item prop="uid">
          <i-input placeholder="输入uid" v-model="filter.uid"></i-input>
        </i-form-item>
        <i-form-item prop="certName">
          <i-input placeholder="商家名称" v-model="filter.certName"></i-input>
        </i-form-item>
        <i-form-item prop="mobile">
          <i-input placeholder="手机号" v-model="filter.mobile"></i-input>
        </i-form-item>
        <i-form-item prop="validStatus">
          <i-select placeholder="选择状态" v-model="filter.validStatus" style="width: 100px;">
            <i-option :value="1">已入驻</i-option>
            <i-option :value="9">已退驻</i-option>
          </i-select>
        </i-form-item>
          <i-form-item prop="entryType">
              <i-select placeholder="商家类型" v-model="filter.entryType" style="width: 100px">
                <i-option :value="1">普通入驻</i-option>
                <i-option :value="2">超级入驻</i-option>
                <i-option :value="3">前期白名单</i-option>
              </i-select>
          </i-form-item>
      </i-form>
    </LayoutFilter>
    <LayoutTable
      :page="page"
      :total="total"
      :columns="columns"
      :data="data"
      @on-page-change="onPageChange">
    </LayoutTable>
  </LayoutContent>
</template>

<script>
import dayjs from 'dayjs';
import Api from '@/api/api';
import qs from 'qs';
import ISelect from "../../../node_modules/iview/src/components/select/select";
import IOption from "../../../node_modules/iview/src/components/select/option";

const api = new Api();

export default {
  components: {
    IOption,
    ISelect},
  name: 'SendRecordPage',
  data() {
    return {
      filter: {
        certName: '',
        mobile: '',
        uid: '',
        validStatus: '',
        entryType: ''
      },
      page: 1,
      total: 0,
      data: [],
      columns: [{
        title: 'UID',
        key: 'uid',
        width: 100
      },
      {
        title: '商家类型',
        render(h, {row}) {
          return h('span', {}, ['','普通入驻', '超级入驻', '前期白名单'][row.entryType]);
        },
        width: 100
      },
      {
        title: '商家名称',
        key: 'certName',
        width: 100
      }, {
        title: '手机号',
        key: 'mobile',
        width: 150
      }, {
        title: '身份证',
        key: 'certNo',
        width: 200
      }, {
        title: '上架SKUP',
        key: 'selfSkuNum',
        width: 100
      }, {
        title: '违规次数',
        key: 'breakRuleTimes',
        width: 100
      },
      {
        title: '账户余额',
        render(h, {row}) {
          let color = parseInt(row.money, 10) > 999 ? 'inherit' : 'red';
          return h('span', {style: {color: color}}, row.money);
        },
        width: 100
      },
      {
        title: '入驻时间',
        render(h, {row}) {
          return (
            <span>{dayjs(row.enterTime).format('YYYY-MM-DD HH:mm:ss')}</span>
          );
        },
        width: 150
      }, {
        title: '退出入驻时间',
        render(h, {row}) {
          return (
            <span>{row.quitTime ? dayjs(row.quitTime).format('YYYY-MM-DD HH:mm:ss') : ''}</span>
          );
        },
        width: 150
      }, {
        title: '入驻状态',
        key: 'validStatusDesc',
        width: 100
      }]
    };
  },
  created() {
    this.$nextTick(() => {
      const {page, certName, mobile, uid, validStatus} = qs.parse(location.search ? location.search.slice(1) : '');

      this.filter.certName = certName ? decodeURIComponent(certName) : this.filter.certName;
      this.filter.mobile = mobile || this.filter.mobile;
      this.filter.uid = uid || this.filter.uid;
      this.filter.validStatus = validStatus ? parseInt(validStatus) : this.filter.validStatus;
      this.page = page ? parseInt(page) : 1;

      this.fetchData(this.filter, this.page);
    });
  },
  methods: {
    onFilter() {
      this.fetchData(this.filter);
    },
    onClear() {
      this.$refs.filterForm.resetFields();
      this.fetchData(this.filter);
    },
    onPageChange(page) {
      this.fetchData(this.filter, page);
    },
    async fetchData(params, page = 1) {
      this.page = page;
      this.$Loading.start();
      const result = await api._get('/ufoPlatform/storedSeller/queryStoredSeller', Object.assign({
        page,
      }, this.getParams(params)));

      if (result.code === 200) {
//        console.log('listData:', result);
        this.total = result.data.total;
        this.data = result.data.list;
        this.$Loading.finish();
      } else {
        result.message && this.$Message.warning(result.message);
        this.$Loading.error();
      }
    },
    getParams(params) {
      return {
        certName: params.certName,
        mobile: params.mobile,
        uid: params.uid,
        validStatus: parseInt(params.validStatus) >= 0 ? params.validStatus : void 0,
        entryType: parseInt(params.entryType) >= 0 ? params.entryType : void 0,
      };
    }
  },
};
</script>

<style>

</style>