<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.channelName" name="searchForm.channelName" placeholder="策略名称" />
          </el-form-item>
          <el-form-item label="合作方">
            <el-input v-model="searchForm.channelPartner" placeholder="合作方" />
          </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="toEdit">新增</vxe-button>
            <vxe-button icon="fa fa-plus" @click="init()">刷新</vxe-button>
            <vxe-button icon="fa fa-plus" class="type--button theme--info" @click="toSubChannel">二级渠道查询</vxe-button>
          </template>
        </vxe-toolbar>
        <vxe-table border resizable keep-source show-overflow highlight-hover-row ref="xTable" :data="tableData">
          <vxe-table-column field="channelName" title="一级渠道名称" />
          <vxe-table-column field="unicomContacts" title="负责人" />
          <vxe-table-column field="channelPartner" title="合作方" />
          <vxe-table-column field="channelCode" title="渠道编码" />
          <vxe-table-column title="状态">
            <template #default="{ row }">
              <span v-if="row.channelStatus === 1" style="color:#67C23A">生效中</span>
              <span v-else-if="row.channelStatus ===0" style="color:#F56C6C">未生效</span>
            </template>
          </vxe-table-column>
          <vxe-table-column field="onlineTime" title="生效时间" />
          <vxe-table-column title="操作" width="220">
            <template #default="{ row }">
              <vxe-button @click="toView(row)">查询</vxe-button>
              <vxe-button @click="toEdit(row)">编辑</vxe-button>
              <vxe-button @click="del(row)">删除</vxe-button>
            </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" />
      </el-main>
    </el-container>
  </div>
</template>

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

export default {
  name: 'Channel',
  data () {
    return {
      //  搜索相关内容
      searchForm: {
        channelName: '',
        channelPartner: '',
        parentId: 0,
        pageNum: 1,
        pageSize: 10,
        totalResult: 0
      },
      // 表格数据
      loading: false,
      tableData: [],
      strategyStatus: [
        { label: '生效中', value: '1' },
        { label: '未生效', value: '0' }
      ],
      strategyType: [
        { label: '基本策略', value: '0' },
        { label: '活动策略', value: '1' }
      ],
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      get('/channelInfo/page', this.searchForm).then(res => {
        this.tableData = res.data.list
        this.searchForm.totalResult = res.data.total
      })
    },
    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('/channelInfo/update/' + row.id, row).then(res => {
            this.$message({
              message: res.message,
              type: 'success'
            });
          })
          // 局部更新单元格为已保存状态
          $table.reloadRow(row, null, field)
        }, 300)
      }
    },
    reset (formName) { // 重置
      this.searchForm = {}
      get('/channelInfo/page', {}).then(res => {
        this.tableData = res.data.list
      })
    },
    toView (e) {
      const routeUrl = this.$router.resolve({ path: '/schemeV2/channelView', query: { id: e.id } })
      window.open(routeUrl.href, '_blank')
    },
    toEdit (e) {
      const routeUrl = this.$router.resolve({ path: '/schemeV2/channelEdit', query: { id: e.id } })
      window.open(routeUrl.href, '_blank')
    },
    toSubChannel (e) {
      const routeUrl = this.$router.resolve({ path: '/schemeV2/channelSubList', query: { id: e.id } })
      window.open(routeUrl.href, '_blank')
    },
    handlePageChange ({ currentPage, pageSize }) {
      this.searchForm.pageNum = currentPage
      this.searchForm.pageSize = pageSize
      this.init()
    },
    del (row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const $table = this.$refs.xTable
        $table.remove(row)
        post('/channelInfo/delete', { 'ids': [row.id] }).then(res => {
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  }
}
</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>
