<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.channelCode" placeholder="渠道编码" />
          </el-form-item>
          <el-form-item label="渠道名称">
            <el-input v-model="searchForm.channelName" placeholder="渠道名称" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchBtn">查询</el-button>
            <el-button @click="reset">重置</el-button>
          </el-form-item>
          <el-button style="float: right" type="warning" icon="el-icon-circle-plus-outline" @click="add">立即创建</el-button>
        </el-form>
      </el-header>

      <!--表格-->
      <el-main class="tableBox">
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column prop="id" label="序列号" />
          <el-table-column prop="channelName" label="一级渠道名称" />
          <el-table-column prop="channelCode" label="一级渠道编码" />
          <el-table-column prop="channelStatus" label="有效性" >
            <template slot-scope="scope">
              <span>{{scope.row.channelStatus > 0 ? '生效' : '失效'}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" />
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="edit(scope.row)">编辑</el-button>
              <el-button type="text" size="small" @click="dele(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            :current-page.sync="searchForm['pageNum']"
            :page-sizes="[20, 50, 100, 300]"
            :page-size="searchForm['pageSize']"
            layout="total, sizes, pager"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-main>
    </el-container>

    <!--新增抽屉-->
    <el-drawer
      ref="addDrawer"
      title="编辑一级渠道"
      size="30%"
      :before-close="addHandleClose"
      :with-header="false"
      :visible.sync="addDialog"
      direction="rtl"
      custom-class="demo-drawer"
    >
      <div class="demo-drawer__content">
        <span>编辑一级渠道</span>
        <el-form :model="addForm">
          <el-form-item label="渠道名称" label-width="80px">
            <el-input v-model="addForm.channelName" autocomplete="off" />
          </el-form-item>
          <el-form-item label="渠道状态" label-width="80px">
            <el-select v-model="addForm.channelStatus" placeholder="请选择">
              <el-option key="1" label="生效" value="1"/>
              <el-option key="0" label="失效" value="0"/>
            </el-select>
          </el-form-item>
          <el-form-item label="负责人" label-width="80px">
            <el-input v-model="addForm.unicomContacts" autocomplete="off" />
          </el-form-item>
        </el-form>
        <div class="demo-drawer__footer">
          <el-button @click="cancelForm">取 消</el-button>
          <el-button type="primary" :loading="loading" @click="$refs.addDrawer.closeDrawer()">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
        </div>
      </div>
    </el-drawer>

    <!--编辑抽屉-->
    <el-drawer
      ref="editDrawer"
      title="编辑一级渠道"
      size="30%"
      :before-close="editHandleClose"
      :with-header="false"
      :visible.sync="editDialog"
      direction="rtl"
      custom-class="demo-drawer"
    >
      <div class="demo-drawer__content">
        <span>编辑一级渠道</span>
        <el-form :model="editForm">
          <el-form-item label="渠道名称" label-width="80px">
            <el-input v-model="editForm.channelName" autocomplete="off" />
          </el-form-item>
          <el-form-item label="渠道状态" label-width="80px">
            <el-select v-model="editForm.channelStatus" placeholder="请选择">
              <el-option :key="1" label="生效" :value="1"/>
              <el-option :key="0" label="失效" :value="0"/>
            </el-select>
          </el-form-item>
          <el-form-item label="负责人" label-width="80px">
            <el-input v-model="editForm.unicomContacts" autocomplete="off" />
          </el-form-item>
        </el-form>
        <div class="demo-drawer__footer">
          <el-button @click="cancelForm">取 消</el-button>
          <el-button type="primary" :loading="loading" @click="$refs.editDrawer.closeDrawer()">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
        </div>
      </div>
    </el-drawer>
  </div>

</template>

<script>
import { post, get } from '@/api/common'
export default {
  name: 'ChannlClass',
  data() {
    return {
      loading: false,
      editDialog: false,
      addDialog: false,
      searchForm: {
        channelCode: '',
        channelName: '',
        parentId: 0,
        pageSize: 20,
        pageNum: 1
      },
      addForm: {
        channelName: '',
        unicomContacts: '',
        channelStatus: '1'
      },
      editForm: {
        channelName: '',
        unicomContacts: '',
        channelStatus: ''
      },
      tableData: [],
      total: 5000
    }
  },
  created() {
    var that = this
    that.search()
  },
  methods: {
    async search() { // 同步搜索
      await get('/channelInfo/page', this.searchForm)
        .then((res) => {
          this.tableData = res.data.list
          this.total = res.data.total
        }).catch((err) => {
          console.log(err)
        })
    },
    searchBtn() { // 搜索按钮
      this.search()
    },
    reset() { // 重置
      this.searchForm = {
        channelCode: '',
        channelName: '',
        parentId: 0,
        pageSize: 20,
        pageNum: 1
      }
      this.search()
    },
    add() { // 新增
      this.addDialog = true
    },
    addHandleClose(done) { // 新增数据
      if (this.loading) return
      this.$confirm('确定要提交吗？')
        .then(_ => {
          done()
          this.addDialog = true
          this.addForm.channelName = this.addForm.channelName + 'H5'
          post('/channelInfo/create', this.addForm)
            .then((res) => {
              if (res.code === 10000) this.reset()
              setTimeout(() => {
                this.addDialog = false
                this.search()
              }, 400)
            })
            .catch((err) => {
              console.log(err)
            })
        })
        .catch(_ => {
          this.addDialog = false
        })
    },
    edit(e) { // 编辑
      this.editForm = e
      this.editDialog = true
    },
    editHandleClose(done) { // 修改数据
      if (this.loading) return
      this.$confirm('确定要提交吗？')
        .then(_ => {
          done()
          this.editDialog = true
          post('/channelInfo/update/' + this.editForm.id, this.editForm)
            .then((res) => {
              if (res.code === 10000) this.reset()
              setTimeout(() => {
                this.editDialog = false
                this.search()
              }, 400)
            })
            .catch((err) => {
              console.log(err)
            })
        })
        .catch(_ => {
          this.editDialog = false
        })
    },
    dele(e) { // 删除
      this.$confirm('确定要删除么？')
        .then(_ => {
          post('/channelInfo/delete', { ids: [e] })
            .then((res) => {
              if (res.code === 10000) this.reset()
            })
        })
    },
    cancelForm() { // 关闭抽屉
      console.log(123)
      this.loading = false
      this.editDialog = false
      this.addDialog = false
      clearTimeout(this.timer)
    },
    handleSizeChange(e) { // 单页数量
        this.searchForm.pageSize = e
        this.search()
    },
    handleCurrentChange(e) { // 跳页
      this.searchForm.pageNum = e
      this.search()
    }
  }
}
</script>

<style scoped lang="scss">
.searchBox {
  background-color: #fff;
  border-radius: 4px;
  box-shadow: #bfbfbf 0 0 2px;
  height: unset !important;
  form {
    margin: auto;
  }
}
.el-header {padding: 20px}
.el-form-item {margin-bottom: unset}
.tableBox{
  margin-top: 10px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: #bfbfbf 0 0 2px;
}
.block {
  margin-top: 20px;
  float: right;
}
.demo-drawer__content {
  padding: 20px 5%;
  line-height: 32px;
  .el-form-item {
    margin-top: 20px;
  }
  .demo-drawer__footer {
    position: fixed;
    bottom: 30px;
    width: 27%;
    margin-top: 20px;
    display: flex;
    button {
      flex: 1;
    }
  }
  .el-select {
    display: block;
  }
}
</style>
