<template>
  <div>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form>
        <el-form-item>
          <div class="tool-wrap fl">
            <el-select v-model="curClassify" placeholder="请选择" @change="HandleSelectChange">
              <el-option
                v-for="(item,index) in totalData.classifyList"
                :key="index"
                :label="item.name"
                :value="item.classify"
              ></el-option>
            </el-select>
            <el-button @click="handleAdd()" v-if="true" type="primary">新增</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-col>

    <!-- 列表 -->
    <el-table
      :data="totalData.dataList"
      highlight-current-row
      v-loading="listLoading"
      style="width: 100%;"
    >
      <el-table-column label="缩略图">
        <template slot-scope="scope">
          <img class="poster" :src="scope.row.bannerPic" alt />
        </template>
      </el-table-column>
      <el-table-column label="所属分类">
        <template slot-scope="scope">{{formatClassify(scope.row)}}</template>
      </el-table-column>
      <el-table-column label="跳转方式">
        <template slot-scope="scope">{{formatJumpType(scope.row)}}</template>
      </el-table-column>

      <el-table-column label="跳转路径" min-width="200px">
        <template slot-scope="scope">
          <div v-if="scope.row.linkType == 'minipro'">{{scope.row.miniproAppId}}</div>
          <div>{{scope.row.link}}</div>
        </template>
      </el-table-column>

      <el-table-column label="操作" :width="curClassify ? 300 : 150">
        <template slot-scope="scope">
          <el-button v-if="curClassify" size="small" @click="upHandler(scope.$index, scope.row)">上移</el-button>
          <el-button
            v-if="curClassify"
            size="small"
            @click="downHandler(scope.$index, scope.row)"
          >下移</el-button>
          <el-button size="small" @click="modifyHandler(scope.$index, scope.row)">修改</el-button>
          <el-button size="small" type="danger" @click="deleteHandler(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--编辑界面-->
    <el-dialog :title="dialogTitle" :visible.sync="editFormVisible" :close-on-click-modal="false">
      <el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
        <el-form-item label="分类" prop="classify">
          <el-select
            v-model="editForm.classify"
            placeholder="请选择"
            @change="HandleSelectDialogChange"
          >
            <el-option
              v-for="(item,index) in totalData.classifyDialogList"
              :key="index"
              :label="item.name"
              :value="item.classify"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="头图" prop="pic">
          <img
            class="upload-poster-image"
            v-show="editForm.bannerPic"
            :src="editForm.bannerPic"
            alt
          />
          <upload-item pid="p1" v-on:upload-success="onUploadSuccess"></upload-item>
          <!-- <el-input v-model="editForm.pic"></el-input> -->
        </el-form-item>

        <el-form-item label="跳转类型" prop="linkType">
          <el-select v-model="editForm.linkType" placeholder="请选择">
            <el-option
              v-for="(item,index) in jumpTypeList"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="小程序ID" prop="miniproAppId" v-if="editForm.linkType == 'minipro'">
          <el-input v-model="editForm.miniproAppId"></el-input>
        </el-form-item>

        <el-form-item label="跳转链接" prop="link" v-if="editForm.linkType != 'none'">
          <el-input v-model="editForm.link"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="editFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
      </div>
    </el-dialog>

    <!--分页导航-->
    <el-col :span="24" class="toolbar fl pagination-wrap">
      <div class="page-tips">总共{{total}}条记录，每页{{pageSize}}条，总共{{pageNum}}页</div>
      <el-pagination
        layout="prev, pager, next"
        @current-change="handleCurrentChange"
        :page-size="pageSize"
        :total="total"
        style="float:right;"
      ></el-pagination>
    </el-col>
  </div>
</template>

<script>
import {
  getClassifyList,
  getBannerList,
  saveBanner,
  deleteBanner,
  changeBanner,
  request
} from "../../api/api.js";
import UploadItem from "../../components/UploadItem";

