<template>
  <div class="goods-list">
     <toptitle name="商品列表">
      <el-button type="primary">
        <router-link :to="{path:'/goods/template'}">+发布商品</router-link>
      </el-button>
    </toptitle>
    <div class="search-wrap">
      <div class="search-box" :style="{height: searchHeight}">
        <div class="search-item">
          <span class="label">商品信息：</span>
          <el-input class="input"  @keyup.enter.native="onSearch" clearable v-model="params.search" placeholder="请输入SPU ID或型号"></el-input>
        </div>
        <!-- <div class="search-item">
          <span class="label">品牌名称：</span>
          <el-select
            class="input"
            clearable
            filterable
            v-model="params.brandId"
            placeholder="请选择品牌"
          >
            <el-option v-for="item in brandList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </div> -->
        <div class="search-item">
          <span class="label">类目：</span>
          <el-select
            class="input"
            clearable
            filterable
            v-model="params.templateId"
            placeholder="请选择类目"
          >
            <el-option v-for="(item,index) in tempList" :key="index" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </div>
        <div class="search-item" v-if="false">
          <span class="label">专区：</span>
          <el-select class="input" style="width:120px;" clearable v-model="params.ocProductType" placeholder="请选择专区">
            <el-option
              v-for="item in preList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <div class="search-item">
          <span class="label">上架状态：</span>
          <el-select class="input" style="width:120px;" clearable v-model="params.isEtao" placeholder="请选择上架状态">
            <el-option
              v-for="item in isEtaoList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <div class="search-item" v-if="false">
          <span class="label">审核状态：</span>
          <el-select class="input" style="width:120px;" clearable v-model="params.review" placeholder="请选择审核状态">
            <el-option
              v-for="item in reviewList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <div class="search-item">
          <span class="label">发布时间：</span>
            <el-date-picker
              v-model="releaseTime"
              type="daterange"
              class="input"
              :picker-options="pickerOptions"
              :default-time="['00:00:00','23:59:59']"
              value-format="yyyy-MM-dd HH:mm:ss"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
        </div>

      </div>
      <div class="search-btn-box">
        <el-button type="primary" size="medium " @click="onSearch">搜索</el-button>
        <el-button size="medium " @click="onReset">重置</el-button>
        <p class="more" @click="showMore= !showMore">
          更多条件
          <!-- 、平台 -->
          <i :style="{  transform: 'rotateZ('+deg+'deg)'}" class="el-icon-arrow-down icon-arrow"></i>
        </p>
      </div>
    </div>
    <div>
      <el-table
      v-loading="loading"
        ref="multipleTable"
        :data="styleType"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        stripe
      >
        <el-table-column type="selection" width="70" :selectable="selectable" align="center"></el-table-column>
        <el-table-column prop="skuImg" label="SPU主图" align="center" width="100">
          <template slot-scope="scope">
            <div class="">
              <img style="width:80px" :src="scope.row.skuImg" alt="">
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="spuId" label="SPU ID" align="center" width="100">
            <template slot-scope="scope">
              <div>
                <span><i v-if="scope.row.isNew" style="display: inline-block;background: #31B907;width:8px;height: 8px;border-radius:100%;"></i> {{scope.row.spuId}}</span>
              </div>
              <div>交货期：{{scope.row.deliveryTime | delivery}}</div>
              <div>
                {{scope.row.styleName}}
              </div>
            </template>
        </el-table-column>
        <el-table-column prop="templateTame" label="类目" align="center">
          <template slot-scope="scope">
            <div>{{scope.row.templateTame}}</div>
            <!--<div v-if="scope.row.templateType==1" style="color: #ff6600;cursor:pointer" @click="switchCategory(scope.row)">切换类目></div>-->
          </template>
        </el-table-column>
        <el-table-column prop="model" label="SPU型号" align="center">
          <template slot-scope="scope">
            <div>
              <div>{{scope.row.model}}</div>
              <!--<img v-if="scope.row.etaoProductTypeIcon" style="width:30px;" :src="scope.row.etaoProductTypeIcon" alt="">-->
              <!--<img v-else style="width:30px;" :src="scope.row.etaoProductVipIcon" alt="">-->
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="etaoStatus" label="上架状态" align="center">
          <template slot-scope="scope">
            <div :style="{
          color: scope.row.etaoStatus=='仓库中'?'#f60':
          scope.row.etaoStatus=='已上架'?'#31B907':'black'
          }">
              {{scope.row.etaoStatus}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="review" label="审批状态" align="center">
          <template slot-scope="scope">
            <span :style="{
              color: scope.row.review=='正在审核'?'#f60':
                      scope.row.review=='审核失败'?'red':
                      scope.row.review=='审核通过'?'#31B907':'black'
            }">
              {{scope.row.review}}
            </span>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="priceformula" label="公式类型" align="center">
          <template slot-scope="scope">
            <div class="">
              <span v-if="scope.row.priceformula" style="color:#31B907;">{{scope.row.priceformula}}</span>
              <span v-else style="color:red;">自定义</span>
            </div>
          </template>
        </el-table-column> -->
        <!-- <el-table-column prop="prodStyle" label="商品风格" align="center" width="120">
          <template slot-scope="scope">
            <div v-if="scope.row.isEtao == '已上架'">
              <span v-if="scope.row.prodStyle">{{scope.row.prodStyle}}<el-button type="text" @click="styleSelectFunShow(scope.row)" icon="el-icon-edit" circle></el-button></span>
              <span v-else><el-button type="text" @click="styleSelectFunShow(scope.row)" circle>请选择2.0风格<i class="el-icon-edit el-icon--right"></i></el-button></span>
            </div>
          </template>
        </el-table-column> -->
        <!-- <el-table-column prop="updateTime" label="修改时间" align="center"></el-table-column>
        <el-table-column prop="releaseTime" label="发布时间" align="center"></el-table-column>
        <el-table-column prop="addTime" label="创建时间" align="center"></el-table-column> -->

        <el-table-column label="修改/发布/创建时间" align="center" width="180">
          <template slot-scope="scope">
            <div class="lefttime">修改：{{scope.row.updateTime}}</div>
            <div class="lefttime">发布：{{scope.row.releaseTime}}</div>
            <div class="lefttime">创建：{{scope.row.addTime}}</div>
          </template>
        </el-table-column>

        <!-- <el-table-column prop="reviewer" label="审核人" align="center"></el-table-column> -->
        <el-table-column label="操作" align="center" width="100px">
          <template slot-scope="scope">
            <div class="edit">
              <span
                v-if="scope.row.reviewStatus==1 || scope.row.reviewStatus==2"
                @click="chageSaleable(scope.row.spuId,scope.row.saleable)"
              >{{scope.row.saleable==1?"下架":"上架"}}</span>
                     <!-- <span
                v-if="scope.row.reviewStatus==1"
                @click="chageSaleable(scope.row.spuId,scope.row.isEtao)"
              >{{scope.row.isEtao=='仓库中'?"上架":"下架"}}</span> -->

              <span @click="handleToEdit(scope.row.spuId)" v-if="scope.row.isSecKill!=1">编辑</span>
              <div>
                <span @click="handleToView(scope.row.spuId)">查看</span>
                <span @click="handleSkuDialog(scope.row.spuId)" v-if="false">吊牌</span>
              </div>
              <!-- <div v-if="scope.row.isEtao == '仓库中'||scope.row.isEtao=='已上架'">
                <span @click="getSkuModelEditList(scope.row.spuId)" style="color: #ff6600">修改SKU型号</span>
              </div> -->
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-box">
        <!-- " -->
        <div>
          <span>已选{{selection.length}}个商品</span>
          <el-button size="mini" @click="passExamineBL(1)">批量上架</el-button>
          <el-button size="mini" @click="passExamineBL(0)">批量下架</el-button>
        </div>
        <pagination
          @eventSizeChange="eventSizeChange"
          @eventCurrentChange="eventCurrentChange"
          :total="total"
          :pageSize="params.pageSize"
          :currentPage="params.pageNum"
          :pagerCount='5'
        ></pagination>
      </div>
    </div>
    <shelf></shelf>
    <el-dialog
      :close-on-click-modal="false"
      title="修改SKU型号"
      :visible.sync="showEditSku"
      width="70%"
    >
      <el-form ref="skuForm" :rules="skuRule" :model="skuForm" label-width="90px">
        <el-form-item label="系列型号:" prop="skuData"
                      :rules="rules.skuData">
          <el-input  style="width: 220px" v-model="skuForm.skuData" :change="setSkuModel(skuForm.skuData)"></el-input>
        </el-form-item>
      <el-table
        style="margin-top: 10px"
        :data="skuForm.skuModelEditList"
        class="sku_list_table"
        max-height="600"
        border
        >
        <el-table-column prop="specJson" label="灯具规格" align="center"></el-table-column>
        <el-table-column label="SKU型号" align="center">
          <template slot-scope="scope">
            <el-form-item
              style="margin-left: -90px"
              :rules="skuRule.skuModel"
              :prop="'skuModelEditList.' + scope.$index + '.skuModel'"
            >
              <el-input v-model="scope.row.skuModel" >
                <div slot="prepend">{{scope.row.model}}-</div>
              </el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column prop="skuImg" label="SKU图" align="center">
          <template slot-scope="scope">
            <div class="">
              <img style="width:80px" :src="scope.row.mainImg" alt="">
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="supplyPrice" label="供货价" align="center"></el-table-column>
      </el-table>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button type="primary" :loading="editSkuLoading" @click="save(skuForm.skuModelEditList)">确 定</el-button>
        </span>
    </el-dialog>
    <!-- 商品风格 -->
    <el-dialog
      title="选择商品风格"
      :visible.sync="styleSelect"
      width="30%"
      >
      <el-form ref="formstyle" :model="formstyle" label-width="80px" :rules="rules">
        <el-form-item label="风格" prop="prodStyleVal">
          <el-select class="input" clearable
          v-model="formstyle.prodStyleVal"
          placeholder="请选择风格"
          >
            <el-option
              v-for="item in prodStyle"
              :key="item.dictId"
              :label="item.name"
              :value="item.dictId"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
       <span slot="footer" class="dialog-footer">
          <el-button @click="styleSelect = false">取 消</el-button>
          <el-button type="primary" @click="styleSelectFun">确 定</el-button>
        </span>

    </el-dialog>
    <!-- 商品类目 -->
    <el-dialog
      title="切换类目"
      v-if="categorySelect"
      :visible.sync="categorySelect"
      custom-class="category"
      width="600px"
      v-loading="categoryLoading"
    >
      <div class="m_b_10">选择类目：</div>
      <el-cascader-panel
        v-model="templateId"
        placeholder="请选择发布商品"
        @expand-change="handleCategoryChange"
        @change="handleCategoryChange"
        :options="categoryList"
        :props="{value: 'id', label: 'name', children: 'menus' }"/>
      <div class="m_t_10">已选类目：
        <span
          class="f_c_theme"
          v-for="(item,index) in selectedName"
          :key="index">{{item}}
          <i class="el-icon-arrow-right f_c_grey" v-if="index != selectedName.length-1"></i></span>
      </div>
      <div class="btn-box">
        <el-button class="btn" @click="onChangeCategory" type="primary">确认切换</el-button>
      </div>
    </el-dialog>
    <sku-dialog ref="skuList"></sku-dialog>
  </div>
