<template>
  <div class="directorGoodsList">
    <div class="head-title">
      司导商品列表
      <el-button @click="Export" style="float:right;margin-top: -5px;margin-left:20px;" size="small" type="primary">商品导出</el-button>
      <el-button @click="CommonJump('directorGoodsEdit',{hpState:hpState,FxState:FxState})" style="float:right;margin-top: -5px;margin-left:20px;" size="small" type="primary">添加商品</el-button>

    </div>
    <div class="content">
      <div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane :dataId="0" label="全部" name="first"></el-tab-pane>
          <el-tab-pane :dataId="1" label="上架中" name="second"></el-tab-pane>
          <el-tab-pane :dataId="2" label="下架中" name="third"></el-tab-pane>
        </el-tabs>
      </div>
      <div>
        <el-button @click="flDig=true" style="margin-right:10px;" size="small">分类筛选</el-button>
        <el-button v-show="checkList.length>0" @click="checkList=[],msg.CategoryIds='',msg.pageIndex=1,getList()" type="danger" style="margin-right:10px;" size="small">清除分类</el-button>
        <span>添加时间：</span>
        <el-date-picker
          v-model="dateList"
          @change="msg.pageIndex=1,getList()"
          size="small"
          type="datetimerange"
          range-separator="至"
          value-format="yyyy-MM-dd HH:mm:ss"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
        <div class="searchInput" style="width:250px;margin-right: 0px;">
          <el-input @keyup.enter.native="msg.pageIndex=1,getList()" style="display:inline-block;width:225px;height:30px"
                    placeholder="请输入名称搜索"
                    v-model="msg.Name"
                    @clear="msg.pageIndex=1,getList()"
                    size="small"
                    clearable>
          </el-input>
          <span @click="msg.pageIndex=1,getList()" class="el-icon-search" style="color:#979dad;font-size:14px;position:relative;top:1px"></span>
        </div>
        <div class="searchInput" style="width:250px">
          <el-input @keyup.enter.native="msg.pageIndex=1,getList()" style="display:inline-block;width:225px;height:30px"
                    placeholder="请输入ID搜索"
                    v-model="msg.Id"
                    @clear="msg.pageIndex=1,getList()"
                    size="small"
                    clearable>
          </el-input>
          <span @click="msg.pageIndex=1,getList()" class="el-icon-search" style="color:#979dad;font-size:14px;position:relative;top:1px"></span>
        </div>
        <span @click="Clearconditions" v-if="msg.Name!='' || msg.CategoryIds!='' || (dateList && dateList.length>0)" class='blue point'>清空筛选条件</span>
      </div>
      <div style="margin-top:15px">

      </div>
      <el-table
        :data="tableData"
        v-loading="loading"
        border
        sortable='custom'
        @sort-change='getSort'
        @selection-change="tableSelect"
        style="width: 100%;margin:20px 0">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          prop="Id"
          width="80"
          label="ID">
        </el-table-column>
        <el-table-column
          sortable
          width="100"
          prop="Sort"
          label="排序">
        </el-table-column>
        <el-table-column
          prop="Remark"
          label="分类">
          <template slot-scope="scope">
            <el-tag size="mini" v-if="scope.row.CategoryList && scope.row.CategoryList.length>0">{{scope.row.CategoryList[0].CategoryName}}</el-tag>
            <el-tooltip  class="item" effect="dark" placement="top">
              <div slot="content">
                <span v-for="(item,index) in scope.row.CategoryList" :key="index">{{item.CategoryName}} </span>
              </div>
              <span v-if="scope.row.CategoryList.length>1 && index==0" v-for="(item,index) in scope.row.CategoryList" :key="index">...</span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          width="400"
          label="商品名称">
          <template slot-scope="scope">
            <div flex="box:first">
              <img style="width:50px;height:50px;margin-right:1px" :src="scope.row.CoverImage" alt="">
              <template>
                <div flex="cross:top" style="display:inline-flex">
                  <div flex="dir:left" >
                    <el-tooltip class="item" effect="dark" :content="scope.row.Name" placement="top">
                      <div class="vue-line-clamp" style="word-break: break-all; -webkit-line-clamp: 2;">
                        <span>{{scope.row.Name}}</span>
                      </div>
                    </el-tooltip>
                  </div>
                </div>
              </template>

            </div>

          </template>
        </el-table-column>
        <el-table-column
          prop="SellingPrice"
          width="100"
          sortable
          label="售价">
        </el-table-column>
        <el-table-column
          width="120"
          label="订单数量"
          prop="GoodsBuyNum"
        >
        </el-table-column>
        <el-table-column
          prop="CreateDate"
          sortable
          width="160"
          label="添加时间">
        </el-table-column>
        <el-table-column
          prop="UpdateDate"
          width="100"
          label="状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.GoodsStatus==1" type="success">销售中</el-tag>
            <el-tag v-if="scope.row.GoodsStatus==2" type="warning">下架中</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          width="200"
          label="操作">
          <template slot-scope="scope">
            <img @click="goGoodsEdit(scope.row.Id)" style="width:32px;height:32px;margin:0 10px" src="../../assets/img/userman/edit.png" alt="">
            <img @click="Delete(scope.row)"  style="width:32px;height:32px;margin:0 10px" src="../../assets/img/userman/del.png" alt="">
          </template>
        </el-table-column>
      </el-table>
      <el-pagination style="text-align:right"
                     background
                     @current-change="handleCurrentChange"
                     :page-size="msg.pageSize"
                     layout="prev, pager, next"
                     :current-page.sync="msg.pageIndex"
                     :total="total">
      </el-pagination>
    </div>
    <!-- 选择分类 -->
    <el-dialog custom-class="app-add-cat" title="选择分类" :visible.sync="flDig" width="1100px">
      <el-row>
        <el-col :span="8" style="padding:0 10px;box-sizing:border-box">
          <h3 style="padding:15px 0">一级分类</h3>
          <div class="app-goods-cat-list active">
            <el-checkbox-group v-model="checkList">
              <div v-for="(item,index) in fenleiData" :key="index" flex="dir:left box:first" class="cat-item">
                <el-checkbox :label="item">
                  <span style="display: none;">{{item.Name}}</span>
                </el-checkbox>
                <div flex="box:last cross:center">
                  <span>{{item.Name}}</span>
                  <i v-if="item.ChildList.length>0" @click="getChild2(item.ChildList)" class="el-icon-arrow-right"></i>
                </div>
              </div>
            </el-checkbox-group>

          </div>
        </el-col>
        <el-col v-show="childList2.length>0" :span="8" style="padding:0 10px;box-sizing:border-box">
          <h3 style="padding:15px 0">二级分类</h3>
          <div class="app-goods-cat-list active">
            <el-checkbox-group v-model="checkList">
              <div v-for="(item,index) in childList2" :key="index" flex="dir:left box:first" class="cat-item">
                <el-checkbox :label="item">
                  <span style="display: none;">{{item.Name}}</span>
                </el-checkbox>
                <div flex="box:last cross:center">
                  <span>{{item.Name}}</span>
                  <i v-if="item.ChildList.length>0" @click="getChild3(item.ChildList)" class="el-icon-arrow-right"></i>
                </div>
              </div>
            </el-checkbox-group>

          </div>
        </el-col>
        <el-col v-show="childList3.length>0" :span="8" style="padding:0 10px;box-sizing:border-box">
          <h3 style="padding:15px 0">三级分类</h3>
          <div class="app-goods-cat-list active">
            <el-checkbox-group v-model="checkList">
              <div v-for="(item,index) in childList3" :key="index" flex="dir:left box:first" class="cat-item">
                <el-checkbox :label="item">
                  <span style="display: none;">{{item.Name}}</span>
                </el-checkbox>
                <div flex="box:last cross:center">
                  <span>{{item.Name}}</span>
                  <i class="el-icon-arrow-right"></i>
                </div>
              </div>
            </el-checkbox-group>

          </div>
        </el-col>
      </el-row>
      <div class="tag-box">
        <el-tag @close="exitCheck(item)" v-for="(item,index) in checkList" :key="index" type="warning" closable style="margin-right:5px">{{item.Name}}</el-tag>
      </div>
      <span slot="footer" class="dialog-footer">
            <el-button size="small" @click="flDig = false">取 消</el-button>
            <el-button @click="chooseFl" size="small" type="primary">确 定</el-button>
        </span>
    </el-dialog>


  </div>
