<template>
  <div class="mod-config" style="height: calc(100vh - 180px );">
   <el-button type="primary" size="small" @click="addOrUpdateHandle()" style="margin-bottom: 20px;float: right;"
        >新增广告</el-button
      >
    <div style="height: calc(100% - 40px );">
      <el-table
        :data="dataList"
        border
        height="90%"
        v-loading="dataListLoading"
        style="width: 100%;"
      >
        <el-table-column
          prop="title"
          header-align="center"
          align="center"
          label="APP"
          width="200"
        >
          <template slot-scope="scope">
            <div>
              <span v-if="scope.row.appType == 0">疯子读书</span>
              <span v-if="scope.row.appType == 1">吴门医述</span>
              <span v-if="scope.row.appType == 2">众妙之门</span>
              <span v-if="scope.row.appType == 3">心灵空间</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="title"
          header-align="center"
          align="center"
          label="广告类型"
        >
          <template slot-scope="scope">
            <div>
              <span v-if="scope.row.type == 0">商品</span>
              <span v-if="scope.row.type == 1">充值</span>
              <span v-if="scope.row.type == 2">VIP</span>
              <span v-if="scope.row.type == 3">活动</span>
            </div>
          </template>
        </el-table-column>

        <el-table-column
          prop="title"
          header-align="center"
          align="center"
          label="广告图片"
        >
          <template slot-scope="scope">
            <img
              v-if="scope.row.icon != ''"
              :src="scope.row.icon"
              alt=""
              style="width: 50px; height: 70px;"
            />
          </template>
        </el-table-column>
        <el-table-column
        min-width="200"
          prop="title"
          header-align="center"
          align="left"
          label="关联信息"
        >
          <template slot-scope="scope">
            <div v-if="scope.row.type == 0">
              <div
                v-if="JSON.stringify(scope.row.shopProduct) != '{}'&&scope.row.shopProduct"
                style=""
              >
               
                <div
                  style="display: flex;align-items: center;
            justify-content: space-between;"
                >
                  <div
                    style="background-color: #b0b0b0;width: 40px;height: 60px;"
                  >
                    <img
                      v-if="
                       scope.row.shopProduct&& JSON.stringify(scope.row.shopProduct) != '{}' &&
                          scope.row.shopProduct.productImages != ''
                      "
                      :src="scope.row.shopProduct.productImages"
                      width="40"
                      height="60"
                      class="tableImg"
                    />
                    <span
                      v-else
                      style="text-align: center;line-height: 70px;font-size: 10px;"
                      >暂无封面图</span
                    >
                  </div>
                  <div style="width: calc(100% - 60px);line-height: 20px;">
                    <div>
                      <span style="font-weight: bold;">商品ID：</span>
                      {{ scope.row.shopProduct.productId }}
                    </div>
                    <div>
                      <span style="font-weight: bold;">商品名称：</span
                      >{{ scope.row.shopProduct.productName }}
                    </div>
                    <div>
                      <span style="font-weight: bold;">价格：</span
                      >{{ scope.row.shopProduct.price }} <span style="font-weight: bold;margin-left: 20px;">活动价：</span
                      >{{ scope.row.shopProduct.activityPrice }}
                    </div>
                   
                  </div>
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          width="160"
          prop="createTime"
          header-align="center"
          align="center"
          label="创建日期"
        >
        </el-table-column>

        <el-table-column
          fixed="right"
          header-align="center"
          align="center"
          width="140"
          label="操作"
        >
          <template slot-scope="scope">
            <div>
              <el-button
                type="text"
                size="small"
                @click="addOrUpdateHandle(scope.row)"
                >修改</el-button
              >
              <el-button
                type="text"
                size="small"
                style="color: red;"
                @click="deleteHandle(scope.row.id)"
                >删除</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update
      v-if="addOrUpdateVisible"
      ref="addOrUpdate"
      :APPList="APPList"
      :typeList="typeList"
      @refreshDataList="getDataList"
    ></add-or-update>
  </div>
</template>