</template>

<script>
import {_getStorage,_saveStorage,_removeStorage,_delivery } from '@/utils/utils'
import pagination from "@/components/common/pagination";
import toptitle from '@/components/common/topTitle'
import shelf from "@/components/common/shelf";

import SkuDialog from "./modules/SkuDialog";
export default {
  name:'list',
  components: {
    pagination,
    shelf,
    toptitle,
    SkuDialog
  },
  data() {
    return {
      skuRule:{
        skuData: [
          {required: true, message: "系列型号不能为空", trigger: "blur"}
        ],
        skuModel: [
          {required: true, message: "sku型号不能为空", trigger: "blur"}
        ],
      },
      skuForm:{
        skuModelEditList:[],
        skuData:'',
      },
      editSkuLoading:false,
      showEditSku:false,
       preList:[
        {
          value: '',
          label: "全部"
        },
        //  {
        //   value: 1,
        //   label: "优选"
        // },{
        //   value: 2,
        //   label: "严选"
        // },
        //  {
        //   value: 3,
        //   label: "限量"
        // },
         {
          value: 10,
          label: "铂金"
        },{
          value: 4,
          label: "小E"
        }
      ],
      pickerOptions: {
            disabledDate(time) {
              var todayYear = (new Date()).getFullYear()
              var todayMonth = (new Date()).getMonth()
              var todayDay = (new Date()).getDate()
              var todayTime = (new Date(todayYear, todayMonth, todayDay, '23', '59', '59')).getTime()// 毫秒
              return time.getTime() > todayTime
          }
      },
      releaseTime:'',
      prodStyle:[],//风格列表
      formstyle:{
        prodStyleVal:''
      },
      spuIdVal:'',
      styleSelect:false,
      rules:{
        prodStyleVal:[{ required: true, message: '风格不能为空'}],
      },
      selection: [],
      loading: false,
      showMore: false,
      total: 200,
      params: {
        pageSize: 20,
        pageNum: 1,
        search: "",
        brandId: "",
        templateId: "",
        supplierId: "",
        beginTime: "",
        endTime:"",
        ocProductType:'',
        isEtao: '',
        review: ''
      },
      isEtaoList: [
        { label: '全部', value: '' },
        { label: '已上架', value: '1' },
        { label: '仓库中', value: '0' },
      ],
      reviewList: [
        { label: '全部', value: '' },
        { label: '正在审核', value: '0' },
        { label: '审核通过', value: '1' },
        { label: '审核失败', value: '2' },
      ],
      input: "",
      brandList: [],
      tableData: [],
      tempList: [],

      supplierList: [],
      value: "",
      selectedName:[],
      categoryList: [],
      categorySelect: false,
      templateId: [],
      spuId: '',
      categoryLoading: false
    };
  },
  computed: {
    deg() {
      return this.showMore ? 180 : 0;
    },
    searchHeight() {
      return this.showMore ? "auto" : "47px";
    },
    styleType() {
      //  后台返回prodStyle是dictId,处理成name
      if(this.tableData.length>0 && this.prodStyle.length>0){
       this.tableData.map(r=>{
            if(r.prodStyle){
                this.prodStyle.map(rr=>{
                  if(rr.dictId == r.prodStyle){
                    r.prodStyle = rr.name
                    r.dictId = rr.dictId
                  }
                })
            }
          })
        return this.tableData
      }
    }
  },
    filters: {
    delivery: function(type) {
      return _delivery(type);
    }
  },
  activated() {

      },
  beforeRouteEnter(to, from, next) {
      if (from.path == "/goods/details" || from.path == "/goods/newProduct") {
        to.meta.isBack = true;
      } else {
        to.meta.isBack = false;
      }
      next();
  },
  activated() {
    if (!this.$route.meta.isBack) {
      this.params.pageNum = 1;
      this.getData();
    }
    this.$route.meta.isBack = false;
    let type = this.$route.query.type;
    if (type == 0 || type) {
      this.showMore = true;
    }
    if (type == 0) {
      this.params.isEtao = '1';
      this.params.review = '';
    }else if(type==2){
      this.params.isEtao = '0';
      this.params.review = '';
    } else if (type == 4) {
      this.params.review = '0';
      this.params.isEtao = '';
    }
    this.getProdStyle();
    this.getData();
    // this.getBrandList();
    this.getTempList();
    this.getSupplierList();
  },
  mounted () {
    this.getCategoryList()
  },
  methods: {
    setSkuModel(e){
      if(e){
        if(this.skuForm.skuModelEditList.length>0){
          this.skuForm.skuModelEditList.map(item=>{
            this.$set(item,'model',e)
          })
        }
      }
    },
    save(data) {
      this.$refs.skuForm.validate(valid=>{
        if(valid){
          let list = []
          data.forEach(item => {
            list.push({
              "spuId": item.spuId,
              "model": item.model,
              "skuId": item.skuId,
              "skuModel": item.model + '-' + item.skuModel
            })
          })
          this.updateModel(list)
        }
      })
    },
    updateModel(params){
      this.editSkuLoading=true
      this.$axios.post("/products/updateModel",params).then(res => {
        let { code,message } = res.data;
        if (code == 200) {
          this.$message.success(message)
          this.showEditSku = false
          this.getData();
        }else {
          this.$message.error(message);
        }
      });
      this.editSkuLoading=false
    },
    handleSkuDialog(record){
        this.$refs.skuList.getskulist(record)
        this.$refs.skuList.visible = true
    },

    styleSelectFunShow(row){
      this.styleSelect = true
      if(this.$refs['formstyle']){
        this.$refs['formstyle'].resetFields();
      }
      this.spuIdVal = row.spuId
      this.formstyle.prodStyleVal =row.dictId

    },
    styleSelectFun(){
        this.$refs.formstyle.validate((valid,e) => {
          if(valid){
            this.$axios.post("/products/updateProdStyle",{
                spuId:this.spuIdVal,
                dictId:this.formstyle.prodStyleVal
              }).then(res => {
                let { data, code } = res.data;
                if (code == 200) {
                  this.styleSelect = false
                  this.getData();
                }
              });
          }
        });

    },
    getSkuModelEditList(spuid){
      this.$axios.get("/products/getSkuModelEditList",{params:{spuId:spuid}}).then(res => {
        let { data, code } = res.data;
        if (code == 200) {
          this.skuForm.skuModelEditList=data
          if(data.length>0){
            this.skuForm.skuData =data[0].model
          }else {
            this.skuForm.skuData=''
          }
        }else {
          this.skuForm.skuData=''
        }
      });
    this.showEditSku=true
    },
    getProdStyle() {
      this.$axios.get("/products/getProdStyle").then(res => {
        let { data, code } = res.data;
        if (code == 200) {
          this.prodStyle = data;
        }
      });
    },

    passExamineBL(status) {
      var msg = status == 1 ? "上架" : "下架";
      if (this.selection.length == 0) {
        this.$message("请选择要批量" + msg + "的商品");
        return false;
      }
      this.$confirm("确定批量" + msg + "商品?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          var ids = [];
          this.selection.map(item => {
            ids.push(item.spuId);
          });
          this.setEnableBatch(ids, status);
        })
        .catch(() => {});
    },
    selectable(row, index) {
      return (row.reviewStatus == 1 || row.reviewStatus == 2) ? true : false;
    },
    getSupplierList() {
      this.$axios.post("/products/supplierList",{
        headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    },
      }).then(res => {
        let { data, code } = res.data;
        if (code == 200) {
          this.supplierList = data;
        }
      });
    },
    chageSaleable(spuId, saleable) {
      // let msg = saleable == '仓库中' ? "上" : "下";
      let msg = saleable == 0 ? "上" : "下";
      this.$confirm("是否确认" + msg + "架？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let sa = saleable == 1 ? 0 : 1;
          // let sa = saleable == '仓库中' ? 1 : 0;
           this.setEnableBatch([spuId], sa);
        })
        .catch(() => {});
    },
    setEnableBatch(spuIds, saleable) {
      this.$axios
        .post("/products/sdSetEnableBatch", {
          spuIds: spuIds,
          saleable: saleable
        })
        .then(res => {
          let { data, code, msg } = res.data;
          if (code == 200) {
            this.$message({
              type: "success",
              message: msg
            });
            this.syncProduct(spuIds);
            this.getData();
          } else {
            this.$message.error(msg);
          }
        });
    },
            // 同步新商品数据到E淘旧商品库
    syncProduct(spuIds){
      let parseIntSpus = [];
      spuIds.map(res=>{
        parseIntSpus.push(parseInt(res))
      })
       this.$axios
        .post("/sync/syncProduct", {
          spuIds: parseIntSpus,
        })
        .then(res => {

        })
    },
    onSearch() {
      this.params.pageNum = 1;
      this.params.beginTime= this.releaseTime && this.releaseTime.length?this.releaseTime[0]:'';
      this.params.endTime= this.releaseTime && this.releaseTime.length?this.releaseTime[1]:'';
      this.getData();
    },
    onReset(){
      this.params = {
        pageSize: 20,
        pageNum: 1,
        search: "",
        brandId: "",
        templateId: "",
        supplierId: "",
        beginTime: "",
        endTime:"",
        ocProductType:'',
        isEtao: '',
        review: ''
      }
      this.releaseTime =''
        this.getData();
    },
    getTempList() {
       let { brandId } = _getStorage('info');
      this.$axios.get("/products/tempList",{
        params:{
          brandId:brandId
        }
      }).then(res => {
        let { data, code } = res.data;
        if (code == 200) {
          this.tempList = data;
        }
      });
    },
    getBrandList() {
      this.$axios.get("/products/getBrandList").then(res => {
        let { data, code } = res.data;
        if (code == 200) {
          this.brandList = data;
        }
      });
    },
    getData() {
      this.loading = true;
      let { brandId } = _getStorage('info');
      this.params.brandId =brandId;
      this.$axios.post("/products/list", this.params).then(res => {
        let { data, code } = res.data;
        if (code == 200) {
            if(data && data.list && data.list.length>0){
              this.total = parseInt(data.total);
              this.tableData =data.list
            }else{
              this.tableData =[]
              this.total =0
            }
        }
        this.loading = false;
      });
    },
    handleSelectionChange(e) {
      this.selection = e;
    },
    eventSizeChange(e) {
      this.params.pageSize = e;
      this.getData();
    },
    eventCurrentChange(e) {
      this.params.pageNum = e;
      this.getData();
    },
    toPage(path) {
      this.$router.push({
        path
      });
    },
    handleToEdit(spuId) {
      this.$router.push({ path: "/goods/newProduct", query: { spuId } });
    },
    handleToView(spuId) {
      this.$router.push({ path: "/goods/details", query: { spuId } });
    },
    getCategoryList () {
      let { brandId } = _getStorage('info');
      this.$axios.get("/products/operationsMenuList",{
        params:{
          brandId:brandId
        }
      }).then(res => {
        let {code, data} = res.data
        if(code === 200){
          this.categoryList = data
        }
      });
    },
    handleCategoryChange(val){
      let getName = (i,categoryList,val, nameArry) => {
        if(i > val.length-1){
          return nameArry
        }
        for(let key in categoryList){
          let category = categoryList[key]
          if(val[i] == category.id){
            i+=1
            nameArry.push(category.name)
            return getName(i,category.menus,val,nameArry)
          }
        }
      }
      this.selectedName = getName(0,this.categoryList,val,[])
    },
    onChangeCategory () {
      if (this.selectedName.length != 3) {
        this.$message.error('请选择完整类目');
        return
      }
      this.$axios.post('/products/toggleTemplates', {
        spuId: this.spuId,
        templateId: this.templateId[2]
      })
      .then(res => {
        let { code,msg } = res.data;
        if (code == 200) {
          this.categorySelect = false
          this.getData();
        } else {
          this.$message.error(msg);
        }
      })
      .finally(() => {
        this.categoryLoading = false
      })
    },
    switchCategory (row) {
      this.spuId = row.spuId
      this.selectedName = row.templateMenuNames.split(',') || []
      this.templateId = row.templateIds.split(',') || []
      this.categorySelect = true
    }
  }
};
</script>

