<template>
  <div v-loading="loading">
    <el-table :data="retData.Data" row-key="id" border size="medium" :height="$getHeight(100)">
      <el-table-column prop="name" label="产品名称" width="180"></el-table-column>
      <el-table-column prop="lineprice" label="划线价" width="180"></el-table-column>
      <el-table-column prop="price" label="真实价格" width="180"></el-table-column>
      <el-table-column prop="describe1" label="产品说明" width="180"></el-table-column>
      <el-table-column prop="status" label="上下架" width="180">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            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="src" 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"
        layout="total"
        :total="retData.TotalCount"
      ></el-pagination>
    </div>
    
    <el-dialog title="产品维护" :visible.sync="showDialog" width="400px">
      <el-form :model="currentProduct" 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="lineprice" label="划线价">
          <el-input v-model="currentProduct.lineprice" size="small"></el-input>
        </el-form-item>
         <el-form-item prop="price" label="真实价格">
          <el-input v-model="currentProduct.price" size="small"></el-input>
        </el-form-item>
        
         <el-form-item prop="describe1" label="产品说明">
          <el-input v-model="currentProduct.describe1" size="small"></el-input>
        </el-form-item>
        <el-form-item prop="src" label="图片地址">
          <el-input  type="textarea" :rows="3" v-model="currentProduct.src" size="small" ></el-input>
        </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: [] },
      currentProduct: {},
    };
  },
  created() {
    this.$store.commit("setCurrentNav", "产品管理>>软路由列表");
    this.get();
  },
  methods: {
    get() {
      this.loading=true;
      this.$api.get(this.$api.phpURL + 'ros/product/getList').then(res => {
        this.retData = res;
        console.log(res)
        this.loading=false;
      });
    },
    goEdit(item) {
      this.currentProduct=item;
      this.showDialog=true;
    },   
    save() {
      this.$api.post(this.$api.phpURL + 'ros/product/setInfo',this.currentProduct).then(res => {
      this.resetForm()
      this.get();
      });
    },
    changeLineStatus(item) {
      this.$api
        .post(this.$api.phpURL + 'ros/product/setStatus',{'id':item.id,'status':item.status})
        .then(res => {
        });
    },
    resetForm() {
      this.$refs["inputProductForm"].resetFields();    
      this.showDialog = false;     
    },
  }
};
</script>
<style scoped>
</style>
