<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      v-show="showSearch"
      label-width="80px"
    >
    <el-form-item label="店铺名称" prop="merchantName">
        <el-input
          v-model="queryParams.merchantName"
          placeholder="请输入店铺名称"
          maxlength="30"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <!-- <el-form-item label="商家编号" prop="merchantIndex">
    <div class="app-container">
        <el-form
            :model="queryParams"
            ref="queryForm"
            :inline="true"
            v-show="showSearch"
            label-width="80px"
        >
            <el-form-item label="店铺名称" prop="merchantName">
                <el-input
                    v-model="queryParams.merchantName"
                    placeholder="请输入店铺名称"
                    clearable
                    size="small"
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="商家编号" prop="merchantIndex">
        <el-input
          v-model="queryParams.merchantIndex"
          placeholder="请输入商家编号"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item> -->

      <el-form-item label="手机号" prop="merchantPhone">
        <el-input
          v-model="queryParams.phonenumber"
          placeholder="手机号"
          maxlength="11"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="申请日期">
        <el-date-picker
          v-model="searchDate"
          type="daterange"
          value-format="yyyy-MM-dd HH:mm:ss"
          align="left"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          clearable
          size="small"
          style="width: 260px"
          :default-time="['00:00:00', '23:59:59']"
        >
        </el-date-picker>
      </el-form-item>
         
      <el-form-item label="业务经理" prop="promoter">
        <el-input
          v-model="queryParams.promoter"
          placeholder="请输入业务经理手机号"
          maxlength="11"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="状态">
        <el-select
          v-model="queryParams.businessState"
          placeholder="请选择"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        >
          <el-option label="全部" value></el-option>
          <el-option label="已上架" value="001"></el-option>
          <el-option label="已下架" value="002"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          size="small"
          icon="el-icon-search"
          @click="handleQuery"
          plain
        >搜索</el-button>
        <el-button icon="el-icon-refresh" size="small" @click="resetQuery"
        >重置</el-button>

      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="shopList" border stripe>
      <el-table-column label="商家编号" align="center" prop="merchantIndex" width="170" />
      <el-table-column label="手机号" align="center" prop="user.phonenumber" width="150" />
      <el-table-column
        label="店铺名称"
        align="center"
        prop="merchantName"
        show-overflow-tooltip
      />
      <el-table-column
        label="门店地址"
        align="center"
        prop="detail"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <span>{{ parseAddress(scope.row) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="店铺联系人"
        align="center"
        prop="user.nickName"
        width="150"
        show-overflow-tooltip
      />
      <!-- <el-table-column
        <el-table v-loading="loading" :data="shopList" border stripe>
            <el-table-column
                label="商家编号"
                align="center"
                prop="merchantIndex"
                width="170"
            />
            <el-table-column
                label="手机号"
                align="center"
                prop="user.phonenumber"
                width="150"
            />
            <el-table-column
                label="店铺名称"
                align="center"
                prop="merchantName"
                show-overflow-tooltip
            />
            <el-table-column
                label="门店地址"
                align="center"
                prop="detail"
                show-overflow-tooltip
            >
                <template slot-scope="scope">
                    <span>{{ parseAddress(scope.row) }}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="店铺联系人"
                align="center"
                prop="user.nickName"
                width="150"
                show-overflow-tooltip
            />
            <el-table-column
        label="客服电话"
        align="center"
        prop="serverPhone"
        width="150"
      /> -->
            <el-table-column
                label="保证金"
                align="center"
                prop="bondMoney"
                width="150"
            />
            <el-table-column
                label="评分"
                align="center"
                prop="score"
                width="150"
            />
            <el-table-column
                label="入驻时间"
                align="center"
                prop="createTime"
                width="160"
            >
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.createTime) }}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="业务经理"
                align="center"
                prop="promoter"
                width="150"
            />
            <el-table-column
                label="营业状态"
                align="center"
                prop="businessState"
            >
                <template slot-scope="scope">
                    <el-tag
                        v-if="scope.row.businessState == '001'"
                        type="success"
                    >
                        已上架</el-tag
                    >
                    <el-tag v-if="scope.row.businessState == '002'" type="info">
                        已下架</el-tag
                    >
                </template>
            </el-table-column>
            <el-table-column
                label="操作"
                align="center"
                width="220"
                fixed="right"
            >
                <template slot-scope="scope">
                    <el-button
                        type="text"
                        icon="el-icon-view"
                        @click="queryDetails(scope.row.merchantId)"
                        v-hasPermi="['shop:audit:detail']"
                        >查看详情
                    </el-button>
                    <el-button
                        type="text"
                        icon="el-icon-view"
                        @click="setCommissionRate(scope.row)"
                        v-hasPermi="['operation']"
                        >设置分账比例
                    </el-button>
                    <el-button
                        type="text"
                        icon="el-icon-bottom"
                        @click="takeOff(scope.row)"
                        v-hasPermi="['shop:audit:audit']"
                        v-if="scope.row.businessState == '001'"
                        >下架
                    </el-button>
                    <el-button
                        type="text"
                        icon="el-icon-top"
                        @click="takeOn(scope.row)"
                        v-hasPermi="['shop:audit:audit']"
                        v-if="scope.row.businessState == '002'"
                        >上架
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
        />

        <!-- 添加下架原因信息对话框 -->
        <el-dialog
            :title="title"
            :visible.sync="open"
            width="500px"
            append-to-body
        >
            <el-form
                ref="form"
                :model="form"
                label-width="120px"
                style="height: 100px"
            >
                <el-input
                    type="textarea"
                    :rows="4"
                    v-model="form.closeReason"
                    placeholder="请输入下架的原因"
                />
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
        <!-- 设置分账比例对话框 -->
        <!-- <el-dialog
            :title="title"
            :visible.sync="commissionRateOpen"
            width="400px"
            :close-on-click-modal="false"
        >
            <el-row>
                <el-col>
                    <el-input v-model="form.commissionRate"  maxlength="3"/>
                </el-col>
            </el-row>

            <div slot="footer">
                <el-button @click="commissionRateOpen = false">取 消</el-button>
                <el-button type="primary" @click="submitCommissionRate">确 定</el-button>
            </div>
        </el-dialog> -->

        <el-dialog
            :title="title"
            :visible.sync="commissionRateOpen"
            width="400px"
            append-to-body
        >
            <el-form ref="form" :model="form" label-width="120px">
                <el-form-item label="分账比例(%)">
                    <el-input
                        v-model.trim="form.commissionRate"
                        placeholder="请输入分账比例"
                        maxlength="3"
                    />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitCommissionRate"
                    >确 定</el-button
                >
                <el-button @click="cancelCommissionRate">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {
    passList,
    takeOff,
    takeOn,
    updateMerchantCommissionRate,
} from "@/api/merchant/adminMerchant";

