<template>
  <div class="app-container">
    <div class="filter-container">
      <!-- <el-button
        class="filter-item"
        style="margin-left: 10px;"
        type="primary"
        icon="el-icon-edit"
        @click="handleJump('create')"
      >新增
      </el-button>
      <el-button
        class="filter-item"
        style="margin-left: 10px;"
        type="primary"
        @click="handleExport"
      >导出
      </el-button> -->
    </div>

    <el-table
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column label="事项名称" min-width="150px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.eventName }}</span>
        </template>
      </el-table-column>

      <el-table-column label="类别" min-width="150px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.type }}</span>
        </template>
      </el-table-column>

      <el-table-column label="事项名称" min-width="150px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.eventName }}</span>
        </template>
      </el-table-column>

      <el-table-column label="事项名称" min-width="150px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.eventName }}</span>
        </template>
      </el-table-column>

      <el-table-column label="事项名称" min-width="150px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.eventName }}</span>
        </template>
      </el-table-column>

      <el-table-column label="事项名称" min-width="150px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.eventName }}</span>
        </template>
      </el-table-column>

      <el-table-column label="事项名称" min-width="150px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.eventName }}</span>
        </template>
      </el-table-column>

      <el-table-column label="事项名称" min-width="150px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.eventName }}</span>
        </template>
      </el-table-column>

      <el-table-column label="事项名称" min-width="150px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.eventName }}</span>
        </template>
      </el-table-column>

      <el-table-column label="事项名称" min-width="150px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.eventName }}</span>
        </template>
      </el-table-column>

      <el-table-column label="事项名称" min-width="150px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.eventName }}</span>
        </template>
      </el-table-column>

      <el-table-column label="事项名称" min-width="150px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.eventName }}</span>
        </template>
      </el-table-column>

      <el-table-column label="事项名称" min-width="150px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.eventName }}</span>
        </template>
      </el-table-column>

      <el-table-column label="事项名称" min-width="150px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.eventName }}</span>
        </template>
      </el-table-column>

      <el-table-column label="事项名称" min-width="150px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.eventName }}</span>
        </template>
      </el-table-column>

      <el-table-column label="事项名称" min-width="150px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.eventName }}</span>
        </template>
      </el-table-column>

      <el-table-column label="事项名称" min-width="150px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.eventName }}</span>
        </template>
      </el-table-column>

      <!-- <el-table-column label="图片" width="130px" align="center">
        <template slot-scope="scope">
          <el-image
            v-if="scope.row.url"
            style="width: 50px;height: 50px;"
            :src="scope.row.url"
            :preview-src-list="[scope.row.url]"
          />
        </template>
      </el-table-column>

      <el-table-column label="跳转类型" width="120px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.type | statusFilter }}</span>
        </template>
      </el-table-column>

      <el-table-column label="跳转地址" width="150px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.params.id || scope.row.params.url }}</span>
        </template>
      </el-table-column>

      <el-table-column label="状态" width="80px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.show ? "正常显示" : "不显示" }}</span>
        </template>
      </el-table-column>

      <el-table-column label="创建时间" width="100px" align="center">
        <template slot-scope="scope">
          <span>{{
            scope.row.createDate | parseTime("{y}-{m}-{d} {h}:{i}:{s}")
          }}</span>
        </template>
      </el-table-column> -->

      <el-table-column label="操作" width="300px" fixed="right" align="center">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="mini"
            @click="handleJump('detail', scope.row)"
          >
            详情
          </el-button>
          <el-button
            type="success"
            size="mini"
            @click="handleJump('change', scope.row)"
          >
            修改
          </el-button>
          <!--<el-button v-if="!scope.row.show" type="primary" size="mini" @click="handlePass(scope.row, true)">-->
          <!--显示-->
          <!--</el-button>-->
          <!--<el-button v-if="scope.row.show" type="primary" size="mini" @click="handlePass(scope.row, false)">-->
          <!--不显示-->
          <!--</el-button>-->
          <el-button
            :type="scope.row.show ? 'warning' : 'success'"
            size="mini"
            @click="
              scope.row.show
                ? handlePass(scope.row, false)
                : handlePass(scope.row, true)
            "
          >{{ scope.row.show ? "不显示" : "显示" }}</el-button>
          <el-button type="danger" size="mini" @click="handleDel(scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-if="total > 0"
      :total="total"
      :page.sync="listQuery.lastPageIndex"
      :limit.sync="listQuery.size"
      @pagination="getList"
    />

    <!-- <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="700px"
    >
      <el-form
        ref="ruleForm"
        :rules="rules"
        :model="bannerItem"
        label-position="right"
        label-width="160px"
        style="max-width: 550px; margin-left:50px;"
      >
        <el-form-item label="标题: " prop="title">
          <el-input
            v-model="bannerItem.title"
            :disabled="formDisabled"
            style="width: 260px"
            placeholder="请输入标题"
          />
        </el-form-item>
        <el-form-item label="游客是否能访问: " prop="guestRead">
          <el-radio-group v-model="bannerItem.guestRead">
            <el-radio :label="true" :disabled="formDisabled">是</el-radio>
            <el-radio :label="false" :disabled="formDisabled">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="点击跳转类型: " prop="type">
          <el-radio-group v-model="bannerItem.type">
            <el-radio label="news" :disabled="formDisabled">新闻详情</el-radio>
            <el-radio label="link" :disabled="formDisabled">外部链接</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          v-if="bannerItem.type === 'news'"
          label="新闻ID: "
          prop="params.id"
        >
          <el-input
            v-model="bannerItem.params.id"
            :disabled="formDisabled"
            style="width: 260px"
            placeholder="请输入新闻ID"
          />
        </el-form-item>
        <el-form-item
          v-if="bannerItem.type === 'link' || bannerItem.type === 'LOGIN_LINK'"
          label="链接: "
          prop="params.url"
        >
          <el-input
            v-model="bannerItem.params.url"
            :disabled="formDisabled"
            style="width: 260px"
            placeholder="请输入链接"
          />
        </el-form-item>
        <el-form-item label="图片:  " prop="url">
          <cut-upload
            v-if="!formDisabled"
            :fixed-number="[2, 1]"
            :init-url="bannerItem.url"
            @imgupload="uploadCbk"
          />
          <img v-else :src="bannerItem.url" style="max-width:100%" alt="" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" :loading="loading" @click="submitLaw">
          确定
        </el-button>
      </div>
    </el-dialog> -->
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import { typeList } from '@/api/convenience'
import { parseTime } from '@/utils'

