<style>
  .templateMarketManage .template_comheader {
    padding: 13px 20px;
    border-bottom: 1px solid #EBEEF5;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background: #fff;
  }

  .templateMarketManage .template_comheader>div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
  }

  .templateMarketManage .temp_content {
    margin-top: 10px;
    background: #fff;
    padding: 20px;
  }

  .templateMarketManage .temp_imgStyle {
    display: inline-block;
    margin-right: 10px;
  }

</style>
<template>
  <div class="templateMarketManage">
    <div class="template_comheader">
      <div>
        <span>模板市场管理</span>
        <div style="float:right;">
          <el-button type="primary" size="small" @click="CommonJump('templateMarket',{})">模板市场</el-button>
          <el-button type="primary" size="small" @click="isShow=true,clearMsg()">新增</el-button>
        </div>
      </div>
    </div>
    <div class="temp_content">
      <el-table :data="dataList" border style="width: 100%">
        <el-table-column prop="Id" label="编号" width="100"></el-table-column>
        <el-table-column prop="Name" label="模板名称"></el-table-column>
        <el-table-column label="封面图" width="200">
          <template slot-scope="scope">
            <img :src="scope.row.Pics" style="width:180px;height:150px;">
          </template>
        </el-table-column>
        <el-table-column label="启用/禁用" width="100">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.IsUse" active-color="#409EFF" :active-value="1" :inactive-value="0"
              @change="updateIsUse(scope.row)">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="显示/隐藏" width="100">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.IsShow" active-color="#409EFF" :active-value="1" :inactive-value="0"
              @change="updateIsShow(scope.row)">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="SortNum" label="排序" width="180"></el-table-column>
        <el-table-column prop="CreateByName" label="操作人" width="150"></el-table-column>
        <el-table-column prop="CreateDateStr" label="创建时间" width="180"></el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" content="编辑" placement="top">
              <img src="../../assets/img/setup/edit.png" alt="" class="temp_imgStyle" @click="EditeMarket(scope.row)">
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="删除" placement="top">
              <img src="../../assets/img/setup/del.png" alt="" class="temp_imgStyle" @click="DeleteMarket(scope.row)">
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination style="text-align:right" background @current-change="handleCurrentChange"
        :page-size="qMsg.pageSize" layout="prev, pager, next" :total="total">
      </el-pagination>
    </div>
    <!-- 新增修改模板市场 -->
    <el-dialog title="模板市场" :visible.sync="isShow" width="700px">
      <div class="content">
        <el-form label-width="120px" style="padding:0 20px;">
          <el-form-item label="模板名称">
            <el-input v-model="PostMsg.Name" class="w400" size="small" maxlength="20" placeholder="请输入模板名称" />
          </el-form-item>
          <el-form-item label="封面图">
            <el-input type="text" v-model="PostMsg.Pics" size="small" class="w400" placeholder="请输入选择封面图" />
          </el-form-item>
          <el-form-item label="价格">
            <el-input type="text" v-model="PostMsg.Price" size="small" class="w400"
              @keyup.native="checkPrice(PostMsg,'Price')" placeholder="请输入价格" />
          </el-form-item>
          <el-form-item label="启用/禁用">
            <el-switch v-model="PostMsg.IsUse" active-color="#409EFF" :active-value="1" :inactive-value="0"></el-switch>
          </el-form-item>
          <el-form-item label="显示/隐藏">
            <el-switch v-model="PostMsg.IsShow" active-color="#409EFF" :active-value="1" :inactive-value="0">
            </el-switch>
          </el-form-item>
          <el-form-item label="排序">
            <el-input type="text" v-model="PostMsg.SortNum" size="small" class="w400"
              @keyup.native="checkInteger(PostMsg,'SortNum')" placeholder="请输入排序" />
          </el-form-item>
          <el-form-item label="模板内容">
            <el-input type="textarea" :rows="5" v-model="PostMsg.TemplateData" size="small" class="w400"
              placeholder="请输入模板内容" />
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="isShow = false,clearMsg()">取消</el-button>
        <el-button size="small" type="primary" @click="SaveMarket()">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        isShow: false,
        dataList: [],
        qMsg: {
          pageIndex: 1,
          pageSize: 15,
          IsUse:-1,
          IsShow:-1,
        },
        total: 0,
        //添加修改
        PostMsg: {
          Id: 0, //编号
          Name: "", //模板名称
          Pics: "", //封面图
          Price: 0.00, //价格
          IsUse: 1, //是否使用(0-禁用,1-使用)
          IsShow: 1, //是否显示(0-不显示,1-显示)
          TemplateData: "", //模板数据
          SortNum: 0, //排序
        }
      };
    },
    created() {

    },
    methods: {
      handleCurrentChange(val) {
        this.qMsg.pageIndex = val;
        this.getList();
      },
      //清空数据
      clearMsg() {
        this.PostMsg.Id = 0;
        this.PostMsg.Name = "";
        this.PostMsg.Pics = "";
        this.PostMsg.Price = 0;
        this.PostMsg.IsUse = 1;
        this.PostMsg.IsShow = 1;
        this.PostMsg.TemplateData = "";
        this.PostMsg.SortNum = 0;
      },
      getList() {
        this.apipost("/api/Template/GetTemplateMarketPageListModule", this.qMsg, res => {
          if (res.data.resultCode == 1) {
            this.dataList = res.data.data.pageData;
            this.total = res.data.data.count;
          } else {
            this.Info(res.data.message);
          }
        })
      },
      //保存模板市场数据
      SaveMarket() {
        this.apipost("/api/Template/SetTemplateMarket", this.PostMsg, res => {
          if (res.data.resultCode == 1) {
              this.isShow=false;
            this.Success(res.data.message);
            this.getList();
            this.clearMsg();
          } else {
            this.Info(res.data.message);
          }
        })
      },
      //修改模板市场
      EditeMarket(item) {
        this.apipost("/api/Template/GetTemplateMarket", {
          Id: item.Id,
        }, res => {
          if (res.data.resultCode == 1) {
            this.PostMsg = res.data.data;
            this.isShow = true;
          } else {
            this.Info(res.data.message);
          }
        })
      },
      //删除模板市场
      DeleteMarket(item) {
        let that = this;
        that.Confirm("是否删除?", function () {
          that.apipost("/api/Template/RemoveTemplateMarket", {
            Id: item.Id,
          }, res => {
            if (res.data.resultCode == 1) {
              that.Success(res.data.message);
              that.getList();
            } else {
              that.Info(res.data.message);
            }
          })
        });
      },
      //更新是否使用
      updateIsUse(item) {
        this.apipost("/api/Template/UpdateTemplateMarketIsUse", {
          Id: item.Id,
          IsUse: item.IsUse
        }, res => {
          if (res.data.resultCode == 1) {
            this.Success(res.data.message);
            this.getList();
          } else {
            this.Info(res.data.message);
          }
        })
      },
      //更新是否显示
      updateIsShow(item) {
        this.apipost("/api/Template/UpdateTemplateMarketIsShow", {
          Id: item.Id,
          IsShow: item.IsShow
        }, res => {
          if (res.data.resultCode == 1) {
            this.Success(res.data.message);
            this.getList();
          } else {
            this.Info(res.data.message);
          }
        })
      }
    },
    mounted() {
      this.getList();
    }
  };

</script>