</template>

<script>
  export default {
    name: "directorProductList",
    data(){
      return{
        plDig:false,
        flDig:false,
        val:'',
        dateList:[],
        activeName:'first',
        editState:false,
        msg:{
          pageIndex:1,
          pageSize:15,
          Name:'',
          GoodsStatus:0,
          IsSelectSellOut:0,
          CategoryIds:'',
          Id:'',
          StartTime:'',
          EndTime:'',
          OrderBy:0,
        },
        total:0,
        tableData:[],
        loading:false,
        options:[],
        addMsg:{
          Id:0,
          Sort:'',
          Name:'',
          IsDefault:1,
          Remark:'',
          UpdateType:1,
        },
        rules:{
          CategoryIdNew: [
            { required: true, message: '分类不能为空', trigger: 'change' }
          ],
          Sort: [
            { required: true, message: '请输入排序', trigger: 'blur' }
          ],
        },
        fenleiData:[],
        checkList:[],
        childList2:[],
        childList3:[],
        GoodsIds:[],
        plszMsg:{
          GoodsIds:'',
          Type:7,
          FreightId:0,
          LimitBuyGoodsNum:-1,
          LimitBuyOrderNum:-1,
          IntegralPresent:0,
          IntegralPresentType:2,
          PointsDeduction:0,
          PointsDeductionType:2,
          IsMultipleDeduction:2,
          IsQuickBuy:2,
          IsGoodsNegotiable:2,
          SupplierId:''
        },
        ruleList:[],
        ruleSelect:{},
        keepGoodsIds:'',
        BuyGoodsNumState:true,
        BuyOrderNumState:true,
        hpState:0,
        FxState:0
      }
    },
    created(){
      this.getList();
      this.getTree();
      this.getRule();
      this.getHpState();
      this.getFxState();
      this.getSupplierList()//获取供应商
    },
    methods:{
      //获取是否开启和平返佣
      getHpState(){
        this.apipost("/api/user/GetHpDistributorIsEnabled", {}, res => {
          if(res.data.resultCode==1){
            this.hpState=res.data.data;
          }

        })
      },
      //是否开启粉象返佣
      getFxState(){
        this.apipost("/api/user/GetIsEnableFXDistributorGrade", {}, res => {
          if(res.data.resultCode==1){
            this.FxState=res.data.data;
          }

        })
      },
      goodChange(val,num){
        if(!val){
          if(num==1){
            this.plszMsg.LimitBuyGoodsNum=0;
          }
          else if(num==2){
            this.plszMsg.LimitBuyOrderNum=0;
          }

        }
      },
      Export(){
        let msg = this.msg;
        if( msg.Id==''){
          msg.Id=0
        }
        msg = JSON.parse(JSON.stringify(msg));
        msg.pageSize=999;
        this.GetLocalFile(
          "/api/GuideCar/GetProductGoodsListToExcel",
          msg,
          "商品列表.xls"
        );
      },
      plsetOk(){
        if(this.plszMsg.Type==7){
          // if(this.plszMsg.FreightId==0){
          //     this.Error("请选择运费规则");
          //     return;
          // }
        }
        if(this.plszMsg.Type==8){
          if(this.plszMsg.BuyGoodsNumState){
            this.plszMsg.LimitBuyGoodsNum=-1
          }
          if(this.plszMsg.BuyOrderNumState){
            this.plszMsg.LimitBuyOrderNum=-1
          }
        }
        let mall_userInfo = JSON.parse(localStorage.mall_userInfo)
        if(mall_userInfo.TenantId==1 && mall_userInfo.MallBaseId==1  ){
          if(this.plszMsg.SupplierId==''){
            this.Error("请选择供应商!");
            return
          }else{
            this.commonSet(this.plszMsg);
          }
        }else{
          if(this.plszMsg.SupplierId==''){
            this.plszMsg.SupplierId=0
            this.commonSet(this.plszMsg)
          }else{
            this.commonSet(this.plszMsg);
          }

        }

      },
      plsetBtn(){
        if(this.GoodsIds.length==0){
          this.Error("请先勾选要设置的商品!");
          return;
        }
        let idList=[];
        this.GoodsIds.forEach(item=>{
          idList.push(item.Id)
        })
        this.keepGoodsIds=idList.join(',');
        this.plszMsg.GoodsIds=this.keepGoodsIds;
        this.plszMsg.SupplierId=''
        this.plDig=true;

      },
      ClearSelect(type){
        this.plszMsg={
          GoodsIds:this.keepGoodsIds,
          Type:type,
          FreightId:0,
          LimitBuyGoodsNum:-1,
          LimitBuyOrderNum:-1,
          IntegralPresent:0,
          IntegralPresentType:2,
          PointsDeduction:0,
          PointsDeductionType:2,
          IsMultipleDeduction:2,
          IsQuickBuy:2,
          IsGoodsNegotiable:2,
          SupplierId:''
        }
      },
      YfSelect(val){
        this.ruleSelect=val;
        this.plszMsg.FreightId=val.ID;
      },
      tableSelect(val){
        this.GoodsIds=val;
      },

      Edit(row,num){
        let addMsg={
          GoodsIds:row.Id,
          Type:num,
          Sort:row.SortNew,
          GoodsName:row.NameNew,
          IsQuickBuy:row.IsQuickBuy
        };
        this.commonSet(addMsg)
      },
      commonSet(addMsg){
        this.apipost('/api/product/SetProductGoodsQuickUpdate',addMsg,
          res => {
            if (res.data.resultCode === 1) {
              this.getList();
              this.Success(res.data.message)
              this.plDig=false;
            } else {
              this.Error(res.data.message);
            }
          },
          null
        );
      },
      chooseFl(){
        let CategoryIds=[];
        this.checkList.forEach(item=>{
          CategoryIds.push(item.Id)
        })
        this.msg.pageIndex=1
        this.msg.CategoryIds = CategoryIds.join(",");
        this.getList();
        this.flDig=false;
      },
      getChild3(ChildList){
        this.childList3=ChildList;
      },
      getChild2(ChildList){
        this.childList2=ChildList;
      },
      exitCheck(item,index){
        this.checkList.forEach((list,k)=>{
          if(list.Id==item.Id){
            this.checkList.splice(k,1);
          }
        })
      },
      handleCheckChange(val){
      },
      Clearconditions(){
        this.msg.Name='';
        this.msg.CategoryIds='';
        this.dateList=[];
        this.checkList=[];
        this.getList();
      },
      handleClick(val){
        let dataId=val.$attrs.dataId;
        if(dataId==0){
          this.msg.GoodsStatus=0;
          this.msg.IsSelectSellOut=0;
        }
        if(dataId==1){
          this.msg.GoodsStatus=1;
          this.msg.IsSelectSellOut=0;
        }
        if(dataId==2){
          this.msg.GoodsStatus=2;
          this.msg.IsSelectSellOut=0;
        }
        this.msg.pageIndex=1
        this.getList();
      },
      Delete(item){
        let that=this;
        that.$confirm('是否删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.apipost('/api/product/DelProcudtGoodsInfo',{GoodsId:item.Id},
            res => {
              if (res.data.resultCode === 1) {
                this.getList();
                this.Success(res.data.message)

              } else {
                this.Error(res.data.message);
              }
            },
            null
          );
        }).catch(() => {

        });
      },
      handleCurrentChange(val) {
        this.msg.pageIndex = val;
        this.getList();
      },
      getList(){

        if(this.dateList && this.dateList.length>0){
          this.msg.StartTime=this.dateList[0];
          this.msg.EndTime=this.dateList[1];
        }else{
          this.msg.StartTime='';
          this.msg.EndTime='';
        }
        let msg=JSON.parse(JSON.stringify(this.msg))
        if(msg.Id==''){
          msg.Id=0;
        }
        this.loading=true;
        this.apipost("/api/GuideCar/GetGoodsPageList", msg, res => {
          this.loading=false;
          if(res.data.resultCode==1){
            this.total=res.data.data.count;
            let pageData=res.data.data.pageData;
            pageData.forEach(item=>{
              item.SortNew=item.Sort;
              item.NameNew=item.Name;
              item.editsort=false;
              item.editname=false;
            })
            this.tableData=pageData;
          }

        })
      },
      getTree(){
        let msg1={
          Id:0,
          Name:'',
          Tier:0,
          ParentId:0,
          Enabled:1,
          IsShow:1,
        }
        this.apipost("/api/product/GetProductCategoryTreeList", msg1, res => {
          if(res.data.resultCode==1){
            let pageData=res.data.data;
            this.fenleiData=pageData;
          }

        })
      },
      getRule(){
        let msg1={
          pageIndex:1,
          pageSize:999,
          RulesName:'',
        }
        this.apipost("/api/MallBase/GetLogisticsRulesPage", msg1, res => {
          if(res.data.resultCode==1){
            let pageData=res.data.data.pageData;
            this.ruleList=pageData;
          }

        })
      },
      changeSupplier(val) {},
      getSupplierList(){
        this.apipost("/api/Supplier/GetSupplierAllList", {}, res => {
          this.loading = false;
          if (res.data.resultCode == 1) {
            this.options = res.data.data;
          }
        });
      },
      getSort(val){//列表的升序降序
        if(val.prop=='CreateDate'){
          if(val.order=='ascending'){
            this.msg.OrderBy=1
          }else if(val.order=='descending'){
            this.msg.OrderBy=2
          }else{
            this.msg.OrderBy=0
          }
        }else if(val.prop=='Sort'){
          if(val.order=='ascending'){
            this.msg.OrderBy=3
          }else if(val.order=='descending'){
            this.msg.OrderBy=4
          }else{
            this.msg.OrderBy=0
          }
        }else if(val.prop=='SellingPrice'){
          if(val.order=='ascending'){
            this.msg.OrderBy=5
          }else if(val.order=='descending'){
            this.msg.OrderBy=6
          }else{
            this.msg.OrderBy=0
          }
        }
        this.getList()
      },
      //新窗口跳转
      goGoodsEdit(Id){
        // let routeData = this.$router.resolve({
        //   name: 'directorGoodsEdit',
        //   query: {
        //     GoodsId: Id,
        //     hpState:this.hpState,
        //     FxState:this.FxState
        //   }
        // });
        // window.open(routeData.href, "_blank");

        this.$router.push({
          name: 'directorGoodsEdit',
          query: {
            GoodsId: Id,
            hpState:this.hpState,
            FxState:this.FxState
          }
        });
      }
    },
  };
