<template>
  <div class="app-container">

    <!-- 查询和其他操作 -->
    <div class="filter-container">
      <el-input v-model="listQuery.mobile" clearable class="filter-item" style="width: 200px;" placeholder="请输入手机号码" />
      <el-button v-permission="['GET /admin/join/list']" class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查找</el-button>
      <el-button v-permission="['POST /admin/join/join']" class="filter-item" type="primary" icon="el-icon-search" @click="handleJoinBtn">添加</el-button>
      <el-button :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">导出</el-button>
    </div>

    <!-- 查询结果 -->
    <el-table v-loading="listLoading" :data="list" element-loading-text="正在查询中。。。" border fit highlight-current-row>

      <el-table-column align="center" label="城市" prop="cityId">
        <template slot-scope="scope">
          <el-tag>{{ cityFilter(scope.row.cityId)}}</el-tag>
        </template>
      </el-table-column>

      <el-table-column align="center" label="姓名" prop="applyName" />
      <el-table-column align="center" label="手机" prop="applyMobile" />
      <el-table-column align="center" label="引荐码" prop="bCode" />
      <el-table-column align="center" label="类型" prop="type">
        <template slot-scope="scope">
          <el-tag type="success">{{ scope.row.type | TypeFilter }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column align="center" label="归属门店" prop="shopName" />
      <el-table-column align="center" label="申请时间" prop="applyTime" />
      <el-table-column align="center" label="申请状态" prop="applyStatus">
        <template slot-scope="scope">
          <el-tag type="success">{{ scope.row.applyStatus | detailStatusFilter }}</el-tag>
        </template>
      </el-table-column>
      <!-- <el-table-column align="center" label="推荐码" prop="applyCode" /> -->
      <el-table-column align="center" label="申请简述" prop="applyReason" />

      <el-table-column align="center" label="操作" width="200" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button v-if="scope.row.applyStatus === 0" v-permission="['POST /admin/join/pass']" type="success" size="mini" @click="handlePassConfirm(scope.row)">通过</el-button>
          <el-button v-if="scope.row.applyStatus === 0" v-permission="['POST /admin/join/reject']" type="danger" size="mini" @click="handleRejectBtn(scope.row)">拒绝</el-button>
          <el-button v-permission="['POST /admin/join/edit']" type="text" icon="el-icon-edit" size="mini" @click="handleEdit(scope.row)">编辑</el-button>
        </template>
      </el-table-column>

    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

    <el-dialog :visible.sync="rejectDialogVisible" title="拒绝原因">
      <el-form ref="dataForm" :rules="rules" :model="dataForm" status-icon label-position="left" label-width="100px" style="width: 400px; margin-left:50px;">
        <el-form-item label="拒绝原因" prop="confirmMemo">
          <el-input v-model="dataForm.confirmMemo" />
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="rejectDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleRejectConfirm()">确定</el-button>
      </div>
    </el-dialog>

    <!-- 通过弹框 -->
    <el-dialog :visible.sync="passDialogVisible" :title="'确定【通过】申请人' + row.applyMobile + '的加入申请?'" width="600px">

      <el-form ref="dataPassForm" :rules="passRules" :model="dataPassForm" status-icon label-position="left" label-width="150px" style="width:300px; margin-left:50px;">

        <el-form-item label="合伙人姓名" prop="applyName">
          <el-input v-model="dataPassForm.applyName" />
        </el-form-item>

        <el-form-item label="选择归属城市" prop="cityId">
          <el-select v-model="dataPassForm.cityId" clearable class="filter-item" placeholder="请选择归属城市" filterable>
            <el-option v-for="item in citys" :key="item.id" :label="item.cityName" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="合伙人类型" prop="type">
          <el-select v-model="dataPassForm.type" clearable class="filter-item" placeholder="请选择合伙人类型" filterable>
            <el-option label="小家政合伙人" :value="0" />
            <el-option label="自营门店销售" :value="1" />
            <el-option label="阿姨小哥" :value="2" />
            <el-option label="大客户" :value="3" />
            <el-option label="公司员工" :value="4" />
            <el-option label="公司BD" :value="5" />
            <el-option label="引荐人" :value="6" />
            <el-option label="临时工" :value="99" />
          </el-select>
        </el-form-item>
        <el-form-item label="选择归属门店" prop="joinShop" v-if="dataPassForm.type===0||dataPassForm.type===1">
          <el-select v-model="dataPassForm.joinShop" clearable class="filter-item" placeholder="请选择门店" filterable>
            <el-option v-for="item in shopList" :key="item.id" :label="item.shopName" :value="item.id" />
          </el-select>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="passDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handlePass()">确定</el-button>
      </div>
    </el-dialog>

    <!-- 添加合伙人 -->
    <el-dialog :visible.sync="joinDialogVisible" title="加入申请" width="600px">

      <el-form ref="dataJoinForm" :rules="passRules" :model="dataJoinForm" status-icon label-position="left" label-width="150px" style="width:300px; margin-left:50px;">

        <el-form-item label="合伙人姓名" prop="applyName">
          <el-input v-model="dataJoinForm.applyName" style="width:300px" />
        </el-form-item>

        <el-form-item label="合伙人手机" prop="applyMobile">
          <el-input v-model="dataJoinForm.applyMobile" style="width:300px" />
        </el-form-item>

        <el-form-item label="选择归属城市" prop="cityId">
          <el-select v-model="dataJoinForm.cityId" clearable class="filter-item" placeholder="请选择归属城市" @change="cityChange" filterable>
            <el-option v-for="item in citys" :key="item.id" :label="item.cityName" :value="item.id" />
          </el-select>
        </el-form-item>

        <el-form-item label="服务站" prop="stationId">
          <el-select v-model="dataJoinForm.stationId" clearable class="filter-item" placeholder="请选择服务站" filterable>
            <el-option v-for="item in cityStations" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>

        <el-form-item label="合伙人类型" prop="type">
          <el-select v-model="dataJoinForm.type" clearable class="filter-item" placeholder="请选择合伙人类型" filterable>
            <el-option label="小家政合伙人" :value="0" />
            <el-option label="自营门店销售" :value="1" />
            <el-option label="阿姨小哥" :value="2" />
            <el-option label="大客户" :value="3" />
            <el-option label="公司员工" :value="4" />
            <el-option label="公司BD" :value="5" />
            <el-option label="引荐人" :value="6" />
            <el-option label="临时工" :value="99" />
          </el-select>
        </el-form-item>
        <el-form-item label="选择归属门店" prop="joinShop" v-if="dataJoinForm.type===0||dataJoinForm.type===1">
          <el-select v-model="dataPassForm.joinShop" clearable class="filter-item" placeholder="请选择门店" filterable>
            <el-option v-for="item in shopList" :key="item.id" :label="item.shopName" :value="item.id" />
          </el-select>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="joinDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleJoin()">确定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { list, pass, reject, shopList, join } from "@/api/disjoin";
import BackToTop from "@/components/BackToTop";
import { listAllCity } from "@/api/city";
import { stations } from "@/api/enumUtils";
import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination

const statusMap = {
  0: "未处理",
  1: "通过",
  2: "驳回",
};

export default {
  name: "Joinapply",
  components: { BackToTop, Pagination },
  filters: {
    detailStatusFilter(status) {
      return statusMap[status];
    },
    TypeFilter(type) {
      if (type == null || type == 0) return "小家政合伙人";
      if (type == 1) return "阿姨小哥";
      if (type == 2) return "站长";
      if (type == 3) return "大客户";
      if (type == 4) return "公司员工";
      if (type == 5) return "公司BD";
      if (type == 6) return "引荐人";
      if (type == 99) return "临时工";
      return "";
    },
  },
  data() {
    return {
      stations: stations,
      cityStations: [],
      row: {
        user: {
          mobile: "",
        },
      },
      list: [],
      total: 0,
      citys: [],
      listLoading: true,
      dataForm: {},
      dataPassForm: {},
      shopList: [],
      listQuery: {
        page: 1,
        limit: 20,
        mobile: undefined,
        sort: "id",
        order: "desc",
      },
      dataJoinForm: {
        applyMobile: "",
        type: 2,
      },
      joinDialogVisible: false,
      downloadLoading: false,
      rejectDialogVisible: false,
      passDialogVisible: false,
      rules: {
        confirmMemo: [
          {
            required: true,
            message: "拒绝原因不能为空",
            trigger: "blur",
          },
        ],
      },
      passRules: {
        joinShop: [
          {
            required: true,
            message: "归属门店不能为空",
            trigger: "blur",
          },
        ],
        type: [
          {
            required: true,
            message: "合伙人类型不能为空",
            trigger: "blur",
          },
        ],
        stationId: [
          {
            required: true,
            message: "请选择服务站",
            trigger: "blur",
          },
        ],
        cityId: [
          {
            required: true,
            message: "归属城市不能为空",
            trigger: "blur",
          },
        ],
        applyName: [
          {
            required: true,
            message: "合伙人名称不能为空",
            trigger: "blur",
          },
        ],
        applyMobile: [
          {
            required: true,
            message: "合伙人手机不能为空",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    this.getList();
    this.getShopList();
    listAllCity().then((res) => {
      this.citys = res.data.data;
    });
  },
  methods: {
    getList() {
      this.listLoading = true;
      list(this.listQuery)
        .then((response) => {
          this.list = response.data.data.list;
          this.total = response.data.data.total;
          this.listLoading = false;
        })
        .catch(() => {
          this.list = [];
          this.total = 0;
          this.listLoading = false;
        });
    },
    cityChange(value) {
      this.dataJoinForm.stationId='';
      let cityName = this.cityFilter(value);

      if (cityName == null) this.cityStations = [];

      let stations = [];
      this.stations.forEach((s) => {
        if (cityName.indexOf(s.city) >= 0) stations.push(s);
      });
      this.cityStations = stations;
    },
    getShopList() {
      shopList()
        .then((response) => {
          this.shopList = response.data.data.list;
        })
        .catch(() => {});
    },
    cityFilter(cityId) {
      let cityName = null;
      this.citys.forEach((item) => {
        if (item.id == cityId) {
          cityName = item.cityName;
        }
      });
      return cityName;
    },
    handleEdit(row){
      this.joinDialogVisible=true;
      this.dataJoinForm=JSON.parse(JSON.stringify(row));

    },
    handleJoinBtn() {
      this.dataJoinForm = {
        applyMobile: "",
        type: 2,
        id: 0,
      };
      this.joinDialogVisible = true;
    },
    handleJoin() {
      this.$refs["dataJoinForm"].validate((valid) => {
        if (valid) {
          join(this.dataJoinForm)
            .then((res) => {
              this.$notify.success({
                title: "成功",
                message: "添加成功",
              });
              this.joinDialogVisible = false;
              this.getList();
            })
            .catch((res) => {
              this.$notify.error({
                title: "失败",
                message: res.data.errmsg,
              });
            });
        }
      });
    },

    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },
    handlePassConfirm(row) {
      this.passDialogVisible = true;
      this.row = row;
      this.dataPassForm = row;

      // this.$confirm('确定【通过】申请人' + row.user.mobile + '的加入申请?', '提示', {
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      //   type: 'warning'
      // }).then(() => {
      //   this.handlePass(row)
      // })
    },
    handlePass() {
      this.$refs["dataPassForm"].validate((valid) => {
        if (valid) {
          pass({
            id: this.row.id,
            shopId: this.dataPassForm.joinShop,
            applyName: this.dataPassForm.applyName,
            type: this.dataPassForm.type,
            cityId: this.dataPassForm.cityId,
          })
            .then((res) => {
              // this.row.applyStatus = 1

              this.$notify.success({
                title: "成功",
                message: "审核通过操作成功",
              });
              this.passDialogVisible = false;
              this.getList();
            })
            .catch((res) => {
              this.$notify.error({
                title: "失败",
                message: res.data.errmsg,
              });
            });
        }
      });
    },
    handleRejectBtn(row) {
      this.dataForm = row;
      this.rejectDialogVisible = true;
    },
    handleRejectConfirm() {
      this.$confirm(
        "确定【拒绝】申请人" + this.dataForm.applyMobile + "的加入申请?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).then(() => {
        this.handleReject(this.dataForm);
      });
    },
    handleReject(row) {
      reject(row)
        .then((res) => {
          row.applyStatus = 2;
          this.rejectDialogVisible = false;
          this.$notify.success({
            title: "成功",
            message: "拒绝通过操作成功",
          });
        })
        .catch((res) => {
          this.$notify.error({
            title: "失败",
            message: res.data.errmsg,
          });
        });
    },
    handleDownload() {
      this.downloadLoading = true;
      import("@/vendor/Export2Excel").then((excel) => {
        const tHeader = ["合伙人", "手机号", "申请时间"];
        const filterVal = ["user.username", "applyMobile", "applyTime"];
        excel.export_json_to_excel2(tHeader, this.list, filterVal, "行星申请");
        this.downloadLoading = false;
      });
    },
  },
};
</script>

<style scoped>
.el-dialog {
  width: 650px !important;
}
.el-table th.gutter {
  display: table-cell !important;
}
.el-select--medium {
  width: 300px !important;
}
</style>
