<template>
  <div v-loading="loading">
    <div class="heior_box">
      <div class="search-box">
        <el-input v-model="searchModel.keyWord" placeholder="请输入产品名称" clearable size="small">
          <el-button slot="append" icon="el-icon-search" @click="get"></el-button>
        </el-input>
      </div>
    </div>
    <el-table :data="retData.Data" row-key="Id" border size="medium" :height="$getHeight(100)">
      <el-table-column prop="Image" label="产品图片" width="80px">
        <template slot-scope="scope">
          <img :src="scope.row.Image" style="width:32px;height:32px" alt />
        </template>
      </el-table-column>
      <el-table-column prop="Name" label="产品名称" width="180"></el-table-column>
      <el-table-column prop="RefundDayPrice" label="退款单价" width="180"></el-table-column>
      <el-table-column prop="DayLimitPrice" label="最低价格" width="180"></el-table-column>
      <el-table-column prop="Status" label="上下架" width="180">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.OnLine"
            :active-value="1"
            :inactive-value="0"
            active-color="#13ce66"
            inactive-color="#dcdfe6"
            @change="changeLineStatus(scope.row)"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="Profile" label="产品说明"></el-table-column>
      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <span class="handel cursor edit" @click="goEdit(scope.row)">编辑</span>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        v-if="retData.Data.length>0"
        @current-change="get"
        :page-size="50"
        :current-page.sync="searchModel.PageIndex"
        layout="total,prev, pager, next"
        :total="retData.TotalCount"
      ></el-pagination>
    </div>
    
    <el-dialog title="产品维护" :visible.sync="showDialog" width="400px">
      <el-form :model="currentProduct" :rules="rules" ref="inputProductForm" label-width="80px">
        <el-form-item prop="Name" label="产品名称">
          <el-input v-model="currentProduct.Name" size="small"></el-input>
        </el-form-item>
        <el-form-item prop="RefundDayPrice" label="退款单价">
          <el-input v-model="currentProduct.RefundDayPrice" size="small"></el-input>
        </el-form-item>
         <el-form-item prop="DayLimitPrice" label="最低价格">
          <el-input v-model="currentProduct.DayLimitPrice" size="small"></el-input>
        </el-form-item>
        <el-form-item prop="Profile" label="产品说明">
          <el-input  type="textarea" :rows="3" v-model="currentProduct.Profile" size="small" ></el-input>
        </el-form-item>
        <!-- <el-form-item prop="Image" label="产品图标">
          <span class="uploadimg_box">
            <img
              :src="currentProduct.Image"
              v-if="currentProduct.Image!=''"
              class="uploadimg"
              @click="upload"
            />
            <span class="ubloadbtn" v-else>
              <img src="/static/img/common/imgadd.png" @click="upload" />
            </span>
            <p class="imgTip" @click="upload">点击更换</p>            
          </span>
        </el-form-item> -->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetForm">取 消</el-button>
        <el-button type="primary" @click="save">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "treeTable",
  components: {},
  data() {
    return {
      loading: false,
      showDialog:false,
      retData: { TotalCount: 0, Data: [] },
      searchModel: {
        PageIndex: 1,
        keyWord: ""
      },
      currentProduct: {
        Id:0,
        Name:"",
        Profile:"",
        Image:""
      },
      rules:{
        Name:[this.$vaild.required("产品名称")]
      }
    };
  },
  created() {
    this.$store.commit("setCurrentNav", "产品管理>>产品列表");
    this.get();
  },
  methods: {
    get() {
      this.loading=true;
      this.$api.get("course/v1/product/page", this.searchModel).then(res => {
        this.retData = res;
        this.loading=false;
      });
    },
    del(item) {
      var that = this;
      this.$confirm("确定删除？", "", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(_ => {
        this.$api.post("course/v1/product/Delete?id=" + item.Id).then(res => {
          that.get();
        });
      });
    },
    goEdit(item) {
      this.currentProduct=item;
      this.showDialog=true;
    },   
    save() {
      this.$api.post("course/v1/product/put", this.currentProduct).then(res => {
      this.resetForm()
      this.get();
      });
    },
    changeLineStatus(item) {
      this.$api
        .post("course/v1/product/SetProductLine?id=" + item.Id)
        .then(res => {
          item.Status = res.Data;
        });
    },
    resetForm() {
      this.$refs["inputProductForm"].resetFields();    
      this.showDialog = false;     
    },
    upload(callback) {
      this.$api.upload("oss/v1/ImageCloud/upload").then(res => {
         this.courseModel.Cover = ret.Url;
      });
    }   
  }
};
</script>
<style scoped>
</style>
