<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 label="一级渠道">
            <el-select v-model="searchForm.parentId" placeholder="请选择">
              <el-option
                v-for="item in cateSelect"
                :key="item.id"
                :label="item.channelName"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="渠道状态">
            <el-select v-model="searchForm.channelStatus" placeholder="请选择">
              <el-option key="1" label="生效" value="1" />
              <el-option key="0" label="失效" value="0" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <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">
        <el-button size="small" style="float: right" type="warning" icon="el-icon-circle-plus-outline" @click="add">立即创建</el-button>
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column prop="id" label="序列号" width="100px" />
          <el-table-column prop="channelName" label="二级名称" width="240px" />
          <el-table-column prop="channelCode" label="二级编码" width="200px" />
          <el-table-column prop="fullCode" label="完整编码" />
          <!--          <el-table-column prop="channelKey" label="key" />-->
          <el-table-column prop="channelStatus" label="有效性" width="100px">
            <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.parentId" placeholder="请选择" @change="addChangeParent">
              <el-option v-for="item in cateSelect" :key="item.id" :label="item.channelName" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="渠道类别" label-width="80px">
            <el-select v-model="addForm.channelType" placeholder="请选择" @change="editChangeParent">
              <el-option v-for="item in typeList" :key="item.id" :label="item.label" :value="item.value" />
            </el-select>
          </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" placeholder="负责人" />
          </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.parentId" placeholder="请选择" @change="editChangeParent">
              <el-option v-for="item in cateSelect" :key="item.id" :label="item.channelName" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="渠道类别" label-width="80px">
            <el-select v-model="editForm.channelType" placeholder="请选择" @change="editChangeParent">
              <el-option v-for="item in typeList" :key="item.id" :label="item.label" :value="item.value" />
            </el-select>
          </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,
      cateSelect: [],
      searchForm: {
        channelCode: '',
        channelName: '',
        parentId: '',
        pageSize: 20,
        pageNum: 1
      },
      addForm: {
        channelName: '',
        channelType: '',
        channelStatus: '1',
        unicomContacts: '',
        parentId: ''
      },
      editForm: {
        channelName: '',
        channelType: '',
        parentId: '',
        channelStatus: '',
        unicomContacts: ''
      },
      typeList: [
        { value: '集团渠道', label: '集团渠道' },
        { value: '省分线下渠道', label: '省分线下渠道' },
        { value: '省分线上渠道', label: '省分线上渠道' },
        { value: '互联网渠道', label: '互联网渠道' },
        { value: '自有线上渠道', label: '自有线上渠道' },
        { value: '社会代理和其他渠道', label: '社会代理和其他渠道' }
      ],
      tableData: [],
      total: 5000
    }
  },
  created() {
    var that = this
    that.search()
  },
  mounted() {
    var updata = {
      parentId: 0,
      pageSize: 9999,
      pageNum: 1
    }
    get('/channelInfo/page', updata)
      .then((res) => {
        this.cateSelect = res.data.list
      }).catch((err) => {
        console.log(err)
      })
  },
  methods: {
    async search() { // 同步搜索
      await get('/channelInfo/listChannels', 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: '',
        pageSize: 20,
        pageNum: 1
      }
      this.search()
    },
    addChangeParent(e) {
      for (let i = 0; i < this.cateSelect.length; i++) {
        if (this.cateSelect[i].id === e) {
          this.addForm.unicomContacts = this.cateSelect[i].unicomContacts
        }
      }
    },
    add() { // 新增
      this.addDialog = true
    },
    addHandleClose(done) { // 新增数据
      if (this.loading) return
      this.$confirm('确定要提交吗？')
        .then(_ => {
          done()
          this.addDialog = true
          for (let i = 0; i < this.cateSelect.length; i++) {
            if (this.cateSelect[i].id === this.addForm.parentId) {
              this.addForm.channelName = this.cateSelect[i].channelName + this.addForm.channelName
            }
          }
          if (Object.values(this.addForm).includes('')) {
            this.$message.error('渠道表单不能为空')
            return false
          }
          post('/channelInfo/create', this.addForm)
            .then((res) => {
              if (res.code === 10000) this.reset()
              setTimeout(() => {
                this.addDialog = false
                this.addForm = {
                  channelName: '',
                  channelType: '',
                  channelStatus: '',
                  unicomContacts: '',
                  parentId: ''
                }
              }, 400)
            })
            .catch((err) => {
              console.log(err)
            })
        })
        .catch(_ => {
          this.addDialog = false
        })
    },
    editChangeParent(e) {
      for (let i = 0; i < this.cateSelect.length; i++) {
        if (this.cateSelect[i].id === e) {
          this.editForm.unicomContacts = this.cateSelect[i].unicomContacts
        }
      }
    },
    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
              }, 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() { // 关闭抽屉
      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-form-item {
      margin: 5px 5px;
    }
  }
}
.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>
