<template>
  <div class="container-everyday">
    <el-card class="box-card">
      <el-button
        type="primary"
        style="margin-right: 25px"
        @click="dialogVisible = true"
        >添加</el-button
      >
      <el-select
        v-model="list.Status"
        clearable
        placeholder="全部状态"
        style="margin-right: 25px; maxwidth: 160px"
        @change="optionsChange"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :value="item.value"
          :label="item.label"
        >
        </el-option>
      </el-select>
      <el-select
        style="maxwidth: 160px"
        v-model="list.ChartPermissionIds"
        clearable
        placeholder="全部品种"
        @focus="getmyfllow"
        @change="optionsChange"
      >
        <el-option
          v-for="item in varietyList"
          :key="item.ChartPermissionId"
          :value="item.ChartPermissionId"
          :label="item.PermissionName"
        >
        </el-option>
      </el-select>
      <div class="pvuv">
        <span>PV:</span>
        <span>{{ this.pvUvList.Pv }}</span>
      </div>
      <div class="pvuv">
        <span>UV:</span>
        <span>{{ this.pvUvList.Uv }}</span>
      </div>
      <div class="potential_top" style="width: 281px">
        <el-input
          clearable
          v-model.trim="list.KeyWord"
          style="maxwidth: 281px"
          placeholder="搜索标题/内容"
          @input="searching"
        >
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
        <!-- <el-button type="primary" @click="searching">客户检索</el-button> -->
      </div>
    </el-card>
    <el-card class="bottom-card">
      <el-table border :data="listData" style="width: 100%">
        <el-table-column prop="Title" label="标题" align="center" width="700">
          <template slot-scope="scope">
            <el-tag>{{ scope.row.ChartPermissionName }}</el-tag>
            <el-button type="text" @click="particularsClicks(scope.row)">{{
              scope.row.Title
            }}</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="LastUpdateTime" label="更新时间" align="center" :formatter="formatter">
        </el-table-column>
        <el-table-column label="发布状态" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.PublishStatus == 0" style="color: #ff4444"
              >未发布</span
            >
            <span v-else style="color: #51cc87">已发布</span>
          </template>
        </el-table-column>
        <!-- <el-table-column label="PV/UV" align="center" width="200"> -->
        <!-- :render-header="renderHeader" -->
        <!-- <template slot-scope="scope">
            {{ scope.row.Pv + "/" + scope.row.Uv }}
          </template>
        </el-table-column> -->
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.PublishStatus == 1">
              <el-button
                type="text"
                @click="unpublish(scope.row)"
                style="color: #ff4444"
                >取消发布</el-button
              >
              <el-button
                type="text"
                @click="removeItem(scope.row)"
                style="color: #ff4444"
                >删除</el-button
              >
            </div>
            <div v-else>
              <el-button type="text" @click="issueArticle(scope.row)"
                >发布</el-button
              >
              <el-button type="text" @click="editClicks(scope.row)"
                >编辑</el-button
              >
              <el-button
                type="text"
                @click="removeItem(scope.row)"
                style="color: #ff4444"
                >删除</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-if="pageshow"
        background
        :current-page="list.CurrentIndex"
        @current-change="handleCurrentChange"
        layout="prev, pager, next"
        :total="totals"
      >
      </el-pagination>
    </el-card>
    <!-- 添加的弹框 -->
    <el-dialog
      v-dialogDrag
      :title="editTitle ? '编辑' : '添加'"
      :visible.sync="dialogVisible"
      width="1092px"
      :before-close="handleClose"
      :modal-append-to-body="false"
      :center="true"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
     
          <el-form-item prop="addBreed" style="display:inline-block;">
          <el-select
            style="width: 400px"
            placeholder="添加品种"
            v-model="ruleForm.addBreed"
          >
            <el-option
              v-for="item in varietyList"
              :key="item.ChartPermissionId"
              :value="item.ChartPermissionId"
              :label="item.ChartPermissionName"
            >
            </el-option>
          </el-select>
            
        </el-form-item>
        <el-form-item prop="addTime" style="display:inline-block;marginLeft: 136px;">
        <div>
            <span style="marginRight: 20px">发布时间</span>
            <el-date-picker
              v-model="ruleForm.addTime"
              style="width: 420px"
              type="date"
              placeholder="选择日期"
              :picker-options="pickerOptions"
              format="yyyy-MM-dd"
              @change="dateChange"
              value-format="yyyy-MM-dd HH:mm:ss"
            >
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item prop="addTetle">
          <el-input
            v-model="ruleForm.addTetle"
            placeholder="请输入标题"
            style="width: 100%; margin: 10px 0 10px"
          ></el-input>
        </el-form-item>

        <el-form-item prop="addEditor">
          <div id="leftfroala">
            <froala
              v-model="ruleForm.addEditor"
              id="froala-editor"
              ref="froalaEditor"
              :tag="'textarea'"
              :config="froalaConfig"
            ></froala>
          </div>
        </el-form-item>
     
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="saveForm">保存</el-button>
        <el-button type="primary" @click="submitForm">发布</el-button>
      </span>
    </el-dialog>
    <!-- 详情的弹框 -->
    <el-dialog
     v-dialogDrag
     width="1092px"
      class="edit-dialog"
      title="详情"
      :visible.sync="dialogVisibleEdit"
      :modal-append-to-body="false"
      :center="true"
      :before-close="handleClosedeit"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div>
        <div class="edit-dialog-box">
        <div style="float:left;">  <span>品种:</span> <span>{{ editList.ChartPermissionName }}</span></div>
          <div class="teim-box" style="float: right;">
          <span style="marginRight: 20px">发布时间</span>
          <el-date-picker
            v-model="editList.ActualPublishTime"
            style="width: 420px"
            type="date"
            placeholder="选择日期"
            :picker-options="pickerOptions"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </div>
        </div>
        <el-input
          v-model="editList.Title"
          style="width: 100%; margin: 20px 0 10px"
        ></el-input>
        <!-- <el-input type="textarea" v-model="editList.Body" v-html="editList.Body" :rows="10"> -->
        <div v-html="editList.Body" class="details"></div>
        <!-- </el-input> -->
      
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleEdit = false">关闭</el-button>
        <el-popover placement="bottom" trigger="click">
          <div class="wxImg">
            <img
              src="~@/assets/img/wxfx.png"
              style="width: 15px; height: 15px"
            />
            <span>微信扫一扫</span>
            <vue-qr
              :text="linkUrl"
              :margin="0"
              colorDark="#333"
              colorLight="#fff"
              :dotScale="1"
              :size="100"
            ></vue-qr>
          </div>
          <el-button slot="reference" ref="reference" type="primary"
            >分享</el-button
          >
        </el-popover>
      </span>
    </el-dialog>

    <!-- 二维码 -->
  </div>
