<template>
  <div>
    <el-container>
      <!--搜索-->
      <el-header class="searchBox">
        <el-form :inline="true" :model="searchForm" ref="searchForm" class="demo-form-inline">
          <el-form-item label="策略名称">
            <el-input v-model="searchForm.strategyName" name="searchForm.strategyName" placeholder="策略名称" />
          </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-option label="测试" :value="2" />
            </el-select>
          </el-form-item>
          <el-form-item label="生效状态">
            <el-select v-model="searchForm.strategyStatus" filterable placeholder="请选择">
              <el-option label="生效中" :value="1" />
              <el-option label="未生效" :value="0" />
            </el-select>
          </el-form-item>

          <el-form-item style="float: right">
            <el-button type="primary" @click="init()">搜索</el-button>
            <el-button @click="reset('searchForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-header>
      <!--表格-->
      <el-main class="tableBox">
        <vxe-toolbar>
          <template #buttons>
            <vxe-button icon="fa fa-plus" @click="toAdd">新增</vxe-button>
            <vxe-button @click="init()">刷新</vxe-button>
            <vxe-button status="primary" style="float: right" icon="fa fa-plus" @click="value5 = true">历史记录</vxe-button>
          </template>
        </vxe-toolbar>
        <vxe-table border resizable keep-source show-overflow highlight-hover-row ref="xTable" :data="tableData">
          <vxe-table-column field="strategyName" title="策略名称" />
          <vxe-table-column field="maskText" title="策略备注" />
          <vxe-table-column field="strategyType" title="策略类型" width="100">
            <template #default="{ row,_columnIndex}">
              {{ strategyType[row.strategyType].label }}
            </template>
          </vxe-table-column>
          <vxe-table-column title="状态" width="80">
            <template #default="{ row }">
              <span v-if="row.strategyStatus === 1" style="color:#67C23A">生效中</span>
              <span v-else-if="row.strategyStatus ===0" style="color:#F56C6C">未生效</span>
            </template>
          </vxe-table-column>
          <vxe-table-column field="templateId" title="使用模板">
            <template #default="{ row,_columnIndex}">
              {{ row.templateName }}
            </template>
          </vxe-table-column>
          <vxe-table-column field="createTime" title="创建时间" />
          <vxe-table-column title="操作" width="220">
            <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="toAdd(row)">编辑</vxe-button>
                <vxe-button @click="toCopy(row)">复制</vxe-button>
                <vxe-button @click="del(row)">删除</vxe-button>
              </template>
            </template>
          </vxe-table-column>
        </vxe-table>
        <vxe-pager :loading="loading" :current-page="searchForm.pageNum" :page-size="searchForm.pageSize" :total="searchForm.totalResult" :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']" @page-change="handlePageChange" />

        <!-- 历史记录 -->
        <vxe-modal v-model="value5" width="60%" title="历史记录">
          <template #default>

            <vxe-toolbar>
              <template #buttons>
                <vxe-input v-model="schemelogParam.notes" type="search" clearable placeholder="搜索操作记录"></vxe-input>
                <vxe-input v-model="schemelogParam.userName" type="search" clearable placeholder="搜索操作人"></vxe-input>
                <vxe-button @click="searchEvent" content="搜索"></vxe-button>
              </template>
            </vxe-toolbar>

            <vxe-table auto-resize height="600" :data="schemelog">
              <vxe-table-column field="createTime" title="时间"></vxe-table-column>
              <vxe-table-column field="notes" title="操作记录">
                <template slot-scope="props">
                  <div v-html="props.row.notes"></div>
                </template>
              </vxe-table-column>
              <vxe-table-column field="userName" title="操作人"></vxe-table-column>
            </vxe-table>
            <vxe-pager :loading="loading" :current-page="schemelogParam.pageNum" :page-size="schemelogParam.pageSize" :total="schemelogParam.totalResult" :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']" @page-change="handlePageChangeChannelog" />
          </template>
        </vxe-modal>
      </el-main>
    </el-container>
    <el-dialog title="密码到期提示" :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="dialogVisible" width="20%" top="35vh" :show-close="false">
      <span v-if="dayNum<0">距您上次更新秘钥已超过90天，请更新您的登录秘钥</span>
      <span v-else>您的登录秘钥即将到期，建议修改秘钥</span>
      <span slot="footer" class="dialog-footer">
        <el-button :disabled="(dayNum<0)" @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="(passShow = true)">去修改</el-button>
      </span>
    </el-dialog>
    <passBox v-model="passShow" />
  </div>
