<template>
  <div class="_tablepage">
    <searchForm
      ref="searchForm"
      :searchForm="pageData.searchForm"
      :searchData="pageData.queryData"
      :searchHandle="pageData.searchHandle"
    >
    </searchForm>
    <obj-table-plus
      style="height: 60vh"
      @query="searchTableList"
      ref="oTable"
      v-model="pageData.tableData"
      :isPagination="true"
      :tableCols="pageData.tableCols"
      :tableProp="tableProp"
      :toolbarProp="{}"
      :tableEvent="{ 'select-change': selectChange }"
    />
    <!-- <cusTable
      :loading="loading"
      :isSelection="true"
      :isIndex="true"
      :isPagination="true"
      :isHandle="true"
      :tableCols="pageData.tableCols"
      :tableHandles="pageData.tableHandles"
      :tableData="pageData.tableData"
      :tablePage="pageData.tablePage"
      @handleCurrentChange="searchTableList"
      @selectChange="selectChange"
      @handleSizeChange="searchTableList"
    ></cusTable> -->
    <modal
      ref="modalRef"
      :modalConfig="pageData.modalConfig"
      :modalForm="pageData.modalForm"
      :modalData="pageData.modalData"
      :modalHandles="pageData.modalHandles"
      @closeModal="closeModal()"
    ></modal>
     <!-- 审核弹窗 -->
    <ApprovalModal type="content" ref="ApprovalModal" @refresh="$refs.oTable.refresh()"/>
  </div>
