<template>
  <div class="mod-config" >
    <el-form
      :inline="true"
      :model="dataForm"
      @keyup.enter.native="getDataList()"
    >
      <el-form-item>
        <el-input
          v-model="dataForm.key"
          placeholder="商品名"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-select v-model="dataForm.goodsType" placeholder="请选择商品类型" clearable >
          <el-option
            v-for="item in goodsTypeList"
            :key="item.dictType"
            :label="item.dictValue"
            :value="item.dictType"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          @click="
            pageIndex = 1;
            getDataList();
          "
          >查询</el-button
        >
        <el-button
          v-if="isAuth('book:shopproduct:save')"
          type="primary"
          @click="addOrUpdateHandle()"
          >新增</el-button
        >
        <el-button
          v-if="isAuth('book:shopproduct:delete')"
          type="danger"
          @click="deleteHandle()"
          :disabled="dataListSelections.length <= 0"
          >批量删除</el-button
        >
      </el-form-item>
    </el-form>
    <el-table
    height="70vh"
      :data="dataList"
      border
      v-loading="dataListLoading"
      @selection-change="selectionChangeHandle"
      style="width: 100%"
    >
      <el-table-column
        type="selection"
        header-align="center"
        align="center"
        width="50"
      >
      </el-table-column>
      <el-table-column
        label="商品ID"
        width="70"
        align="center"
        prop="productId"
      >
      </el-table-column>
      <el-table-column
        prop="createTime"
        header-align="center"
        align="center"
        label="创建时间"
      >
      </el-table-column>
      <el-table-column
        prop="productName"
        header-align="center"
        align="center"
        label="商品名称"
      >
      </el-table-column>
      <el-table-column
        prop="price"
        header-align="center"
        align="center"
        label="商品价格"
      >
      </el-table-column>
      <el-table-column
        prop="productStock"
        header-align="center"
        align="center"
        label="库存剩余"
      >
      </el-table-column>
      <el-table-column header-align="center" align="center" label="商品图">
        <template slot-scope="scope">
          <img
            v-if="scope.row.productImages != ''"
            :src="scope.row.productImages"
            width="40"
            height="60"
            class="tableImg"
          />
        </template>
      </el-table-column>
      <el-table-column header-align="center" align="center" label="VIP优惠图书" width="120px">
        <template slot-scope="scope">
          {{ scope.row.isVipPrice == 1 ? '是' : '否' }}
          <!-- <el-switch
  v-model="scope.row.isVipPrice"
  active-color="#13ce66"
  inactive-color="#bbb">
</el-switch> -->
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        header-align="center"
        align="center"
        width="240"
        label="操作"
      >
        <template slot-scope="scope">
          <!-- <el-button
            type="text"
            size="small"
            @click="addOrUpdateHandle(scope.row.productId)"
            >修改</el-button
          > -->
          <el-button
            type="text"
            size="small"
           @click.native="handleEditCurriculum(scope.row.productId)"
            >新版修改</el-button
          > 
          <el-button
            style="color:red"
            type="text"
            size="small"
            @click="deleteHandle(scope.row.productId)"
            >删除</el-button
          >
          <el-dropdown>
            <el-button
            type="text"
            size="small"
           
            >更多操作<i class="el-icon-arrow-down el-icon--right"></i></el-button
          >
            <!-- <span type="primary" size="mini" class="el-dropdown-link">
              更多操作<i class="el-icon-arrow-down el-icon--right"></i>
            </span> -->
            <el-dropdown-menu slot="dropdown">
              <!-- <el-dropdown-item
                @click.native="addOrUpdateHandle(scope.row.productId)"
                >修改</el-dropdown-item
              >
              <el-dropdown-item
                @click.native="handleEditCurriculum(scope.row.productId)"
                >新版修改</el-dropdown-item
              > -->
              <el-dropdown-item
                @click.native="showLinkCoupon(scope.row.productId)"
                >购买赠优惠券</el-dropdown-item
              >
              <el-dropdown-item
                @click.native="handleEditCorrelation(scope.row.productId)"
                >图书与课程</el-dropdown-item
              >
              <el-dropdown-item
                @click.native="handleEditTags(scope.row.productId)"
                >修改标签</el-dropdown-item
              >
              <!-- <el-dropdown-item  style="color:red"
                @click.native="deleteHandle(scope.row.productId)"
                >删除</el-dropdown-item
              > -->
            </el-dropdown-menu>
          </el-dropdown>
         
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper"
    >
    </el-pagination>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update
      v-if="addOrUpdateVisible"
      ref="addOrUpdate"
      @refreshDataList="getDataList"
      @showchooseBookf="showchooseBookf"
    ></add-or-update>

    <curriculum
      v-if="curriculumVisible"
      ref="curriculum"
      @refreshDataList="getDataList"
      @showchooseBookf="showchooseBookf"
    ></curriculum>

    <commonTags ref="commonTags"></commonTags>
    <correlation ref="correlation"></correlation>
    <choose-book v-if="chooseBookVisible" :bookIds = bookIds ref="chooseBook" :chooseBookVisible = chooseBookVisible @closeBookf = "closeBookf"></choose-book>  
    <pro-coupon-list v-if="LinkCouponVisible" :productId="curProductId" @close="proCouponClose"></pro-coupon-list>
  </div>
