<template>
  <div>
    <el-dialog
      :title="dialogObj.title"
      :visible.sync="dialogObj.show"
    >
      <el-table
        :data="goodList"
        style="width: 100%"
        row-key="id"
        highlight-current-row
        @current-change="handleCurrentChange">
        <el-table-column
          prop="id"
          label="商品ID">
        </el-table-column>
        <el-table-column
          prop="name"
          label="名称">
        </el-table-column>
        <el-table-column
          label="商品类型">
          <template slot-scope="scope">
            {{scope.row.goods_type | goodsType}}
          </template>
        </el-table-column>
        <el-table-column
          label="现价">
          <template slot-scope="scope">
            {{scope.row.current_price/100}}元
          </template>
        </el-table-column>
        <el-table-column
          label="课程类别">
          <template slot-scope="scope">
            {{scope.row.course_type | lessonType}}
          </template>
        </el-table-column>
        <el-table-column
          label="是否有实物">
          <template slot-scope="scope">
            {{scope.row.is_real | isOrNot}}
          </template>
        </el-table-column>
        <el-table-column
          label="状态">
          <template slot-scope="scope">
            {{scope.row.status | goodsStatus}}
          </template>
        </el-table-column>
      </el-table>
      <page :nowPage="nowPage" :total="total"/>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogObj.show = false">取 消</el-button>
        <el-button type="primary" @click="onConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {getGoodsListApi} from "../../service/api";
  import {ISORNOT,GOODSTYPE,LESSONTYPE,GOODSSTATUS} from "../../util/wordbook";
  import page from '../framework/page'
  export default {
    props:[
      'dialogObj'
    ],
    data(){
      return{
        nowPage : 1,
        total: 0,
        goodList:[],
        currentRow: null
      }
    },
    components:{
      page
    },
    filters: {
      isOrNot(value){
        return ISORNOT[value]
      },
      goodsType(value){
        return GOODSTYPE[value]
      },
      lessonType(value){
        return LESSONTYPE[value]
      },
      goodsStatus(value){
        return GOODSSTATUS[value]
      }
    },
    methods:{
      initPage(){
        getGoodsListApi().then(res=>{
          this.goodList = res.list;
          this.total = res.total
        });
      },
      handleCurrentChange(val){
        this.currentRow = val;
      },
      onConfirm(){
        this.$emit("reflash",this.currentRow);
      }
    },
    mounted(){
      this.initPage()
    }
//    watch:{
//      'dialogObj'(value){
//          console.log('dialogObj value', value)
//        this.initPage()
//      }
//    }
  }
</script>

<style scoped>

</style>
