<style>
  .WebSiteAdmanage .el-button.is-circle {
    padding: 6px;
  }

  .WebSiteAdmanage .webSiteUp {
    min-height: 150px;
    border: 2px dashed #d1d1d1;
    position: relative;
    margin-top: 10px;
    line-height: 0;
  }

  .WebSiteAdmanage .webSiteUp i {
    font-size: 50px;
    color: #d1d1d1;
    left: 45%;
    cursor: pointer;
    position: absolute;
    top: 50%;
  }

  .WebSiteAdmanage .web_imgUrl {
    max-width: 100%;
  }
  .WebSiteAdmanage .el-checkbox+.el-checkbox{
    margin-left:20px;
  }
  .WebSiteAdmanage .addIconDiv{
    position: absolute;
    width:100%;
    height:100%;
    top:0;
    background-color: transparent;
  }
  .WebSiteAdmanage .addIconDiv:hover{
    background: rgba(0, 0, 0, 0.5);
    color:#fff;
  }
</style>
<template>
  <!--廣告版面管理(广告管理)-->
  <div class="WebSiteAdmanage">
    <div class="query-box">
      <ul>
        <li>
          <label>名称</label>
          <el-input v-model="msg.AdName" :placeholder="$t('system.ph_in')" @keyup.native.enter="getData" class="w210">
          </el-input>
        </li>
        <li>
          <input type="button" class="hollowFixedBtn" :value="$t('pub.searchBtn')"
            @click="resetPageIndex(),getData()" />
          <input type="button" class="normalBtn" @click="outerVisible=true,clearMsg()" :value="$t('pub.addBtn')" />
        </li>
      </ul>
    </div>
    <div>
      <el-table :data="dataList" style="width: 100%" v-loading="loading"
        :default-sort="{prop: 'date', order: 'descending'}">
        <el-table-column prop="IsOpen" label="开放状态" header-align="center" align="center">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.IsOpen" :active-value="1" :inactive-value="0" active-color="#13ce66"
              inactive-color="#dcdfe6" @change="UpdateAdIsOpen(scope.row)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="AdName" label="广告名称" header-align="center" align="center">
        </el-table-column>
        <el-table-column prop="CreateByName" label="新增人员" header-align="center" align="center">
        </el-table-column>
        <el-table-column prop="AdStartTimeStr" label="活动开始时间" header-align="center" align="center">
        </el-table-column>
        <el-table-column prop="AdEndTimeStr" label="活动结束时间" header-align="center" align="center">
        </el-table-column>
        <el-table-column prop="UpdateTimeStr" label="最后更新时间" header-align="center" align="center">
        </el-table-column>
        <el-table-column label="操作" header-align="center" align="center">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" :content="$t('system.table_edit')" placement="top-start">
              <el-button type="primary" icon="el-icon-edit" circle @click="outerVisible = true,updateData(scope.row)">
              </el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" :content="$t('system.table_delete')" placement="top-start">
              <el-button type="danger" icon="el-icon-delete" circle @click="deleteData(scope.row)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage"
        layout="total,prev, pager, next, jumper" :page-size='msg.pageSize' :total="total">
      </el-pagination>
    </div>
    <el-dialog title="广告版面设定" :visible.sync="outerVisible" center width="1200px;">
      <el-form :model="addMsg" ref="addMsg" label-width="190px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="广告版面名称" label-width="120px">
              <el-input type="text" v-model="addMsg.AdName" maxlength="50" placeholder="广告版面名称">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <div>上传档案请小于3M</div>
            <div class="webSiteUp">
              <el-upload :http-request="UploadImage" :multiple="true"
                accept="image/jpeg,image/gif,image/png,image/bmp" :show-file-list="false" action="">
                <img v-if="addMsg.AdImg" :src="addMsg.AdImg" class="web_imgUrl" alt="" />
                <div class="addIconDiv">
                  <i class="web_addImg iconfont icon-img_haha"></i>
                </div>
              </el-upload>
            </div>
          </el-col>
          <el-col :span="14">
            <el-form-item label="目标链接网址">
              <el-input type="text" v-model="addMsg.AdLink" maxlength="200" placeholder="目标链接网址">
              </el-input>
            </el-form-item>
            <el-form-item label="活动开始时间">
              <el-date-picker v-model="addMsg.AdStartTime" type="date" value-format="yyyy-MM-dd" placeholder="活动开始时间">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="活动结束时间">
              <el-date-picker v-model="addMsg.AdEndTime" type="date" value-format="yyyy-MM-dd" placeholder="活动结束时间">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="设定页面显示位置">
              <el-radio v-model="addMsg.AdPosition" :label="0">靠左</el-radio>
              <el-radio v-model="addMsg.AdPosition" :label="1">靠右</el-radio>
            </el-form-item>
            <el-form-item label="点选广告后是否开新窗口">
              <el-radio v-model="addMsg.IsNewOpen" :label="0">否</el-radio>
              <el-radio v-model="addMsg.IsNewOpen" :label="1">是</el-radio>
            </el-form-item>
            <el-form-item label="显示页面">
              <el-checkbox-group v-model="addMsg.CheckList">
                <el-checkbox v-for="subItem in PageList" :label="subItem.Id" :key="subItem.Id">{{subItem.NavTitle}}
                </el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <button class="normalBtn" type="primary" @click="submitForm('addMsg')">{{$t('pub.saveBtn')}}</button> &nbsp;
        <button class="hollowFixedBtn" @click="outerVisible = false">{{$t('pub.cancelBtn')}}</button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        loading: false,
        msg: {
          AdName: '', //名称
          pageSize: 15,
          pageIndex: 1,
        },
        total: 0,
        currentPage: 1,
        //弹窗
        outerVisible: false,
        dataList: [],
        addMsg: {
          Id: 0, //编号
          AdName: '', //广告名称
          AdImg: '', //上传图片
          AdLink: '', //目标链接网址
          AdStartTime: '', //活动开始时间
          AdEndTime: '', //活动结束时间
          AdPosition: 1, //设定页面显示位置
          IsNewOpen: 1, //点选广告后是否开新视窗
          CheckList: [], //选中的显示页面
        },
        PageList: [], //页面列表
      }
    },
    mounted() {
      this.getData();
      this.getPageList();
    },
    methods: {
      //获取配置
      getData() {
        //获取现有线路列表
        this.loading = true;
        this.apipost(
          "ws_get_GetAdmanagePageList",
          this.msg,
          res => {
            this.loading = false;
            if (res.data.resultCode == 1) {
              this.dataList = res.data.data.pageData;
              this.total = res.data.data.count
            } else {
              this.loading = false;
            }
          },
          err => {}
        );
      },
      handleCurrentChange(val) {
        //翻页功能按钮
        this.msg.pageIndex = val;
        this.getData();
      },
      resetPageIndex() {
        //查询初始化页码
        this.msg.pageIndex = 1;
        this.currentPage = 1;
      },
      //更新广告状态
      UpdateAdIsOpen(item) {
        this.apipost(
          "ws_post_UpdateAdmanageIsOpen", {
            Id: item.Id,
            IsOpen: item.IsOpen
          },
          res => {
            if (res.data.resultCode == 1) {
              this.Success(res.data.message);
              this.getData();
            } else {
              this.Error(res.data.message);
            }
          },
          err => {}
        );
      },
      //修改
      updateData(item) {
        this.apipost(
          "ws_get_GetAdmanage", {
            Id: item.Id,
          },
          res => {
            if (res.data.resultCode == 1) {
              var tempData = res.data.data;
              this.addMsg.Id = tempData.Id;
              this.addMsg.AdName = tempData.AdName;
              this.addMsg.AdImg = tempData.AdImg;
              this.addMsg.AdLink = tempData.AdLink;
              this.addMsg.AdStartTime = tempData.AdStartTime;
              this.addMsg.AdEndTime = tempData.AdEndTime;
              this.addMsg.AdPosition = tempData.AdPosition;
              this.addMsg.IsNewOpen = tempData.IsNewOpen;
              this.addMsg.CheckList = tempData.CheckList;
            } else {
              this.Error(res.data.message);
            }
          },
          err => {}
        );
      },
      //删除广告
      deleteData(item) {
        var that = this;
        that.Confirm("是否删除?", function () {
          that.apipost(
            "ws_post_RemoveAdmanage", {
              Id: item.Id
            },
            res => {
              if (res.data.resultCode == 1) {
                that.Success(res.data.message);
                that.getData();
              } else {
                that.Error(res.data.message);
              }
            },
            null
          );
        });
      },
      //清空数据
      clearMsg() {
        this.addMsg.Id = 0;
        this.addMsg.AdName = "";
        this.addMsg.AdImg = "";
        this.addMsg.AdLink = "";
        this.addMsg.AdStartTime = "";
        this.addMsg.AdEndTime = "";
        this.addMsg.AdPosition = 1;
        this.addMsg.IsNewOpen = 1;
        this.addMsg.CheckList = [];
      },
      //新增、修改广告
      submitForm(addMsg) {
        this.apipost(
          "ws_post_SetAdmanage", this.addMsg,
          res => {
            if (res.data.resultCode == 1) {
              this.getData();
              this.clearMsg();
              this.Success(res.data.message);
              this.outerVisible = false;
            } else {
              this.Error(res.data.message);
            }
          },
          err => {}
        );
      },
      //获取页面列表
      getPageList() {
        this.apipost(
          "ws_get_GetNavConfigList", {
            Type: 4
          },
          res => {
            if (res.data.resultCode == 1) {
              this.PageList = res.data.data;
            } else {
              this.Error(res.data.message);
            }
          },
          err => {}
        );
      },
      //上传图片
      UploadImage(file) {
        let newArr = [];
        newArr.push(file.file);
        let fileName = file.file.name;
        var path = "/Upload/WebSite/";
        this.UploadSelfFileT(path, newArr, x => {
          var str = x.data.FilePath;
          var imgUrl = this.domainManager().ViittoFileUrl + str;
          this.addMsg.AdImg = imgUrl;
        });
      },
    }
  }
</script>