<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="90px">
      <el-form-item label="所属店铺" prop="storeId" >
       <el-select v-model="queryParams.storeId" placeholder="所属店铺" clearable size="small" filterable>
               <el-option
                 v-for="dict in storeOPtions"
                 :key="dict.dictValue"
                 :label="dict.dictLabel"
                 :value="dict.dictValue"
               />
             </el-select>
      </el-form-item>
      <el-form-item label="商品名称" prop="productName">
        <el-input
          v-model="queryParams.productName"
          placeholder="请输入商品名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="商品编号" prop="barCode">
        <el-input
          v-model="queryParams.barCode"
          placeholder="请输入商品编号"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="分类" prop="cateId">
        <treeselect  v-model="queryParams.cateId"  style="width:205.4px" :options="categoryOptions" :normalizer="normalizer" placeholder="请选择分类" />
      </el-form-item>
    <el-form-item label="商品类型" prop="productType">
     <el-select v-model="queryParams.productType" placeholder="状态" clearable size="small">
             <el-option
               v-for="dict in productTypeOptions"
               :key="dict.dictValue"
               :label="dict.dictLabel"
               :value="dict.dictValue"
             />
           </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</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="['his:storeProduct:add']"
        >新增</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="['his:storeProduct: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="['his:storeProduct:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="info"
          plain
          icon="el-icon-upload2"
          size="mini"
          @click="handleImport"

        >导入</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          :loading="exportLoading"
          @click="handleExport"
          v-hasPermi="['his:storeProduct:export']"
        >导出</el-button>
      </el-col>
     <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          @click="handleUpdatePrice"
          v-hasPermi="['his:storeProduct:editPrice']"
        >批量修改商品价格</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-tabs type="card" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="出售中" name="1"></el-tab-pane>
      <el-tab-pane label="待上架" name="0"></el-tab-pane>
    </el-tabs>
    <el-table height="600" v-loading="loading" border :data="productList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />

      <el-table-column label="商品图片" align="center" prop="imgUrl" width="120">
         <template slot-scope="scope">
           <el-popover
             placement="right"
             title=""
             trigger="hover"
           >
             <img slot="reference" :src="scope.row.imgUrl" width="100">
             <img :src="scope.row.imgUrl" style="max-width: 150px;">
           </el-popover>
         </template>
      </el-table-column>
      <el-table-column label="商品名称" align="center" prop="productName" show-overflow-tooltip  width="150px"/>
     <el-table-column label="店铺" align="center" prop="storeName" width="150px"/>
      <el-table-column label="分类" align="center" prop="cateName" />
      <el-table-column label="商品价格" align="center" prop="price" />
      <el-table-column label="市场价" align="center" prop="otPrice" />
      <el-table-column label="排序" align="center" prop="sort" />
      <el-table-column label="销量" align="center" prop="sales" />
      <el-table-column label="库存" align="center" prop="stock" />
      <el-table-column label="状态" align="center" prop="isShow" >
        <template slot-scope="scope">
          <dict-tag :options="specShowOptions" :value="scope.row.isShow"/>
        </template>
      </el-table-column>
      <el-table-column label="是否热卖" align="center" prop="isHot" >
            <template slot-scope="scope">
              <dict-tag :options="orOptions" :value="scope.row.isHot"/>
            </template>
      </el-table-column>
      <el-table-column label="是否优惠" align="center" prop="isBenefit" >
        <template slot-scope="scope">
          <dict-tag :options="orOptions" :value="scope.row.isBenefit"/>
        </template>
      </el-table-column>
      <el-table-column label="是否精品" align="center" prop="isBest" >
        <template slot-scope="scope">
          <dict-tag :options="orOptions" :value="scope.row.isBest"/>
        </template>
      </el-table-column>
      <el-table-column label="是否新品" align="center" prop="isNew" >
        <template slot-scope="scope">
          <dict-tag :options="orOptions" :value="scope.row.isNew"/>
        </template>
      </el-table-column>
      <el-table-column label="是否包邮" align="center" prop="isPostage" >
        <template slot-scope="scope">
          <dict-tag :options="orOptions" :value="scope.row.isPostage"/>
        </template>
      </el-table-column>
      <el-table-column label="获得积分" align="center" prop="giveIntegral" />
      <el-table-column label="医生佣金" align="center" prop="doctorBrokerage" />
      <el-table-column label="成本价" align="center" prop="costPrice" />
      <el-table-column label="浏览量" align="center" prop="views" />
      <el-table-column label="商品类型" align="center" prop="productType" >
        <template slot-scope="scope">
          <dict-tag :options="productTypeOptions" :value="scope.row.productType"/>
        </template>
      </el-table-column>
      <el-table-column label="国药准字/备案号" align="center" prop="prescribeCode" width="150px"/>
      <el-table-column label="规格" align="center" prop="prescribeSpec" width="120px"/>
      <el-table-column label="生产厂家" align="center" prop="prescribeFactory" width="120px"/>
      <el-table-column label="处方名/产品名" align="center" prop="prescribeName" width="150px"/>
      <el-table-column label="是否在商品展示" align="center" prop="isDisplay" >
        <template slot-scope="scope">
          <dict-tag :options="orOptions" :value="scope.row.isDisplay"/>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="150px" fixed="right">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['his:storeProduct:edit']"
          >修改</el-button>
           <el-button
                      size="mini"
                      type="text"
                      @click="handledetails(scope.row)"
                    >详情
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['his:storeProduct:remove']"
          >删除</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="900px" append-to-body>
         <el-form ref="form" :model="form" :rules="rules" label-width="100px">
           <el-row >
            <el-col :span="12">
              <el-form-item label="商品名称" prop="productName">
                <el-input v-model="form.productName" placeholder="请输入商品名称" />
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="关键字" prop="keyword">
                <el-input v-model="form.keyword" placeholder="请输入关键字" />
              </el-form-item>
            </el-col>

          </el-row>
          <el-row >
            <el-col :span="12">
              <el-form-item label="分类" prop="cateId">
                <treeselect  v-model="form.cateId"  style="width:205.4px" :options="categoryOptions" :normalizer="normalizer" placeholder="请选择分类" />
              </el-form-item>
            </el-col>
           <el-col :span="12">
             <el-form-item label="所属店铺" prop="storeId">
               <el-select v-model="form.storeId" placeholder="状态" clearable size="small">
                       <el-option
                         v-for="dict in storeOPtions"
                         :key="dict.dictValue"
                         :label="dict.dictLabel"
                         :value="dict.dictValue"
                       />
                     </el-select>
             </el-form-item>
           </el-col>
         </el-row>
         <el-row>
            <el-col :span="12">
              <el-form-item label="商品类型" prop="productType">
                <el-select v-model="form.productType" placeholder="状态" clearable size="small">
                  <el-option
                         v-for="dict in productTypeOptions"
                         :key="dict.dictValue"
                         :label="dict.dictLabel"
                         :value="dict.dictValue"
                       />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="单位名" prop="unitName">
                <el-input v-model="form.unitName" placeholder="请输入单位名" />
              </el-form-item>
            </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
             <el-form-item label="状态" prop="isShow">
                       <el-radio-group v-model="form.isShow">
                                <el-radio :label="item.dictValue" v-for="item in specShowOptions" >{{item.dictLabel}}</el-radio>
                             </el-radio-group>
               </el-form-item>
              </el-col>
              <el-col :span="12">
                     <el-form-item label="是否处方" prop="isPrescribe">
                               <el-radio-group v-model="form.isPrescribe">
                                        <el-radio :label="item.dictValue" v-for="item in orOptions" >{{item.dictLabel}}</el-radio>
                                     </el-radio-group>
                       </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                    <el-form-item :label="form.productType==1?'备案号':'国药准字'" prop="prescribeCode" v-if="form.isPrescribe==1">
                         <el-input v-model="form.prescribeCode" :placeholder="form.productType==1?'请输入备案号':'请输入国药准字'" />
                    </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="form.productType==1?'产品名':'处方名'" prop="prescribeName" v-if="form.isPrescribe==1">
                  <el-input v-model="form.prescribeName" :placeholder="form.productType==1?'请输入产品名':'请输入处方名'" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
              <el-form-item label="生产厂家" prop="prescribeFactory" v-if="form.isPrescribe==1">
                <el-input v-model="form.prescribeFactory" placeholder="请输入生产厂家" />
              </el-form-item>
              </el-col>
              <el-col :span="12">
                     <el-form-item label="规格" prop="prescribeSpec" >
                             <el-input v-model="form.prescribeSpec" placeholder="请输入规格" />
                     </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="品牌">
                  <el-input v-model="form.brand" placeholder="请输入品牌" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="是否药品" prop="isDrug">
                      <el-radio-group v-model="form.isDrug">
                           <el-radio :label="item.dictValue" v-for="item in orOptions" >{{item.dictLabel}}</el-radio>
                      </el-radio-group>
             </el-form-item>
            <el-row>
           <el-col :span="24">
             <el-form-item label="商品介绍" prop="productIntroduce" >
                <el-input v-model="form.productIntroduce" type="textarea" placeholder="请输入商品介绍" />
              </el-form-item>
           </el-col>
           </el-row>
           <el-form-item label="商品图片" prop="imgUrl">
            <Material v-model="imageArr" type="image" :num="1" :width="150" :height="150" />
           </el-form-item>
           <el-form-item label="轮播图" prop="images">
             <Material v-model="photoArr" type="image" :num="10" :width="150" :height="150" />
           </el-form-item>
            <el-form-item label="商品视频" prop="video">
          <div>
            <el-upload
              ref="uploadVideo"
              class="upload-demo"
              :action="uploadUrl"
              :on-success="handleSuccess"
              :before-upload="beforeUpload"
              :limit="1"
              accept="video/*"
            >
              <el-button size="small" type="primary">点击上传视频</el-button>
            </el-upload>
            <video v-if="form.videoUrl" :src="form.videoUrl" controls style="max-width: 300px; max-height: 300px; margin-top: 10px"></video>
          </div>
        </el-form-item>
          <el-form-item label="规格" prop="specType">
             <el-radio-group v-model="form.specType" >
               <el-radio :label="0" class="radio">单规格</el-radio>
               <el-radio :label="1">多规格</el-radio>
             </el-radio-group>
           </el-form-item>
<el-row>
           <!-- 多规格添加-->
           <el-col :span="24" v-if="form.specType === 1" class="noForm">
            <el-col :span="24">
               <el-form-item label="选择规格：" prop="">
                 <div  class="acea-row row-middle">
                   <el-select v-model="form.selectRule" style="width: 23%;">
                     <el-option v-for="(item, index) in ruleList" :value="item.ruleName" :key="index">{{ item.ruleName }}</el-option>
                   </el-select>
                   <el-button style="margin-left:10px;" type="primary" class="mr20" @click="confirm">确认</el-button>
                 </div>
               </el-form-item>
             </el-col>
             <el-col :span="24">
               <el-form-item v-if="attrs!=null&&attrs.length!==0">
                 <div  v-for="(item, index) in attrs" :key="index">
                   <div class="acea-row row-middle"><span class="mr5">{{item.value}}</span>
                     <i class="el-icon-circle-close"  @click="handleRemoveRole(index)"></i>
                   </div>
                   <div class="rulesBox">
                     <el-tag type="dot" closable color="primary" v-for="(j, indexn) in item.detail" :key="indexn" :name="j" class="mr20" @close="handleRemove2(item.detail,indexn)">{{j}}</el-tag>
                     <el-input placeholder="请输入属性名称" v-model="item.detail.attrsVal"
                               style="width: 200px">
                       <el-button slot="append" type="primary" @click="createAttr(item.detail.attrsVal,index)">添加</el-button>
                     </el-input>
                   </div>
                 </div>
               </el-form-item>
             </el-col>
              <el-col :span="24" v-if="createBnt">
               <el-form-item>
                 <el-button type="primary" size="small" icon="md-add" @click="addBtn" class="mr15">添加新规格</el-button>
                 <el-button type="success" size="small"  @click="generate">立即生成</el-button>
               </el-form-item>
             </el-col>
             <el-col :span="24" v-if="showIput">
               <el-col  :xl="6" :lg="9" :md="10" :sm="24" :xs="24" >
                 <el-form-item label="规格：">
                   <el-input  placeholder="请输入规格" v-model="formDynamic.attrsName"  />
                 </el-form-item>
               </el-col>
               <el-col  :xl="6" :lg="9" :md="10" :sm="24" :xs="24">
                 <el-form-item label="规格值：">
                   <el-input v-model="formDynamic.attrsVal" placeholder="请输入规格值"  />
                 </el-form-item>
               </el-col>
               <el-col :xl="6" :lg="5" :md="10" :sm="24" :xs="24" >
                   <el-button type="primary"    @click="createAttrName">确定</el-button>
                   <el-button type="danger" @click="closeAttrName" >取消</el-button>
               </el-col>
             </el-col>
             <!-- 多规格设置-->
             <el-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24" v-if="manyFormValidate!=null&&manyFormValidate.length">
               <!-- 多规格表格-->
               <el-col :span="24">
                 <el-form-item label="商品属性：" class="labeltop">
                   <el-table :data="manyFormValidate" size="small" style="width: 90%;">
                     <el-table-column type="myindex" v-for="(item,index) in form.header" :key="index"  :width="item.minWidth" :label="item.title" :property="item.slot" align="center">
                       <template slot-scope="scope">
                         <div v-if="scope.column.property == 'image'" align="center">
                           <single-img v-model="scope.row[scope.column.property]" type="image" :num="1" :width="60" :height="60" />
                         </div>
                         <div v-else-if="scope.column.property.indexOf('value') != -1" align="center">
                          {{ scope.row[scope.column.property] }}
                         </div>
                         <div v-else-if="scope.column.property == 'action'" align="center" >
                           <a @click="delAttrTable(scope.$index)" align="center">删除</a>
                         </div>
                         <div v-else align="center">
                           <el-input  v-model="scope.row[scope.column.property]" align="center" />
                         </div>
                       </template>
                     </el-table-column>
                   </el-table>
                 </el-form-item>
               </el-col>
             </el-col>
           </el-col>
</el-row>

<!-- 单规格表格-->

<el-row>
          <el-col :xl="23" :lg="24" :md="24" :sm="24" :xs="24" v-if="form.specType === 0">
            <el-form-item >
              <el-table :data="oneFormValidate"  size="small" style="width: 90%;">
                <el-table-column prop="image" label="图片" align="center">
                  <template slot-scope="scope">
                    <single-img v-model="scope.row.image" type="image" :num="1" :width="60" :height="60" />
                  </template>
                </el-table-column>
                <el-table-column prop="price" label="售价" align="center">
                  <template slot-scope="scope">
                    <el-input type="text" v-model="scope.row.price"/>
                  </template>
                </el-table-column>

                <el-table-column prop="cost" label="成本价" align="center">
                  <template slot-scope="scope">
                    <el-input type="text" v-model="scope.row.cost"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="otPrice" label="原价" align="center">
                  <template slot-scope="scope">
                    <el-input type="text" v-model="scope.row.otPrice"/>
                  </template>
                </el-table-column>
                <el-table-column prop="stock" label="库存" align="center">
                  <template slot-scope="scope">
                    <el-input type="text" v-model="scope.row.stock" maxlength="7"/>
                  </template>
                </el-table-column>
                <el-table-column prop="barCode" label="商品编号" width="130px" align="center">
                  <template slot-scope="scope">
                    <el-input type="text" v-model="scope.row.barCode"/>
                  </template>
                </el-table-column>
                <el-table-column prop="weight" label="重量（KG）" align="center">
                  <template slot-scope="scope">
                    <el-input type="text" v-model="scope.row.weight"/>
                  </template>
                </el-table-column>
                <el-table-column prop="volume" label="体积(m³)" align="center">
                  <template slot-scope="scope">
                    <el-input type="text" v-model="scope.row.volume"/>
                  </template>
                </el-table-column>
                <el-table-column prop="giveIntegral" label="获得积分" align="center">
                  <template slot-scope="scope">
                    <el-input type="text" v-model="scope.row.giveIntegral"/>
                  </template>
                </el-table-column>
                <el-table-column prop="doctorBrokerage" label="医生积分" align="center">
                  <template slot-scope="scope">
                    <el-input type="text" v-model="scope.row.doctorBrokerage"/>
                  </template>
                </el-table-column>
                <el-table-column prop="brokerage" label="推广佣金" align="center">
                  <template slot-scope="scope">
                    <el-input type="text" v-model="scope.row.brokerage"/>
                  </template>
                </el-table-column>
              </el-table>
            </el-form-item>
          </el-col>

</el-row>

          <el-form-item label="产品描述" prop="desc">
            <Editor ref="myeditor"   @on-text-change="updateText"/>
           </el-form-item>





<el-row>
  <el-col :span="12">
    <el-form-item label="排序" prop="sort">
      <el-input-number v-model="form.sort"  :min="0"  label="排序"></el-input-number>
    </el-form-item>
  </el-col>
  <el-col :span="12">
    <el-form-item label="浏览量" prop="views">
       <el-input-number v-model="form.views" :min="0"  label="浏览量"></el-input-number>
     </el-form-item>
  </el-col>
</el-row>



<el-row>
  <el-col :span="12">
  <el-form-item label="销量" prop="sales">
             <el-input-number v-model="form.sales" :min="0"   label="销量"></el-input-number>
    </el-form-item>
  </el-col>
  <el-col :span="12">
      <el-form-item label="是否展示" prop="isDisplay">
        <el-radio-group v-model="form.isDisplay">
                 <el-radio :label="item.dictValue" v-for="item in orOptions" >{{item.dictLabel}}</el-radio>
              </el-radio-group>
      </el-form-item>
  </el-col>
</el-row>
<el-row>
    <el-col :span="12">
 <el-form-item label="是否热卖" prop="isHot">
 <el-radio-group v-model="form.isHot">
          <el-radio :label="item.dictValue" v-for="item in orOptions" >{{item.dictLabel}}</el-radio>
       </el-radio-group>
  </el-form-item>
  </el-col>
  <el-col :span="12">
           <el-form-item label="是否优惠" prop="isBenefit">
            <el-radio-group v-model="form.isBenefit">
                     <el-radio :label="item.dictValue" v-for="item in orOptions" >{{item.dictLabel}}</el-radio>
                  </el-radio-group>
           </el-form-item>
  </el-col>
</el-row>
<el-row>
    <el-col :span="12">
    <el-form-item label="是否精品" prop="isBest">
             <el-radio-group v-model="form.isBest">
                      <el-radio :label="item.dictValue" v-for="item in orOptions" >{{item.dictLabel}}</el-radio>
                   </el-radio-group>
           </el-form-item>
  </el-col>
  <el-col :span="12">
          <el-form-item label="是否新品" prop="isNew">
            <el-radio-group v-model="form.isNew">
                     <el-radio :label="item.dictValue" v-for="item in orOptions" >{{item.dictLabel}}</el-radio>
                  </el-radio-group>
          </el-form-item>
  </el-col>
</el-row>

           <el-form-item label="产品二维码" prop="codeUrl">
             <el-input v-model="form.codeUrl" placeholder="请输入产品二维码地址(用户小程序海报)" />
           </el-form-item>
  <!--
           <el-form-item label="运费模板" prop="tempId">
             <el-input v-model="form.tempId" placeholder="请输入运费模板" />
           </el-form-item> -->
         </el-form>
         <div slot="footer" class="dialog-footer">
           <el-button type="primary" @click="submitForm">确 定</el-button>
           <el-button @click="cancel">取 消</el-button>
         </div>
       </el-dialog>

       <el-drawer
              :with-header="false"
               size="75%"
                :title="show.title" :visible.sync="show.open">
            <storeProductDetails  ref="productDetails" />
          </el-drawer>


          <el-dialog title="批量修改商品价格" :visible.sync="priceOpen" width="600px" append-to-body>
            <el-form       label-width="120px">
              <el-form-item label="价格上浮比例" prop="price">
                 <el-input-number v-model="price" controls-position="right" :min="-99" ></el-input-number>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="submitPrice">确 定</el-button>
              <el-button @click="cancelPrice">取 消</el-button>
            </div>
          </el-dialog>

   <!-- 用户导入对话框 -->
    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
      <el-upload
        ref="upload"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="upload.headers"
        :action="upload.url + '?updateSupport=' + upload.updateSupport"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip text-center" slot="tip">
          <div class="el-upload__tip" slot="tip">
       <!--     <el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的数据 -->
          </div>
          <span>仅允许导入xls、xlsx格式文件。</span>
          <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;" @click="importTemplate">下载模板</el-link>
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getAllStoreProductRule,genFormatAttr ,editPrice, addOrEdit,listStore, listProduct, getProduct, delProduct, addProduct, updateProduct, exportProduct,importTemplate } from "@/api/his/storeProduct";
import { getAllStoreProductCategory } from "@/api/his/storeProductCategory";
import { getToken } from "@/utils/auth";
import storeProductDetails from '../../components/his/storeProductDetails.vue';
import Editor from '@/components/Editor/wang';
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import Material from '@/components/Material'
import singleImg from '@/components/Material/single'
export default {
  name: "Product",
  components: {Treeselect, Material, singleImg, Editor, storeProductDetails},
  watch: {
    imageArr: function(val) {
      this.form.imgUrl = val.join(',')
    },
    photoArr: function(val) {
      this.form.images = val.join(',')
    }
  },
  data() {
    return {
      priceOpen:false,
      price:null,
      show:{
              title:"药品详情",
              open:false,
            },
      activeName:"1",
      ruleList:[],
      attrs:[],
      // 多规格表格data
      manyFormValidate: [],
      // 单规格表格data
      oneFormValidate: [
        {
          image: '',
          price: 0,
          cost: 0,
          agentPrice: 0,
          otPrice: 0,
          stock: 0,
          barCode: '',
          weight: 0,
          volume: 0,
          integral: 0
        }
      ],
      upload: {
        // 是否显示弹出层
        open: false,
        // 弹出层标题
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/his/storeProduct/importData"
      },
      ruleList:[],
      // 遮罩层
      photoArr:[],
      imageArr:[],
      // 规格数据
      formDynamic: {
        attrsName: '',
        attrsVal: ''
      },
      uploadUrl:process.env.VUE_APP_BASE_API+"/common/uploadOSS",
      baseUrl: process.env.VUE_APP_BASE_API,
      storeOPtions:[],
      categoryOptions:[],
      orOptions: [],
      productTypeOptions: [],
      specShowOptions: [],
      specTypeOptions: [],
      statusOptions: [],
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 选中数组
      ids: [],
      createBnt: false,
      showIput: false,
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 商品表格数据
      productList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        storeId: null,
        imgUrl: null,
        images: null,
        productName: null,
        productIntroduce: null,
        keyword: null,
        barCode: null,
        cateId: null,
        price: null,
        otPrice: null,
        unitName: null,
        sort: null,
        sales: null,
        stock: null,
        isShow: null,
        isHot: null,
        isBenefit: null,
        isBest: null,
        isNew: null,
        desc: null,
        isPostage: null,
        isDel: null,
        giveIntegral: null,
        costPrice: null,
        views: null,
        codeUrl: null,
        specType: null,
        productType: null,
        prescribeCode: null,
        prescribeSpec: null,
        prescribeFactory: null,
        prescribeName: null,
        isDisplay: null,
        tempId: null
      },

      // 表单参数
      form: {},
      // 表单校验
      rules: {

      isShow: [
         { required: true, message: "状态不能为空", trigger: "blur" }
       ],
      isPrescribe: [
         { required: true, message: "是否处方不能为空", trigger: "blur" }
       ],
       productName: [
         { required: true, message: "商品名称不能为空", trigger: "blur" }
       ],
       productInfo: [
         { required: true, message: "商品简介不能为空", trigger: "blur" }
       ],
       unitName: [
         { required: true, message: "单位名不能为空", trigger: "blur" }
       ],
       keyword: [
         { required: true, message: "关键字不能为空", trigger: "blur" }
       ],
       cateId: [
         { required: true, message: "分类不能为空", trigger: "blur" }
       ],
       price: [
         { required: true, message: "商品价格不能为空", trigger: "blur" }
       ],
       prescribeCode: [
         { required: true, message: "国药准字不能为空", trigger: "blur" }
       ],
       prescribeSpec: [
         { required: true, message: "规格不能为空", trigger: "blur" }
       ],
       prescribeFactory: [
         { required: true, message: "生产厂家不能为空", trigger: "blur" }
       ],
       prescribeName: [
         { required: true, message: "处方药不能为空", trigger: "blur" }
       ],
        specType: [
         { required: true, message: "规格不能为空", trigger: "blur" }
       ],
       //  storeId: [
       //   { required: true, message: "所属店铺不能为空", trigger: "blur" }
       // ],
        productType: [
         { required: true, message: "商品类型不能为空", trigger: "blur" }
       ],

       isHot: [
         { required: true, message: "是否热卖不能为空", trigger: "blur" }
       ],
       isBenefit: [
         { required: true, message: "是否优惠不能为空", trigger: "blur" }
       ],
       isBest: [
         { required: true, message: "不能为空", trigger: "blur" }
       ],
       isNew: [
         { required: true, message: "不能为空", trigger: "blur" }
       ],

      isDisplay: [
         { required: true, message: "不能为空", trigger: "blur" }
       ],
      isDrug: [
         { required: true, message: "不能为空", trigger: "blur" }
       ],
      },
      myloading:null
    };
  },
  created() {
    this.getstoreList();
    this.getTreeselect();
    this.getList();
    this.getDicts("sys_spec_show").then(response => {
          this.specShowOptions = response.data;
        });
    this.getDicts("sys_spec_type").then(response => {
         this.specTypeOptions = response.data;
       });
    this.getDicts("sys_product_type").then(response => {
         this.productTypeOptions = response.data;
       });
    this.getDicts("sys_company_status").then(response => {
         this.statusOptions = response.data;
       });
    this.getDicts("sys_company_or").then(response => {
         this.orOptions = response.data;
       });
    getAllStoreProductRule().then(response => {
      this.ruleList =response.data;
    });
  },
  methods: {
    //上传成功
     handleSuccess(response, file) {
      // 上传成功后的回调函数
      this.myloading.close();
      this.form.videoUrl = response.url;
      this.$refs.uploadVideo.clearFiles();
    },
    beforeUpload(file) {
      // 上传前的钩子函数，可以在这里对文件进行处理
      // 返回 false 则取消上传

      // 例如限制文件大小
      const isLt2M = file.size / 1024 / 1024 < 200;
      if (!isLt2M) {
        this.$message.error('上传视频文件大小不能超过 200MB!');
        return false;
      }
      this.myloading = this.$loading({
        lock: true,
        text: '上传中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });

    },
    handleUpdatePrice(){
      this.priceOpen=true;
    },
 /** 导入按钮操作 */
    handleImport() {
      this.upload.title = "商品导入";
      this.upload.open = true;
    },
    /** 下载模板操作 */
    importTemplate() {
      importTemplate().then(response => {
        this.download(response.msg);
      });
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert(response.msg, "导入结果", { dangerouslyUseHTMLString: true });
      this.getList();
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
    },
    handledetails(row){
            this.show.open=true;
            setTimeout(() => {
                 this.$refs.productDetails.getDetails(row.productId,row.cateName,row.storeName);
            }, 1);
        },

    updateText(text){
      this.form.desc=text
    },
    // 删除表格中的属性
    delAttrTable (index) {
      this.manyFormValidate.splice(index, 1);
    },
    addBtn () {
      this.clearAttr();
      this.createBnt = false;
      this.showIput = true;
    },
    //生成SKU


    // 取消添加新规格
    closeAttrName () {
      this.showIput = false;
      this.createBnt = true;
    },
    clearAttr () {
      this.formDynamic.attrsName = '';
      this.formDynamic.attrsVal = '';
    },
    // 删除规格
    handleRemoveRole (index) {
      this.attrs.splice(index, 1);
      this.manyFormValidate.splice(index, 1);
    },
    // 删除属性
    handleRemove2 (item, index) {
      item.splice(index, 1);
    },
    // 添加规则名称
    createAttrName () {
      if (this.formDynamic.attrsName && this.formDynamic.attrsVal) {
        let data = {
          value: this.formDynamic.attrsName,
          detail: [
            this.formDynamic.attrsVal
          ]
        };
        this.attrs.push(data);
        var hash = {};
        this.attrs = this.attrs.reduce(function (item, next) {
          hash[next.value] ? '' : hash[next.value] = true && item.push(next);
          return item
        }, [])
        this.clearAttr();
        this.showIput = false;
        this.createBnt = true;
      } else {
        this.$message.warning('请添加完整的规格！');
      }
    },
    // 添加属性
    createAttr (num, idx) {
      if (num) {
        this.attrs[idx].detail.push(num);
        var hash = {};
        this.attrs[idx].detail = this.attrs[idx].detail.reduce(function (item, next) {
          hash[next] ? '' : hash[next] = true && item.push(next);
          return item
        }, [])
      } else {
        this.$message.warning('请添加属性！');
      }
    },
    confirm () {
      let that = this;
      that.createBnt = true;
      if (that.form.selectRule==null||that.form.selectRule.trim().length <= 0) {
        return this.$message({
          message:'请选择属性',
          type: 'error'
        });
      }
      that.ruleList.forEach(function (item, index) {
        if (item.ruleName === that.form.selectRule) {
          that.attrs =JSON.parse( item.ruleValue);

        }
      });

    },

    /** 转换商品分类数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.cateId,
        label: node.cateName,
        children: node.children
      };
    },
    getTreeselect() {
      getAllStoreProductCategory().then(response => {
        this.categoryOptions = [];
        this.categoryOptions=response.data;
      });
    },

    /** 查询商品列表 */
    getList() {
      this.loading = true;
      listProduct(this.queryParams).then(response => {
        this.productList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    getstoreList() {
      listStore().then(response => {
        this.storeOPtions = response.rows;
      });
    },
    handleAvatarSuccess(res, file) {
        if(res.code==200){
          this.form.imgUrl=res.url;
          self.$forceUpdate()
        }
        else{
          this.msgError(res.msg);
        }
    },
    beforeAvatarUpload(file) {
      const isLt1M = file.size / 1024 / 1024 < 1;
      if (!isLt1M) {
        this.$message.error('上传图片大小不能超过 1MB!');
      }
      return   isLt1M;
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    cancelPrice() {
      this.priceOpen = false;
      this.price=null;
    },
    // 表单重置
    reset() {
      this.form = {
        productId: null,
        storeId: null,
        doctorBrokerage:null,
        imgUrl: null,
        images: null,
        videoUrl: null,
        productName: null,
        productIntroduce: null,
        keyword: null,
        barCode: null,
        cateId: null,
        price: null,
        otPrice: null,
        unitName: null,
        sort: null,
        sales: null,
        stock: null,
        isShow: null,
        isHot: null,
        isBenefit: null,
        isBest: null,
        isNew: null,
        desc: null,
        createTime: null,
        updateTime: null,
        isPostage: null,
        isDel: null,
        giveIntegral: null,
        costPrice: null,
        views: null,
        codeUrl: null,
        specType: null,
        productType: null,
        prescribeCode: null,
        prescribeSpec: null,
        prescribeFactory: null,
        prescribeName: null,
        isDisplay: null,
        tempId: null,
        isDrug: null,
      };
      this.resetForm("form");
      this.oneFormValidate = [
        {
          image: '',
          price: 0,
          agentPrice: 0,
          cost: 0,
          otPrice: 0,
          stock: 0,
          barCode: '',
          weight: 0,
          volume: 0,
          giveIntegral: 0,
          // brokerage:0,
          // brokerageTwo:0,
          // brokerageThree:0,
          doctorBrokerage:0,
        }
      ]
      this.photoArr=[];
      this.imageArr=[];

    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams.isShow=this.activeName

      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.productId)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加商品";
      //新增
      setTimeout(() => {
                this.$refs.myeditor.setText("");
              }, 100);
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      var that=this;
      const productId = row.productId || this.ids
      getProduct(productId).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改商品";
        this.form.isShow = String(this.form.isShow)
        this.form.isHot = String(this.form.isHot)
        this.form.isBenefit = String(this.form.isBenefit)
        this.form.isBest = String(this.form.isBest)
        this.form.isNew = String(this.form.isNew)
        this.form.isDisplay = String(this.form.isDisplay)
        this.form.productType = String(this.form.productType)
        this.form.isPrescribe = String(this.form.isPrescribe)
        this.form.isDrug = String(this.form.isDrug)
        if(this.form.imgUrl!=null){
          this.imageArr=this.form.imgUrl.split(",");
        }
      if(this.form.images!=null){
          this.photoArr=this.form.images.split(",");
        }
        setTimeout(() => {
          if(this.form.desc==null){
            this.$refs.myeditor.setText("");
          }
          else{
            this.$refs.myeditor.setText(this.form.desc);
          }
        }, 1);


        //组装attrs数据
        if(response.attrs!=null){
          this.attrs=[];
          response.attrs.forEach(function (item, index) {
             var data={value:item.attrName,detail:item.attrValues.split(',')}
             that.attrs.push(data);
          });
        }
  setTimeout(() => {
          that.generate();
        }, 200);
      });
        if(this.form.specType === 0){
                that.manyFormValidate = [];
              }else {
                that.createBnt = true;
                that.oneFormValidate = [
                  {
                    image: '',
                    price: 0,
                    agentPrice: 0,
                    cost: 0,
                    otPrice: 0,
                    stock: 0,
                    barCode: '',
                    weight: 0,
                    volume: 0,
                    giveIntegral: 0,
                    // brokerage:0,
                    // brokerageTwo:0,
                    // brokerageThree:0,
                    doctorBrokerage:0,
                  }
                ]
              }


    },



   handleClick(tab, event) {
      this.queryParams.isShow=tab.name;
      this.getList();
    },
    submitPrice(){
      var priceFrom=this.queryParams;
        editPrice(priceFrom,this.price).then(response => {
          if (response.code === 200) {
            this.msgSuccess("修改成功");
            this.priceOpen = false;
            this.getList();
          }
        });
    },

  /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if(this.form.specType ===0 ){
            this.form.items = [];
            this.form.values = this.oneFormValidate;
          }else{
            this.form.items = this.attrs;
            this.form.values = this.manyFormValidate;
          }

           for (var i = 0; i < this.form.values.length; i++) {

             if(this.form.values[i].barCode==null || this.form.values[i].barCode==''){

                  return this.$message('产品编码不能为空');
             }
           }

          if(this.form.specType === 1 && this.manyFormValidate.length===0){
            return this.$message.warning('请点击生成规格！');
          }

          addOrEdit(this.form).then(response => {
            if (response.code === 200) {
              this.msgSuccess("操作成功");
              this.open = false;
              this.getList();
            }
          });
        }
      });
    },

    //生成SKU
    generate () {
      genFormatAttr(this.form.productId==null?-1:this.form.productId, { attrs: this.attrs }).then(res => {
        if(this.form.specType === 0){
            this.oneFormValidate = res.value;
            this.form.header = res.header;
            let header = res.header;
            header.pop();
            this.oneFormValidate.map((item) => {
              if(this.imageArr.length>0){
                item.image = this.imageArr[0]
              }
            });
        }else if(this.form.specType === 1) {
            this.manyFormValidate = res.value;
            let headerdel = {
              title: '操作',
              slot: 'action',
              fixed: 'right',
              width: 220
            };
            res.header.push(headerdel);
            this.form.header = res.header;
            let header = res.header;
            header.pop();
        }

      }).catch(res => {
      })
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const productIds = row.productId || this.ids;
      this.$confirm('是否确认删除商品编号为"' + productIds + '"的数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return delProduct(productIds);
        }).then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm('是否确认导出所有商品数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          this.exportLoading = true;
          return exportProduct(queryParams);
        }).then(response => {
          this.download(response.msg);
          this.exportLoading = false;
        }).catch(() => {});
    }
  }
};
</script>
<style>
   .avatar-uploader .el-upload {
       border: 1px dashed #d9d9d9;
       border-radius: 6px;
       cursor: pointer;
       position: relative;
       overflow: hidden;
     }
     .avatar-uploader .el-upload:hover {
       border-color: #409EFF;
     }

     .avatar-uploader-icon {
       font-size: 28px;
       color: #8c939d;
       width: 150px;
       height: 150px;
       line-height: 150px;
       text-align: center;
     }
</style>
