<style>
  .pluglistDiv .query-box {
    width: 100%;
    padding: 0 0 20px;
    border-bottom: 1px solid #ccc;
    position: relative;
  }

  .pluglistDiv .normalBtn {
    color: #fff;
    padding: 0 15px;
    height: 30px;
    background: #e95252;
    border: 1px solid #e95252;
    cursor: pointer;
    border-radius: 15px;
    margin-left: 10px;
    outline: none;
  }

</style>
<template>
  <div class="pluglistDiv">
    <div class="query-box">
      名称： <el-input type="text" style="width:234px;" size="small" v-model="msg.PlugName" clearable
        @keyup.enter.native="msg.pageIndex=1,getPageList()" @clear="msg.pageIndex=1,getPageList()"></el-input>
      <button type="button" class="normalBtn"
        @click="plugTitle='新增营销插件',marketingPlugDialog=true,resetMsg()">新增</button>
      <button type="button" class="normalBtn" @click="CommonJump('setmarketingplug',{})">设置营销插件</button>
    </div>
    <table class="commonTable" border="0" cellspacing="0" cellpadding="0" v-loading="loading">
      <tr>
        <th>编号</th>
        <th>类型</th>
        <th>名称</th>
        <th>子项名称</th>
        <th>链接</th>
        <th>图标</th>
        <th>样式</th>
        <th>状态</th>
        <th>操作</th>
      </tr>
      <tr v-for="(item,index) in dataList" :key="index">
        <td>{{item.PId}}</td>
        <td>{{item.PlugTypeName}}</td>
        <td>{{item.PlugName}}</td>
        <td>{{item.PlugSubName}}</td>
        <td>{{item.PlugUrl}}</td>
        <td>
          <img :src="item.Icon" style="width: 50px; height: 50px; display: block; padding-left:5px;">
        </td>
        <td>{{item.IconClass}}</td>
        <td>
          <el-switch v-model="item.Status" active-color="#409EFF" :active-value="0" :inactive-value="1"
            @change="delMarketingPlug(item)">
          </el-switch>
        </td>
        <td>
          <el-tooltip class="item" effect="dark" content="修改" placement="top-start">
            <el-button type="primary" icon="el-icon-edit" @click="getMarketingPlug(item.PId)" circle
              style="padding:6px;">
            </el-button>
          </el-tooltip>
        </td>
      </tr>
    </table>
    <el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage"
      v-if="dataList.length>0" layout="total,prev, pager, next, jumper" :page-size="msg.pageSize" :total="total">
    </el-pagination>

    <!-- 新增营销插件 -->
    <el-dialog :title="plugTitle" :visible.sync="marketingPlugDialog" width="500px">
      <el-form :model="addMsg" ref="addMsg" label-width="150px">
        <el-form-item label="插件类型">
          <el-select style="width:234px" size="small" v-model="addMsg.PlugType">
            <el-option v-for="(item) in PlugTypeList" :label="item.Name" :key="item.Id" :value="item.Id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="插件名称">
          <el-input type="text" style="width:234px" size="small" maxlength="50" v-model="addMsg.PlugName"></el-input>
        </el-form-item>
        <el-form-item label="插件子项名称">
          <el-input type="text" style="width:234px" size="small" maxlength="50" v-model="addMsg.PlugSubName"></el-input>
        </el-form-item>
        <el-form-item label="跳转链接">
          <el-input type="text" style="width:234px" size="small" maxlength="50" v-model="addMsg.PlugUrl"></el-input>
        </el-form-item>
        <el-form-item label="图片地址">
          <el-input type="textarea" rows="4" style="width:234px" size="small" maxlength="255" v-model="addMsg.Icon"></el-input>
        </el-form-item>
        <el-form-item label="样式" prop="IconClass">
          <el-input type="text" style="width:234px" size="small" maxlength="100" v-model="addMsg.IconClass"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="marketingPlugDialog = false">取 消</el-button>
        <el-button size="small" type="primary" @click="submitForm('addMsg')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        loading: false,
        marketingPlugDialog: false,
        currentPage: 1,
        total: 0,
        msg: {
          pageIndex: 1,
          pageSize: 15,
          PlugName: "", //插件名称
        },
        dataList: [],
        addMsg: {
          PId: 0, //插件编号
          PlugType: 1, //插件类型(1-默认，2-营销工具)
          PlugName: '', //插件名称
          PlugSubName: '', //插件子项名称
          PlugUrl: '', //跳转路径
          Icon: "", //图标
          IconClass: '', //样色
        },
        PlugTypeList: [{
            Id: 1,
            Name: "默认"
          },
          {
            Id: 2,
            Name: "营销工具"
          },
        ],
        plugTitle: "新增营销插件",
      };
    },
    created() {

    },
    methods: {
      handleCurrentChange(val) {
        this.msg.pageIndex = val;
        this.getPageList();
      },
      submitForm(addMsg) {
        //提交创建、修改营销插件
        this.$refs[addMsg].validate(valid => {
          if (valid) {
            this.addMarketingPlug();
          } else {
            return false;
          }
        });
      },
      //重置参数
      resetMsg() {
        this.addMsg.PId = 0;
        this.addMsg.PlugType = 1;
        this.addMsg.PlugName = "";
        this.addMsg.PlugSubName = "";
        this.addMsg.PlugUrl = "";
        this.addMsg.Icon = "";
        this.addMsg.IconClass = "";
      },
      //获取分页数据
      getPageList() {
        this.apipost("/api/MContent/GetMarketingPlugPageList", this.msg, res => {
          if (res.data.resultCode == 1) {
            this.dataList = res.data.data.pageData;
            this.total = res.data.data.count;
          } else {
            this.Info(res.data.message);
          }
        })
      },
      //添加修改营销插件
      addMarketingPlug() {
        this.apipost("/api/MContent/SetMarketingPlug", this.addMsg, res => {
          if (res.data.resultCode == 1) {
            this.getPageList();
            this.marketingPlugDialog = false;
            this.Success(res.data.message);
          } else {
            this.Info(res.data.message);
          }
        })
      },
      //根据编号获取营销插件
      getMarketingPlug(Id) {
        this.apipost("/api/MContent/GetMarketingPlug", {
          PId: Id
        }, res => {
          if (res.data.resultCode == 1) {
            this.addMsg = res.data.data;
            this.marketingPlugDialog = true;
            this.plugTitle = "修改营销插件";
          } else {
            this.Info(res.data.message);
          }
        })
      },
      //修改营销插件状态
      delMarketingPlug(item) {
        var that = this;
        var tipMsg = "";
        if (item.Status == 0) {
          tipMsg = "是否启用此插件?";
        } else {
          tipMsg = "是否禁用此插件?";
        }
        that.Confirm(tipMsg, function () {
          that.apipost("/api/MContent/RemoveMarketingPlug", {
            PId: item.PId,
            Status: item.Status
          }, res => {
            if (res.data.resultCode == 1) {
              that.Success(res.data.message);
              that.getPageList();
            } else {
              that.Info(res.data.message);
            }
          })
        });
      }
    },
    mounted() {
      this.getPageList();
    }
  };

</script>
