<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      v-show="showSearch"
      label-width="80px"
    >
      <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;x"
          :default-time="['00:00:00', '23:59:59']"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="商家ID/个体户ID" prop="merchantId" label-width="130px">
        <el-input
          v-model="queryParams.merchantId"
          placeholder="请输入ID"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="店铺名称/个体户姓名" prop="merchantName" label-width="150px">
        <el-input
          v-model="queryParams.merchantName"
          placeholder="请输入名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="服务ID" prop="goodsId">
        <el-input
          v-model="queryParams.goodsId"
          placeholder="请输入服务ID"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="服务主题" prop="name">
        <el-input
          v-model="queryParams.name"
          placeholder="请输入服务主题"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="服务人员手机号" prop="serverPhone" label-width="120px">
        <el-input
          v-model="queryParams.serverPhone"
          placeholder="请输入服务人员手机号"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="顾客手机号" prop="memberPhone" label-width="100px">
        <el-input
          v-model="queryParams.memberPhone"
          placeholder="请输入顾客手机号"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="服务类型">
        <el-cascader
          :options="categoryList"
          :props="optionProps"
          size="small"
          clearable
          @change="handleCategory"
        ></el-cascader>
      </el-form-item>
      <el-form-item label="服务主体类型" label-width="100px">
        <el-select
          v-model="queryParams.merchantType"
          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 label="是否追加服务" label-width="100px">
        <el-select
          v-model="queryParams.isAdd"
          placeholder="请选择"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        >
          <el-option label="全部" value = ""></el-option>
          <el-option label="是" value="1"></el-option>
          <el-option label="否" value="0"></el-option>
        </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>
          <template v-for="status in statusList">
            <el-option :label="status.decodeValue" :value = "status.decodeId"></el-option>
          </template>
        </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="dataList" border stripe>

      <el-table-column
        label="订单ID"
        align="center"
        prop="orderId"
        width="100"
        show-overflow-tooltip
      />
      <el-table-column
        label="商家ID/个体户ID"
        align="center"
        prop="merchantId"
        width="100"
        show-overflow-tooltip
      />
      <el-table-column
        label="店铺名称/个体户姓名"
        align="center"
        prop="merchantNameJoin"
        width="150"
        show-overflow-tooltip
      />
      <el-table-column
        label="服务ID"
        align="center"
        prop="goodsId"
        width="100"
        show-overflow-tooltip
      />
      <el-table-column
        label="服务主题"
        align="center"
        prop="goodsName"
        width="150"
        show-overflow-tooltip
      />
      <el-table-column
        label="服务类型"
        align="center"
        prop="categoryName"
        width="150"
        show-overflow-tooltip
      />
      <el-table-column
        label="单价"
        align="center"
        prop="goodsServerPrice"
        width="100"
      />
      <el-table-column
        label="数量"
        align="center"
        prop="goodsCounts"
        width="100"
      />
      <el-table-column
        label="订单金额"
        align="center"
        prop="orderAmount"
        width="100"
      />
      <el-table-column
        label="支付金额"
        align="center"
        prop="totalAmount"
        width="100"
      />
      <el-table-column
        label="服务人员手机号"
        align="center"
        prop="serverPhone"
        width="150"
      />
      <el-table-column
        label="服务人员姓名"
        align="center"
        prop="serverName"
        width="100"
      />
      <el-table-column
        label="顾客手机号"
        align="center"
        prop="memberPhone"
        width="100"
      />
      <el-table-column
        label="上门时间"
        align="center"
        prop="serviceStartTime"
        width="150"
      >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.serviceStartTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="下单时间"
        align="center"
        prop="createTime"
        width="150"
      >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="服务主体类型" align="center" prop="merchantType">
        <template slot-scope="scope">
          <span v-if="scope.row.merchantType == '0'">商家</span>
          <span v-if="scope.row.merchantType == '1'">个人</span>
        </template>
      </el-table-column>
      <el-table-column label="是否追加服务" align="center" prop="addAmount">
        <template slot-scope="scope">
          <span v-if="scope.row.addAmount == null">否</span>
          <span v-else>是</span>
        </template>
      </el-table-column>


      <el-table-column
        label="状态"
        align="center"
        prop="statusName"
        width="100"
      />
      <el-table-column label="操作" align="center" width="220" fixed="right">
        <template slot-scope="scope">
          <el-button
            type="text"
            icon="el-icon-view"
            @click="queryDetail(scope.row)"
            v-hasPermi="['shop:audit:audit']"
          >查看详情
          </el-button>
          <el-button
            type="text"
            icon="el-icon-circle-check"
            @click="doRefund(scope.row)"
            v-hasPermi="['shop:audit:audit']"
            v-if="scope.row.orderState == '005'"
          >审核退款
          </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="600px" append-to-body>
      <el-form
        ref="form"
        :model="form"
        label-width="120px"
      >
        <el-form-item label="申请退款金额">
          <div>{{form.payMoney}}元</div>
        </el-form-item>
        <el-form-item label="申请退款原因">
          <div>{{form.refundReason}}</div>
        </el-form-item>
        <el-divider></el-divider>
        <el-form-item label="审核结果">
          <el-radio v-model="form.status" label="004">同意退款</el-radio>
          <el-radio v-model="form.status" label="003">拒绝退款</el-radio>
        </el-form-item>
        <el-form-item label="审核退款金额" v-if="form.status == '004'">
          <el-input
            type="text"
            :rows="2"
            v-model="form.refundMoney"
            @keyup.native="clearNoNum"
            placeholder="请输入审核退款金额"
          >
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="审核结果描述">
          <el-input
            type="textarea"
            :rows="3"
            v-model="form.refundResult"
            placeholder="请输入审核结果描述"
          />
        </el-form-item>

      </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>
  </div>
