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

  .DiyPluglistDiv .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="DiyPluglistDiv">
    <div class="query-box">
      名称： <el-input type="text" style="width:234px;" size="small" v-model="msg.Name" clearable
        @keyup.enter.native="msg.pageIndex=1,getPageList()" @clear="msg.pageIndex=1,getPageList()"></el-input>
      <button type="button" class="normalBtn"
        @click="plugTitle='新增diy插件',marketingPlugDialog=true,resetMsg()">新增</button>
        <button type="button" class="normalBtn" @click="CommonJump('setformplug',{})">设置表单组件</button>
    </div>
    <table class="commonTable" border="0" cellspacing="0" cellpadding="0" v-loading="loading">
      <tr>
        <th>编号</th>
        <th>类型</th>
        <th>名称</th>
        <th>Id</th>
        <th>图标</th>
        <th>状态</th>
        <th>操作</th>
      </tr>
      <tr v-for="(item,index) in dataList" :key="index">
        <td>{{item.PlugId}}</td>
        <td>{{item.GroupName}}</td>
        <td>{{item.Name}}</td>
        <td>{{item.Id}}</td>
        <td>
          <img :src="item.Icon" style="height: 30px; display: block; padding-left:5px;">
        </td>
        <td>
          <el-switch v-model="item.Status" active-color="#409EFF" :active-value="0" :inactive-value="1"
            @change="delDiyPlug(item)">
          </el-switch>
        </td>
        <td>
          <el-tooltip class="item" effect="dark" content="修改" placement="top-start">
            <el-button type="primary" icon="el-icon-edit" @click="getDiyPlug(item.PlugId)" 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>

    <!-- 新增diy插件 -->
    <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.Name"></el-input>
        </el-form-item>
        <el-form-item label="Id">
          <el-input type="text" style="width:234px" size="small" maxlength="50" v-model="addMsg.Id"></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>
      <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: "", //插件名称
          QPlugTypeStr: "4", //表单组件
        },
        dataList: [],
        addMsg: {
          PlugId: 0, //插件编号
          PlugType: 4, //插件类型 
          Id: '', //插件id
          Name: '', //插件名称
          Icon: "", //图标
        },
        PlugTypeList: [{
            Id: 4,
            Name: "表单组件"
          },

        ],
        plugTitle: "新增diy插件",
      };
    },
    created() {

    },
    methods: {
      handleCurrentChange(val) {
        this.msg.pageIndex = val;
        this.getPageList();
      },
      submitForm(addMsg) {
        //提交创建、修改diy插件
        this.$refs[addMsg].validate(valid => {
          if (valid) {
            this.addDiyPlug();
          } else {
            return false;
          }
        });
      },
      //重置参数
      resetMsg() {
        this.addMsg.PlugId = 0;
        this.addMsg.PlugType = 4;
        this.addMsg.Id = "";
        this.addMsg.Name = "";
        this.addMsg.Icon = "";
      },
      //获取分页数据
      getPageList() {
        this.apipost("/api/MContent/GetPlugInPage", 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);
          }
        })
      },
      //添加修改diy插件
      addDiyPlug() {
        this.apipost("/api/MContent/SetPlugIn", this.addMsg, res => {
          if (res.data.resultCode == 1) {
            this.getPageList();
            this.marketingPlugDialog = false;
            this.Success(res.data.message);
          } else {
            this.Info(res.data.message);
          }
        })
      },
      //根据编号获取diy插件
      getDiyPlug(Id) {
        this.apipost("/api/MContent/GetPlugIn", {
          PlugId: Id
        }, res => {
          if (res.data.resultCode == 1) {
            this.addMsg = res.data.data;
            this.marketingPlugDialog = true;
            this.plugTitle = "修改diy插件";
          } else {
            this.Info(res.data.message);
          }
        })
      },
      //修改diy插件状态
      delDiyPlug(item) {
        var that = this;
        var tipMsg = "";
        if (item.Status == 0) {
          tipMsg = "是否启用此插件?";
        } else {
          tipMsg = "是否禁用此插件?";
        }
        that.Confirm(tipMsg, function () {
          that.apipost("/api/MContent/SetPlugInStatus", {
            PlugId: item.PlugId,
            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>