export default {
  data() {
    return {
      key: "value",
      page: 1,
      pageSize: 10,
      total: 0,
      totalData: {
        dataList: [],
        classifyList: [],
        classifyDialogList: []
      },
      classifyMap: {},
      jumpType: {},
      jumpTypeList: [
        {
          label: "无跳转",
          value: "none"
        },
        {
          label: "网页",
          value: "web"
        },
        {
          label: "小程序",
          value: "minipro"
        }
      ],
      listLoading: false,
      editLoading: false,
      editFormVisible: false,
      dialogTitle: "编辑",
      //编辑界面数据
      editForm: {
        bannerCode: "",
        bannerPic: "",
        link: "",
        classify: "",
        linkType: "",
        miniproAppId: ""
      },
      editFormRules: {
        bannerPic: [
          {
            required: true,
            message: "请输入头图地址",
            trigger: "blur"
          }
        ],
        link: [
          {
            required: true,
            message: "请输入跳转链接",
            trigger: "blur"
          }
        ],
        miniproAppId: [
          {
            required: true,
            message: "请输入小程序ID",
            trigger: "blur"
          }
        ],
        classify: [{ required: true, message: "请选择分类", trigger: "blur" }]
      },
      curClassify: ""
    };
  },
  computed: {
    pageNum() {
      return Math.ceil(this.total / this.pageSize);
    }
  },
  methods: {
    name() {},
    onUploadSuccess(evtAny) {
      let { pid, url } = evtAny;
      if (pid == "p1") {
        this.$set(this.editForm, "bannerPic", url);
      } else if (pid == "v1") {
        // this.$set(this.editForm, 'vedioUrl', url)
      }
    },
    // 获取列表
    reqQuery() {
      let data = {
        page: this.page,
        size: this.pageSize,
        classify: this.curClassify
      };
      getBannerList(data).then(result => {
        let { content, code } = result;
        let { list, total } = content;
        this.total = total;
        this.$set(this.totalData, "dataList", list);
        console.log("this.totalData:", this.totalData.dataList);
      });
    },
    reqGetClassifyList() {
      let data = {};
      getClassifyList(data)
        .then(result => {
          let { content, code } = result;
          this.$set(this.totalData, "classifyDialogList", content);
          //深复制
          let content2 = Object.assign([], content);
          content2.forEach(element => {
            this.classifyMap[element.classify] = element.name;
          });
          content2.unshift({
            classify: "",
            dispayType: "",
            name: "全部"
          });
          this.$set(this.totalData, "classifyList", content2);
          this.reqQuery();
        })
        .catch(err => {});
    },
    upHandler(index, row) {
      let lastItem = this.totalData.dataList[index - 1];
      let curItem = this.totalData.dataList[index];
      this.changeDataHandler(lastItem, curItem);
    },
    downHandler(index, row) {
      let lastItem = this.totalData.dataList[index + 1];
      let curItem = this.totalData.dataList[index];
      this.changeDataHandler(lastItem, curItem);
    },
    changeDataHandler(lastItem, curItem) {
      console.log("lastItem:", lastItem);
      console.log("curItem:", curItem);
      if (lastItem && curItem) {
        let data = {
          lbc: lastItem.bannerCode,
          rbc: curItem.bannerCode
        };
        changeBanner(data)
          .then(result => {
            this.$notify({
              title: "成功",
              message: "操作成功",
              type: "success"
            });
            this.reqQuery();
          })
          .catch(err => {});
      }
    },

    // 修改 显示修改对话框
    modifyHandler(index, row) {
      this.dialogTitle = "修改";
      this.editFormVisible = true;
      try {
        this.$refs["editForm"].resetFields();
      } catch (error) {}
      this.editForm = Object.assign({}, row);
    },
    deleteHandler(index, row) {
      let data = {
        bannerCode: row.bannerCode
      };
      console.log("deleteHandler data:", data);
      this.$confirm("确认删除吗？", "提示", {}).then(() => {
        deleteBanner(data)
          .then(result => {
            let { code, content } = result;
            if (code == 200) {
              this.$notify({
                title: "成功",
                message: "删除成功",
                type: "success"
              });
            } else {
            }
            this.editFormVisible = false;
            this.reqQuery();
          })
          .catch(err => {});
      });
    },
    // 新增
    handleAdd() {
      this.editForm = {
        bannerCode: "",
        bannerPic: "",
        link: "",
        linkType: "web",
        classify: "",
        miniproAppId : ""
      };
      try {
        this.$refs["editForm"].resetFields();
      } catch (error) {}
      this.editFormVisible = true;
      this.dialogTitle = "新增";
    },
    // 提交 新增/修改
    editSubmit() {
      let data = this.editForm;
      this.$refs.editForm.validate(valid => {
        if (valid) {
          this.editLoading = true;
          saveBanner(data)
            .then(result => {
              let { code, content } = result;
              if (code == 200) {
                this.$notify({
                  title: "成功",
                  message: "提交成功",
                  type: "success"
                });
              } else {
              }
              this.editLoading = false;
              this.editFormVisible = false;
              this.reqQuery();
            })
            .catch(err => {});
        }
      });
    },
    // 点击页数
    handleCurrentChange(val) {
      this.page = val;
      this.reqQuery();
    },
    HandleSelectChange() {
      this.reqQuery();
    },
    // 编辑时选择分类
    HandleSelectDialogChange() {},
    formatClassify(data) {
      return this.classifyMap[data.classify];
    },
    formatJumpType(data) {
      let type = this.jumpType[data.linkType];
      if (!type) {
        type = this.jumpType["web"];
      }
      return type;
    }
  },

  created() {
    this.jumpTypeList.forEach(element => {
      this.jumpType[element.value] = element.label;
    });
    this.reqGetClassifyList();
  },
  components: {
    UploadItem
  }
};
</script>

<style lang="less" scoped>
.tool-wrap {
  color: #333333;
}

.pagination-wrap {
  .page-tips {
    height: 32px;
    line-height: 32px;
    color: #333333;
  }
}

.fl {
  display: flex;
  justify-content: space-between;
}

.fle {
  display: flex;
  justify-content: flex-end;
}
</style>