</script>

<style>
  .plxg .spmy .el-form-item__label{
    padding-right:26px;
  }
  .yfradio{
    display: block;
    padding: 10px;
  }
  .plxg .batch-div-active {
    background-color: #e2e2e2;
  }
  .plxg .batch-box-left div {
    padding: 5px 0;
    margin: 5px 0;
    cursor: pointer;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
  }
  .plxg .batch-box-left {
    width: 120px;
    border-right: 1px solid #e2e2e2;
    padding: 0 20px;
  }
  .plxg .el-dialog__body{
    padding-top:10px!important;
  }
  .plxg .absoSpan{
    position: absolute;
    top:22px;
    left:100px;
  }
  .app-add-cat .el-checkbox-group{
    font-size: 14px!important;
  }
  .app-add-cat .el-checkbox {
    margin-right: 0;
  }
  .app-add-cat .el-dialog__body{
    padding:10px 20px!important;
  }
  .app-add-cat .tag-box .tag-item {
    margin-right: 5px;
  }
  .app-add-cat .tag-box {
    margin: 20px 0;
  }
  .app-add-cat .app-goods-cat-list .active {
    background: #FAFAFA;
  }
  .app-add-cat .app-goods-cat-list .cat-item {
    cursor: pointer;
    padding: 5px 10px;
  }
  .app-add-cat .app-goods-cat-list {
    border: 1px solid #E8EAEE;
    border-radius: 5px;
    margin-top: -5px;
    padding: 10px 0;
    overflow: scroll;
    height: 400px;
  }
  .directorGoodsList .vue-line-clamp {
    display: block;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .directorGoodsList .content{
    background: #fff;
    margin-top:10px;
    padding: 20px;
    box-sizing: border-box;
  }
</style>