</template>

<script>
import proCouponList from "./proCouponList.vue";
import chooseBook from "./chooseBook.vue";
import curriculum from "./curriculum.vue";
import AddOrUpdate from "./shopproduct-add-or-update";
// import AddOrUpdate from "./shopproduct-add-or-update";
import commonTree from "@/views/components/commonBookTags/tags.vue";

import commonTags from "./commonBookTags/commonTags1.vue";
import correlation from "./commonBookTags/correlation.vue";
export default {
  data() {
    return {
      dataForm: {
        key: "",
        goodsType: "",
      },  goodsTypeList: [],
      dataList: [],
      publishStatus: false,
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      addOrUpdateVisible: false,
      chooseBookVisible: false,
      curriculumVisible: false,
      bookIds: [],
      LinkCouponVisible:false, // 显示优惠券弹窗
      curProductId: undefined, // 当前的商品id

    };
  },
  components: {
    curriculum,
    AddOrUpdate,
    chooseBook,
    commonTags,
    correlation,
    proCouponList
  },
  activated() {
    this.getDataList();
    this.getGoodsTypeList();
  },
  methods: {
    showLinkCoupon(id) {
      this.curProductId = id;
      this.LinkCouponVisible = true;

    },
    proCouponClose() {
      this.LinkCouponVisible = false;
    },

    getGoodsTypeList() {
      this.$http({
        url: this.$http.adornUrl("/book/sysdictdata/selectByType/goodsType"),
        method: "get"
      }).then(({ data }) => {
        // console.log(data.dataList)
        this.goodsTypeList = data.dataList;
      });
    },
    handleEditTags(id) {
      this.$nextTick(() => {
        this.$refs.commonTags.open(id);
      });
    },
    handleEditCorrelation(id) {
      this.$nextTick(() => {
        this.$refs.correlation.open(id);
      });
    },
    closeBookf() {
      this.chooseBookVisible = false;
    },
    showchooseBookf(e) {
      // 显示图书列表
      this.chooseBookVisible = true;
      // console.log(this.bookIds,'this.bookIds')
      // this.$nextTick(() => {
      //   this.$refs.chooseBook.getBookList()
      //   this.bookIds = e.bookIds
      //   })
    },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true;

      this.$http
          .request({
            url: this.$http.adornUrl(`/master/shopProduct/listByPage`),
            method: "POST",
            data: {
              current: this.pageIndex,
          limit: this.pageSize,
          productName: this.dataForm.key,
          goodsType: this.dataForm.goodsType
            },
            header: {
              //默认 无 说明：请求头
              "Content-Type": "application/json"
            }
          })
     .then(({ data }) => {
        if (data && data.code === 0) {
          this.dataList = data.result.records;
          this.totalPage = data.result.total;
          this.pageIndex = data.result.current
        } else {
          this.dataList = [];
          this.totalPage = 0;
          this.pageIndex = 1
        }
        this.dataListLoading = false;
      });
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getDataList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getDataList();
    },
    // 多选
    selectionChangeHandle(val) {
      this.dataListSelections = val;
    },
    // 新增 / 修改
    addOrUpdateHandle(id) {
      console.log(11111111111111111);
      this.addOrUpdateVisible = true;
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id);
      });
    },
    handleEditCurriculum(id) {
      this.curriculumVisible = true;
      this.$nextTick(() => {
        this.$refs.curriculum.init(id);
      });
    },
    // 删除
    deleteHandle(id) {
      var ids = id
        ? [id]
        : this.dataListSelections.map(item => {
            return item.productId;
          });
      this.$confirm(
        `确定对[id=${ids.join(",")}]进行[${id ? "删除" : "批量删除"}]操作?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      ).then(() => {
        this.$http({
          url: this.$http.adornUrl("/book/shopproduct/delete"),
          method: "post",
          data: this.$http.adornData(ids, false)
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.$message({
              message: "操作成功",
              type: "success",
              duration: 1500,
              onClose: () => {
                this.getDataList();
              }
            });
          } else {
            this.$message.error(data.msg);
          }
        });
      });
    },
    SwitchChange(event) {
      /*点击时他会自动把你绑定的值变更，直接去请求数据就可以了*/
      var parms = {
        publishStatus: event.publishStatus,
        productId: event.productId
      };
      // console.log(parms)
      this.$http({
        url: this.$http.adornUrl("/book/shopproduct/update"),
        method: "post",
        data: parms
      })
        .then(res => {
          this.$message({
            message: "成功",
            type: "success"
          });
          this.loading = false;
          this.getDataList();
        })
        .catch(error => {
          this.loading = false;
          console.log(error);
        });
      console.log(event);
    }
  }
};
</script>
<style scoped>

::v-deep.el-table .el-table__cell{
  padding: 4px 0 !important;
}

</style>
