<template>
  <div class="shareFriend">
    <template v-if="IsShowCategory">
      <div class="head-title">
        发圈素材管理
        <el-button @click="IsShowCategory=false" style="float:right;margin-top: -5px;" size="small" type="primary">
          新增
        </el-button>
      </div>
      <div class="content">
        <div>
          <el-button @click="CateDialog=true,isSearch=1" style="margin-right:10px;" size="small">分类筛选</el-button>
          <el-button v-show="msg.CateId>0" @click="msg.CateId=0,msg.pageIndex=1,getList()" type="danger"
            style="margin-right:10px;" size="small">清除分类</el-button>
          <span style="margin-left:10px;">添加时间</span>
          <el-date-picker size="small" class="indataPicker" type="daterange" v-model="dateStr" range-separator="至"
            start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd">
          </el-date-picker>
          <div class="searchInput" style="margin-left:10px;">
            <el-input style="display:inline-block;width:225px;height:30px" placeholder="请输入文案关键字搜索"
              v-model="msg.KeyWords" size="small" clearable @keyup.enter.native="msg.pageIndex=1,getList()"
              @clear="msg.pageIndex=1,getList()">
            </el-input>
            <span class="el-icon-search" style="color:#979dad;font-size:14px;position:relative;top:1px"
              @click="msg.pageIndex=1,getList()"> </span>
          </div>
          <el-button @click="getList()" size="small" type="primary">查询</el-button>
        </div>
        <br>
        <el-table :data="dataList" v-loading="loading" border style="width: 100%;margin:20px 0">
          <el-table-column prop="Id" label="ID" width="60">
          </el-table-column>
          <el-table-column label="分类名称" width="120">
            <template slot-scope="scope">
              <el-tag v-for="tag in scope.row.CateList" style="margin-bottom:3px;" size="small" :key="tag.Id">
                {{tag.Name}}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="发圈文案" width="300">
            <template slot-scope="scope">
                <span v-html="scope.row.MaterialInfo"></span>
              <!-- <img @click="getMaterInfo(scope.row)" style="margin-left:3px;"
                src="../../assets/img/userman/edit1.png" alt=""> -->
            </template>
          </el-table-column>
          <el-table-column prop="MaterialImg" label="图片视频" width="300">
            <template slot-scope="scope">
              <div flex="dir:left" style="flex-wrap: wrap;">
                <div style="width:80px;height:80px;margin-right:5px;" v-for="(item,index) in scope.row.ImgList"
                  :key="index">
                  <img style="width:100%;height:100%;" :src="item" />
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="GoodsId" label="商品信息" width="250">
            <template slot-scope="scope">
              <div flex="box:first" v-if="scope.row.GoodsId>0">
                <template v-if="scope.row.ImgList.length>0">
                  <div style="padding-right: 10px">
                    <img style="width:50px;height:50px;" :src="scope.row.ImgList[0]" alt="" />
                  </div>
                </template>
                <div flex="cross:center">
                  <div class="shareGoodName">{{scope.row.GoodsName}}</div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="SortNum" label="排序" width="120">
            <template slot-scope="scope">
              <div v-if="sort_goods_id != scope.row.Id" flex="dir:left cross:center">
                <span>{{scope.row.SortNum}}</span>
                <el-button class="edit-sort" type="text" @click="sort_goods_id=scope.row.Id">
                  <img style="margin-left:3px;" src="../../assets/img/userman/edit1.png" alt="">
                </el-button>
              </div>
              <div style="display: flex;align-items: center" v-else>
                <el-input style="min-width: 50px" type="text" size="mini"
                  @keyup.native="checkInteger(scope.row,'SortNum')" v-model="scope.row.SortNum"></el-input>
                <el-button class="change-quit" type="text" style="color: #F56C6C;padding: 0 5px" icon="el-icon-error"
                  circle @click="sort_goods_id=0"></el-button>
                <el-button class="change-success" type="text" style="margin-left: 0;color: #67C23A;padding: 0 5px"
                  icon="el-icon-success" circle @click="sort_goods_id=0,updateSortNum(scope.row)">
                </el-button>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="IsTop" label="是否置顶" width="80">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.IsTop" active-color="#409EFF" :active-value="1" :inactive-value="0"
                @change="updateIsTop(scope.row)">
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column prop="IsUse" label="状态" width="80">
            <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 prop="CreateDateStr" label="添加时间" width="180">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <img @click="getShareFriend(scope.row.Id)" style="width:32px;height:32px;margin:0 10px"
                src="../../assets/img/userman/edit.png" alt="">
              <img @click="removeShareFriend(scope.row.Id)" style="width:32px;height:32px;margin:0 10px"
                src="../../assets/img/userman/del.png" alt="">
            </template>
          </el-table-column>
        </el-table>
        <el-pagination style="text-align:right" background @current-change="handleCurrentChange"
          :page-size="msg.pageSize" layout="prev, pager, next" :current-page.sync="msg.pageIndex" :total="msg.total">
        </el-pagination>

      </div>
    </template>
    <template v-else>
      <div class="head-title">
        <span @click="IsShowCategory=true" style="color:rgb(64, 158, 255);cursor:pointer;">发圈素材分类</span><span
          style="margin:0 9px;color:#C0C4CC">/</span><span>编辑</span>
      </div>
      <div class="content">
        <div class="conten_indder">
          <el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="150px">
            <el-form-item label="一级分类" v-if="addMsg.FirstLevelName">
              <span>{{addMsg.FirstLevelName}}</span>
            </el-form-item>
            <el-form-item label="二级分类" v-if="addMsg.SecondLevelName">
              <span>{{addMsg.SecondLevelName}}</span>
            </el-form-item>
            <el-form-item label="三级分类" v-if="addMsg.ThirdLevelName">
              <span>{{addMsg.ThirdLevelName}}</span>
            </el-form-item>
            <el-form-item label="分类编号">
              <el-input type="text" size="small" :disabled="true" v-model="addMsg.CateId">
                <el-button slot="append" @click="CateDialog=true,isSearch=-1">选择分类</el-button>
              </el-input>
            </el-form-item>
            <el-form-item label="选择商品">
              <el-button type="text" v-if="addMsg.GoodsId>0">({{addMsg.GoodsId}}){{addMsg.GoodsName}}</el-button>
              <el-button type="text" @click="isShowGoods=true">选择商品</el-button>
            </el-form-item>
            <el-form-item label="动态文案" prop="MaterialInfo">
                 <!-- <UeEditor style="width:750px;" :defaultMsg="defaultMsg" :config="config" :IsMultiple="true"
                ref="UeEditor1"></UeEditor> -->
                 <el-input type="textarea" :rows="6" v-model="addMsg.MaterialInfo"></el-input>
            </el-form-item>
            <el-form-item>
              <label slot="label">动态图片
                <el-tooltip class="item" effect="dark" content="最多9图" placement="top">
                  <i class="el-icon-info"></i>
                </el-tooltip>
              </label>
              <el-tooltip class="item" effect="dark" content="建议尺寸:750 * 750" placement="top">
                <el-button size="mini" @click="imgDialog=true">选择文件</el-button>
              </el-tooltip>
              <div>
                <div class="zk_pic_box" v-if="addMsg.ImgList.length==0" style="width:90px;height:90px;"
                  flex="main:center cross:center">
                  <i class="el-icon-picture-outline"></i>
                </div>
                <div v-else class="zk_pic_box" v-for="(item,index) in addMsg.ImgList" :key="index"
                  style="width:90px;height:90px;display:inline-block;margin-right:10px;" flex="main:center cross:center"
                  :style="{backgroundImage:'url(' + item + ')'}">
                  <i v-if="item==''" class="el-icon-picture-outline"></i>
                  <el-button type="danger" v-if="item!=''" @click="delImgArr(index)" class="image-delete" size="mini"
                    icon="el-icon-close" circle></el-button>
                </div>
              </div>
            </el-form-item>
            <el-form-item style="display:none;">
              <label slot="label">动态视频
                <el-tooltip class="item" effect="dark" content="当动态视频和动态图片均有素材添加时，前端只展示视频" placement="top">
                  <i class="el-icon-info"></i>
                </el-tooltip>
              </label>
              <el-input size="small" v-model="addMsg.LinkUrl" placeholder="选择上传视频" disabled>
                <template slot="append">
                  <el-tooltip class="item" effect="dark" content="支持格式mp4;支持编码H.264;视频大小不能超过10 MB" placement="top">
                    <el-button size="mini">选择文件</el-button>
                  </el-tooltip>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item label="是否置顶">
              <el-switch v-model="addMsg.IsTop" active-color="#409EFF" :active-value="1" :inactive-value="0">
              </el-switch>
            </el-form-item>
            <el-form-item>
              <label slot="label">排序
                <el-tooltip class="item" effect="dark" content="数字越小，排序越靠前" placement="top">
                  <i class="el-icon-info"></i>
                </el-tooltip>
              </label>
              <el-input type="text" size="small" v-model="addMsg.SortNum"
                @keyup.native="checkInteger(addMsg,'SortNum')"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <el-button size="small" style="margin-top:20px;padding:9px 25px;" type="primary" @click="submitForm('addMsg')">保存
      </el-button>
    </template>

    <!-- 选择图片 -->
    <el-dialog title="选择文件" :visible.sync="imgDialog" width="1240px">
      <ChooseImg @SelectId="SelectId" :IsMultiple="true"></ChooseImg>
    </el-dialog>
    <!-- 选择分类 -->
    <el-dialog title="选择分类" :visible.sync="CateDialog" width="600px">
      <choiceMaterial ref="choiceMater"></choiceMaterial>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="CateDialog=false">取消</el-button>
        <el-button type="primary" size="small" @click="getCkedMater">确定</el-button>
      </span>
    </el-dialog>
    <!-- 选择商品 -->
    <el-dialog title="选择商品" :visible.sync="isShowGoods" custom-class="goodsDialog" width="800px">
      <choiceGood ref="choiceGood" :isSingle="true" :IsGetSpec="1"></choiceGood>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="isShowGoods=false">取 消</el-button>
        <el-button size="small" type="danger" @click="getGoodsChoice()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改发圈文案 -->
    <el-dialog title="编辑发圈文案" :visible.sync="isShowText" width="800px">
      <el-form label-width="80px">
        <el-form-item label="文案内容">
          <el-input type="textarea" v-model="updateTextInfo.MaterialInfo" :rows="10"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="isShowText=false">取 消</el-button>
        <el-button size="small" type="danger" @click="updateMaterialInfo()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import ChooseImg from "@/components/global/ChooseImg.vue";
  import choiceMaterial from "@/components/common/choiceMaterial.vue";
  import choiceGood from "@/components/common/choiceGood.vue";
  import UeEditor from "@/components/global/UE.vue";
  export default {
    components: {
      ChooseImg,
      choiceMaterial,
      choiceGood,
      UeEditor
    },
    data() {
      return {
        //UeEditor配置
        defaultMsg: "",
        config: {
          initialFrameWidth: null,
          initialFrameHeight: 350
        },
        //编辑行号
        sort_goods_id: 0,
        //开始时间-结束时间
        dateStr: [],
        loading: false,
        //是否显示新增分类
        IsShowCategory: true,
        dataList: [],
        msg: {
          CateId: 0,
          QStartDate: "", //开始时间
          QEndDate: "", //结束时间
          KeyWords: "", //页面名称
          pageIndex: 1,
          pageSize: 10,
          total: 0,
        },
        addMsg: {
          FirstLevelName: "", //一级分类名称
          SecondLevelName: "", //二级分类名称
          Id: 0, //编号
          CateId: 0, //分类编号
          GoodsId: 0, //商品编号
          CoverImg: "", //封面图
          GoodsName: '',
          MaterialInfo: "", //素材文案
          LinkUrl: "", //链接地址
          IsTop: 0, //是否置顶
          SortNum: 0, //排序
          ImgList: [], //动态图片数组
        },
        imgDialog: false, //图片弹窗
        rules: {
          MaterialInfo: [{
            required: true,
            message: "请输入动态文案",
            trigger: "change"
          }]
        },
        CateDialog: false, //选择分类弹窗
        isSearch: -1, //判断选择查询还是新增的
        isShowGoods: false, //选择商品弹窗
        isShowText: false, //发圈文案弹窗
        updateTextInfo: {
          Id: 0,
          MaterialInfo: ''
        }
      };
    },
    methods: {
      //获取分类列表
      getList() {
        if (this.dateStr && this.dateStr.length > 0) {
          this.msg.QStartDate = this.dateStr[0];
          this.msg.QEndDate = this.dateStr[1];
        } else {
          this.msg.QStartDate = '';
          this.msg.QEndDate = '';
        }
        this.loading = true;
        this.apipost("/api/Share/GetShareFriendPageList", this.msg,
          res => {
            this.loading = false;
            if (res.data.resultCode === 1) {
              this.dataList = res.data.data.pageData;
              this.msg.total = res.data.data.count;
            } else {
              this.Error(res.data.message);
            }
          },
          null
        );
      },
      //翻页
      handleCurrentChange(val) {
        this.msg.pageIndex = val;
        this.getList();
      },
      //新增修改分类
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            //let content = this.$refs.UeEditor1.getUEContent();
            //this.addMsg.MaterialInfo = content;
            this.apipost("/api/Share/SetShareFriend", this.addMsg,
              res => {
                this.loading = false;
                if (res.data.resultCode === 1) {
                  this.getList();
                  this.Success(res.data.message);
                  this.IsShowCategory = true;
                  this.clearMsg();
                } else {
                  this.Error(res.data.message);
                }
              },
              null
            );
          } else {
            return false;
          }
        });
      },
      //获取实体
      getShareFriend(Id) {
        this.apipost("/api/Share/GetShareFriend", {
            Id: Id
          },
          res => {
            if (res.data.resultCode === 1) {
              var tempObj = res.data.data;
              if (tempObj) {
                this.addMsg.Id = tempObj.Id;
                this.addMsg.CateId = tempObj.CateId;
                this.addMsg.GoodsId = tempObj.GoodsId;
                this.addMsg.CoverImg = tempObj.CoverImg;
                this.addMsg.GoodsName = tempObj.GoodsName;
                if (tempObj.MaterialInfo) {
                  this.defaultMsg = tempObj.MaterialInfo;
                }
                this.addMsg.MaterialInfo = tempObj.MaterialInfo;
                if (tempObj.LinkUrl) {
                  this.addMsg.LinkUrl = tempObj.LinkUrl;
                }
                this.addMsg.IsTop = tempObj.IsTop;
                this.addMsg.SortNum = tempObj.SortNum;
                this.addMsg.ImgList = tempObj.ImgList;
                this.addMsg.FirstLevelName = tempObj.FirstLevelName;
                this.addMsg.SecondLevelName = tempObj.SecondLevelName;
                this.addMsg.ThirdLevelName = tempObj.ThirdLevelName;
              }
              this.IsShowCategory = false;
            } else {
              this.Error(res.data.message);
            }
          },
          null
        );
      },
      //删除素材
      removeShareFriend(Id) {
        let that = this;
        that.Confirm("确定要删除分类吗?", function () {
          that.apipost("/api/Share/RemoveShareFriend", {
              Id: Id
            },
            res => {
              if (res.data.resultCode === 1) {
                that.getList();
              } else {
                that.Error(res.data.message);
              }
            },
            null
          );
        });
      },
      //清空消息
      clearMsg() {
        this.addMsg.Id = 0;
        this.addMsg.CateId = 0;
        this.addMsg.GoodsId = 0;
        this.addMsg.CoverImg = "";
        this.addMsg.FirstLevelName = "";
        this.addMsg.SecondLevelName = "";
        this.addMsg.ThirdLevelName = "";
        this.addMsg.MaterialInfo = "";
        this.addMsg.LinkUrl = "";
        this.addMsg.IsTop = 1;
        this.addMsg.SortNum = 1;
        this.defaultMsg="";
      },
      //更新是否置顶
      updateIsTop(item) {
        this.apipost("/api/Share/SetShareFriendIsTop", {
            Id: item.Id,
            IsTop: item.IsTop
          },
          res => {
            if (res.data.resultCode === 1) {
              this.Success(res.data.message);
              this.getList();
            } else {
              this.Error(res.data.message);
            }
          },
          null
        );
      },
      //更新是否启用
      updateIsUse(item) {
        this.apipost("/api/Share/SetShareFriendIsUse", {
            Id: item.Id,
            IsUse: item.IsUse
          },
          res => {
            if (res.data.resultCode === 1) {
              this.Success(res.data.message);
              this.getList();
            } else {
              this.Error(res.data.message);
            }
          },
          null
        );
      },
      //更新排序
      updateSortNum(item) {
        this.apipost("/api/Share/SetShareFriendSortNum", {
            Id: item.Id,
            SortNum: item.SortNum
          },
          res => {
            if (res.data.resultCode === 1) {
              this.Success(res.data.message);
              this.getList();
            } else {
              this.Error(res.data.message);
            }
          },
          null
        );
      },
      getMaterInfo(item) {
        this.isShowText = true;
        this.updateTextInfo.Id = item.Id;
        this.updateTextInfo.MaterialInfo = item.MaterialInfo;
      },
      //更新文案
      updateMaterialInfo() {
        if (this.updateTextInfo.MaterialInfo == '') {
          this.Error('请输入文案内容');
        }
        this.apipost("/api/Share/SetShareFriendMaterialInfo", this.updateTextInfo,
          res => {
            if (res.data.resultCode === 1) {
              this.Success(res.data.message);
              this.getList();
              this.isShowText = false;
            } else {
              this.Error(res.data.message);
            }
          },
          null
        );
      },
      //选择图片
      SelectId(msg) {
        let that = this;
        if (msg && msg.length > 0) {
          msg.forEach(item => {
            this.addMsg.ImgList.push(that.getIconLink(item.url))
          })
        };
        if (this.addMsg.ImgList.length > 9) {
          this.addMsg.ImgList.length = 9;
          this.Error('最多选择9张图片哟！');
        }
        this.imgDialog = false;
      },
      //删除图片
      delImgArr(index) {
        this.addMsg.ImgList.splice(index, 1);
      },
      //选择分类
      getCkedMater() {
        var obj = this.$refs.choiceMater.getMaterial();
        if (JSON.stringify(obj) != "{}") {
          //列表查询页选择
          if (this.isSearch == 1) {
            this.msg.CateId = obj.Id;
            this.getList();
          } else {
            this.addMsg.FirstLevelName = '';
            this.addMsg.SecondLevelName = '';
            if (obj.Level == 1) {
              this.addMsg.FirstLevelName = obj.Name;
            }
            if (obj.Level == 2) {
              this.addMsg.FirstLevelName = obj.LevelOne;
              this.addMsg.SecondLevelName = obj.Name;
            }
            if (obj.Level == 3) {
              this.addMsg.FirstLevelName = obj.LevelOne;
              this.addMsg.SecondLevelName = obj.LevelTwo;
              this.addMsg.ThirdLevelName = obj.Name;
            }
            this.addMsg.CateId = obj.Id;
          }
        }
        this.CateDialog = false;
        this.$refs.choiceMater.toggleSelection();
      },
      //选择商品
      getGoodsChoice() {
        this.addMsg.ImgList = [];
        var chooseGoods = this.$refs.choiceGood.getChoicedGoods();
        if (chooseGoods && chooseGoods[0].CarouselImageList.length > 0) {
          chooseGoods[0].CarouselImageList.forEach(x => {
            this.addMsg.ImgList.push(x.Path);
          })
        }
        this.addMsg.GoodsName = chooseGoods[0].Name;
        this.addMsg.GoodsId = chooseGoods[0].Id
        this.isShowGoods = false;
        this.$refs.choiceGood.toggleSelection();
      },

    },
    mounted() {
      this.getList();
    }
  };

</script>
<style>
  .shareFriend .templat-list {
    border: 1px solid #EBEEF5;
  }

  .shareFriend .templat-item {
    line-height: 40px;
    height: 40px;
    display: flex;
    font-size: 13px;
  }

  .templat-item:nth-child(odd) {
    background-color: #f7f7f7;
  }

  .templat-item:nth-child(even) {
    background-color: #fff;
  }

  .shareFriend .templat-item div {
    width: 50%;
    padding-left: 20px;
  }

  .shareFriend .Custom_item {
    border: 1px solid #EBEEF5;
    background-color: #FFF;
    color: #303133;
    -webkit-transition: .3s;
    transition: .3s;
    margin-bottom: 10px;
  }

  .shareFriend .Custom_item>div {
    padding: 20px;
  }

  .shareFriend .content {
    background: #fff;
    margin-top: 10px;
    padding: 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  .shareFriend .conten_indder {
    padding: 20px;
    background-color: #fff;
    padding-right: 50%;
    min-width: 1100px;
  }

  .shareGoodName {
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

</style>
