<template>
  <div class="app-container">
    <div v-loading.fullscreen.lock="loadingFull" />
    <div class="filter-container">
      <el-button
        type="primary"
        icon="el-icon-edit"
        size="mini"
        class="filter-item"
        @click="() => { getStaffList(); visible.type = 'add';visible.station = true }"
      >
        添加战区
      </el-button>
    </div>

    <el-table
      :data="table"
      :header-cell-style="{ background: '#f8fbfc' }"
      class="tableBorder"
      border
      stripe
    >
      <el-table-column
        prop="id"
        label="#"
        width="70"
        align="center"
      />
      <el-table-column
        prop="name"
        label="战区名"
        align="center"
      />
      <el-table-column
        label="负责政委"
        align="center"
      >
        <template
          slot-scope="{ row }"
        >
          {{ row.admin && row.admin.name }}
        </template>
      </el-table-column>
      <el-table-column
        label="代理公司"
        align="center"
      >
        <span slot-scope="{ row: { levels } }">{{
          levels.filter(a => a.level === 3).length > 0 ? levels.filter(a => a.level === 3)[0]['num'] : 0
        }}</span>
      </el-table-column>
      <el-table-column
        label="代理经理"
        align="center"
      >
        <span slot-scope="{ row: { levels } }">{{
          levels.filter(a => a.level === 2).length > 0 ? levels.filter(a => a.level === 2)[0]['num'] : 0
        }}</span>
      </el-table-column>
      <el-table-column
        label="代理主管"
        align="center"
      >
        <span slot-scope="{ row: { levels } }">{{
          levels.filter(a => a.level === 1).length > 0 ? levels.filter(a => a.level === 1)[0]['num'] : 0
        }}</span>
      </el-table-column>
      <el-table-column
        prop="status"
        label="状态"
        width="150"
        align="center"
      >
        <template
          slot-scope="{ row }"
        >
          <el-tag :type="row.status !==0 ? 'danger' : 'success'">{{ row.status === 0 ? '正常' : '已禁用' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="230"
        align="center"
      >
        <template
          slot-scope="{ row }"
        >
          <el-button
            type="primary"
            size="mini"
            @click="handleEditStation(row)"
          >
            修改
          </el-button>
          <el-button
            size="mini"
            @click="handleDisableStation(row)"
          >
            {{ row.status === 0 ? '禁用' : '启用' }}
          </el-button>
          <el-button
            size="mini"
            @click="handleDeleteStation(row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <pagination
      :total="tableTotal"
      :limit="listQuery.page_size"
      :page="listQuery.page_index"
      @pagination="changePagination"
      @update:limit="changePagination"
    />
    <!-- 弹窗 -->
    <el-dialog
      :title="visible.type === 'add' ? '添加战区' : '修改战区'"
      :visible.sync="visible.station"
      :close-on-click-modal="false"
      :show-close="false"
      :close-on-press-escape="false"
      @before-close="closeDialog"
    >
      <el-form
        ref="stationForm"
        :model="stationForm"
        :rules="stationRules"
        label-width="80px"
      >
        <el-form-item label="战区名:" prop="name">
          <el-input
            v-model="stationForm.name"
            placeholder="战区名"
          />
        </el-form-item>
        <el-form-item label="战区政委:" prop="manager">
          <!-- <el-autocomplete
            v-model="stationForm.manager"
            :fetch-suggestions="queryManagerSearch"
            placeholder="请输入后台管理员姓名"
            value-key="name"
          /> -->
          <el-select v-model="stationForm.manager">
            <el-option v-for="item in managerList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            size="mini"
            @click="closeDialog"
          >
            取消
          </el-button>
          <el-button
            type="primary"
            size="mini"
            @click="handleSubmitAdd"
          >
            {{ visible.type === 'add' ? '添加' : '修改' }}
          </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
// api
import {
  addStation,
  stationList,
  deleteStation,
  editStation,
  disableStation,
  getStaffList
} from '@/api/staff/station'

export default {
  data() {
    return {
      table: [],
      visible: {
        station: false,
        type: 'add'
      },
      managerList: [],
      stationForm: {
        id: '',
        name: '',
        manager: ''
      },
      stationRules: {
        name: [
          { required: true, message: '请输入战区名', trigger: 'blur' }
        ],
        manager: [
          { required: true, message: '请输入战区政委', trigger: 'change' }
        ]
      },
      listQuery: {
        page_index: 1,
        page_size: 20
      },
      tableTotal: 0,
      loadingFull: false
    }
  },
  created() {
    this.stationList()
  },
  methods: {
    // 关闭添加
    closeDialog() {
      this.visible.station = false
      this.visible.type = 'add'
      this.stationForm = {
        id: '',
        name: '',
        manager: ''
      }
      this.$refs.stationForm.resetFields()
    },
    // 获取列表
    async stationList() {
      this.loadingFull = true
      try {
        const res = await stationList(this.listQuery)
        const { message, code } = res
        if (code === 200) {
          const { list, total } = res.data
          this.table = list
          this.tableTotal = total
        } else {
          this.$message.error(message)
        }
      } catch (e) {
        console.log(`战区设置失败:${e}`)
      }
      this.loadingFull = false
    },
    // 分页页码变化
    changePagination(data) {
      const { page, limit } = data
      this.listQuery.page_size = limit
      this.listQuery.page_index = page
      this.getList()
    },
    // 提交
    handleSubmitAdd() {
      this.$refs.stationForm.validate((valid) => {
        if (valid) {
          if (this.visible.type === 'add') {
            const { name, manager } = this.stationForm
            let admin_name = this.managerList.filter(item => { return item.id === manager })
            admin_name = admin_name.length > 0 ? admin_name[0].name : ''
            this.addStation({
              name,
              admin_id: manager,
              admin_name
            })
          } else {
            const { name, manager, id } = this.stationForm
            let admin_name = this.managerList.filter(item => { return item.id === manager })
            admin_name = admin_name.length > 0 ? admin_name[0].name : ''
            this.editStation({
              name,
              admin_id: manager,
              admin_name,
              id
            })
          }
        } else {
          return false
        }
      })
    },
    // 提交添加
    async addStation(data) {
      const res = await addStation(data)
      try {
        const { message, code } = res
        if (code === 200) {
          this.closeDialog()
          this.$message.success(message)
          this.stationList()
        } else {
          this.$message.error(message)
        }
      } catch (e) {
        let message = res.message ? res.message : e.message
        message = e.message ? e.message : '请求失败'
        this.$message.error(message)
      }
    },
    // 修改
    async editStation(data) {
      const res = await editStation(data)
      try {
        const { message, code } = res
        if (code === 200) {
          this.closeDialog()
          this.$message.success(message)
          this.stationList()
        } else {
          this.$message.error(message)
        }
      } catch (e) {
        let message = res.message ? res.message : e.message
        message = e.message ? e.message : '请求失败'
        this.$message.error(message)
      }
    },
    // 搜索
    queryManagerSearch(queryString, cb) {
      var list = this.managerList
      var results = queryString ? list.filter(item => {
        return item.name.toLowerCase().indexOf(queryString.toLowerCase()) === 0
      }) : list
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    // 匹配管理员
    async getStaffList() {
      this.loadingFull = true
      await getStaffList().then(res => {
        this.loadingFull = false
        if (res.code === 200) {
          this.managerList = res.data
        } else {
          this.$message.error(res.message)
        }
      }).catch(e => {
        this.loadingFull = false
      })
    },
    // 点击删除
    handleDeleteStation(row) {
      const { id, name } = row
      this.$confirm(`确认删除${name}?`, '删除战区', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteStation(id)
      })
    },
    // 删除
    async deleteStation(id) {
      const res = await deleteStation({ id })
      try {
        const { message, code } = res
        if (code === 200) {
          this.$message.success(message)
          this.stationList()
        } else {
          this.$message.error(message)
        }
      } catch (e) {
        let message = res.message ? res.message : e.message
        message = e.message ? e.message : '请求失败'
        this.$message.error(message)
      }
    },
    // 修改
    handleEditStation(row) {
      this.getStaffList()
      const { id, name, admin } = row
      this.stationForm.name = name || ''
      this.stationForm.manager = admin && admin.id ? admin.id : ''
      this.stationForm.id = id
      this.visible.type = 'edit'
      this.visible.station = true
    },
    // 禁用启用
    handleDisableStation(row) {
      const { id, status } = row
      if (status === 0) {
        this.$confirm('确认禁用该战区吗?', '禁用战区', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.disableStation(id)
        })
      } else {
        this.disableStation(id)
      }
    },
    // 禁用启用
    async disableStation(id) {
      const res = await disableStation({ id })
      try {
        const { message, code } = res
        if (code === 200) {
          this.$message.success(message)
          this.stationList()
        } else {
          this.$message.error(message)
        }
      } catch (e) {
        let message = res.message ? res.message : e.message
        message = e.message ? e.message : '请求失败'
        this.$message.error(message)
      }
    }
  }
}
</script>
