<template>
  <div>
    <basicLayout
      ref="basicLayout" 
      :oldFormPath="{
        add:'HDrpManagement/ProductGroupMag/modules',
      }"
      tableName="productGroupTable" 
      idName="sa_itemgroupid" 
      :apiId="{query:20220922164403,del:20220922164503}" 
      :options="options"
      :detailPath="{path:'/productGroupDetail'}"
      @onFixedClick="rows"
      @checkboxCallBack="rows"
      @listData="listData">
      <template #custom>
        <div class="mt-10">
          <label class="search__label" >品牌:</label>
          <el-select  class="inline-24" @change="selectChange" v-model="selectParam.brandname" placeholder="请选择品牌" size="small" clearable>
            <el-option v-for="item in brandList" :key="item.sa_brandid" :value="item.brandname" :label="item.brandname"></el-option>
          </el-select>
        </div>
        <div class="mt-10">
          <label class="search__label" >是否上架:</label>
          <el-select  class="inline-24" @change="selectChange" v-model="selectParam.isonsale" placeholder="是否上架" size="small" clearable>
            <el-option :key="1" :value="1" label="已上架"></el-option>
            <el-option :key="2" :value="0" label="未上架"></el-option>
          </el-select>
        </div>
      </template>
      <template v-slot:tbList="scope">
        <div v-if="scope.data.column.columnname == 'isonsale'">
          <span v-if="scope.data.column.data[scope.data.column.columnname] == 0" style="color:red">未上架</span>
          <span v-if="scope.data.column.data[scope.data.column.columnname] == 1" style="color:rgb(82, 196, 26)">已上架</span>
        </div>
        <div v-else-if="scope.data.column.columnname == 'sequence'">
          {{scope.data.column.data.sequence + 1}}
        </div>
        <div v-else>
          {{scope.data.column.data[[scope.data.column.columnname]]?scope.data.column.data[[scope.data.column.columnname]]:'--'}}
        </div>
      </template>
      <template v-slot:tbOpreation="scope">
      </template>
    </basicLayout>
  </div>
</template>

<script>
export default {
  components:{
  },
  name: "index",
  data() {
    return {
      /* 商品列表数据 */
      productList:'',
      /* 品牌列表数据 */
      brandList:'',
      options:[],
      selectParam: {
        brandname:'',
        isonsale:''
      }
    }
  },
  provide() {
    return {
      productList: () => this.productList,
      brandList: () => this.brandList
    }
  },
  created () {
    this.getProductList()
    this.getBrandList()
  },
  methods: {
    listData (data) {
      console.log(data);
      
    },
    selectChange () {
      this.$refs.basicLayout.param.content.where = this.selectParam
      this.$refs.basicLayout.param.content.pageNumber =1
      this.$refs.basicLayout.listData()
    },
    /* 可选择的商品列表 */
    async getProductList() {
      let res = await this.$api.requested({
          "id": "20220923112503",
          "version":1,
          "content": {
            "nocache":true,
            "sa_itemgroupid":0,
            "where":{
                "condition":""
            }
          }
      })
      this.productList = res.data
      console.log(this.productList,'商品');
      
    },
    /* 可选择的品牌列表 */
    async getBrandList() {
      let res = await this.$api.requested({
        "id": "20220922085103",
        "version":1,
        "content": {
          "nocache":true,
          "where":{
              "condition":""
          }
        }
      })
      this.brandList = res.data
      console.log(this.brandList,'品牌');
    },
    rows(val){
      console.log("点击")
      console.log(val)
      this.rowData = val
    }
  },
  mounted () {
  }
}
</script>

<style scoped>

</style>