<template>
  <div style="padding: 20px;background: #f6f8f9;">
    <el-card class="card" style="margin-bottom: 20px;border: none;
box-shadow: none;" shadow="never" >
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
        <el-form-item label="店铺" prop="storeId">
          <el-select v-model="queryParams.storeId" filterable placeholder="请选择店铺" clearable style="width: 100%">
            <el-option v-for="item in storeList"
                       :key="item.id" clearable
                       :label="item.name" :value="item.id"
                       @keyup.enter.native="handleQuery"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="路由" prop="routeUrl">
          <el-input
            v-model="queryParams.routeUrl"
            placeholder="请输入路由地址"
            clearable
            style="width: 240px;"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item style="float: right;margin-right: 0px">
          <el-button type="primary" icon="el-icon-search"  @click="handleQuery">搜索</el-button>
          <!--          <el-button icon="el-icon-refresh"  @click="resetQuery">重置</el-button>-->

        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="card" style="border: none;
box-shadow: none;" shadow="never">
      <div style="margin-bottom: 10px;border: none;
box-shadow: none;" shadow="never">
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="handleAdd"

        >新增配置</el-button>
      </div>

      <el-table ref="tables" v-loading="loading" :data="list" border>
        <el-table-column label="ID" align="center" prop="id" width="80" />
        <el-table-column label="店铺" align="center" prop="storeId" >
          <template slot-scope="scope">
            <span>{{scope.row.storeId ? storeName(storeList,scope.row.storeId) : "--"}}</span>
          </template>
        </el-table-column>
        <el-table-column label="轮播图" align="center" prop="bannerUrl"  >
          <template slot-scope="scope">
            <span v-if="!scope.row.bannerUrl">--</span>
            <img class="imgBanner" v-else :src="getBannerUrl(scope.row.bannerUrl)">
          </template>
        </el-table-column>
        <el-table-column label="路由地址" align="center" prop="routeUrl" />
        <el-table-column label="备注" align="center" prop="remark" >
          <template slot-scope="scope">
            <span>{{scope.row.remark ? scope.row.remark : "--"}}</span>
          </template>
        </el-table-column>
        <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.id)"
            >修改</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.page"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </el-card>

    <el-dialog
      :title="title" width="35%"
      :visible.sync="dialogVisible">
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="店铺" prop="storeId">
          <el-select v-model="form.storeId" filterable placeholder="请选择店铺" style="width: 100%">
            <el-option v-for="item in storeList"
                       :key="item.id"
                       :label="item.name" :value="item.id+''"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="轮播图" prop="bannerUrl">
          <imgUpload v-if="flag" :imgUrl="form.bannerUrl" :limit="1" @input="getImgUrl"></imgUpload>
        </el-form-item>
        <el-form-item label="路由地址" prop="routeUrl">
          <el-input v-model="form.routeUrl" placeholder="请填写路由地址"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="form.remark" type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="clear">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import {
  addIndexBanner,
  deleteIndexBanner,
  indexBannerInfo,
  listIndexBanner,
  updateIndexBanner
} from "@/api/indexBanner/indexBanner";
import {ljStoreList} from "@/api/indexBanner/ljstore";
import imgUpload from "@/views/indexBanner/imgUpload/imgUpload.vue"

export default {
  components: {imgUpload},
  data(){
    return{
      queryParams:{
        page:1,
        pageSize:10,
      },
      list:[],
      loading:false,
      dialogVisible:false,
      title:'',
      total:0,
      storeList:[],
      baseUrl:process.env.VUE_APP_BASE_API,
      form:{},
      flag: false,
      rules:{
        storeId: [
          { required: true, message: '请选择店铺', trigger: 'change' }
        ],
        bannerUrl: [
          { required: true, message: '请插入活动图片', trigger: 'change' }
        ],
        routeUrl: [
          { required: true, message: '请填写路由地址', trigger: 'change' }
        ],
      },
    }
  },
  created() {
    this.getList()
    this.getStoreList()
  },
  methods:{
    // 获取图片url地址
    getImgUrl(val){
      let list = val.split("/static")
      this.form.bannerUrl = "/static"+list[list.length-1]
    },
    // 返回图片路径
    getBannerUrl(url){
      let imgurl = ""
      if (url.includes("http")){
        imgurl = url
      }else {
        imgurl = this.baseUrl + url
      }
      return imgurl;
    },
    // 获取店铺名称
    storeName(list,id){
      let name = ""
      list.forEach(item => {
        if (item.id == id){
          name = item.name
        }
      })
      return name;
    },
    // 获取所有店铺信息
    getStoreList(){
      ljStoreList().then(res => {
        if (res.data){
          this.storeList = res.data
        }
      })
    },
    // 获取列表信息
    getList(){
      listIndexBanner(this.queryParams).then(res => {
        if (res.data){
          this.list = res.data.records;
          this.total = res.data.total;
        }
      })
    },
    // 新增轮播图配置信息
    handleAdd(){
      this.form = {}
      this.title = "新增配置"
      this.dialogVisible = true;
      this.flag = true
    },
    // 修改轮播图配置信息
    handleUpdate(id){
      indexBannerInfo(id).then(res => {
        if (res.data){
          this.form = res.data
          this.title = "修改配置"
          this.dialogVisible = true;
          this.flag = true
        }
      })
    },
    // 删除轮播图配置信息
    handleDelete(row){
      const name = this.storeName(this.storeList,row.storeId) || this.id;
      this.$modal.confirm('是否确认删除"' + name + '"的路由配置信息？').then(function() {
        return deleteIndexBanner(row.id);
      }).then(() => {
        this.queryParams.page = 1
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    // 提交信息
    submitForm(){
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id){
            updateIndexBanner(this.form).then(res => {
              if (res.data==1){
                this.$modal.msgSuccess("修改成功")
                this.dialogVisible = false
                this.flag = false
                this.queryParams.page = 1
                this.getList()
                this.getStoreList()
              }
            })
          }else {
            addIndexBanner(this.form).then(res => {
              if (res.data==1){
                this.$modal.msgSuccess("添加成功")
                this.dialogVisible = false
                this.flag = false
                this.getList()
                this.getStoreList()
              }else {
                this.$modal.msgError("当前店铺已存在跳转此页面的路由信息")
              }
            })
          }
        }
      })
    },
    // 取消按钮
    clear(){
      this.dialogVisible = false
      this.flag = false
    },
    // 搜索按钮操作
    handleQuery() {
      this.queryParams.page = 1;
      this.getList();
    },
  }
}
</script>

<style lang="scss" scoped>
  .imgBanner{
    width: 150px;
    height: 100px;
  }
</style>
