<style>
.height_auto.el-select .el-input{
  height: auto
}
.BuyingList .el-button-group .el-button{
  padding: 6px !important;
}
.BuyingList .el-button-group .el-button.iconfont{
  font-size: 12px !important;
}
</style>

<template>
  <div class="flexOne BuyingList">
    <div class="query-box">
      <ul class="user_time_picker">
        <li>
          <span>
            <em>{{$t('MarketingActi.commName')}}</em>
            <el-input v-model="msg.name" @keyup.enter.native="getList"></el-input>
          </span>
        </li>
        <li>
          <span>
            <em>{{$t('MarketingActi.commType')}}</em>
            <el-select filterable v-model="msg.SellType">
              <el-option :label="$t('pub.unlimitedSel')" :value="0" key="0"></el-option>
              <el-option v-for="item in CommodityTypeList" :label="item.Name" :value="item.Id" :key="item.Id"></el-option>
            </el-select>
          </span>
        </li>
        <li>
          <span>
            <em>{{$t('ground.shangpinfl')}}</em>
            <el-select filterable v-model="msg.CategoryId">
              <el-option :label="$t('pub.unlimitedSel')" :value="-1"></el-option>
              <el-option v-for="item in GoodsTypeList" :label="item.Name" :value="item.Id" :key="item.Id"></el-option>
            </el-select>
          </span>
        </li>
        <li>
          <span>
            <em>{{$t('admin.admin_status')}}</em>
            <el-select filterable v-model="msg.Status">
              <el-option :label="$t('pub.unlimitedSel')" :value="-1"></el-option>
              <el-option :label="$t('visa.v_dwanshan')" :value="1"></el-option>
              <el-option :label="$t('Operation.Op_shangjia')" :value="2"></el-option>
              <el-option :label="$t('Operation.Op_xiajia')" :value="3"></el-option>
              <el-option :label="$t('pub.cancelBtn')" :value="4"></el-option>
            </el-select>
          </span>
        </li>
        <li>
          <input type="button" @click="getList" class="hollowFixedBtn" :value="$t('pub.searchBtn')">
          <input type="button" @click="addIntegralMall('BuyingAdd')" class="normalBtn" :value="$t('pub.addBtn')">
        </li>
      </ul>
    </div>

    <div class="clearfix"></div>
    <table class="singeRowTable" border="0" cellspacing="0" cellpadding="0" v-loading="loading">
      <tr>
        <th width='80'>{{$t('MarketingActi.commNum')}}</th>
        <th>{{$t('MarketingActi.commName')}}</th>
        <th>{{$t('ground.fenleimc')}}</th>
        <th>{{$t('ground.leixingmc')}}</th>
        <th>{{$t('ground.cbenjia')}}</th>
        <th>{{$t('ground.xiaoshoujia')}}</th>
        <th>{{$t('ground.lingduifany')}}</th>
        <th>{{$t('ground.gongsifany')}}</th>
        <th>{{$t('ground.tonghangfy')}}</th>
        <th>{{$t('ground.weitufany')}}</th>
        <th>{{$t('admin.admin_status')}}</th>
        <th>{{$t('admin.admin_czPerson')}}</th>
        <th>{{$t('hotel.table_operattime')}}</th>
        <th>{{$t('system.table_operation')}}</th>
      </tr>
      <tr v-for="item in dataList">
         <td>{{item.Id}}</td>
         <td>{{item.Name}}</td>
         <td>{{item.CategoryName}}</td>
         <td>{{item.SellTypeName}}</td>
         <td>{{item.CostPrice}}</td>
         <td>{{item.SellPrice}}</td>
         <td>{{item.LeaderRebate}}</td>
         <td>{{item.CompanyRebate}}</td>
         <td>{{item.ClientRebate}}</td>
         <td>{{item.WeiTuRebate}}</td>
         <td>{{item.StatusName}}</td>
         <td>{{item.UpdateBy}}</td>
         <td>{{item.UpdateDate}}</td>
         <td  class="BuyingList">
          <el-button-group size="mini">
            <el-tooltip class="item" effect="dark" :content="$t('pub.updateMsg')" placement="top">
              <el-button type="primary" size="mini" class="iconfont icon-xiugai" @click="addIntegralMall('BuyingAdd', item.Id, '修改商品')"></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" :content="$t('Operation.Op_shangjia')" placement="top">
              <el-button type="success" size="mini" class="iconfont icon-shangjia1" @click="setProS(3, item.Id)" v-if="item.Status === 2 || item.Status === 1"></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" :content="$t('Operation.Op_shangjia')" placement="top">
              <el-button type="warning" size="mini" class="iconfont icon-xiajia1" @click="setProS(2, item.Id)" v-if="item.Status === 3"></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" :content="$t('Operation.Op_price')" placement="top">
              <el-button type="warning" size="mini" class="iconfont icon-jiage" @click="setPrice(item.Id)"></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" :content="$t('pub.cancelBtn')" placement="top">
              <el-button type="danger" size="mini" class="iconfont icon-quxiao1" @click="setProS(4, item.Id)"></el-button>
            </el-tooltip>
          </el-button-group>
         </td>
      </tr>
    </table>
    <el-pagination background @current-change="handleCurrentChange" layout="total,prev, pager, next, jumper" :page-size=msg.pageSize :total=total>
		</el-pagination>
    <div class="noDataNotice" v-if="dataList.length<1">
      <i class="iconfont icon-kong"></i>
      <p>{{$t("active.ld_noData")}}</p>
    </div>
</div>
</template>
<script>
export default {
  data() {
    return {
      //请求
      msg: {
        pageSize: 15,
        pageIndex: 1,
        SellType: 0,
        Name: '',
        CategoryId: -1,
        Status: -1
      },
      loading:false,
      dataList:[],
      GoodsTypeList: [],
      total:0,
      CommodityTypeList: [],
    };
  },
  
  mounted() {
    this.getList();
    this.getCommodityTypeList();
    this.getGoodsTypeManager();
  },
  filters: {
  },

  methods: {
    setPrice(id){
      this.$router.push({ name: 'BuyingPrice',query:{blank: 'y', proId: id} })
    },
    setProS(t, id){
      this.apipost("Shop_post_SetCommodityStatus",{CommodityId: id, Status: t},res => {
          if (res.data.resultCode === 1) {
            this.$message.success(res.data.message);
            this.getList()
          } else {
            this.Error(res.data.message);
          }
        },
        null
      );
    },
    handleCurrentChange(val){
      this.msg.pageIndex=val;
      this.getList();
    },
    addIntegralMall: function( path, proId, tab){
      this.$router.push({ name: path,query:{blank: 'y', proId: proId, tab: tab} })
    },
    getGoodsTypeManager() {
      this.apipost("Shop_post_GetCommodityCategoryList",{Name: "", ParentId:  -1},res => {
          if (res.data.resultCode === 1) {
            this.GoodsTypeList = res.data.data; 
          } else {
            this.Error(res.data.message);
          }
        },
        null
      );
    },
    getCommodityTypeList() {
      this.apipost(
        "Shop_post_GetCommodityTypeList",
        {},
        res => {
          if (res.data.resultCode === 1) {
            this.CommodityTypeList = res.data.data; 
          } else {
            this.Error(res.data.message);
          }
        },
        null
      );
    },
    //获取数据
    getList() {
      this.loading = true;
      this.apipost("Shop_post_GetPageList", this.msg, res => {
        this.loading = false;
        if (res.data.resultCode === 1) {
          this.dataList = res.data.data.pageData;
          this.total= res.data.data.count;
        } else {
          this.Error(res.data.message)
        }
      }, null);
    },
   }
};
</script>