<template>
  <div>
    <el-container>
      <!--搜索-->
      <!--      <el-header class="searchBox">-->
      <!--        <el-form :inline="true" :model="searchForm" class="demo-form-inline">-->
      <!--          <el-form-item label="策略名称">-->
      <!--            <el-input v-model="searchForm.strategyName" placeholder="策略名称" />-->
      <!--          </el-form-item>-->
      <!--          <el-form-item label="key">-->
      <!--            <el-input v-model="searchForm.channelKey" placeholder="key" />-->
      <!--          </el-form-item>-->
      <!--          <el-form-item label="策略类型">-->
      <!--            <el-select v-model="searchForm.strategyType" filterable placeholder="请选择">-->
      <!--              <el-option label="基本" :value="0" />-->
      <!--              <el-option label="活动" :value="1" />-->
      <!--            </el-select>-->
      <!--          </el-form-item>-->
      <!--          <el-form-item label="生效状态">-->
      <!--            <el-select v-model="searchForm.strategyStatus" filterable placeholder="请选择">-->
      <!--              <el-option label="生效" :value="0" />-->
      <!--              <el-option label="未生效" :value="1" />-->
      <!--            </el-select>-->
      <!--          </el-form-item>-->

      <!--          <el-form-item style="float: right">-->
      <!--            <el-button type="primary" @click="searchBtn">搜索</el-button>-->
      <!--            <el-button @click="reset">刷新</el-button>-->
      <!--          </el-form-item>-->
      <!--        </el-form>-->
      <!--      </el-header>-->
      <!--表格-->
      <el-main class="tableBox">
        <vxe-toolbar>
          <template #buttons>
            <vxe-button icon="fa fa-plus" @click="value9 = true">新增</vxe-button>
          </template>
        </vxe-toolbar>
        <vxe-table
          ref="xTable"
          border
          resizable
          show-overflow
          :data="tableData"
          :edit-config="{trigger: 'manual', mode: 'row'}"
        >
          <vxe-table-column
            field="strategyName"
            title="策略名称"
            :edit-render="{name: 'input', attrs: {type: 'text'}}"
          />
          <vxe-table-column
            field="strategyType"
            title="策略类型"
            :edit-render="{name: 'input', attrs: {type: 'text', placeholder: '请输入昵称'}}"
          />
          <vxe-table-column
            field="strategyStatus"
            title="状态"
            :edit-render="{name: '$select', options: [0]}"
          />
          <vxe-table-column
            field="channelKey"
            title="key"
            :edit-render="{name: 'input', attrs: {type: 'text', placeholder: '请输入昵称'}}"
          />
          <vxe-table-column
            field="fullCode"
            title="渠道编码"
            :edit-render="{name: '$input', props: {type: 'float', digits: 2}}"
          />
          <vxe-table-column
            field="createTime"
            title="创建时间"
            :edit-render="{name: '$input', props: {type: 'date', placeholder: '请选择日期'}}"
          />
          <vxe-table-column title="操作" width="160">
            <template #default="{ row }">
              <template v-if="$refs.xTable.isActiveByRow(row)">
                <vxe-button @click="saveRowEvent(row)">保存</vxe-button>
                <vxe-button @click="cancelRowEvent(row)">取消</vxe-button>
              </template>
              <template v-else>
                <vxe-button @click="editRowEvent(row)">编辑</vxe-button>
              </template>
            </template>
          </vxe-table-column>
        </vxe-table>
        <vxe-pager
          :loading="loading"
          :current-page="tablePage.currentPage"
          :page-size="tablePage.pageSize"
          :total="tablePage.totalResult"
          :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
          @page-change="handlePageChange1"
        />
      </el-main>
    </el-container>
    <vxe-modal v-model="value8" title="记忆功能的窗口" width="600" height="400" show-zoom resize remember>
      <template #default>
        <vxe-form :data="formData3" :rules="formRules3" title-align="right" title-width="60">
          <vxe-form-item title="基本信息" span="24" title-align="left" title-width="200px" :title-prefix="{icon: 'fa fa-address-card-o'}" />
          <vxe-form-item title="名称" field="name" span="12" :item-render="{name: 'input', attrs: {placeholder: '请输入名称'}}" />
          <vxe-form-item title="昵称" field="nickname" span="12" :item-render="{name: 'input', attrs: {placeholder: '请输入昵称'}}" />
          <vxe-form-item title="性别" field="sex" span="12" :item-render="{name: '$select', options: sexList}" />
          <vxe-form-item title="年龄" field="age" span="12" :item-render="{name: 'input', attrs: {type: 'number', placeholder: '请输入年龄'}}" />
          <vxe-form-item title="其他信息" span="24" title-align="left" title-width="200px" :title-prefix="{icon: 'fa fa-info-circle'}" />
          <vxe-form-item title="地址" field="address" span="24" :item-render="{name: 'textarea', attrs: {placeholder: '请输入地址'}}" />
          <vxe-form-item align="center" span="24">
            <template #default>
              <vxe-button type="submit" status="primary">提交</vxe-button>
              <vxe-button type="reset">重置</vxe-button>
            </template>
          </vxe-form-item>
        </vxe-form>
      </template>
    </vxe-modal>
  </div>
</template>

<script>
import { post, get } from '@/api/common'

export default {
  name: 'Index',
  data() {
    return {
      //  搜索相关内容
      searchForm: {
        channelKey: '',
        strategyName: '',
        strategyType: '',
        strategyStatus: '',
        pageSize: 10,
        pageNum: 1
      },
      value9: false,
      // 分页相关
      total: 0,
      // 表格数据
      loading: false,
      tableData: [],
      tablePage: {
        currentPage: 1,
        pageSize: 10,
        totalResult: 0
      }
    }
  },
  methods: {
    async insertEvent(row) {
      const $table = this.$refs.xTable
      const record = {
        sex: '1',
        date12: '2021-01-01'
      }
      const { row: newRow } = await $table.insertAt(record, row)
      await $table.setActiveCell(newRow, 'sex')
    },
    handlePageChange1({ currentPage, pageSize }) {
      this.tablePage.currentPage = currentPage
      this.tablePage.pageSize = pageSize
    }
  }
}
</script>

<style lang="scss">
  .searchBox {
    background-color: #fff;
    border-radius: 4px;
    box-shadow: #bfbfbf 0 0 2px;
    height: unset !important;
    padding: 10px 10px;

    form {
      margin: auto;

      .el-form-item {
        margin: 5px 5px;
      }
    }
  }

  .tableBox {
    margin-top: 10px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: #bfbfbf 0 0 2px;

    .block {
      .el-pagination {
        margin-top: 30px;
        float: right;
      }
    }
  }
</style>
