<template>
  <page-header-wrapper>
    <template v-slot:content>
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="8" :sm="24">
              <a-form-item label="申请人手机号">
                <a-input v-model="queryParam.username" placeholder="申请人手机号" />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24" v-if="areas.length>0">
              <a-form-item label="城市选择" has-feedback>
                <a-select v-model="queryParam.experience_area_id" placeholder="请选择城市">
                  <a-select-option v-for="item in areas" :key="item.experience_area_id" :value="item.experience_area_id">{{ item.city }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24" v-if="regions.length>0">
              <a-form-item label="快递省市区" has-feedback>
                <a-cascader
                  :options="regions"
                  placeholder="请选择快递省市区"
                  @change="onAreaChange"
                />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="收件人手机号">
                <a-input v-model="queryParam.mobile" placeholder="收件人手机号" />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24" v-if="status.length>0">
              <a-form-item label="报名状态" has-feedback>
                <a-select v-model="queryParam.status" placeholder="请选择报名状态">
                  <a-select-option v-for="item in status" :key="item.value" :value="item.value">{{ item.text }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-button type="primary" @click="search"><a-icon type="search" />搜索</a-button>
              <a-button class="ml8" @click="resetSearch"><a-icon type="undo" />重置</a-button>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </template>

    <!-- 列表 -->
    <a-card :bordered="false">
      <a-card :bordered="false">
        <a-row>
          <a-col :sm="4" :xs="24">
            <info title="总参与人数" :value="count.all+''" :bordered="true" />
          </a-col>
          <a-col :sm="3" :xs="24">
            <info title="待检测" :value="count.init+''" :bordered="true" />
          </a-col>
          <a-col :sm="3" :xs="24">
            <info title="待审核" :value="count.audit+''" :bordered="true" />
          </a-col>
          <a-col :sm="4" :xs="24">
            <info title="已拒绝" :value="count.refuse+''" :bordered="true" />
          </a-col>
          <a-col :sm="3" :xs="24">
            <info title="待发货" :value="count.pass+''" :bordered="true" />
          </a-col>
          <a-col :sm="3" :xs="24">
            <info title="待签收" :value="count.sign+''" :bordered="true" />
          </a-col>
          <a-col :sm="4" :xs="24">
            <info title="已签收" :value="count.signed+''" />
          </a-col>
        </a-row>
      </a-card>
      <br/>
      <s-table
        ref="table"
        :columns="columns"
        :data="loadData"
        :rowKey="(row) => row.enroll_id + ''"
        showPagination="auto"
        bordered
        :scroll="{ x: 1200, y: 1000 }"
        size="default">
        <!-- 收货人姓名 电话 收货地址 -->
        <div slot="name" slot-scope="text, record" >
          {{ record.express.name || '--' }}<div>{{ record.express.mobile }}</div>
        </div>
        <div slot="addr" slot-scope="text, record">{{ record.express.full_address || '--' }}</div>
        <div slot="express" slot-scope="text, record">
          {{ record.express.express.name || '--' }}<br/>{{ record.express.express_no }}
        </div>
        <user-info slot="share_user" slot-scope="text, record" :info="{...record.share_user}" />
        <user-info slot="user" slot-scope="text, record" :info="{...record.user}" />
      </s-table>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { STable, UserInfo } from '@/components'
import DeriveButton from '@/components/OrderDetailInfo/DeriveButton'
import moment from 'moment'
import Info from '@/views/home/components/Info'
import {
  getMiddlesExperience, getMiddlesExperienceBefore
} from '@/api/stock'

const columns = [
  {
    title: 'ID',
    dataIndex: 'enroll_id',
    align: 'center',
    width: 60
  },
  {
    title: '推荐人',
    scopedSlots: { customRender: 'share_user' },
    align: 'center',
    width: 200
  },
  {
    title: '申请人',
    scopedSlots: { customRender: 'user' },
    align: 'center',
    width: 200
  },
  {
    title: '体验类型',
    dataIndex: 'type_name',
    align: 'center',
    width: 100
  },
  {
    title: '报名状态',
    dataIndex: 'status',
    align: 'center',
    width: 100
  },
  {
    title: '收件人',
    children: [
      {
        title: '收件人姓名/电话',
        scopedSlots: { customRender: 'name' },
        align: 'center',
        width: 150
      },
      {
        title: '收件地址',
        scopedSlots: { customRender: 'addr' },
        align: 'center',
        width: 150
      }, {
        title: '发货单号',
        scopedSlots: { customRender: 'express' },
        align: 'center',
        width: 170
      }
    ],
    align: 'center'
  }, {
    title: '审核时间',
    dataIndex: 'audit_at',
    align: 'center',
    width: 120
  }, {
    title: '报名时间',
    dataIndex: 'created_at',
    align: 'center',
    width: 120
  }
]

export default {
  name: 'StockIn',
  components: {
    STable,
    UserInfo,
    Info,
    DeriveButton
  },
  data () {
    return {
      columns,
      areas: [],
      status: [],
      provinces: [],
      regions: [],
      count: {
        'all': 0, // 全部
        'init': 0, // 待检测
        'audit': 0, // 待审核
        'refuse': 0, // 已拒绝
        'pass': 0, // 待发货
        'sign': 0, // 待签收
        'signed': 0 // 已签收
        },
      queryParam: {
        username: undefined, // 申请人手机号
        mobile: undefined, // 收件人手机号
        experience_area_id: undefined, // 城市id
        status: undefined, // 状态：
        province_id: undefined, // 省
        city_id: undefined, // 市
        district_id: undefined // 区
      },
      loadData: (parameter) => {
        const requestParameters = Object.assign({}, parameter, this.queryParam)
        return getMiddlesExperience(requestParameters)
      }
    }
  },
  created () {
    this.getbeforeInfo()
  },
  watch: {
    $route (to, from) {
      if (to.name === 'cityExperienceOfficer' && (
        from.name === 'Home' ||
        from.name === 'cityExperienceOfficer' ||
        from.name === 'StockOut' ||
        from.name === 'StockIn' ||
        from.name === 'DealerIn' ||
        from.name === 'DealerOut' ||
        from.name === 'UserIndex' ||
        from.name === 'SalesOnline' ||
        from.name === 'SalesOffline' ||
        from.name === 'PermissionsIndex' ||
        from.name === 'SalesStock')
      ) {
        this.$refs.table.loadData()
      }
    }
  },
  methods: {
    moment,
    // 更改创建时间
    onCreateChange (dates, dateStrings) {
      this.queryParam.start_at = dateStrings[0]
      this.queryParam.end_at = dateStrings[1]
      this.rang_at = dateStrings
    },
    // 搜索列表
    search () {
      this.$refs.table.refresh(true) // 重置接口且刷先到第一页
    },
    // 重置搜索列表
    resetSearch () {
      this.queryParam.experience_area_id = undefined
      this.queryParam.username = undefined
      this.queryParam.mobile = undefined
      this.queryParam.status = undefined
      this.queryParam.province_id = undefined
      this.rang_at = []
      this.$refs.table.refresh(true) // 重置接口且刷先到第一页
    },
    // 获取前置信息
    getbeforeInfo () {
      getMiddlesExperienceBefore().then(res => {
        this.areas = res.areas
        this.count = res.count
        this.regions = res.regions
        this.status = res.status
      }).catch(err => {
        console.log(err)
      })
    },
    onAreaChange (value) {
      this.queryParam.province_id = value[0]
      this.queryParam.city_id = value[1]
      this.queryParam.district_id = value[2]
    }
  }
}
</script>

<style lang="less" scoped>
.ml8 {
  margin-left: 8px;
}
</style>