</template>

<script>
import {
  post,
  get
} from '@/api/common'
import passBox from '../../components/password'

export default {
  name: 'Index',
  components: {
    passBox
  },
  data () {
    return {
      //  搜索相关内容
      searchForm: {
        channelKey: '',
        strategyName: '',
        strategyType: '',
        strategyStatus: '',
        pageNum: 1,
        pageSize: 10,
        totalResult: 0
      },
      // 表格数据
      loading: false,
      tableData: [],
      templateList: [],
      strategyStatus: [{
        label: '生效中',
        value: '1'
      },
      {
        label: '未生效',
        value: '0'
      }
      ],
      strategyType: [{
        label: '基本策略',
        value: '0'
      },
      {
        label: '活动策略',
        value: '1'
      },
      {
        label: '测试策略',
        value: '2'
      }
      ],

      value5: false,
      pushdata: false,
      pushdataDate: '',
      schemelog: [],
      schemelogList: [],
      filterName1: '',
      schemelogParam: {
        pageNum: 1,
        pageSize: 10,
        totalResult: 0
      },
      dayNum: localStorage.getItem('dayNum'),
      passShow: false,
      dialogVisible: false,
    }
  },
  mounted () {
    get('/templateInfo/page', {
      'pageSize': 100,
      'pageNum': 1
    }).then(res => {
      res.data.list.map(res => {
        res.templatePhoto = process.env.VUE_APP_BASE_IMG_URL + res.templatePhoto
        res.label = res.templateName
        res.value = res.id
      })
      this.templateList = res.data.list
    })
    this.init()
  },
  created () {
    if (this.dayNum < 15) {
      this.dialogVisible = true
    }
  },
  methods: {
    init () {
      get('/strategyInfoNew/page', this.searchForm).then(res => {
        if (res.data) {
          this.tableData = res.data.list
          this.searchForm.totalResult = res.data.total
        } else {
          this.tableData = []
          this.searchForm.totalResult = 0
        }

      })
    },
    editClosedEvent ({
      row,
      column
    }) {
      const $table = this.$refs.xTable
      const field = column.property
      const cellValue = row[field]
      // 判断单元格值是否被修改
      if ($table.isUpdateByRow(row, field)) {
        setTimeout(() => {
          let param = {}
          param[field] = cellValue
          post('/strategyInfoNew/update/' + row.id, row).then(res => {
            this.$message({
              message: res.message,
              type: 'success'
            });
          })
          // 局部更新单元格为已保存状态
          $table.reloadRow(row, null, field)
        }, 300)
      }
    },
    reset (formName) { // 重置
      this.searchForm = {}
      get('/strategyInfoNew/page', {}).then(res => {
        this.tableData = res.data.list
      })
    },
    toAdd (e) {
      const routeUrl = this.$router.resolve({
        path: '/schemeV2/schemeAdd',
        query: {
          id: e.id
        }
      })
      window.open(routeUrl.href, '_blank')
    },
    toCopy (e) {
      const routeUrl = this.$router.resolve({
        path: '/schemeV2/schemeAdd',
        query: {
          copyId: e.id
        }
      })
      window.open(routeUrl.href, '_blank')
    },
    del (row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const $table = this.$refs.xTable
        $table.remove(row)
        post('/strategyInfoNew/delete', {
          'ids': [row.id]
        }).then(res => { })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handlePageChange ({
      currentPage,
      pageSize
    }) {
      this.searchForm.pageNum = currentPage
      this.searchForm.pageSize = pageSize
      this.init()
    },
    handlePageChangeChannelog ({
      currentPage,
      pageSize
    }) {
      this.schemelogParam.pageNum = currentPage
      this.schemelogParam.pageSize = pageSize
      get('/strategyInfoNew/getlog', this.schemelogParam).then(res => {
        this.schemelog = res.data.list
        this.schemelogParam.totalResult = res.data.total
      })
    },
    searchEvent () {
      get('/strategyInfoNew/getlog', this.schemelogParam).then(res => {
        this.schemelog = res.data.list
        this.schemelogParam.totalResult = res.data.total
      })
    }
  }
}

</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>
