<template>
  <div class="app-container" id="commodity">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
      <el-form-item :label="$t('table.commodityType')" prop="commodityName">
		<el-select v-model="queryParams.typeId" clearable :placeholder="$t('placeholder.commodityType')">
			<el-option
				v-for="item,index in commodityTypeList"
				:key="index"
				:label="item.typeName"
				:value="item.id">
			</el-option>
		</el-select>
        <!-- <el-input
          v-model="queryParams.commodityType"
          placeholder="请输入商品名称"
          clearable
          @keyup.enter.native="handleQuery"
        /> -->
      </el-form-item>
      <!--
	  <el-form-item :label="$t('table.isPreferred1')" prop="isRecommend">
      <el-select v-model="queryParams.isRecommend" clearable :placeholder="$t('placeholder.isPreferred')">
        <el-option
          :label="$t('dialog.yes')"
          value="1">
        </el-option>
        <el-option
          :label="$t('dialog.no')"
          value="0">
        </el-option>
      </el-select>
    </el-form-item>
    -->
    <el-form-item :label="$t('table.isPreferred2')" prop="isPreferred">
      <el-select v-model="queryParams.isPreferred" clearable :placeholder="$t('placeholder.isPreferred')">
        <el-option
          :label="$t('dialog.yes')"
          value="1">
        </el-option>
        <el-option
          :label="$t('dialog.no')"
          value="0">
        </el-option>
      </el-select>
        <!-- <el-input
          v-model="queryParams.isPreferred"
          placeholder="请输入是否优选：0-否 1-是"
          clearable
          @keyup.enter.native="handleQuery"
        /> -->
      </el-form-item>
      <!-- <el-form-item label="成人价格" prop="adultPrice">
        <el-input
          v-model="queryParams.adultPrice"
          placeholder="请输入成人价格"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="儿童价格" prop="childPrice">
        <el-input
          v-model="queryParams.childPrice"
          placeholder="请输入儿童价格"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="库存" prop="stock">
        <el-input
          v-model="queryParams.stock"
          placeholder="请输入库存"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item> -->
      <el-form-item :label="$t('table.beginDate')" >
        <el-date-picker clearable
          v-model="queryParams['params[beginDate]']"
          type="date"
          value-format="yyyy-MM-dd"
          :placeholder="$t('placeholder.beginDate')">
        </el-date-picker>
      </el-form-item>
      <el-form-item :label="$t('table.endDate')">
        <el-date-picker clearable
          v-model="queryParams['params[endDate]']"
          type="date"
          value-format="yyyy-MM-dd"
          :placeholder="$t('placeholder.endDate')">
        </el-date-picker>
      </el-form-item>
      <!-- <el-form-item label="出行目标人数" prop="targetPeopleNum">
        <el-input
          v-model="queryParams.targetPeopleNum"
          placeholder="请输入出行目标人数"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="提前结束时间" prop="advancePeriod">
        <el-input
          v-model="queryParams.advancePeriod"
          placeholder="请输入提前结束时间"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="购买数量" prop="saleNum">
        <el-input
          v-model="queryParams.saleNum"
          placeholder="请输入购买数量"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item> -->
      <!-- <el-form-item label="bus公司id" prop="deptId">
        <el-input
          v-model="queryParams.deptId"
          placeholder="请输入bus公司id"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item> -->
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">{{$t('btn.search')}}</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{$t('btn.Reset')}}</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['commodity:commodity:add']"
        >{{$t('btn.add')}}</el-button>
      </el-col>
	  <el-col :span="1.5">
	  	<el-button
          type="primary"
          plain
          size="mini"
          @click="openJiangLi"
          v-hasPermi="['customerIntegralSet:customerIntegralSet:list']"
        >{{$t('btn.add3')}}</el-button>
      </el-col>
      <!-- <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['commodity:commodity:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['commodity:commodity:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['commodity:commodity:export']"
        >导出</el-button>
      </el-col> -->
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="commodityList" @selection-change="handleSelectionChange">
      
	  <!-- <el-table-column type="selection" width="55" align="center" /> -->
	  <el-table-column :label="$t('table.SerialNumber')" width="50px" align="center">
		<template slot-scope="scope">
			{{ scope.$index + (queryParams.pageNum - 1) * queryParams.pageSize + 1 }}
		</template>
	  </el-table-column>
      <!-- <el-table-column label="id" align="center" prop="id" /> -->
      <!-- <el-table-column label="商品类型id" align="center" prop="typeId" /> -->
	  <el-table-column :label="$t('table.commodityType')" align="center" prop="typeName" />
      <el-table-column :label="$t('table.commodityName')" align="center" prop="commodityName" />
	  <el-table-column :label="$t('table.adultPrice')" align="center" prop="adultPrice" />
	  <el-table-column :label="$t('table.childPrice')" align="center" prop="childPrice" />
	  <el-table-column :label="$t('table.stock')" align="center" prop="stock" />
      <el-table-column :label="$t('table.departurePlace')" align="center" prop="departurePlace" />
	  <el-table-column :label="$t('table.periodStart')" align="center" prop="periodStart" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.periodStart, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('table.periodEnd')" align="center" prop="periodEnd" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.periodEnd, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('table.status1')" align="center" >
		<template slot-scope="scope">
			<el-switch v-model="scope.row.status" active-value="0"
                inactive-value="1" active-color="#13ce66" inactive-color="#ff4949" @change="statusUpdate(scope.row,3)"></el-switch>
        </template>
	  </el-table-column>
      <!-- <el-table-column label="儿童价格说明" align="center" prop="childPriceExplain" />
      <el-table-column label="封面图片" align="center" prop="faceImg" width="100">
        <template slot-scope="scope">
          <image-preview :src="scope.row.faceImg" :width="50" :height="50"/>
        </template>
      </el-table-column>
      <el-table-column label="商品图片" align="center" prop="commodityImg" width="100">
        <template slot-scope="scope">
          <image-preview :src="scope.row.commodityImg" :width="50" :height="50"/>
        </template>
      </el-table-column>
      <el-table-column label="是否使用优惠卷(0-否  1-是)" align="center" prop="isCoupon" />
      
      <el-table-column label="有效期单日" align="center" prop="periodWeek" />
      <el-table-column label="出行目标人数" align="center" prop="targetPeopleNum" />
      <el-table-column label="提前结束时间" align="center" prop="advancePeriod" />
      <el-table-column label="注意事项" align="center" prop="attention" />
      <el-table-column label="概要说明" align="center" prop="specification" />
      <el-table-column label="购买数量" align="center" prop="saleNum" />
      <el-table-column label="是否推荐：0-否 1-是" align="center" prop="isRecommend" />
      <el-table-column label="是否优选：0-否 1-是" align="center" prop="isPreferred" />
      
      <el-table-column label="bus公司id" align="center" prop="deptId" />
      <el-table-column label="备注" align="center" prop="remark" /> -->
      <el-table-column :label="$t('table.operation')" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
        <!--
		  <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="statusUpdate(scope.row,1)"
            v-hasPermi="['commodity:commodity:edit']"
          >{{scope.row.isRecommend=='0'?$t('table.setRecommend'):$t('table.isRecommend1')}}</el-button>
          -->
		  <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="statusUpdate(scope.row,2)"
            v-hasPermi="['commodity:commodity:edit']"
          >{{scope.row.isPreferred=='0'?$t('table.setPreferred'):$t('table.isPreferred1')}}</el-button>	
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['commodity:commodity:edit']"
          >{{$t('table.edit')}}</el-button>
		  <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleDetail(scope.row)"
            v-hasPermi="['commodity:commodity:edit']"
          >{{$t('table.detail')}}</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['commodity:commodity:delete']"
          >{{$t('table.detail')}}</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改商品信息管理对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="1200px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px" label-position="left" style="display:flex;flex-wrap:wrap;justify-content:space-around;">
		<el-form-item :label="$t('table.commodityType')" prop="typeId" style="width:500px">
			<el-select :disabled='!isDetail' v-model="form.typeId" :placeholder="$t('placeholder.commodityType')" >
				<el-option
					v-for="item,index in commodityTypeList"
					:key="index"
					:label="item.typeName"
					:value="item.id">
				</el-option>
			</el-select>
		</el-form-item>
        <el-form-item :label="$t('table.commodityName')" prop="commodityName" style="width:500px">
          <el-input :disabled='!isDetail' v-model="form.commodityName" :placeholder="$t('placeholder.commodityName')" />
        </el-form-item>
        <el-form-item :label="$t('table.departurePlace')" prop="departurePlace" style="width:500px">
          <el-input :disabled='!isDetail' v-model="form.departurePlace" type="text" :placeholder="$t('placeholder.departurePlace')" />
        </el-form-item>
        <el-form-item :label="$t('table.adultPrice')" prop="adultPrice" style="width:500px">
          <el-input :disabled='!isDetail' v-model="form.adultPrice" :placeholder="$t('placeholder.adultPrice')" />
        </el-form-item>
        <el-form-item :label="$t('table.childPrice')" prop="childPrice" style="width:500px">
          <el-input :disabled='!isDetail' v-model="form.childPrice" :placeholder="$t('placeholder.childPrice')" />
        </el-form-item>
        <el-form-item :label="$t('table.stock')" prop="stock" style="width:500px">
          <el-input :disabled='!isDetail' v-model="form.stock" :placeholder="$t('placeholder.stock')" />
        </el-form-item>
        <el-form-item :label="$t('dialog.childPriceExplain')" prop="childPriceExplain" label-width="160px" style="width:800px;margin-right:270px">
          <el-input :disabled='!isDetail' v-model="form.childPriceExplain" type="textarea" :placeholder="$t('placeholder.childPriceExplain')"  />
        </el-form-item>
        <el-form-item :label="$t('dialog.faceImg')" label-width="160px" style="width:800px;margin-right:270px" prop='faceImg'>
          <image-upload v-model="form.faceImg" :limit='1'/>
        </el-form-item>
        <el-form-item :label="$t('dialog.commodityImg')" label-width="160px" style="width:800px;margin-right:270px" prop='commodityImg'>
          <image-upload v-model="form.commodityImg" :limit='5'/>
        </el-form-item>
		<el-form-item :label="$t('dialog.isCoupon')" label-width="250px" style="width:800px;margin-right:270px">
          <el-radio-group :disabled='!isDetail' v-model="form.isCoupon">
			<el-radio :label="'1'">{{$t('dialog.yes')}}</el-radio>
			<el-radio :label="'0'">{{$t('dialog.no')}}</el-radio>
		  </el-radio-group>
        </el-form-item>
		<el-row v-if="form.isCoupon" class="mb8" :gutter="10" style="width:800px;margin-right:270px;margin-bottom:40px">
          <!-- <el-col :span="1.5">
            <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAddTCommodityCoupon">添加</el-button>
          </el-col>
          <el-col :span="1.5" style="margin-bottom:20px">
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDeleteTCommodityCoupon">删除</el-button>
          </el-col> -->
		  <!-- <el-table style="width:100%" :data="tCommodityCouponList" :row-class-name="rowTCommodityCouponIndex" @selection-change="handleTCommodityCouponSelectionChange" ref="tCommodityCoupon" > -->
		  <el-table style="width:100%" :data="tCommodityCouponList" ref="tCommodityCoupon">
			<!-- <el-table-column type="selection" width="40" align="center" />
			<el-table-column label="序号" align="center" prop="index" width="50"/> -->
			<el-table-column :label="$t('dialog.couponName')" prop="couponName" width="125">
				<template slot-scope="scope">
					<el-input :disabled='!isDetail' v-model="scope.row.couponName" :placeholder="$t('placeholder.couponName')" />
				</template>
			</el-table-column>
			<el-table-column :label="$t('dialog.discountPrice')" prop="discountPrice" width="125">
				<template slot-scope="scope">
					<el-input :disabled='!isDetail' v-model="scope.row.discountPrice" :placeholder="$t('placeholder.discountPrice')" />
				</template>
			</el-table-column>
			<el-table-column :label="$t('dialog.beginTime1')" prop="beginTime" >
				<template slot-scope="scope">
					<el-date-picker clearable :disabled='!isDetail'
						v-model="scope.row.beginTime"
						type="date"
						value-format="yyyy-MM-dd"
						:placeholder="$t('placeholder.beginDate')">
						</el-date-picker>
				</template>
			</el-table-column>
			<el-table-column :label="$t('dialog.endTime1')" prop="endTime" >
				<template slot-scope="scope">
					<el-date-picker clearable :disabled='!isDetail'
						v-model="scope.row.endTime"
						type="date"
						value-format="yyyy-MM-dd"
						:placeholder="$t('placeholder.endDate')">
						</el-date-picker>
				</template>
			</el-table-column>
		  </el-table>
        </el-row>
		<el-divider content-position="center">{{$t('dialog.CommodityTitel4')}}</el-divider>
        <el-row class="mb8" :gutter="10" style="width:800px;margin-right:270px;margin-bottom:40px">
          <el-col :span="1.5" v-if="isDetail">
            <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAddTCommodityJourneyInformation">{{$t('btn.add')}}</el-button>
          </el-col>
          <el-col :span="1.5" v-if="isDetail" style="margin-bottom:20px">
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDeleteTCommodityJourneyInformation">{{$t('table.delete')}}</el-button>
          </el-col>
		  <el-table style="width:100%" :data="tCommodityJourneyInformationList" :row-class-name="rowTCommodityJourneyInformationIndex" @selection-change="handleTCommodityJourneyInformationSelectionChange" ref="tCommodityJourneyInformation" >
			<el-table-column type="selection" width="50" align="center" />
			<el-table-column :label="$t('table.SerialNumber')" align="center" prop="index" width="80"/>
			<el-table-column :label="$t('dialog.journeyTime')" prop="journeyTime" >
				<template slot-scope="scope">
					<!-- <el-date-picker clearable :disabled='!isDetail'
						v-model="scope.row.journeyTime"
						type="date"
						value-format="yyyy-MM-dd"
						:placeholder="$t('placeholder.journeyTime')">
					</el-date-picker> -->
					<el-time-select clearable :disabled='!isDetail'
						v-model="scope.row.journeyTime"
						:picker-options="{
							start: '00:00',
							step: '00:15',
							end: '23:59'
						}"
						:placeholder="$t('placeholder.journeyTime')">
					</el-time-select>
					<!-- <el-time-picker :disabled='!isDetail'
						v-model="scope.row.journeyTime"
						:picker-options="{
							start: '00:00',
							step: '00:15',
							end: '23:59'
						}"
						:placeholder="$t('placeholder.journeyTime')">
					</el-time-picker> -->
					<!-- <el-input v-model="scope.row.journeyTime" placeholder="请输入旅程时间" /> -->
				</template>
			</el-table-column>
			<el-table-column :label="$t('dialog.detail1')" prop="detail" >
				<template slot-scope="scope">
					<el-input :disabled='!isDetail' v-model="scope.row.detail" :placeholder="$t('placeholder.detail')" />
				</template>
			</el-table-column>
		  </el-table>
        </el-row>
        <el-divider content-position="center">{{$t('dialog.CommodityTitel5')}}</el-divider>
        <el-col :span="11" :offset="1">
          <el-form-item :label="$t('table.periodStart')" prop="periodStart" label-width="150px">
            <el-date-picker clearable :disabled='!isDetail'
              v-model="form.periodStart"
              type="date"
              value-format="yyyy-MM-dd"
              :placeholder="$t('placeholder.periodStart')">
            </el-date-picker>
          </el-form-item>
        </el-col> 
        <el-col :span="12">
          <el-form-item :label="$t('table.periodEnd')" prop="periodEnd" label-width="150px">
            <el-date-picker clearable :disabled='!isDetail'
              v-model="form.periodEnd"
              type="date"
              value-format="yyyy-MM-dd"
              :placeholder="$t('placeholder.periodEnd')">
            </el-date-picker>
          </el-form-item>
        </el-col> 
        <el-col :span="23" :offset="1">
          <el-form-item :label="$t('dialog.periodWeek')" prop="periodWeek">
            <el-checkbox-group v-model="form.periodWeek" :disabled='!isDetail'>
            <el-checkbox :label="'1'">{{$t('dialog.Monday')}}</el-checkbox>
            <el-checkbox :label="'2'">{{$t('dialog.Tuesday')}}</el-checkbox>
            <el-checkbox :label="'3'">{{$t('dialog.Wednesday')}}</el-checkbox>
            <el-checkbox :label="'4'">{{$t('dialog.Thursday')}}</el-checkbox>
            <el-checkbox :label="'5'">{{$t('dialog.Friday')}}</el-checkbox>
            <el-checkbox :label="'6'">{{$t('dialog.Saturday')}}</el-checkbox>
            <el-checkbox :label="'7'">{{$t('dialog.Sunday')}}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col> 
        <el-col :span="23" :offset="1">
          <el-form-item :label="$t('dialog.targetPeopleNum')" prop="targetPeopleNum" label-width="150px" style="width:350px">
            <el-input :disabled='!isDetail' v-model="form.targetPeopleNum" :placeholder="$t('placeholder.targetPeopleNum')" />
          </el-form-item>
        </el-col> 
        <el-col :span="23" :offset="1">
          <el-form-item :label="$t('dialog.advancePeriod')" prop="advancePeriod" label-width="350px"  style="width:1100px">
            <!-- <el-input v-model="form.advancePeriod" placeholder="请输入提前结束时间" /> -->
            <el-select :disabled='!isDetail' v-model="form.advancePeriod" :placeholder="$t('placeholder.advancePeriod')">
            <el-option
              :label="$t('dialog.day1')"
              :value="1">
            </el-option>
            <el-option
              :label="$t('dialog.day2')"
              :value="2">
            </el-option>
            <el-option
              :label="$t('dialog.day3')"
              :value="3">
            </el-option>
            <el-option
              :label="$t('dialog.day4')"
              :value="4">
            </el-option>
            <el-option
              :label="$t('dialog.day5')"
              :value="5">
            </el-option>
            </el-select>
          </el-form-item>
        </el-col> 
        <el-col :span="23" :offset="1">
          <el-form-item :label="$t('dialog.specification')" label-width="120px" style="width:1100px" prop="specification">
                <editor v-if='isDetail' v-model="form.specification" :min-height="192"/>
            <div v-else v-html="form.specification" ></div>
          </el-form-item>
        </el-col> 
        <el-col :span="23" :offset="1">
          <el-form-item :label="$t('dialog.attention')" label-width="120px"  style="width:1100px" prop="attention">
            <editor v-if='isDetail' v-model="form.attention" :min-height="192"/>
            <div v-else v-html="form.attention" ></div>
          </el-form-item>
        </el-col> 
        <el-col :span="23" :offset="1">
          <el-form-item :label="$t('dialog.remark')" label-width="120px"  style="width:1100px">
                <editor v-if='isDetail' v-model="form.remark" :min-height="192"/>
            <div v-else v-html="form.remark" ></div>
          </el-form-item>
        </el-col> 
        <!-- <el-form-item label="购买数量" prop="saleNum">
          <el-input v-model="form.saleNum" placeholder="请输入购买数量" />
        </el-form-item>
        <el-form-item label="是否推荐：0-否 1-是" prop="isRecommend">
          <el-input v-model="form.isRecommend" placeholder="请输入是否推荐：0-否 1-是" />
        </el-form-item>
        <el-form-item label="是否优选：0-否 1-是" prop="isPreferred">
          <el-input v-model="form.isPreferred" placeholder="请输入是否优选：0-否 1-是" />
        </el-form-item>
        <el-form-item label="bus公司id" prop="deptId">
          <el-input v-model="form.deptId" placeholder="请输入bus公司id" />
        </el-form-item>
        <el-form-item label="删除标志：0-正常 1-删除" prop="delFlag">
          <el-input v-model="form.delFlag" placeholder="请输入删除标志：0-正常 1-删除" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
        </el-form-item> -->
        
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button v-if="isDetail" type="primary" @click="submitForm">{{$t('btn.submit')}}</el-button>
        <el-button @click="cancel">{{$t('btn.cancel')}}</el-button>
      </div>
    </el-dialog>
	<el-dialog :title="$t('dialog.customerDistributionRecordTitel4')" :visible.sync="open2" width="1000px" append-to-body>
		<el-table v-loading="loading" :data="customerDistributionSetList">
			<el-table-column :label="$t('table.SerialNumber')" width="50px" align="center">
				<template slot-scope="scope">
					{{ scope.$index+1}}
				</template>
			</el-table-column>
			<el-table-column :label="$t('dialog.proportion2')" align="center" prop="typeName" >
				<template slot-scope="scope">
					<el-input v-model="scope.row.proportion" :placeholder="$t('placeholder.proportion2')" type="number" min="0"></el-input>
				</template>
			</el-table-column>
			<el-table-column :label="$t('table.operation')" align="center" class-name="small-padding fixed-width">
			  	<template slot-scope="scope">	
					<el-button
						size="mini"
						type="text"
						icon="el-icon-edit"
						@click="jiangLiUpdate(scope.row)"
						v-hasPermi="['customerDistributionRecord:customerDistributionRecord:edit']"
					>{{$t('table.edit')}}</el-button>
					<!-- <el-button
						size="mini"
						type="text"
						icon="el-icon-delete"
						@click="handleDelete(scope.row)"
						v-hasPermi="['customerDistributionRecord:customerDistributionRecord:remove']"
					>删除</el-button> -->
					</template>
			</el-table-column>
		</el-table>	
      <div slot="footer" class="dialog-footer">
        <!-- <el-button type="primary" @click="submitForm">确 定</el-button> -->
        <el-button @click="open2=false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listCommodity, getCommodity, delCommodity, addCommodity, updateCommodity,updateCommoditySetStatus ,customerIntegralSet,customerIntegralSetList} from "@/api/commodity/commodity";