</template>

<script>
import { morningPaper } from "@/api/api.js";
import VueFroala from "vue-froala-wysiwyg";
// import QrCode from "qrcode"; //引入二维码
import vueQr from "vue-qr";
export default {
  name: "everyday",
  components: {
    vueQr,
  },
  props: {},
  data() {
    var that = this;
    return {
      //弹框的添加
      ruleForm: {
        addBreed: "",
        addTetle: "",
        addEditor: "",
        addTime: "",
        ArticleId: null,
      },
      list: {
        PageSize: 6, //每页条数
        CurrentIndex: 1, //当前页码值
        KeyWord: "", //关键字搜索
        Status: "", //发布状态 1已发布 0未发布
        ChartPermissionIds: "", //分类ID
      },
      listData: [], //表格数据
      varietyList: [], //全部分类
      totals: "", //条数
      options: [
        {
          value: "0",
          label: "未发布",
        },
        {
          value: "1",
          label: "已发布",
        },
      ], //发布的状态
      dialogVisible: false, //添加弹框
      dialogVisibleEdit: false, //编辑弹框
      editor: null,
      lastEditRange: null,
      report_draft_id: 0,
      froalaConfig: {
        toolbarButtons: [
          "insertImage",
          "embedly",
          "textColor",
          "bold",
          "italic",
        ],
        height: 350,
        fontSizeDefaultSelection: "16",
        theme: "dark", //主题
        placeholderText: "请输入内容",
        language: "zh_cn", //国际化
        imageUploadURL: process.env.API_ROOT + "/report/uploadImg", //上传url
        videoUploadURL: process.env.API_ROOT + "/report/uploadImg", //上传url
        fileUploadURL: process.env.API_ROOT + "/report/uploadImg", //上传url 更多上传介绍 请访问https://www.froala.com/wysiwyg-editor/docs/options
        imageDefaultWidth: false,
        // imageEditButtons:['imageAlign', 'imageCaption', 'imageRemove', '|', 'imageLink', 'linkOpen', 'linkEdit', 'linkRemove', '-', 'imageDisplay', 'imageStyle', 'imageAlt', 'imageSize'],
        quickInsertButtons: ["image", "table", "ul", "ol", "hr"], //快速插入项
        toolbarVisibleWithoutSelection: true, //是否开启 不选中模式
        // disableRightClick:true,//是否屏蔽右击
        // colorsHEXInput:false,//关闭16进制色值
        toolbarSticky: false, //操作栏是否自动吸顶
        // zIndex:99999,
        saveInterval: 0,
        charCounterCount: false,
        reportloadding: false,
        lastsavetime: "",
        isAddEnter: false, //是否已经添加过
        timer: null,
        ischange: false,
        isPublishloading: false,
      }, //富文本
      linkUrl: "", //二维码的链接
      rules: {
        addBreed: [
          { required: true, message: "请选择品种", trigger: "change" },
        ],
        addTetle: [{ required: true, message: "请输入标题", trigger: "blur" }],
        addEditor: [
          { required: true, message: "请输入正文内容", trigger: "blur" },
        ],
        addTime: [
          {
            type: "string",
            required: false,
            message: "请选择日期",
            trigger: "change",
          },
        ],
      }, //校验规则
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 24 * 60 * 60 * 1000;
        },
      }, //初始化时间
      editList: {},
      editTitle: false,
      pvUvList: [], //pvUv
      primaryBtn: true,
      pageshow: true,
    };
  },
  computed: {
    getTimer() {
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      month = month < 10 ? "0" + month : month;
      var datee = date.getDate();
      datee = datee < 10 ? "0" + datee : datee;
      var day = date.getDay();
      var time = year + "-" + month + "-" + datee;
      function getTimerr() {
        var time = new Date();
        var hour = time.getHours();
        hour = hour < 10 ? "0" + hour : hour;
        var minute = time.getMinutes();
        minute = minute < 10 ? "0" + minute : minute;
        var second = time.getSeconds();
        second = second < 10 ? "0" + second : second;
        return hour + ":" + minute + ":" + second;
      }
      return time + " " + getTimerr();
    },
  },
  watch: {},
  created() {
    this.ruleForm.addTime = this.getTimer + "";
  },
  mounted() {
    this.getList();
    this.getmyfllow();
    this.getPVAndUv();
  },
  methods: {
    //获取文章列表
    getList() {
      morningPaper
        .getList(this.list)
        .then((res) => {
          if (!res.Success) return this.$message.error(res.Msg);
          this.listData = res.Data.List;
          this.totals = res.Data.Paging.Totals;
        })
        .catch((err) => {});
    },
    //获取个人分类
    getmyfllow() {
      morningPaper.getmyfllow().then((res) => {
        if (!res.Success) return this.$message.error(res.Msg);
        this.varietyList = res.Data.List;
      });
    },
    //客户检索按钮事件
    searching() {
      this.getList();
    },
    //删除的事件
    removeItem(item) {
      this.$confirm("此操作将永久删除该文章, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          morningPaper
            .articleDelete({
              ArticleId: item.ArticleId,
            })
            .then((res) => {
              if (!res.Success) return this.$message.error(res.Msg);
              this.$message.success("删除成功!");
              this.getList();
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //取消发布
    unpublish(item) {
      this.$confirm("此操作将取消发布此文章, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          morningPaper
            .articleUnpublish({ ArticleId: item.ArticleId })
            .then((res) => {
              if (!res.Success) return this.$message.error(res.Msg);
              this.$message.success("取消发布成功!");
              this.getList();
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    //发布文章的事件
    issueArticle(item) {
      this.$confirm("此操作将发布此文章, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          item.TimingPublishTime = "";
          morningPaper.articleFirstadd(item).then((res) => {
            if (!res.Success) return this.$message.error(res.Msg);
            this.$message.success("发布成功！");
            this.getList();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    //发布状态的事件和选择品种
    optionsChange() {
      this.list.CurrentIndex = 1;
      this.getList();
    },
    //分页
    handleCurrentChange(val) {
      this.list.CurrentIndex = val;
      this.getList();
      this.pageshow = false; //让分页隐藏
      this.$nextTick(() => {
        //重新渲染分页
        this.pageshow = true;
      });
    },
    //添加的确定事件
    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          morningPaper
            .articleFirstadd({
              Title: this.ruleForm.addTetle,
              Body: this.ruleForm.addEditor,
              ChartPermissionId: this.ruleForm.addBreed,
              TimingPublishTime: this.ruleForm.addTime,
              ArticleId: this.ruleForm.ArticleId,
            })
            .then((res) => {
              if (res.Success) {
                this.$message.success("发布成功!");
                this.getList();
                this.editTitle = false;
                this.dialogVisible = false;
                this.ruleForm = {
                  addBreed: "",
                  addTetle: "",
                  addEditor: "",
                  addTime: this.getTimer,
                };
              } else {
              }
            });
        } else {
          return false;
        }
      });
    },
    //添加保存的事件
    saveForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          morningPaper
            .articlePreservation({
              Title: this.ruleForm.addTetle,
              Body: this.ruleForm.addEditor,
              ChartPermissionId: this.ruleForm.addBreed,
              TimingPublishTime: this.ruleForm.addTime,
              ArticleId: this.ruleForm.ArticleId,
            })
            .then((res) => {
              if (!res.Success) return this.$message.error(res.Msg);
              this.$message.success("保存成功!");
              this.getList();
              this.editTitle = false;
            });
          this.dialogVisible = false;
          this.ruleForm = {
            addBreed: "",
            addTetle: "",
            addEditor: "",
            addTime: this.getTimer,
          };
        } else {
          return false;
        }
      });
    },
    // 添加弹框X号关闭的事件
    handleClose() {
      this.$refs.ruleForm.resetFields();
      this.dialogVisible = false;
      this.editTitle = false;
    },
    // 编辑弹框X号关闭的事件
    handleClosedeit() {
      this.dialogVisibleEdit = false;
    },
    //编辑的事件
    particularsClicks(item) {
      // if(!item.PublishStatus==1) {
      //  this.primaryBtn=false;
      // }else {
      //    this.primaryBtn=true;
      // }
      morningPaper
        .articleDetail({
          ArticleId: item.ArticleId,
        })
        .then((res) => {
          if (!res.Success) return this.$message.error(res.Msg);
          this.linkUrl = `https://ficc.hzinsights.com/manage/articleList?Code=${res.Data.Code}`;
          this.editList = res.Data;
        });
      this.dialogVisibleEdit = true;
    },
    referenceClick() {
      console.log(this.$refs.reference);
      // this.$refs.reference.onclick()
    },
    //编辑的点击事件
    editClicks(item) {
      this.ruleForm = {
        addBreed: item.ChartPermissionId,
        addTetle: item.Title,
        addEditor: item.Body,
        addTime: this.getTimer + "",
        ArticleId: item.ArticleId,
      };
      this.dialogVisible = true;
      this.editTitle = true;
    },
    //pvuv
    getPVAndUv() {
      morningPaper.getPVAndUv().then((res) => {
        this.pvUvList = res.Data[0];
      });
    },
    dateChange(e) {},
  },
  update() {
    $("#leftfroala").find("p").css({ fontSize: "16px" });
    $("#leftfroala").find("p strong span").css({ fontSize: "16px" });
    $("#leftfroala")
      .find(".fr-placeholder")
      .css({ fontSize: "16px", lineHeight: "25.6px" });
  },
};
</script>
<style  lang="scss">
.container-everyday {
  padding: 0;
  margin: 0;
  .box-card {
    padding: 0;
    margin: 0;
    .potential_top {
      float: right;
    }
    .pvuv {
      display: inline-table;
      max-width: 152px;
      min-width: 100px;
      height: 40px;
      margin-left: 25px;
      line-height: 40px;
      background: #f0f2f5;
      text-align: center;
      color: #666666;
    }
  }
  .el-pagination {
    margin-top: 90px;
    text-align: right;
    /deep/ .number {
      background: #eef0f3 !important;
    }
  }
  .bottom-card {
    position: relative;
    .el-tag {
      position: absolute;
      left: 20px;
    }
  }
  .el-dialog__body {
    padding-top: 15px !important;
  }
  .el-dialog__footer {
    text-align: center !important;
    .el-button {
      margin-right: 30px;
    }
  }


  .details {
    border: 1px solid #edeff4;
    width: 100%;
    height: 400px !important;
    margin: 20px 0;
    overflow: auto;
    img {
      max-width: 100%;
      max-height: 800px;
    }
  }
  .fr-second-toolbar {
    display: none;
  }
}
.edit-dialog-box {
  height: 30px;
  line-height: 30px;
}
.edit-dialog .el-dialog__header {
  border-bottom: 1px solid #edeff4;
}

.edit-dialog .el-dialog__footer {
  height: 80px;
  line-height: 60px;
  border-top: 1px solid #edeff4;
}
.el-popover {
  min-width: 100px;
  max-width: 100px;
  background: #ffffff;
  border: 1px solid #dfdfdf;
  opacity: 1;
  // bottom:0px
  .wxImg {
    // padding-bottom: 5px;
    img {
      vertical-align: middle;
      margin-right: 8px;
      margin-bottom: 3px;
    }
    span {
      display: inline-block;
      text-align: right;
      margin-bottom: 3px;
    }
  }
}
</style>
