<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span></span>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="primary"
              icon="el-icon-plus"
              size="mini"
              @click="handleAdd"
            >新增
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="success"
              icon="el-icon-edit"
              size="mini"

              @click="handleOnsale"
            >申请上架
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              :disabled="multiple"
              @click="handleDelete"
            >删除
            </el-button>
          </el-col>
        </el-row>
      </div>
      <!-- <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
         <el-form-item label="商品ID" prop="goods_id">
           <el-input
             v-model="queryParams.goods_id"
             placeholder="请输入商品ID"
             clearable
             size="small"
             @keyup.enter.native="handleQuery"
           />
         </el-form-item>

           <el-form-item>
               <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
               <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
             </el-form-item>
       </el-form> -->

      <el-table v-loading="loading" :data="goodsList" :height="tableHeight" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center"/>
        <el-table-column label="" align="center" width="100" prop="defaultImage">
          <template slot-scope="scope">
            <el-image
              style="width: 60px; height: 50px"
              :src="scope.row.defaultImage"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column label="商品ID" align="center" prop="goodsId"/>
        <el-table-column label="商品名称" align="center" prop="goodsName"/>
        <el-table-column label="协议价" align="center" :formatter="formatePrice" prop="jsPrice"/>
        <el-table-column label="物流运费" align="center" :formatter="formatePrice" prop="wlPrice"/>
        <el-table-column label="市场售价" align="center" :formatter="formatePrice" prop="scPrice"/>


        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)"
            >编辑
            </el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
            >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
      <!-- 添加或修改goods对话框 -->
      <el-dialog :title="title" :visible.sync="open" width="80%" append-to-body>
        <IndexBtn :option="form" @closeDialog="closeDialog"/>
      </el-dialog>
    </el-card>
  </div>
</template>
<script>
  import IndexBtn from '../add'
  import {listGoods, getGoods, delGoods, addGoods, updateGoods, OffSaleList, Onsale} from '@/api/module/goods'

  export default {
    name: "goods",
    data() {
      return {
        fullHeight: '',
        // 遮罩层
        tableHeight: 500,
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // goods表格数据
        goodsList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          isOnsale: 0
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          goods_name: [
            {required: true, message: "商品名称不能为空", trigger: "blur"}
          ],
        }
      };
    },
    components: {
      IndexBtn
    },
    created() {
      this.getList();
      this.$nextTick(() => {
        this.fullHeight = document.getElementsByClassName('box-card')[0].clientHeight
      })

    },
    watch: {
      fullHeight(val, oldval) {
        // console.log(val)
        this.tableHeight = val - 150
      }
    },
    methods: {
      //格式化价格
      formatePrice(row, s, value, i) {
        var nm = 0
        var money = value
        if (money > 0) {
          nm = money / 100
        }
        return nm
      },
      /** 查询goods列表 */
      getList() {
        this.loading = true;
        listGoods(this.queryParams).then(response => {
          if (response.data != null) {
            this.goodsList = response.data.data.list;
            this.total = response.data.data.count;
          }
          this.loading = false;
        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {};
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.goodsId)
        this.single = true
        this.multiple = !selection.length
      },
      /** 上架操作 */
      handleOnsale() {
        Onsale({"ids": this.ids, "status": 1}).then(response => {
          this.msgSuccess("成功申请" + response.data.length + "个商品");
        });
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.open = true;
        this.title = "添加goods";
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        const goods_id = row.goodsId
        this.$router.push({
          path: '/system/goods/add', query: {goodsId: goods_id}

        });
        // getGoods(goods_id).then(response => {
        //   this.form = response.data;
        //   this.open = true;
        //   this.title = "修改goods";
        // });
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.goods_id != null) {
              updateGoods(this.form).then(response => {
                if (response.code === 0) {
                  this.msgSuccess("修改成功");
                  this.open = false;
                  this.getList();
                }
              });
            } else {
              addGoods(this.form).then(response => {
                if (response.code === 0) {
                  this.msgSuccess("新增成功");
                  this.open = false;
                  this.getList();
                }
              });
            }
          }
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const goods_ids = row.goodsId;
        this.$confirm('是否确认删除goods编号为"' + goods_ids + '"的数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function () {
          return delGoods(goods_ids);
        }).then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        }).catch(function () {
        });
      },
      // 子组件关闭父组件对话框
      closeDialog(params) {
        this.open = params;
      }
    } //methods结束
  };
</script>
<style scoped>
  .app-container {
    height: 100%;
  }

  .box-card {
    height: 100%;
  }

  .box-card /deep/ .el-card__body {
    height: 100%;
    overflow: hidden;
  }

  .el-table {
    height: calc(100% - 120px);
  }

  /deep/ .el-dialog {
    height: 90%;
    overflow: hidden;
  }

  /deep/ .el-dialog__body {
    height: 100%;
    //height: calc(100% - 20px);
    overflow-x: hidden;
    overflow-y: scroll;
  }


</style>