<script>
import AddOrUpdate from "./advertisement-add-or-update";
export default {
  data() {
    return {
      typeList: [
        { label: "商品", value: 0 },
        { label: "充值", value: 1 },
        { label: "VIP", value: 2 },
        { label: "活动", value: 3 }
      ],
      selectQueryApp: null,
      APPList: [
        { label: "疯子读书", value: 0 },
        { label: "吴门医述", value: 1 },
        { label: "众妙之门", value: 2 },
        { label: "心灵空间", value: 3 }
      ],
      dataForm: {
        key: ""
      },
      query: {
        type: "",
        title: ""
      },
      dataList: [],
      delFlag: false,
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      addOrUpdateVisible: false,
      urlList: {
        list: "/master/mainAd/getMainAdList"
      }
    };
  },
  components: {
    AddOrUpdate
  },
  activated() {
    if (this.$route.query.upPageInde != null) {
      this.pageIndex = this.$route.query.upPageIndex;
      console.log(this.pageIndex);
    }
    this.getDataList();
  },
  methods: {
    // 获取数据列表
    getDataList() {
      console.log("this.selectQueryApp at line 195:", this.selectQueryApp);
      this.dataListLoading = true;
      this.$http
        .request({
          url: this.$http.adornUrl(this.urlList.list),
          method: "POST",
          data: {},
          header: {
            //默认 无 说明：请求头
            "Content-Type": "application/json"
          }
        })
        .then(({ data }) => {
          if (data && data.code === 0) {
            this.dataList = data.list;
            console.log('this.dataList at line 230:', this.dataList)
            // this.totalPage = data.result.total;
          } else {
            this.dataList = [];
            // this.totalPage = 0;
          }
          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(row) {
    console.log('row at line 258:', row)
      this.addOrUpdateVisible = true;
      this.$nextTick(() => {

        this.$refs.addOrUpdate.init({
         ...row
        });
    });     
    },
    // 删除
    deleteHandle(id) {
      this.$confirm(
        `确定对[id=${id}]进行[${id ? "删除" : "删除"}]操作?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      ).then(() => {
        this.$http({
          url: this.$http.adornUrl("/master/mainAd/delMainAd"),
          method: "POST",
          data: {
            id: id
          }
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.$message({
              message: "操作成功",
              type: "success",
              
             
            });

            this.$nextTick(() => {
              this.getDataList();
            });
          } else {
            this.$message.error(data.msg);
          }
        });
      });
    },
    // 开关变化
    SwitchChange(event) {
      /*点击时他会自动把你绑定的值变更，直接去请求数据就可以了*/
      var parms = {
        delFlag: event.delFlag,
        id: event.id
      };
      this.$http({
        url: this.$http.adornUrl("/book/book/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);
    },
    chapterHandle(id, row) {
      if (row.novel == "") {
        this.$alert("请上传电子书文件后在进行此操作", "提示", {
          confirmButtonText: "好的"
        });
        return false;
      }
      this.$http({
        url: this.$http.adornUrl("/book/book/getChapter"),
        method: "get",
        params: this.$http.adornParams({
          id: id
        })
      }).then(res => {
        this.$message({
          message: "成功",
          type: "success"
        });
        this.loading = false;
        this.getDataList();
      });
    },
    contentHandle(id) {
      this.$http({
        url: this.$http.adornUrl("/book/bookchaptercontent/getBookVoices"),
        method: "get",
        params: this.$http.adornParams({
          id: id
        })
      }).then(res => {
        this.$message({
          message: "成功",
          type: "success"
        });
        this.loading = false;
        this.getDataList();
      });
    },
    voicesHandle(id) {
      //allVoices
      this.$http({
        // url: this.$http.adornUrl('/book/bookchaptercontent/allVoices'),
        url: this.$http.adornUrl("/book/bookchaptercontent/AllVOices"),
        method: "get",
        params: this.$http.adornParams({
          id: id
        })
      }).then(res => {
        console.log("book/bookchaptercontent/AllVOices");
        this.$message({
          message: "成功",
          type: "success"
        });
        this.loading = false;
        this.getDataList();
      });
    }
  }
};
</script>
