<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      v-show="showSearch"
      label-width="80px"
    >

      <el-form-item label="商户ID" prop="merchantId">
        <el-input
          v-model="queryParams.merchantId"
          placeholder="请输入商户ID"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="个体户手机号" prop="phonenumber" label-width="120">
        <el-input
          v-model="queryParams.phonenumber"
          placeholder="请输入个体户手机号"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="服务人员手机号" prop="phone" label-width="140">
        <el-input
          v-model="queryParams.phone"
          placeholder="请输入手机号"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="姓名" prop="realName">
        <el-input
          v-model="queryParams.realName"
          placeholder="请输入姓名"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="工龄">
        <div>
          <el-input
            style="width: 90px"
            size="small"
            v-model="queryParams.serverAgeStart"
            clearable
            @keyup.native="isNumber"
            @keyup.enter.native="handleQuery"
          />
          <span style="margin: 0 4px;" >-</span>
          <el-input
            style="width: 90px"
            size="small"
            v-model="queryParams.serverAgeEnd"
            clearable
            @keyup.native="isNumber"
            @keyup.enter.native="handleQuery"
          />
        </div>
      </el-form-item>
      <el-form-item label="等级">
        <el-select
          v-model="queryParams.serverLevel"
          placeholder="请选择"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        >
          <el-option label="全部" value = ""></el-option>
          <template v-for="status in levelList">
            <el-option :label="status.decodeValue" :value = "status.decodeId"></el-option>
          </template>
        </el-select>
      </el-form-item>
      <el-form-item label="状态">
        <el-select
          v-model="queryParams.status"
          placeholder="请选择"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        >
          <el-option label="全部" value></el-option>
          <el-option label="正常" value="0"></el-option>
          <el-option label="停用" value="1"></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="pageList" border stripe>
      <el-table-column label="用户ID" align="center" prop="serverId" width="120" />
      <el-table-column label="个体户ID" align="center" prop="merchantId" width="150" />
      <el-table-column
        label="个体户手机号"
        align="center"
        prop="phonenumber"
        show-overflow-tooltip
      />

      <el-table-column
        label="服务人员手机号"
        align="center"
        prop="phone"
        width="150"
      />
      <el-table-column
        label="服务人员姓名"
        align="center"
        prop="realName"
        width="150"
      />
      <el-table-column
        label="工龄"
        align="center"
        prop="serverAge"
        width="150"
      />
      <el-table-column
        label="等级"
        align="center"
        prop="serverLevel"
        width="150"
      />
      <el-table-column
        label="服务项目数"
        align="center"
        prop="goodsCount"
        width="150"
      >
        <template slot-scope="scope">
          <a style="color: #1c84c6" v-text="scope.row.goodsCount" @click="showGoodsList(scope.row)"></a>
        </template>
      </el-table-column>

      <el-table-column label="状态" align="center" prop="status">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status == 0" type="success">
            正常</el-tag
          >
          <el-tag v-if="scope.row.status == 1" type="info">
            停止接单</el-tag
          >
        </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="800px" append-to-body>
      <el-table v-loading="goodsLoading" :data="goodsList" border stripe>
        <el-table-column
          label="服务主题"
          align="center"
          prop="goods.name"
        />
        <el-table-column
          label="服务类型"
          align="center"
          prop="categoryName"
          width="160"
        />
        <el-table-column
          label="单价/单位"
          align="center"
          prop="goodsServerPrice"
          width="160"
        >
          <template slot-scope="scope">
            <span>{{ parsePrice(scope.row) }}</span>
          </template>
        </el-table-column>

        <el-table-column
          label="单位服务时长(小时)"
          align="center"
          prop="goods.singleTime"
          width="160"
        />

      </el-table>

      <pagination
        v-show="goodsTotal>0"
        :total="goodsTotal"
        :page.sync="goodsQueryParams.pageNum"
        :limit.sync="goodsQueryParams.pageSize"
        @pagination="getGoodsList"
      />

      <div slot="footer" class="dialog-footer">

        <el-button @click="cancel">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { serverUserList, serverGoodsList} from "@/api/merchant/adminMerchant";
import { getCodeList } from "@/api/basic/code";

export default {
  name: "adminMerchant",
  data() {
    return {
      merchantType: 1,
      showSearch: true,
      loading: true,
      total: 0,
      pageList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        merchantName: "",
        merchantPhone: "",
        status: "",
        phonenumber: "",
        promoter: "",
        merchantId: "",
        serverLevel: "",
        serverAgeStart: "",
        serverAgeEnd: "",
        merchantType: ""
      },
      form: {},
      // 弹出层标题
      title: "",
      open: false,
      searchDate: "",

      goodsLoading: true,
      goodsTotal: 0,
      goodsList: [],
      levelList: [],
      goodsQueryParams: {
        pageNum: 1,
        pageSize: 10,
        serverId: '',
      }
    };
  },
  created() {
    this.getList();
    this.getCodeList()
  },
  methods: {
    /** 查询待审核列表 */
    getList() {
      this.loading = true;
      this.queryParams.merchantType = this.merchantType;
      if (this.queryParams.serverAgeStart != '' && this.queryParams.serverAgeEnd != '' && this.queryParams.serverAgeEnd < this.queryParams.serverAgeStart) {
        this.$message.error("工龄最大值不能小于最小值");
        return;
      }
      serverUserList(this.queryParams)
        .then((response) => {
          console.log(response)
          this.pageList = response.rows;
          this.total = parseInt(response.total);
        }).catch(err => {
        console.log(err)
      }).finally(() => {
        this.loading = false;
      });
    },
    getCodeList() {
      getCodeList("007").then(res => {
        if (res.code == 200) {
          this.levelList = res.data;
        } else {
          this.$message.error("获取状态列表失败")
        }
      }).catch(err => {
        console.log(err)
        this.$message.error("获取状态列表失败")
      })
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.searchDate = [];
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        merchantName: "",
        merchantPhone: "",
        phonenumber: "",
        shopState: "",
        promoter: "",
        merchantId: "",
        serverLevel: "",
        serverAgeStart: "",
        serverAgeEnd: "",
        merchantType: ""
      };
      this.handleQuery();
    },
    /**  查看详情 */
    isNumber(e) {
      // 输入框中只允许输入数字
      e.target.value = e.target.value.replace(/[^\d]/g, '')
    },
    showGoodsList(row) {
      console.log(row, 111111111111)
      this.goodsList = [];
      this.goodsTotal = 0;
      this.title = row.realName + ' 服务项目';
      this.open = true;
      this.goodsQueryParams = {
        pageNum: 1,
        pageSize: 10,
        serverId: '',
      }
      this.goodsQueryParams.serverId = row.serverId;
      this.getGoodsList();
    },
    getGoodsList() {
      serverGoodsList(this.goodsQueryParams).then(res => {
        console.log(res)
        if (res.code == 200) {
          this.goodsList = res.rows;
          this.goodsTotal = res.total;
        } else {
          this.$message.error(res.msg)
        }
      }).catch(err => {
        console.log(err)
        this.$message.error("请求失败")
      }).finally(() => {
        this.goodsLoading = false;
      })
    },
    parsePrice(row) {
      if (row.goods == null) {
        return "--"
      }
      let price = row.goodsServerPrice + '/';
      if (row.goods.goodsUnit == '099') {
        price += row.goods.otherUnit;
      } else {
        price += row.unitName
      }
      return price;
    },
    // 取消按钮
    cancel() {
      this.open = false;
    },
  },
};
</script>

<style>
</style>
