<template>
  <div class="app-container">
    <div class="member-list">
      <!-- 筛选条件 -->
      <div class="screen-container">
        <div class="top clearfix">
          <div class="title fl">条件筛选</div>
        </div>
        <el-form ref="screenForm" :model="screenForm" label-width="70px" size="small" label-position="left">
          <el-row :gutter="20">
            <el-col :xs="24" :sm="12" :lg="6">
              <el-form-item label="会员名称" prop="nickName">
                <el-input v-model="screenForm.nickName" placeholder="请输入会员名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :lg="6">
              <el-form-item label="网点名称" prop="websitName">
                <el-select v-model="screenForm.websitName" placeholder="全部" filterable>
                  <el-option label="全部" value=""></el-option>
                  <el-option :label="item.name" :value="item.name" v-for="(item, index) in websiteList" :key="index"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="12" class="tr">
              <el-form-item label="">
                <el-button size="small" @click="resetScreenForm">清空</el-button>
                <el-button size="small" type="primary" @click="submitScreenForm">搜索</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>

      <div class="mymain-container">
        <div class="btn-group clearfix">
          <div class="fl">
            <el-button size="small" type="primary" icon="el-icon-plus" @click="addOrEdit('add')">新增</el-button>
          </div>
          <div class="fr">
            <!-- <el-button size="small" type="primary" icon="el-icon-download" @click="handleExport">导出</el-button> -->
          </div>
        </div>

        <div class="table">
          <el-table v-loading="listLoading" :data="dataList" element-loading-text="Loading" border fit highlight-current-row stripe>
            <el-table-column align="center" label="业务员" prop="workerName" min-width="100" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" label="折扣优惠" prop="rate" min-width="100" show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.rate * 10 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="电话" prop="mobile" min-width="120"></el-table-column>
            <el-table-column align="center" label="角色" prop="type" min-width="100">
              <template slot-scope="scope">
                {{ scope.row.type | MEMBER_CURRENT_TYPE_FILTER }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="所属网点" prop="adminWebsitName" min-width="140" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" label="状态" class-name="status-col">
              <template slot-scope="scope">
                <el-tag :type="scope.row.status ? 'success' : 'danger'">{{ scope.row.status ? '启用':'禁用' }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column align="center" label="创建人" prop="createBy" min-width="100"></el-table-column>
            <el-table-column align="center" label="创建时间" prop="createTime" min-width="160"></el-table-column>
            <el-table-column align="center" label="更新人" prop="updateBy" min-width="100"></el-table-column>
            <el-table-column align="center" label="更新时间" prop="updateTime" min-width="160"></el-table-column>
            <el-table-column align="center" label="操作" width="100" fixed="right">
              <template slot-scope="scope">
                <el-button type="text" @click="addOrEdit('edit', scope.row)">编辑</el-button>
                <el-popconfirm style="margin-left: 10px;" title="确定删除吗？" @onConfirm="handleDelete(scope.row.id)">
                  <el-button slot="reference" type="text">删除</el-button>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <div class="pagination clearfix">
          <div class="fr">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10, 20, 30, 50]"
              :page-size="10"
              layout="total, sizes, prev, pager, next, jumper"
              :total="listTotal">
            </el-pagination>
          </div>
        </div>
      </div>
    </div>

    <!-- 新增编辑 -->
    <el-dialog :title="addFormType == 'add' ? '新增':'编辑'" :visible.sync="addFormVisible" :show-close="false" width="500px" :close-on-click-modal="false">
      <el-form ref="addForm" :model="addForm" :rules="addFormRules" label-position="left" label-width="80px">
        <el-form-item label="业务员" prop="saleman">
          <el-select v-model="addForm.saleman" placeholder="请选择业务员" style="width: 100%">
            <el-option
              v-for="item in memberList"
              :key="item.userId"
              :label="item.workName"
              :value="item.userId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="折扣优惠" prop="discount">
          <el-input v-model="addForm.discount" type="number" autocomplete="off" placeholder="请输入折扣优惠">
            <span slot="suffix">折</span>
          </el-input>
          <div>注：折扣优惠填写必须是0&lt;x&lt;10的数字，保留两位小数点</div>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="addForm.status">
            <el-radio :label="true">启用</el-radio>
            <el-radio :label="false">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelAddForm">取 消</el-button>
        <el-button type="primary" @click="submitAddForm">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { COMMON_SELECT } from '@/utils/select_data'
import { getDiscountList, deleteDiscount, getWebsiteList, getDiscountDetail, getMemberList, saveDiscount } from "@/api/member";
import {downloadFiles} from '@/utils/util'

export default {
  data() {
    return {
      dataList: null, // 列表数据
      listLoading: true, // 列表加载loading
      screenForm: { // 筛选表单数据
        nickName: '', // 会员名称
        websitName: '', // 网点名称
      },
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页数量
      listTotal: 0, // 列表总数
      websiteList: [],
      select_type: COMMON_SELECT.MEMBER_CURRENT_TYPE,

      editItem:  null,
      addFormType: 'add',
      addFormVisible: false,
      addForm: {
        saleman: '',
        discount: '',
        status: true,
      },
      addFormRules: {
        saleman: [{ required: true, message: '请选择业务员', trigger: 'change' }],
        discount: [{ required: true, message: '请输入折扣优惠', trigger: 'blur' }],
        status: [{ required: true, message: '请选择状态', trigger: 'change' }],
      },
      memberList: [],
    }
  },
  created() {
    this.getList();
    this.getWebsiteList();
  },
  methods: {
    // 网点列表
    getWebsiteList() {
      getWebsiteList({
        pageNum: 1,
        pageSize: 1000
      }).then(res => {
        this.websiteList = res.data.records;
      })
    },

    // 业务员列表
    getMemberList() {
      getMemberList({
        pageNum: 1,
        pageSize: -1,
        type: 'SERVICE'
      }).then(res => {
        this.memberList = res.data.records;
      })
    },

    getList() {
      this.listLoading = true

      let params = {
        nickName: this.screenForm.nickName,
        websitName: this.screenForm.websitName,
        pageNum: this.currentPage,
        pageSize: this.pageSize
      }

      getDiscountList(params).then(res => {
        this.dataList = res.data.records
        this.listTotal = res.data.total
        this.listLoading = false
      })
    },
    // 提交筛选表单
    submitScreenForm() {
      this.currentPage = 1
      this.getList()
    },
    // 重置筛选表单
    resetScreenForm() {
      this.$refs.screenForm.resetFields()
      this.currentPage = 1
      this.getList()
    },

    // 更改每页数量
    handleSizeChange(val) {
      this.pageSize = val
      this.currentPage = 1
      this.getList()
    },

    // 更改当前页
    handleCurrentChange(val) {
      this.currentPage = val
      this.getList()
    },

    // 操作 - 删除
    handleDelete(id) {
      deleteDiscount({id: id}).then(res => {
        this.getList();
        this.$successMsg();
      })
    },

    // 新增编辑
    addOrEdit(type, item) {
      this.addFormType = type;
      this.addFormVisible = true;
      this.getMemberList();
      if(type == 'edit') {
        this.editItem = item;
        getDiscountDetail({id: item.id}).then(res => {
          this.addForm.saleman = res.data.userId;
          this.addForm.discount = res.data.rate * 10;
          this.addForm.status = res.data.status;
        })
      }
    },

    // 取消 新增编辑
    cancelAddForm(){
      this.addFormVisible = false;
      this.$refs.addForm.resetFields();
    },

    // 提交 新增编辑
    submitAddForm() {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          let params = {
            userId: this.addForm.saleman,
            rate: this.addForm.discount / 10,
            status: this.addForm.status,
          }
          if(this.addFormType == 'edit') {
            params.id = this.editItem.id;
          }
          saveDiscount(params).then(res => {
            this.cancelAddForm();
            this.getList();
            this.$successMsg('操作成功');
          })
        }
      })
    },
  },
}
</script>

<style lang="scss">
  .el-image-viewer__wrapper .el-icon-circle-close {
    color: #ffffff !important;
    font-size: 60px;
  }
</style>
