<template>
  <div class="app-container">
    <el-card class="app-container__search">
      <xd-search
        v-if="searchForm.length > 0"
        :list="searchForm"
        dateFilter
        v-model="searchParams"
        @onSearch="handleSearch"
      ></xd-search>
    </el-card>
    <el-card class="app-container__list">
      <div class="app-container__list-pagination">
        <xd-pagination-custom
          :pagesize="pageSize"
          :has-next-page.sync="hasNextPage"
          @onPagination="handlePagination"
        ></xd-pagination-custom>
        <div v-if="1">自定义模块</div>
      </div>
      <div class="app-container__list-table">
        <el-table class="app-table" :data="tables" border fit highlight-current-row style="width: 100%">
          <el-table-column align="center" label="ID" width="80" prop="id"></el-table-column>
          <el-table-column align="center" min-width="200" label="广告名称" prop="name"></el-table-column>
          <el-table-column align="center" width="200" label="广告图片">
            <template slot-scope="scope">
              <div class="app-container__list-table-image">
                <el-image
                  :src="scope.row.img_url"
                  :preview-src-list="[scope.row.img_url]">
                </el-image>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" width="100" label="排序" prop="sort"></el-table-column>
          <el-table-column class-name="status-col" label="状态" width="120">
            <template slot-scope="scope">
              <el-tag
                :type="scope.row.status === 'Y'?'success' : 'danger'"
              >{{ scope.row.status === 'Y'? '正常': '禁用' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column align="center" width="200" label="创建时间" prop="created_time"></el-table-column>
          <el-table-column align="center" width="200" label="修改时间" prop="updated_time"></el-table-column>
          <el-table-column align="center" label="操作" width="125" fixed="right">
            <template slot-scope="scope">
              <div class="app-container__list-table-option">
                <el-tooltip effect="dark" content="编辑" placement="top">
                  <router-link target="_blank" :to="toLink(scope.row)">
                    <el-button type="primary" size="mini" icon="el-icon-edit"></el-button>
                  </router-link>
                </el-tooltip>
                <el-tooltip effect="dark" content="删除" placement="top">
                  <el-button type="danger" @click="remove(scope.row)" size="mini" icon="el-icon-delete"></el-button>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="app-container__list-pagination">
        <xd-pagination-custom
          :pagesize="pageSize"
          :has-next-page.sync="hasNextPage"
          @onPagination="handlePagination"
        ></xd-pagination-custom>
      </div>
    </el-card>
  </div>

</template>

<script>
  import XdSearch from "@/components/XdSearch";
  import XdPaginationCustom from "@/components/XdPaginationCustom";

  export default {
    name: "create",
    components: {
      XdPaginationCustom,
      XdSearch
    },

    data() {
      return {
        pageSize: 1,//当前页面数量
        hasNextPage: true, //是否有下一页

        searchForm: [], //搜索区域模块表单
        searchParams: null, // 搜索参数

        tables: [{
          "id": "25",
          "name": "ce",
          "type": "cake_banner",
          "ad_type": "general",
          "app_type": "",
          "sort": "111",
          "operator": "1",
          "operator_name": "rzp@email.com",
          "status": "Y",
          "status_name": "正常",
          "img_url": "https://jfb-public-images.oss-cn-qingdao.aliyuncs.com/admin-upload/202104251512087678.png",
          "redirect_url": "http://sandbox-admin.jufubao.cn/market/poster/edit/2?id=1",
          "updated_time": "2021-11-19 09:20:14",
          "created_time": "2021-01-28 17:11:59",
          "event_id": "0",
          "is_show_home": "Y",
          "is_show_home_name": "显示"
        }, {
          "id": "547",
          "name": "网络视听",
          "type": "",
          "ad_type": "app",
          "app_type": "video",
          "sort": "100",
          "operator": "1",
          "operator_name": "rzp@email.com",
          "status": "Y",
          "status_name": "正常",
          "img_url": "https://jfb-public-images.oss-cn-qingdao.aliyuncs.com/judianfu20200703092907997.jpeg?x-oss-process=style/common",
          "redirect_url": "https://c.judianfu.cn/web/wx/network-video/index",
          "updated_time": "",
          "created_time": "2021-10-20 16:48:19",
          "event_id": "0",
          "is_show_home": "Y",
          "is_show_home_name": "显示"
        }, {
          "id": "543",
          "name": "蛋糕",
          "type": "",
          "ad_type": "app",
          "app_type": "cake",
          "sort": "100",
          "operator": "1",
          "operator_name": "rzp@email.com",
          "status": "Y",
          "status_name": "正常",
          "img_url": "https://jfb-public-images.oss-cn-qingdao.aliyuncs.com/judianfu20200721171346261.jpeg",
          "redirect_url": "https://c.judianfu.cn",
          "updated_time": "",
          "created_time": "2021-10-20 16:48:19",
          "event_id": "0",
          "is_show_home": "Y",
          "is_show_home_name": "显示"
        }, {
          "id": "548",
          "name": "图书兑换",
          "type": "",
          "ad_type": "app",
          "app_type": "book",
          "sort": "100",
          "operator": "1",
          "operator_name": "rzp@email.com",
          "status": "Y",
          "status_name": "正常",
          "img_url": "https://jfb-public-images.oss-cn-qingdao.aliyuncs.com/judianfu20200721171448435.jpeg?x-oss-process=style/common",
          "redirect_url": "https://book.judianfu.cn",
          "updated_time": "",
          "created_time": "2021-10-20 16:48:19",
          "event_id": "0",
          "is_show_home": "Y",
          "is_show_home_name": "显示"
        }, {
          "id": "545",
          "name": "活动",
          "type": "",
          "ad_type": "app",
          "app_type": "event",
          "sort": "100",
          "operator": "1",
          "operator_name": "rzp@email.com",
          "status": "Y",
          "status_name": "正常",
          "img_url": "https://jfb-public-images.oss-cn-qingdao.aliyuncs.com/judianfujudianfunianjiezhuanqu20210830.png?x-oss-process=style/common",
          "redirect_url": "https://s-store.judianfu.cn?event_id=5",
          "updated_time": "2021-12-08 12:25:55",
          "created_time": "2021-10-20 16:48:19",
          "event_id": "0",
          "is_show_home": "Y",
          "is_show_home_name": "显示"
        }, {
          "id": "549",
          "name": "其他广告",
          "type": "",
          "ad_type": "app",
          "app_type": "other",
          "sort": "100",
          "operator": "1",
          "operator_name": "rzp@email.com",
          "status": "Y",
          "status_name": "正常",
          "img_url": "https://jfb-public-images.oss-cn-qingdao.aliyuncs.com/judianfu20200616190943655.jpeg?x-oss-process=style/common",
          "redirect_url": "https://c.judianfu.cn/web/wx/film/hot",
          "updated_time": "",
          "created_time": "2021-10-20 16:48:19",
          "event_id": "0",
          "is_show_home": "Y",
          "is_show_home_name": "显示"
        }, {
          "id": "544",
          "name": "商城",
          "type": "",
          "ad_type": "app",
          "app_type": "store",
          "sort": "100",
          "operator": "1",
          "operator_name": "rzp@email.com",
          "status": "Y",
          "status_name": "正常",
          "img_url": "https://jfb-public-images.oss-cn-qingdao.aliyuncs.com/judianfu20200721171412784.jpeg?x-oss-process=style/common",
          "redirect_url": "",
          "updated_time": "",
          "created_time": "2021-10-20 16:48:19",
          "event_id": "0",
          "is_show_home": "Y",
          "is_show_home_name": "显示"
        }, {
          "id": "550",
          "name": "其他广告1",
          "type": "",
          "ad_type": "app",
          "app_type": "other",
          "sort": "100",
          "operator": "1",
          "operator_name": "rzp@email.com",
          "status": "Y",
          "status_name": "正常",
          "img_url": "https://jfb-public-images.oss-cn-qingdao.aliyuncs.com/judianfu20200616190943655.jpeg?x-oss-process=style/common",
          "redirect_url": "https://c.judianfu.cn/web/wx/film/hot",
          "updated_time": "",
          "created_time": "2021-10-20 16:48:19",
          "event_id": "0",
          "is_show_home": "Y",
          "is_show_home_name": "显示"
        }, {
          "id": "546",
          "name": "礼包兑换",
          "type": "",
          "ad_type": "app",
          "app_type": "delivery",
          "sort": "100",
          "operator": "1",
          "operator_name": "rzp@email.com",
          "status": "Y",
          "status_name": "正常",
          "img_url": "https://jfb-public-images.oss-cn-qingdao.aliyuncs.com/judianfu20200721171429636.jpeg?x-oss-process=style/common",
          "redirect_url": "https://c.judianfu.cn/web/wx/delivery",
          "updated_time": "",
          "created_time": "2021-10-20 16:48:19",
          "event_id": "0",
          "is_show_home": "Y",
          "is_show_home_name": "显示"
        }, {
          "id": "542",
          "name": "电影",
          "type": "book_banner",
          "ad_type": "app",
          "app_type": "film",
          "sort": "100",
          "operator": "1",
          "operator_name": "rzp@email.com",
          "status": "Y",
          "status_name": "正常",
          "img_url": "http://jfb-public-images.oss-cn-qingdao.aliyuncs.com/20200527162721307.png",
          "redirect_url": "http://sandbox-login.jufubao.cn?refresh=1&callback=aHR0cDovL3N0b3JlLmp1ZnViYW8uY24=&params=eyJzeXN0ZW0iOiJmaWxtIn0=",
          "updated_time": "2021-11-29 14:41:12",
          "created_time": "2021-10-20 16:48:19",
          "event_id": "0",
          "is_show_home": "Y",
          "is_show_home_name": "显示"
        }]
      }
    },

    created() {
      this.initSearchForm()
    },

    methods: {

      toLink(item) {
        return '/index'
      },

      remove() {
        this.$confirm('您确定要将当前记录删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {

        }).catch(() => {

        });
      },

      /**
       * @description 初始化搜索模块
       */
      initSearchForm() {
        let searchForm = [
          {
            label: '名称:', //label
            ele: 'el-input', //package 名称
            valueKey: 'name', //form[valueKey]
            value: '', //v-model
            placeholder: '输入广告名称'
          },
          {
            label: '广告位置:', //label
            ele: 'xd-select-list', //package 名称
            valueKey: 'adjust_type', //form[valueKey]
            value: '', //v-model
            placeholder: '请广告位置',
            multiple: false,
            list: [
              {"label": "万利达集团", "value": 4},
              {"label": "中国联通", "value": 5},
              {"label": "中国移动", "value": 6},
              {"label": "味多美", "value": 7},
            ]
          },
          {
            label: '状态:', //label
            ele: 'xd-select-status', //package 名称
            valueKey: 'status', //form[valueKey]
            value: '', //v-model
            isall: true,
            backValueType: '', //返回值类型 1=>返回（Y,N）2=> [true|false] 3=>[1,0] 4=>[1,2]
            placeholder: '请选择状态',
            list: 'status', //status=>状态  best=>推荐  associate=>关联 yes=>是否 open=> 是否开启  check=>审核
          },
        ];

        this.searchForm = searchForm;

      },

      /**
       * @description 搜索事件
       * @param action 动作
       * @param form 搜索请求参数
       */
      handleSearch({action, form}) {
        console.log(this.searchParams)
      },


      handlePagination() {
        if (this.pageSize > 3) this.hasNextPage = false;
        else this.hasNextPage = true;
      }


    }
  }
</script>

<style scoped>

</style>