<style lang="scss" scoped>
.lefttime{
  text-align: left;
}
.goods-list {
  color: #333333;
    padding: 20px;
}

.search-wrap {
  .search-box {
    overflow: hidden;
    flex-wrap: wrap;
    display: flex;
    transition: max-height 0.15s ease-in-out;
    .search-item {
      margin-right: 15px;
      margin-bottom: 15px;
      .label {
        display: inline-block;
        width: 74px;
        text-align: right;
        font-size: 14px;
      }
      .input {
        width: 250px;
      }
    }
  }
  .search-btn-box {
    margin-bottom: 10px;

    display: flex;
    align-items: center;
    .icon-arrow {
      margin-left: 4px;
      transition: transform 0.25s ease-in-out;
    }
    .more {
      color: #ff6600;
      margin-left: 10px;
      cursor: pointer;
      line-height: 33px;
    }
  }
}
.edit {
  color: #0785dd;
  span {
    cursor: pointer;
    margin: 0 4px;
  }
}
.pagination-box {
  display: flex;
  align-items: center;
    justify-content: center;
  // justify-content: space-between;
}


.category {
  // min-height: 500px;
  padding-top: 50px;
  .f_c_theme{
    color: #f60;
  }
  .btn-box {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
  }
}
    /deep/ .el-cascader-menu__wrap{
      height:368px;
    }
</style>