import { listCommodityType } from "@/api/commodityType/commodityType";

export default {
  name: "Commodity",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 子表选中数据
      checkedTCommodityJourneyInformation: [],
	  checkedTCommodityCoupon: [],
	  customerDistributionSetList:[
		{
			proportion:''
		}
	  ], 
	  open2: false,
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 商品信息管理表格数据
      commodityList: [],
	  // 商品分类列表
	  commodityTypeList: [], 
	  // 商品优惠券信息表格数据
	  tCommodityCouponList: [
		{
			couponName : "",
      		discountPrice : "",
      		beginTime : "",
	  		endTime : "",
		}
	  ],
      // 商品旅程信息表格数据
      tCommodityJourneyInformationList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
	  isDetail: true,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
		typeId: null,
		isRecommend: null,
        isPreferred: null,
		'params[beginDate]':null,
		'params[endDate]':null,

		// periodStart: null,
		// periodEnd: null,
        // commodityName: null,
        // departurePlace: null,
        // adultPrice: null,
        // childPrice: null,
        // stock: null,
        // childPriceExplain: null,
        // faceImg: null,
        // commodityImg: null,
        // isCoupon: null,
        // periodWeek: null,
        // targetPeopleNum: null,
        // advancePeriod: null,
        // attention: null,
        // specification: null,
        // saleNum: null,
        // status: null,
        // deptId: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        typeId: [
          { required: true, message: this.$t('rules.typeId'), trigger: "change" }
        ],
        commodityName: [
          { required: true, message: this.$t('rules.commodityName'), trigger: "blur" }
        ],
        departurePlace: [
          { required: true, message: this.$t('rules.departurePlace'), trigger: "blur" }
        ],
        adultPrice: [
          { required: true, message: this.$t('rules.adultPrice'), trigger: "blur" }
        ],
        childPrice: [
          { required: true, message: this.$t('rules.childPrice'), trigger: "blur" }
        ],
        stock: [
          { required: true, message: this.$t('rules.stock'), trigger: "blur" }
        ],
        childPriceExplain: [
          { required: true, message: this.$t('rules.childPriceExplain'), trigger: "blur" }
        ],
        faceImg: [
          { required: true, message: this.$t('rules.faceImg'), trigger: "blur" }
        ],
        commodityImg: [
          { required: true, message: this.$t('rules.commodityImg'), trigger: "blur" }
        ],
        isCoupon: [
          { required: true, message: this.$t('rules.isCoupon'), trigger: "change" }
        ],
        periodStart: [
          { required: true, message: this.$t('rules.periodStart'), trigger: "blur" }
        ],
        periodEnd: [
          { required: true, message: this.$t('rules.periodEnd'), trigger: "blur" }
        ],
        periodWeek: [
          { required: true, message: this.$t('rules.periodWeek'), trigger: "change" }
        ],
        targetPeopleNum: [
          { required: true, message: this.$t('rules.targetPeopleNum'), trigger: "blur" }
        ],
        advancePeriod: [
          { required: true, message: this.$t('rules.advancePeriod'), trigger: "change" }
        ],
        attention: [
          { required: true, message: this.$t('rules.attention'), trigger: "blur" }
        ],
        specification: [
          { required: true, message: this.$t('rules.specification'), trigger: "blur" }
        ],
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询商品信息管理列表 */
    getList() {
      this.loading = true;
      listCommodity(this.queryParams).then(response => {
        this.commodityList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
	  listCommodityType().then(response => {
        this.commodityTypeList = response.rows;
        // this.total = response.total;
        // this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        typeId: null,
        commodityName: null,
        departurePlace: null,
        adultPrice: null,
        childPrice: null,
        stock: null,
        childPriceExplain: null,
        faceImg: null,
        commodityImg: null,
        isCoupon: "0",
        periodStart: null,
        periodEnd: null,
        periodWeek: [],
        targetPeopleNum: null,
        advancePeriod: null,
        attention: null,
        specification: null,
        saleNum: null,
        isRecommend: null,
        isPreferred: null,
        status: "0",
        deptId: null,
        delFlag: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null,
		advancePeriod : '5',
	    isCoupon : '0'
      };
      this.tCommodityJourneyInformationList = [];
	  this.tCommodityCouponList = [{
			couponName : "",
      		discountPrice : "",
      		beginTime : "",
	  		endTime : "",
		}]
      this.resetForm("form");
    },
	openJiangLi(){
		this.open2 = true
		customerIntegralSetList().then(res=>{
			if(res.code==200){
				if(res.rows.length>0){
					this.customerDistributionSetList = res.rows
				}
			}
		})
	},
	jiangLiUpdate(){
		let data = this.customerDistributionSetList[0]
		customerIntegralSet(data).then(res=>{
			if(res.code==200){
				this.$modal.msgSuccess(this.$t('message.success1'));
				setTimeout(() => {
					this.open2 = false
				}, 800);
			}
		})
	},
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
    //   this.resetForm("queryForm");
	  this.queryParams = {
		pageNum: 1,
        pageSize: 10,
		typeId: null,
		isRecommend: null,
        isPreferred: null,
		'params[beginDate]':null,
		'params[endDate]':null,
	  }
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
	  this.isDetail = true
      this.open = true;
    //   this.title = "添加商品";
	  this.title = this.$t('dialog.CommodityTitel1');
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
	  this.isDetail = true
      this.reset();
      const id = row.id || this.ids
      getCommodity(id).then(response => {
        this.form = response.data;
		if(this.form.periodWeek.indexOf(',')>0){
			this.form.periodWeek = this.form.periodWeek.split(",");
		}else{
			this.form.periodWeek = [this.form.periodWeek]
		}
        this.tCommodityJourneyInformationList = response.data.commodityJourneyInformationList;
		this.tCommodityCouponList = response.data.commodityCouponList;
        this.open = true;
        this.title = this.$t('dialog.CommodityTitel2');
      });
    },
	handleDetail(row){
	  this.isDetail = false
	  this.reset();
      const id = row.id || this.ids
      getCommodity(id).then(response => {
        this.form = response.data;
		if(this.form.periodWeek.indexOf(',')>0){
			this.form.periodWeek = this.form.periodWeek.split(",");
		}else{
			this.form.periodWeek = [this.form.periodWeek]
		}
        this.tCommodityJourneyInformationList = response.data.commodityJourneyInformationList;
		this.tCommodityCouponList = response.data.commodityCouponList;
        this.open = true;
        this.title = this.$t('dialog.CommodityTitel3');
      });
	},
	statusUpdate(row,val){
		let data = {
			id:row.id,
		}
		if(val ==1){
			if(row.isRecommend=='0'){
				data.isRecommend = '1'
			}else{
				data.isRecommend = '0'
			}
		}
		if(val ==2){
			if(row.isPreferred=='0'){
				data.isPreferred = '1'
			}else{
				data.isPreferred = '0'
			}
		}
		if(val ==3){
			data.status = row.status
		}
		updateCommoditySetStatus(data).then(res=>{
			if(res.code==200){
				this.$modal.msgSuccess(this.$t('message.success5'));
				this.getList()
			}
		})
	},
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.form.periodWeek = this.form.periodWeek.join(",");
		  console.log(this.form.periodWeek)
          this.form.commodityJourneyInformationList = this.tCommodityJourneyInformationList ;
		  this.form.commodityCouponList = this.tCommodityCouponList;
          if (this.form.id != null) {
            updateCommodity(this.form).then(response => {
              this.$modal.msgSuccess(this.$t('message.success1'));
              this.open = false;
              this.getList();
            });
          } else {
            addCommodity(this.form).then(response => {
              this.$modal.msgSuccess(this.$t('message.success2'));
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
    //   this.$modal.confirm('是否确认删除商品信息管理编号为"' + ids + '"的数据项？').then(function() {
	  this.$modal.confirm(this.$t('message.isDelete1')).then(function() {
        return delCommodity(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess(this.$t('message.success3'));
      }).catch(() => {});
    },
	/** 商品旅程信息序号 */
    rowTCommodityJourneyInformationIndex({ row, rowIndex }) {
      row.index = rowIndex + 1;
    },
    /** 商品旅程信息添加按钮操作 */
    handleAddTCommodityJourneyInformation() {
      let obj = {};
      obj.journeyTime = "";
      obj.detail = "";
      obj.remark = "";
      this.tCommodityJourneyInformationList.push(obj);
    },
    /** 商品旅程信息删除按钮操作 */
    handleDeleteTCommodityJourneyInformation() {
      if (this.checkedTCommodityJourneyInformation.length == 0) {
        this.$modal.msgError("请先选择要删除的商品旅程信息数据");
      } else {
        const tCommodityJourneyInformationList = this.tCommodityJourneyInformationList;
        const checkedTCommodityJourneyInformation = this.checkedTCommodityJourneyInformation;
        this.tCommodityJourneyInformationList = tCommodityJourneyInformationList.filter(function(item) {
          return checkedTCommodityJourneyInformation.indexOf(item.index) == -1
        });
      }
    },
	/** 复选框选中数据 */
    handleTCommodityJourneyInformationSelectionChange(selection) {
      this.checkedTCommodityJourneyInformation = selection.map(item => item.index)
    },
	/** 商品优惠券信息序号 */
    rowTCommodityCouponIndex({ row, rowIndex }) {
      row.index = rowIndex + 1;
    },
    /** 商品优惠券信息添加按钮操作 */
    handleAddTCommodityCoupon() {
      let obj = {};
      obj.couponName = "";
      obj.discountPrice = "";
      obj.beginTime = "";
	  obj.endTime = "";
      this.tCommodityCouponList.push(obj);
    },
    /** 商品优惠券信息删除按钮操作 */
    handleDeleteTCommodityCoupon() {
      if (this.checkedTCommodityCoupon.length == 0) {
        this.$modal.msgError("请先选择要删除的商品旅程信息数据");
      } else {
        const tCommodityCouponList = this.tCommodityCouponList;
        const checkedTCommodityCoupon = this.checkedTCommodityCoupon;
        this.tCommodityCouponList = tCommodityCouponList.filter(function(item) {
          return checkedTCommodityCoupon.indexOf(item.index) == -1
        });
      }
    },
    /** 复选框选中数据 */
    handleTCommodityCouponSelectionChange(selection) {
      this.checkedTCommodityCoupon = selection.map(item => item.index)
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('commodity/commodity/export', {
        ...this.queryParams
      }, `commodity_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>
<style lang="scss" >
#commodity{
	.el-form-item--medium  .el-form-item__label{
		text-align: left;
	}
}

</style>
