<template>
  <el-form class="app-search-form" ref="appSearchForm" :model="form" label-width="100px">
    <el-form-item label="产品名称">
      <el-input
        @keyup.enter.native="getList()"
        v-model="form.name "
        placeholder="产品名称"
      ></el-input>
    </el-form-item>
    <el-form-item label="产品ID:">
      <el-input
        @keyup.enter.native="getList()"
        v-model="form.product_id "
        placeholder="输入产品ID"></el-input>
    </el-form-item>
    <el-form-item label="产品分类:">
      <xd-select-list
        v-model="form.product_type"
        c-placeholder="请选择产品分类"
        :list="productTypeList"
      >
      </xd-select-list>
    </el-form-item>
    <el-form-item label="状态:">
      <xd-select-status
        :is-all="true"
        v-model="form.status"
        c-placeholder="请选择状态"
      ></xd-select-status>
    </el-form-item>
    <el-form-item label="审核状态:">
      <xd-select-check
        :is-all="true"
        v-model="form.is_check"
        c-placeholder="请选择审核状态"
      ></xd-select-check>
    </el-form-item>
    <el-form-item label="是否推荐:">
      <xd-select-best
        :is-all="true"
        v-model="form.best"
        c-placeholder="请选择是否推荐"
      ></xd-select-best>
    </el-form-item>
    <el-form-item label="推荐提货券:">
      <xd-select-yes
        :is-all="true"
        v-model="form.is_delivery_market"
        c-placeholder="请选择是否推荐到提货券"
      ></xd-select-yes>
    </el-form-item>
    <el-form-item v-if="0" label="上下架:">
      <xd-select-list
        v-model="form.merchant_status"
        :list="isOpenStatusList"
        c-placeholder="请选礼包上下架"
      ></xd-select-list>
    </el-form-item>
    <el-form-item label="供货商:">
      <xd-select-list
        v-model="form.company_id"
        :list="companyList"
        c-placeholder="请选择供货商"
      ></xd-select-list>
    </el-form-item>
    <el-form-item label="添加时间:">
      <el-date-picker
        class="data-picker"
        ref="data-picker"
        v-model="form.addTime"
        type="datetimerange"
        :picker-options="pickerOptions"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        align="right">
      </el-date-picker>
    </el-form-item>
    <el-form-item label="价格区间:">
      <Range v-model="form.price"></Range>
    </el-form-item>
    <el-form-item>
      <div class="app-search-from-btn">
        <el-button @click="reSetGetList()">重置</el-button>
        <el-button @click="getList()" type="primary" icon="el-icon-search">搜索</el-button>
      </div>
    </el-form-item>
  </el-form>
</template>

<script>
	import {mapState, mapActions} from "vuex";
	import {
		allOption,
    isCheckList,
    statusList,
    isOpenStatusList,
		isYesList
	} from '@/api/constant';
	import Range from "@/views/admin/market/range";

	export default {
		name: "search",
		components: { Range },
    props: {
			type: {
				type: Number,
        default: 1,
      }
    },
		data() {
			return {
				pathkey: '',
				form: {
					market_type:'', //市场类型
					name: '', //产品名称
					product_id: '', //产品ID
					addTime: ['',''], //添加时间
          price: ['',''], //价格区间
					is_check:'all',//审核状态
					product_type: '', //产品类型
					company_id:'',// 加盟商id
					status: 'all', //状态
					best:'all', //推荐
					is_delivery_market:'all', //推荐到提货券
				},
				pickerOptions: {
					shortcuts: [
						{
							text: '最近一周',
							onClick(picker) {
								const end = new Date();
								const start = new Date();
								start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
								picker.$emit('pick', [start, end]);
							}
						},
						{
							text: '最近一个月',
							onClick(picker) {
								const end = new Date();
								const start = new Date();
								start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
								picker.$emit('pick', [start, end]);
							}
						},
						{
							text: '最近三个月',
							onClick(picker) {
								const end = new Date();
								const start = new Date();
								start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
								picker.$emit('pick', [start, end]);
							}
						},
						{
							text: '最近六个月',
							onClick(picker) {
								const end = new Date();
								const start = new Date();
								start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
								picker.$emit('pick', [start, end]);
							}
						}, {
							text: '最近一年',
							onClick(picker) {
								const end = new Date();
								const start = new Date();
								start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
								picker.$emit('pick', [start, end]);
							}
						}
					],
					// disabledDate(time) {
					// 	return time.getTime() >= new Date().getTime(); //只能选择过去的时间
					// },
				}, //时间默认设置
				productTypeList: [], //礼包类型列表
				companyList: [], //店铺列表
				isYesList: [allOption].concat(isYesList), //是否
				isCheckList: [allOption].concat(isCheckList), //审核状态
				statusList: [allOption].concat(statusList), //启用/禁用架选项
				isOpenStatusList: [allOption].concat(isOpenStatusList), //礼包上下架
			}
		},
		watch: {
			form: {
				handler(val) {
					this.getFormData(val)
				},
				deep: true
			}
		},
    created(){
			this.pathkey = this.$helper.getMarketRouteKey(this.$route, 2);
    },
		mounted() {
			this.form.market_type = this.$helper.getMarketType(this.$route);
			/**判断账户类型列表是否已加载**/
			this.getProductSetting({market_type: this.form.market_type, pathkey: this.pathkey})
				.then((res) => {
					console.log('getProductSetting',res);
					this.companyList = [allOption].concat(this.$helper.idToSelectData(res['compay_data'], 'label', 'value'));
					this.productTypeList = [allOption].concat(this.$helper.idToSelectData(res['product_type_data']));
				});
			
			this.getFormData(this.form);
			this.getList();
		},
		methods: {
			...mapActions('market_shop', [
				'getProductSetting'
      ]),
      
      getFormData(val){
				let temp = this.$helper.cloneDeep(val);
				temp['start_time'] = temp.addTime[0] ? Math.floor(new Date(temp.addTime[0]).getTime() / 1000) : '';
				temp['end_time'] = temp.addTime[1] ? Math.floor(new Date(temp.addTime[1]).getTime() / 1000) : '';
				temp['start_price'] = temp.price[0];
				temp['end_price'] = temp.price[1];
				delete temp.price;
				delete temp.addTime;
				delete temp.discount;
				this.$emit('searchParams', temp)
      },
      
			reSetGetList() {
				this.form = {
					market_type: '', //市场类型
					name: '', //产品名称
					product_id: '', //产品ID
					addTime: ['', ''], //添加时间
					price: ['', ''], //价格区间
					is_check: 'all',//审核状态
					product_type: '', //产品类型
					company_id: '',// 加盟商id
					status: 'all', //状态
					best: 'all', //推荐
					is_delivery_market: 'all', //推荐到提货券
				};
				this.getFormData(this.form);
				this.$emit('search', 1);
			},
			getList() {
				setTimeout(() => {
					this.$emit('search', 1);
				}, 500);
			},
		}
	}
</script>

<style type="scss" scoped>
  .app-search-form {
    display: flex;
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  
  @media screen and (max-width: 400px) {
    .app-search-from-btn {
      display: flex;
      flex-direction: column;
    }
    
    .app-search-from-btn > * {
      margin-bottom: 20px;
      margin-left: 0 !important;
    }
  }


</style>