</template>
<script>
import ApprovalModal from '../popup/approval.vue'
import modal from "@/components/common/modal/modal.vue";
import searchForm from "@/components/common/searchform/searchForm.vue";
import cusTable from "@/components/common/table/custable.vue";
export default {
  components: { searchForm, cusTable, modal,ApprovalModal },
  data() {
    return {
      // 加载动画
      tableProp: {
        height: "auto",
      },
      typeList: [],
      pageData: {
        //查询表单内容 start
        searchForm: [
          {
            type: "Input",
            label: "关键字",
            size: "mini",
            prop: "searchName",
            placeholder: "标题、来源、编辑者名称",
            width: "230px",
          },
          //   {
          //     type: "Cascader",
          //     label: "资讯分类",
          //     size:"mini",
          //     prop: "mainTypeId",//实际传参时进行了处理
          //     data: [],
          //   },
          {
            type: "Select",
            label: "内容类型",
            size: "mini",
            prop: "searchType",
            options: [
              {
                label: "内容轮播图",
                value: 3,
              },
              {
                label: "学习轮播图",
                value: 4,
              },
              {
                label: "地方内容",
                value: 2,
              },
              {
                label: "红色内容",
                value: 1,
              },
            ],
          },
          {
            type: "Select",
            prop: "isVideo",
            label: "信息类型",
            size: "mini",
            options: [
              { label: "资讯", value: 0 },
              { label: "视频", value: 1 },
            ],
            width: "300px",
          },
          {
            size: "mini",
            type: "DateTimeRange",
            label: "发布时间范围",
            prop: "time",
          },
          {
            type: "Select",
            label: "审核状态",
            prop: "examineStatus",
            default:true,
            size: "mini",
            options: [
               { label: "未审核", value: 0 },
              { label: "审核通过", value: 1 },
              { label: "审核未通过", value: 2 },
            ],
          },
        ],
        //查询表单内容 end
        //查询条件 start
        queryData: {
          searchName: "",
          mainTypeId: "",
          time: [],
          searchType: 3,
          isVideo: 0,
          examineStatus:'',
        },
        //查询条件 end
        //查询表单按钮start
        searchHandle: [
          {
            label: "查询",
            size: "mini",
            type: "primary",
            handle: () => this.$refs.oTable.reload(),
            auth: "reportDatasource_search",
          },
          {
            label: "重置",
            size: "mini",
            type: "warning",
            handle: () => this.resetSearch(),
            auth: "reportDatasource_search",
          },
        ],
        //查询表单按钮end
        //表格数据start
        tableData: [],
        //表格数据end
        //表格工具栏按钮 start
        tableHandles: [
          //   {
          //     label: "新增",
          //     type: "primary",
          //     handle: () => this.showModal(this.commonConstants.modalType.insert),
          //     auth: "reportDatasource_insert",
          //   },
          //   {
          //     label: "批量删除",
          //     type: "danger",
          //     handle: () => this.deleteBatch(),
          //     auth: "reportDatasource_batchDelete",
          //   },
        ],
        //表格工具栏按钮 end
        selectList: [], //表格选中的数据
        //表格分页信息start
        tablePage: {
          currentPage: 1,
          pageSize: 5,
          pageTotal: 0,
          pageSizeRange: [5, 10, 20, 50],
        },
        //表格分页信息end
        //表格列表头start
        tableCols: [
          { title: "标题", field: "title", align: "center", fixed: "left" },
          { title: "副标题", field: "subtitle", align: "center" },
          { title: "主分类名", field: "mainTypeName", align: "center" },
          { title: "子分类名", field: "secondTypeName", align: "center" },
          { title: "资讯来源", field: "source", align: "center" },
          { title: "编辑者", field: "editorName", align: "center" },
          { title: "作者", field: "author", align: "center" },
          {
            title: "封面",
            type: "jsx",
            field: "imageUrl",
            align: "center",
            render: ({ row }) => {
              // @/assets/images/noimg.svg
              return (
                <el-image
                  fit="cover"
                  src={
                    row.imageUrl
                      ? row.imageUrl
                      : require("@/assets/images/noimg.svg")
                  }
                ></el-image>
              );
            },
          },
          // { title: "外链", field: "contentLink", align: "center" },
          { title: "阅读数", field: "readNumber", align: "center" },
          { title: "点赞数", field: "likeNumber", align: "center" },
          { title: "评论数", field: "commentNumber", align: "center" },
          { title: "收藏数", field: "collectNumber", align: "center" },
          {
            title: "审核状态",
            field: "createTime",
            align: "center",
            // "title-help":{message: '开关开启代表通过审核，关闭代表不通过审核'},
            type: "jsx",
            render: ({ row }) => {
              switch (row.examineStatus) {
                case 0:
                  return (
                    <span>
                      <span style="color:gray">未审核</span>
                    </span>
                  );
                case 1:
                  return (
                    <span>
                      <span style="color:green">审核通过</span>
                    </span>
                  );
                case 2:
                  return (
                    <span>
                      <span style="color:red">审核未通过</span>
                    </span>
                  );
                default:
                  return (<span></span>);
              }
            },
          },
          {
            title: "操作",
            field: "operation",
            align: "center",
            type: "button",
            fixed: "right",
            btnList: [
              {
                label: "查看",
                type: "text",
                auth: "reportDatasource_getDetail",
                handle: (row) =>
                  this.showModal(this.commonConstants.modalType.detail, row),
              },
              {
                label: "审核",
                type: "text",
                handle: (row) =>
                  this.$refs.ApprovalModal.show({...row,contentType:this.pageData.queryData.searchType})
              },
            ],
          },
        ],
        //表格列表头end
        //modal配置 start
        modalConfig: {
          title: "新增", //弹窗标题,值为:新增，查看，编辑
          show: false, //弹框显示
          formEditDisabled: false, //编辑弹窗是否可编辑
          width: "80vw", //弹出框宽度
          modalRef: "modalRef", //modal标识
          type: "1", //类型 1新增 2编辑 3保存
        },
        //modal配置 end
        //modal表单 start
        modalForm: [
          {
            type: "Input",
            label: "标题",
            prop: "title",
            // rules: { required: true, maxLength: 100 },
            width: "900px",
            placeholder: "",
            disabled: () => true,
          },

          {
            type: "Input",
            label: "副标题",
            prop: "subtitle",
            // rules: { maxLength: 100 },
            width: "900px",
            placeholder: "",
            disabled: () => true,
          },
          {
            type: "Cascader",
            label: "资讯分类",
            prop: "mainTypeId", //实际传参时进行了处理
            data: [],
            // rules: { required: true },
            width: "300px",
            disabled: () => true,
          },
          {
            type: "Input",
            label: "资讯来源",
            prop: "source",
            // rules: { required: true, maxLength: 100 },
            width: "300px",
            disabled: () => true,
            placeholder: "",
          },
          {
            type: "Input",
            label: "作者",
            prop: "author",
            // rules: { maxLength: 100 },
            width: "300px",
            disabled: () => true,
            placeholder: "",
          },
          {
            type: "Input",
            label: "编辑者",
            prop: "editorName",
            // rules: { maxLength: 100 },
            width: "300px",
            disabled: () => true,
            placeholder: "",
          },
          // {
          //   type: "Input",
          //   label: "外链",
          //   prop: "contentLink",
          //   rules: { maxLength: 100 },
          //   width: "300px",
          // },
          {
            type: "Input",
            label: "关键词",
            prop: "keywords",
            // rules: { maxLength: 100 },
            width: "300px",
            disabled: () => true,
            placeholder: "",
          },
          {
            type: "Radio",
            prop: "isVideo",
            label: "内容类型",
            radios: [
              { label: "资讯", value: "0" },
              { label: "视频", value: "1" },
            ],
            width: "300px",
            disabled: () => true,
          },

          {
            type: "Img",
            label: "封面",
            prop: "imageUrl",
            // prop: "fileList",
            // accept: ".jpg,.jpeg,.png,.JPG,.JPEG",
            width: "300px",
          },
          {
            type: "ShowTinymce",
            label: "资讯内容",
            prop: "content",
            // rules: { required: true },
            width: "1000px",
          },
        ],
        newModalForm: [
          {
            type: "Upload",
            label: "封面",
            fileUrl: "imageUrl",
            prop: "fileList",
            accept: ".jpg,.jpeg,.png,.JPG,.JPEG",
            width: "300px",
          },
        ], //咨询专属内容
        videoModalForm: [
          {
            type: "Upload",
            label: "封面",
            fileUrl: "imageUrl",
            prop: "fileList",
            accept: ".jpg,.jpeg,.png,.JPG,.JPEG",
            width: "300px",
          },
          {
            type: "Upload",
            label: "视频",
            fileUrl: "videoUrl",
            prop: "fileListVideo",
            listType: "text",
            // rules: { required: true },
            width: "300px",
            isVideo: true,
            accept: ".mp4,.avi,.mov,.rmvb,.flv,.MP4,.AVI,.MOV,.RMVB,.FLV",
            tips: "请上传视频文件",
          },
        ], //视频专属内容
        //modal表单 end
        //modal 数据 start
        modalData: {
          userId: "",
          content: "",
          fileUrl: "",
          fileList: [],
          isVideo: "0",
          videoUrl: "",
          source: "",
          fileListVideo: [],
        },
        //modal 数据 end
        //modal 按钮 start
        modalHandles: [
          { label: "取消", type: "default", handle: () => this.closeModal() },
          { label: "提交", type: "primary", handle: () => this.save() },
        ],
        //modal 按钮 end
      },
      parentId: "",
    };
  },
  activated() {
    this.$refs.oTable.refresh();
    this.searchContentType();
  },
  watch: {
    "pageData.modalData.isVideo": {
      handler: function (val, oldval) {
        if (val === "1" && oldval === "0") {
          this.pageData.modalForm.splice(
            -1 - this.pageData.newModalForm.length,
            this.pageData.newModalForm.length,
            ...this.pageData.videoModalForm
          );
        } else if (val === "0" && oldval === "1") {
          this.pageData.modalForm.splice(
            -1 - this.pageData.videoModalForm.length,
            this.pageData.videoModalForm.length,
            ...this.pageData.newModalForm
          );
        }
      },
    },
    "pageData.modalData.fileList": {
      handler: function (val) {
        if (val && val.length === 0) {
          this.pageData.modalData.imageUrl = "";
        }
      },
    },
    "pageData.modalData.fileListVideo": {
      handler: function (val) {
        if (val && val.length === 0) {
          this.pageData.modalData.videoUrl = "";
        }
      },
    },
    "pageData.queryData.searchType": {
      handler: function (val) {
        this.$refs.oTable.reload();
      },
    },
  },

  methods: {
    /**
     * @description: 获取表格数据
     * @param {type}
     * @return:
     * @author: ym
     */
    searchTableList(pageNo, pageSize) {
      // 初始化obj
      var obj = {};
      Object.assign(obj, this.pageData.queryData, this.pageData.tablePage);
      obj.page = this.pageData.tablePage.currentPage;
      obj.limit = this.pageData.tablePage.pageSize;
      let data = obj.mainTypeId;
      obj.mainTypeId = data[0] ? data[0] : "";
      obj.secondTypeId = data[1] ? data[1] : "";
      delete obj["pageSizeRange"];
      if (obj.time.length == 2) {
        obj.startTime = obj.time[0];
        obj.endTime = obj.time[1];
      }
      delete obj.time;
      // 请求数据
      let searchType = this.pageData.queryData.searchType;
      if (searchType == 3) {
        this.$api
          .getContentImage({ ...obj, page: pageNo, limit: pageSize })
          .then((res) => {
            this.$refs.oTable.complete(
              res.data.page.list,
              res.data.page.totalCount
            );
          });
      } else if (searchType == 4) {
        this.$api
          .getLocalServiceImage({ ...obj, page: pageNo, limit: pageSize })
          .then((res) => {
            this.$refs.oTable.complete(
              res.data.page.list,
              res.data.page.totalCount
            );
          });
      } else if (searchType == 2) {
        this.$api
          .getLocalContentInfoListByParams({
            ...obj,
            page: pageNo,
            limit: pageSize,
          })
          .then((res) => {
            this.$refs.oTable.complete(
              res.data.page.list,
              res.data.page.totalCount
            );
          });
      } else if (searchType == 1) {
        this.$api
          .getContentInfoListByParams({ ...obj, page: pageNo, limit: pageSize })
          .then((res) => {
            this.$refs.oTable.complete(
              res.data.page.list,
              res.data.page.totalCount
            );
          });
      }
      // this.$api.getContentInfoListByParams({...obj,page:pageNo,limit:pageSize}).then((res) => {
      //   this.$refs.oTable.complete(
      //     res.data.page.list,
      //     res.data.page.totalCount
      //   );
      // });
    },
    // 查询分类
    searchContentType() {
      this.$api.getContentTypeList().then((res) => {
        let data = res.data.list.map((item) => {
          if (item.mainTypeName === "##") {
            item.label = "地方";
          } else {
            item.label = item.mainTypeName;
          }
          item.value = item.mainTypeId;
          item.children = item.children.map((item1) => {
            item1.label = item1.secondTypeName;
            item1.value = item1.secondTypeId;
            return item1;
          });
          if (item.children.length === 0) {
            delete item.children;
          }
          return item;
        });
        this.pageData.searchForm[1].data = data;
        this.pageData.modalForm[2].data = data;
      });
    },
    // 重置
    resetSearch() {
      // this.commonUtil.clearObj(this.pageData.queryData);
      this.$refs.searchForm.$refs.searchFormRef.resetFields();
      // this.searchTableList();
      this.$refs.oTable.reload();
    },
    /**
     * @description: modal显示
     * @param {type} 类型 1新增，2编辑 3详情
     * @param {id} 数据唯一标识
     * @return:
     * @author: ym
     */
    showModal(type, row) {
      this.commonUtil.clearObj(this.pageData.modalData); //清空modalData
      this.$nextTick(() => {
        this.$refs["modalRef"].$refs["modalFormRef"].clearValidate(); //校验重置
      });
      this.pageData.modalData.source = this.$newSource; //获取默认的资讯来源
      this.pageData.modalData.isVideo = "0"; //补充isVideo 不会触发watch
      this.commonUtil.showModal(this.pageData.modalConfig, type);
      if (type != this.commonConstants.modalType.insert) {
        this.getDetail(row);
      }
    },
    /**
     * @description: 获取详细数据
     * @param {id} 数据唯一标识
     * @return:
     * @author: ym
     */
    getDetail(row) {
      if (row.imageUrl) {
        row.fileList = [
          {
            url: row.imageUrl,
          },
        ];
      }
      if (row.videoUrl) {
        row.fileListVideo = [
          {
            url: row.videoUrl,
            // +'?x-oss-process=video/snapshot,t_10000,m_fast'
          },
        ];
      }
      if (row.secondTypeId && typeof row.mainTypeId === "string") {
        row.mainTypeId = [row.mainTypeId, row.secondTypeId];
      }
      row.isVideo = row.isVideo + "";
      this.$nextTick(() => {
        this.pageData.modalData = JSON.parse(JSON.stringify(row));
      });
      // console.log(this.pageData.modalData)
    },
    /**
     * @description: 关闭modal
     * @param
     * @return:
     * @author: ym
     */
    closeModal() {
      this.pageData.modalConfig.show = false; //关闭modal
    },
    selectChange(rows) {
      this.pageData.selectList = rows;
    },
  },
};
</script>
<style lang="scss" scoped>
.content-dialog ::v-deep .el-dialog__body {
  padding: 0px;
}

>>> .el-input.is-disabled .el-input__inner {
  background-color: #fff;
  color: rgb(100, 100, 100);
  cursor: default;
}
>>> .el-cascader .el-input .el-icon-arrow-down::before {
  content: "";
  /* cursor:default; */
}
>>> .el-input.is-disabled .el-input__icon {
  cursor: default;
}
</style>