export default {
  components: { Pagination },
  //   filters: {
  //     statusFilter(status) {
  //       const statusMap = {
  //         'news': '跳转新闻',
  //         'link': '跳转外部链接',
  //         'LOGIN_LINK': '需登录跳转外部链接'
  //       }
  //       return statusMap[status]
  //     }
  //   },
  data() {
    return {
      listLoading: false,
      loading: false,
      list: [],
      total: 0,
      listQuery: {
        // 列表查询
        YW_Content_Code: '',
        YW_Type_Code: ''
        // lastPageIndex: 1,
        // size: 10,
        // extra: {
        //   title: ""
        // }
      },

      //   bannerItem: {
      //     title: "",
      //     type: "news",
      //     guestRead: true,
      //     params: {
      //       id: "",
      //       url: ""
      //     },
      //     url: ""
      //   },
      rules: {
        // title: [{ required: true, message: '标题不能为空', trigger: 'change' }],
        // url: [{ required: true, message: '请上传图片', trigger: 'change' }],
        // guestRead: [{ required: true, message: '请选择', trigger: 'change' }],
        // 'params.url': [{ required: true, message: '链接不能为空', trigger: 'change' }],
        // 'params.id': [{ required: true, message: '新闻ID不能为空', trigger: 'change' }]
        // content: [{ required: true, message: '内容不能为空', trigger: 'change' }]
      }
    //   dialogTitle: "",
    //   formDisabled: false,
    //   dialogFormVisible: false
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      typeList().then(res => {
        console.log(res)
        this.list = res.d
      })
    }
  }
}
</script>

<style>
/* #banner-page .el-icon-circle-close:before{
  color: #ffffff
} */
</style>