</template>

<script>
import { orderList,getRefundInfo, doRefund } from "@/api/order/adminOrder";
import { categoryTree } from "@/api/basic/category";
import { getCodeList } from "@/api/basic/code";

export default {
  name: "adminMember",
  data() {
    return {
      showSearch: true,
      loading: true,
      total: 0,
      dataList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        beginTime: "",
        endTime: "",
        merchantId: "",
        merchantName: "",
        goodsId: "",
        name: "",
        serverPhone: "",
        memberPhone: "",
        categoryId: "",
        merchantType: "",
        isAdd: "",
        status: "",

      },
      form: {},
      // 弹出层标题
      title: "",
      open: false,

      searchDate: "",
      categoryList: [],
      statusList: [],
      optionProps: {
        value: "categoryId",
        label: "categoryName",
        children: "childrenCategory"
      }
    };
  },
  created() {
    this.getList();
    this.categoryTree();
    this.getCodeList()
  },
  methods: {
    /** 查询待审核列表 */
    getList() {
      this.loading = true;
      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;
      orderList(this.queryParams)
        .then((response) => {
          console.log(response)
          this.dataList = response.rows;

          this.total = parseInt(response.total);
        }).catch(err => {
          console.log(err)
        }).finally(() => {
          this.loading = false;
        });
    },
    categoryTree() {
      categoryTree().then(res => {
        if (res.code == 200) {
          this.categoryList = res.data
        } else {
          this.$message.error("获取分类列表失败")
        }
        console.log(res)
      }).catch(err => {
        this.$message.error("获取分类列表失败")
        console.log(err)
      })
    },
    getCodeList() {
      getCodeList("003").then(res => {
        if (res.code == 200) {
          this.statusList = res.data;
        } else {
          this.$message.error("获取状态列表失败")
        }
      }).catch(err => {
        console.log(err)
        this.$message.error("获取状态列表失败")
      })
    },
    handleCategory(value) {
      console.log(value)
      this.queryParams.categoryId = value[value.length - 1]
      console.log(this.queryParams.categoryId)
    },
    // 表单重置
    reset() {
      this.form = {
        orderId: null,
        refundMoney: null,
        refundReason: null,
        refundResult: null,
        status: null,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.searchDate = [];
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        beginTime: "",
        endTime: "",
        merchantId: "",
        merchantName: "",
        goodsId: "",
        name: "",
        serverPhone: "",
        memberPhone: "",
        categoryId: "",
        merchantType: "",
        isAdd: "",
        status: "",

      };
      this.handleQuery();
    },

    parseAddress(row) {
      if (row.addressList != null && row.addressList.length > 0) {
        return row.addressList[0].address + row.addressList[0].detailed
      } else {
        return "--"
      }

    },
    doRefund(row) {
      getRefundInfo({
        orderId: row.orderId
      }).then(res => {
        if (res.code == 200) {
          this.form = res.data
          this.open = true;
          this.title = "退款审核";
        } else {
          this.$message.error("获取退款信息失败")
        }
      }).catch(err => {
        console.log(err)
        this.$message.error("获取退款信息失败")
      })

    },
    //控制只能输入小数点后2位
    clearNoNum(obj) {
      var t = obj.target.value.charAt(0);
      //先把非数字的都替换掉，除了数字和.
      obj.target.value = obj.target.value.replace(/[^\d.]/g, "");
      //必须保证第一个为数字而不是.
      obj.target.valuee = obj.target.value.replace(/^\./g, "");
      //保证只有出现一个.而没有多个.
      obj.target.value = obj.target.value.replace(/\.{2,}/g, ".");
      //保证.只出现一次，而不能出现两次以上
      obj.target.value = obj.target.value.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
      obj.target.value = obj.target.value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); //只能输入两个小数
      //如果第一位是负号，则允许添加   如果不允许添加负号 可以把这块注释掉
      // if (t == '-') {
      //   obj.target.value = '-' + obj.target.value;
      // }

    },
    /** 提交按钮 */
    submitForm() {
      if (this.form.refundResult == null || this.form.refundResult == '') {
        this.$message.error("处理结果描述必填")
        return;
      }
      if (this.form.status == null || this.form.status.status == '') {
        this.$message.error("审核结果必选")
      }
      doRefund(this.form).then(res => {
        if (res. code == 200) {
          this.$message.success("审核完成");
          this.open = false;
          this.getList();
          console.log(res)
        } else {
          this.$message.error(res.msg)
        }

      }).catch(err => {
        console.log(err)
        // this.$message.error("操作失败")
      })
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
  },
};
</script>

<style>
</style>
