<template>
  <div class="channelcodeList page-body">
    <div class="page-search row items-center">
      <div class="col row wrap q-mr-lg q-col-gutter-md">
        <div class="col-3">
          <q-input
            @keyup.enter.native="search"
            clearable
            filled
            v-model="msg.Title"
            label="标题"
            @clear="search"
            maxlength="20"
          />
        </div>
      </div>
    </div>
    <div class="page-content">
      <q-table
        :pagination="msg"
        :loading="loading"
        no-data-label="暂无相关数据"
        flat
        class="sticky-tow-column-table sticky-right-column-table"
        separator="none"
        title=""
        :data="data"
        :columns="columns"
        row-key="name"
      >
        <template v-slot:top="props">
          <div class="col-2 q-table__title">学习园地列表</div>
          <q-space />

          <q-btn
            color="accent"
            style="float:right;margin-right:0;"
            size="sm"
            class="q-mr-md"
            icon="add"
            label="新增"
            @click="goDetail(0)"
          ></q-btn>
          <q-btn
            color="accent"
            style="float:right;margin-right:0;"
            size="sm"
            class="q-ml-md"
            label="公众号同步"
            @click="OfficialAccountsSync"
          ></q-btn>
        </template>

        <template v-slot:body-cell-Img="props">
          <q-td :props="props">
            <q-img :src="props.row.Img" :ratio="4 / 3" />
          </q-td>
        </template>
        <template v-slot:body-cell-Digest="props">
          <q-td :props="props">
            <div
              style="width:400px;white-space: pre-line;"
              v-html="props.row.Digest"
            ></div>
          </q-td>
        </template>
        <template v-slot:body-cell-LinkUrl="props">
          <q-td :props="props">
            <div
              style="color:var(--q-color-primary)"
              @click="openLink(props.row.LinkUrl)"
            >
              查看链接
            </div>
          </q-td>
        </template>
        <template v-slot:body-cell-optioned="props">
          <q-td>
            <q-btn
              flat
              size="xs"
              style="color:var(--q-color-primary)"
              class="q-mr-xs"
              label="查看详情"
              @click="goDetail(props.row.Id)"
            />
          </q-td>
        </template>
        <template v-slot:bottom>
          <q-pagination
            class="full-width justify-end"
            v-model="msg.PageIndex"
            color="primary"
            :max="pageCount"
            :input="true"
            @input="changePage"
          />
        </template>
      </q-table>
    </div>
   
  </div>
</template>

<script>
import {
  geLearningGardenPage,
  getGoodsDataSync
} from "../../../api/OfficialAccounts/index";
export default {
  meta: {
    title: "学习园地"
  },
  data() {
    return {
      loading: false,
      data: [],
      pageCount: 0,
      msg: {
        PageIndex: 1,
        PageSize: 10,
        rowsPerPage: 10,
        Title: ""
      },
      columns: [
        {
          name: "Id",
          label: "编号",
          field: "Id",
          align: "left"
        },
        {
          name: "Title",
          label: "标题",
          field: "Title",
          align: "left",
          style: "width: 200px"
        },
        {
          name: "Img",
          label: "封面图",
          field: "Img",
          align: "left"
        },
        {
          name: "Digest",
          field: "Digest",
          label: "简介",
          align: "left"
        },
        {
          name: "LinkUrl",
          field: "LinkUrl",
          label: "链接地址",
          align: "left"
        },
        {
          name: "CreateByName",
          field: "CreateByName",
          label: "创建人",
          align: "left"
        },
        {
          name: "CreateTime",
          field: "CreateTime",
          label: "创建时间",
          align: "left"
        },
        {
          name: "optioned",
          label: "操作",
          field: "optioned",
          align: "center"
        }
      ],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.loading = true;
      geLearningGardenPage(this.msg).then(res => {
        this.loading = false;
        this.data = res.Data.PageData;
        this.pageCount = res.Data.PageCount;
      });
    },
    openLink(url) {
      window.open(url, "_blank");
    },
    search() {
      this.msg.PageIndex = 1;
      this.getList();
    },
    //翻页
    changePage(val) {
      this.msg.pageIndex = val;
      this.getList();
    },
    //同步
    OfficialAccountsSync() {
      getGoodsDataSync({}).then(res => {
        if (res.Code == 1) {
          this.Success(res.Message);
          this.search();
        }
      });
    },
    goDetail(id) {
      this.$router.push({
        path: "/enterprise/OfficialAccountsDetail",
        query: {
          Id: id
        }
      });
    }
  }
};
</script>

<style></style>