export default {
    name: "adminMerchant",
    data() {
        return {
            merchantType: 0,
            showSearch: true,
            loading: true,
            total: 0,
            shopList: [],
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                merchantName: "",
                phonenumber: "",
                shopState: "",
                promoter: "",
                merchantId: "",
                merchantType: "",
                beginTime: "",
                endTime: "",
                businessState: "",
            },
            form: {},
            // 弹出层标题
            title: "",
            open: false,
            commissionRateOpen: false,

            searchDate: "",
        };
    },
    created() {
        this.getList();
    },
    methods: {
        /** 查询待审核列表 */
        getList() {
            this.loading = true;
            this.queryParams.merchantType = this.merchantType;
            this.queryParams.merchantType = this.merchantType;
            if (this.searchDate == null) {
                this.searchDate = "";
            }
            const [searchBegin, searchEnd] = this.searchDate;
            let sBegin = searchBegin;
            let sEnd = searchEnd;
            if (typeof searchBegin == "undefined") {
                sBegin = "";
            }
            if (typeof searchEnd == "undefined") {
                sEnd = "";
            }
            this.queryParams.beginTime = sBegin;
            this.queryParams.endTime = sEnd;
            passList(this.queryParams)
                .then((response) => {
                    console.log(response);
                    this.shopList = response.rows;
                    this.total = parseInt(response.total);
                })
                .catch((err) => {
                    console.log(err);
                })
                .finally(() => {
                    this.loading = false;
                });
        },
        // 表单重置
        reset() {
            this.form = {
                merchantId: null,
                examineReason: null,
            };
            this.resetForm("form");
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.searchDate = [];
            this.queryParams = {
                pageNum: 1,
                pageSize: 10,
                merchantName: "",
                phonenumber: "",
                shopState: "",
                promoter: "",
                merchantId: "",
                merchantType: "",
                beginTime: "",
                endTime: "",
                businessState: "",
            };
            this.handleQuery();
        },
        /**  查看详情 */
        queryDetails(primaryId) {
            this.$router.push(
                "/adminMerchant/pass/info?merchantId=" + primaryId
            );
        },
        parseAddress(row) {
            return row.detail + row.houseNumber;
        },
        /** 下架按钮操作 */
        takeOff(row) {
            this.reset();
            this.form.merchantId = row.merchantId;
            this.open = true;
            this.title = "下架";
        },

        takeOn(row) {
            const merchantId = row.merchantId;
            const merchantName =
                row.merchantName == null ? "" : row.merchantName;
            this.$confirm(
                '确认上架店铺: <span style="font-weight: bold">' +
                    merchantName +
                    "</span> 吗?",
                "提示",
                {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    dangerouslyUseHTMLString: true,
                    type: "warning",
                }
            )
                .then(() => {
                    takeOn({
                        merchantId: merchantId,
                    })
                        .then((res) => {
                            if (res.code == 200) {
                                this.$message.success("上架成功！");
                                this.getList();
                            } else {
                                this.$message.error("上架失败！");
                            }
                        })
                        .catch((err) => {
                            this.$message.error("操作失败！");
                        });
                })
                .catch(() => {});
        },

        /** 提交按钮 */
        submitForm() {
            if (this.form.closeReason == null) {
                this.$message.error("下架原因不可为空");
                return;
            }
            if (this.form.merchantId != null) {
                takeOff(this.form)
                    .then((res) => {
                        if (res.code == 200) {
                            this.$message.success("下架成功");
                        } else {
                            this.$message.error(res.msg);
                        }
                        this.open = false;
                        this.getList();
                        console.log(res);
                    })
                    .catch((err) => {
                        console.log(err);
                        this.$message.error("操作失败");
                    });
            }
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },

        // 设置分账比例
        setCommissionRate(row) {
            this.form = {
                merchantId: row.merchantId,
                commissionRate: row.commissionRate,
            };
            this.commissionRateOpen = true;
            this.title = "设置商家分账比例";
        },

        // 分账比例确认按钮
        submitCommissionRate() {
            if (this.form.merchantId == null) {
                return this.$message.error("商家id不存在！");
            }
            var numReg = /^[0-9]*$/;
            var numRe = new RegExp(numReg);
            if (!numRe.test(this.form.commissionRate)) {
                return this.$message({
                    type: "error",
                    message: "分账比例请输入整数",
                    duration: 1000,
                    showClose: true,
                });
            }
            if (this.form.commissionRate && this.form.commissionRate == 0) {
                return this.$message.error("分账比例不可等于0");
            }
            if (this.form.commissionRate && this.form.commissionRate > 100) {
                return this.$message.error("分账比例不可大于100");
            }
            if (this.form.merchantId != null) {
                let params = {
                    merchantId: this.form.merchantId,
                    commissionRate: this.form.commissionRate,
                };
                // 设置商家分账比例
                updateMerchantCommissionRate(params)
                    .then((res) => {
                        if (res.code == 200) {
                            this.$message.success("设置成功");
                        } else {
                            this.$message.error(res.msg);
                        }
                        this.commissionRateOpen = false;
                        this.getList();
                    })
                    .catch((err) => {
                        console.log(err);
                        this.$message.error("操作失败");
                    });
            }
        },
        // 分账比例取消按钮
        cancelCommissionRate() {
            this.commissionRateOpen = false;
            this.reset();
        },
    },
};
</script>

<style></style>
