<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="90px"
    >
      <el-form-item label="所属护理站" prop="nurseStationName">
        <el-button type="" class="stationbtn" @click="ParamsStation(true)">{{
          queryParams.nurseStationName
        }}</el-button>
      </el-form-item>
      <el-form-item label="订单编号" prop="orderNo">
        <el-input
          v-model="queryParams.orderNo"
          placeholder="请输入订单编号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="订单状态" prop="orderStatus">
        <el-select
          v-model="queryParams.orderStatus"
          placeholder="请选择订单状态"
        >
          <el-option
            v-for="item in orderStatuslist"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="联系电话" prop="phone">
        <el-input
          v-model="queryParams.phone"
          placeholder="请输入联系电话"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <el-table
      v-loading="loading"
      :data="goodsOrderList"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column
        label="所属护理站"
        align="center"
        prop="nurseStationName"
      />
      <el-table-column
        label="订单编号"
        align="center"
        prop="orderNo"
        width="190"
      />
      <el-table-column label="商品名称" align="center" prop="goodsName" />

      <el-table-column label="订单总金额" align="center" prop="totalPrice" />
      <el-table-column label="订单状态" align="center" prop="orderStatus">
        <template slot-scope="scope">
          <!-- {{ orderStatus(scope.row.orderStatus) }} -->
          <el-button v-if="scope.row.orderStatus == 'WAIT_PAY'"
            >待付款</el-button
          >
          <el-button type="primary" v-if="scope.row.orderStatus == 'PAY'"
            >待发货</el-button
          >
          <el-button type="danger" v-if="scope.row.orderStatus == 'CANCEL'"
            >已取消</el-button
          >
          <el-button
            type="primary"
            v-if="scope.row.orderStatus == 'WAIT_RECEIVED_GOODS'"
            >待收货</el-button
          >
          <el-button
            type="primary"
            v-if="scope.row.orderStatus == 'RECEIVED_GOODS'"
            >待评价</el-button
          >
          <el-button type="success" v-if="scope.row.orderStatus == 'EVALUATED'"
            >交易完成</el-button
          >
          <el-button
            type="warning"
            v-if="scope.row.orderStatus == 'WAIT_REFUND'"
            >退款中</el-button
          >
          <el-button
            type="warning"
            v-if="scope.row.orderStatus == 'WAIT_RETURNED_GOODS'"
            >待退货</el-button
          >
          <el-button type="danger" v-if="scope.row.orderStatus == 'REFUNDED'"
            >退款成功</el-button
          >
          <el-button
            type="danger"
            v-if="scope.row.orderStatus == 'RETURNED_GOODS'"
            >已退货</el-button
          >
        </template>
      </el-table-column>
      <el-table-column
        label="下单时间"
        align="center"
        prop="orderTime"
        width="180"
      />
      <el-table-column
        label="联系电话"
        align="center"
        prop="phone"
        width="180"
      />
      <el-table-column label="下单方式" align="center" prop="orderChannel">
        <template slot-scope="scope">
          {{ scope.row.orderChannel == "MOBILE_APP" ? "手机APP" : "" }}
          {{ scope.row.orderChannel == "WECHAT_APPLET" ? "微信小程序" : "" }}
          {{ scope.row.orderChannel == "ALI_PAY_APPLET" ? "支付宝小程序" : "" }}
        </template>
      </el-table-column>
      <!-- <el-table-column label="备注信息" align="center" prop="remark" /> -->
      <el-table-column label="录入物流单号" align="center" prop="remark">
        <template slot-scope="scope">
          <el-button
            v-if="
              scope.row.orderStatus == 'WAIT_RECEIVED_GOODS' &&
              scope.row.expressNo
            "
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="seelogistics(scope.row)"
            v-hasPermi="['system:goodsOrder:editExpressNo']"
            >修改物流单号</el-button
          >
          <el-button
            v-if="
              scope.row.orderStatus == 'WAIT_RECEIVED_GOODS' &&
              scope.row.expressNo == ''
            "
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="seelogistics(scope.row)"
            v-hasPermi="['system:goodsOrder:editExpressNo']"
            >录入物流单号</el-button
          >
          <el-button
            v-if="
              scope.row.orderStatus == 'WAIT_RECEIVED_GOODS' &&
              scope.row.expressNo == null
            "
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="seelogistics(scope.row)"
            v-hasPermi="['system:goodsOrder:editExpressNo']"
            >录入物流单号</el-button
          >
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="seeOrder(scope.row)"
            v-hasPermi="['system:goodsOrder:goodsOrderByOrder']"
            >订单详情</el-button
          >

          <el-button
            v-if="scope.row.orderStatus == 'WAIT_REFUND'"
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="refund(scope.row.id)"
            v-hasPermi="['system:goodsOrder:goodsOrderRefund']"
            >确认退款</el-button
          >
          <!-- <el-button
            v-else
            size="mini"
            type="text"
            icon="el-icon-edit"
            disabled
            v-hasPermi="['system:goodsOrder:goodsOrderRefund']"
            >确认退款</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="订单详情"
      :visible.sync="innerorder"
      append-to-body
      width="1200px"
    >
      <el-form
        :inline="true"
        ref="orderList"
        :model="orderList"
        :rules="rules"
        label-width="120px"
      >
        <el-form-item label="订单编号" prop="orderNo">
          <el-input v-model="orderList.orderNo" disabled style="width: 240px" />
        </el-form-item>
        <el-form-item label="商品名称" prop="goodsName">
          <el-input
            v-model="orderList.goodsName"
            disabled
            style="width: 240px"
          />
        </el-form-item>
        <el-form-item label="订单金额" prop="totalPrice">
          <el-input
            v-model="orderList.totalPrice"
            disabled
            style="width: 240px"
          />
        </el-form-item>
        <el-form-item label="收货人" prop="receiveAddress">
          <el-input
            v-model="orderList.receiver"
            disabled
            style="width: 240px"
          />
        </el-form-item>
        <el-form-item label="收货地址" prop="receiveAddress">
          <el-input
            v-model="orderList.receiveAddress"
            disabled
            style="width: 240px"
          />
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="orderList.phone" disabled style="width: 240px" />
        </el-form-item>

        <!-- <el-form-item label="商品属性" prop="goodsAttributeName">
          <el-input
            v-model="orderList.goodsAttributeName"
            clearable
            @keyup.enter.native="handleQuery"
            :disabled="true"
            style="width: 240px"
          />
        </el-form-item> -->
        <!-- <el-form-item label="商品价格" prop="goodsPrice">
          <el-input
            v-model="orderList.goodsPrice"
            clearable
            @keyup.enter.native="handleQuery"
            :disabled="true"
            style="width: 240px"
          />
        </el-form-item> -->
        <!-- <el-form-item label="地址" prop="receiveAddress">
          <el-input
            v-model="orderList.receiveAddress"
            clearable
            @keyup.enter.native="handleQuery"
            :disabled="true"
            style="width: 240px"
          />
        </el-form-item> -->

        <el-form-item label="订单状态" prop="orderStatus">
          <el-input
            :value="orderStatusinfo(orderList.orderStatus)"
            disabled
            style="width: 240px"
          />
        </el-form-item>
        <el-form-item label="下单方式" prop="buySource">
          <el-input
            :value="orderChannelinfo(orderList.orderChannel)"
            disabled
            style="width: 240px"
          />
        </el-form-item>
        <el-form-item label="购买来源" prop="orderChannel">
          <el-input
            :value="buySourceinfo(orderList.buySource)"
            disabled
            style="width: 240px"
          />
        </el-form-item>

        <el-form-item label="综合评分" v-if="orderList.compositeScore">
          <div style="width: 240px">
            <el-rate
              v-if="orderList.compositeScore"
              v-model="orderList.compositeScore"
              style="padding-top: 7px"
              disabled
              show-score
              text-color="#ff9900"
              score-template="{value}"
            >
            </el-rate>
            <el-input
              v-else
              type="text"
              disabled
              style="width: 240px"
              placeholder="未评分"
            ></el-input>
          </div>
        </el-form-item>
        <el-form-item label="评价内容" v-if="orderList.evaluateContent">
          <el-input
            type="textarea"
            disabled
            style="width: 610px"
            v-model="orderList.evaluateContent"
          />
        </el-form-item>
        <el-form-item label="评价图片" v-if="ratelist">
          <div
            style="
              display: flex;
              flex-wrap: wrap;
              justify-content: space-around;
            "
          >
            <img
              style="width: 23%; height: 100%; margin: 1%"
              v-for="(item, index) in ratelist"
              :src="baseurl + item.evaluatePictureUrl"
              alt=""
              :key="index"
            />
          </div>
        </el-form-item>
        <!-- <el-table
        :data="orderList"
        align="center"
        style="margin: 10px 0 20px 0; padding-bottom: 20px"
      >
        <el-table-column
          prop="orderNo"
          label="订单编号"
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="receiveAddress"
          label="地址"
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="receiver"
          label="收货人"
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="phone" label="手机号" width="120" align="center">
        </el-table-column>
        <el-table-column
          prop="goodsName"
          label="商品名称"
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="goodsAttributeName"
          label="商品属性"
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="goodsPrice"
          label="商品价格"
          width="120"
          align="center"
        >
        </el-table-column>
      </el-table> -->
      </el-form>
    </el-dialog>
    <!-- 查看物流信息弹框 -->
    <el-dialog
      title="录入物流单号"
      :visible.sync="innerlogistics"
      append-to-body
      width="500px"
    >
      <el-form
        :model="queryexpressNo"
        ref="queryForm"
        size="small"
        :inline="true"
        v-show="showSearch"
        label-width="100px"
      >
        <el-form-item label="收货人" prop="receiver">
          <el-input
            style="width: 230px"
            v-model="queryexpressNo.receiver"
            placeholder=""
            clearable
            disabled
          />
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input
            style="width: 230px"
            v-model="queryexpressNo.phone"
            placeholder=""
            clearable
            disabled
          />
        </el-form-item>
        <el-form-item label="收货地址" prop="receiveAddress">
          <el-input
            v-model="queryexpressNo.receiveAddress"
            style="width: 230px"
            type="textarea"
            :rows="5"
            placeholder=""
            disabled
            clearable
          />
        </el-form-item>
        <el-form-item label="物流单号" prop="orderNo">
          <el-input
            v-model="queryexpressNo.expressNo"
            style="width: 230px"
            placeholder="请输入物流单号"
            clearable
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cencellogistics">取 消</el-button>
        <el-button type="primary" @click="searchlogistics">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 退款弹框 -->
    <el-dialog
      title="退款信息"
      :visible.sync="innerrefund"
      append-to-body
      width="700px"
    >
      <el-form
        :model="refundlist"
        ref="queryForm"
        size="small"
        :inline="true"
        v-show="showSearch"
        label-width="110px"
      >
        <el-form-item label="商品名称" prop="goodsName">
          <el-input
            v-model="refundlist.goodsName"
            placeholder=""
            clearable
            disabled
          />
        </el-form-item>
        <el-form-item label="退款类型" prop="refundType">
          <el-input
            :value="refundTypeStatus(refundlist.refundType)"
            disabled
            style="width: 205px"
          />
        </el-form-item>
        <el-form-item label="退款原因" prop="dictLabel">
          <el-input
            v-model="refundlist.dictLabel"
            placeholder=""
            clearable
            disabled
          />
        </el-form-item>
        <el-form-item label="退款金额" prop="godTotalPrice">
          <el-input
            v-model="refundlist.godTotalPrice"
            placeholder=""
            clearable
            disabled
          />
        </el-form-item>
        <el-form-item label="补充描述和凭证" prop="refundReasonRemark">
          <el-input
            style="width: 300px"
            v-model="refundlist.refundReasonRemark"
            placeholder=""
            clearable
            type="textarea"
            :rows="5"
            disabled
          />
        </el-form-item>
        <el-form-item> </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="refundcancel">取 消</el-button>
        <el-button type="primary" @click="submitRefundOrder">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 护理站 -->
    <el-dialog
      title="选择护理站"
      :visible.sync="nurseStationshow"
      width="1100px"
      append-to-body
      :before-close="clicknurseStationshow"
    >
      <el-form
        ref="form"
        :model="getListByUserquery"
        label-width="110px"
        :inline="true"
      >
        <el-form-item label="护理站编码" prop="nurseStationCode">
          <el-input
            v-model="getListByUserquery.nurseStationCode"
            placeholder="请输入护理站编码"
          />
        </el-form-item>
        <el-form-item label="护理站名称" prop="nurseStationName">
          <el-input
            v-model="getListByUserquery.nurseStationName"
            placeholder="请输入护理站名称"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="info"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="stationcancel"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
      <el-table
        v-loading="loading"
        :data="nurseStationlist"
        @cell-dblclick="choicestationid"
      >
        <el-table-column label="请选择" width="70" align="center">
          <template slot-scope="scope">
            <el-button
              type="primary"
              style="width: 15px; height: 15px"
              circle
              @click="choicestationid(scope.row)"
              v-if="queryParams.nurseStationId == scope.row.id"
            ></el-button>

            <el-button
              style="width: 15px; height: 15px"
              circle
              v-else
              @click="choicestationid(scope.row)"
            >
            </el-button>
          </template>
        </el-table-column>
        <el-table-column
          property="nurseStationCode"
          label="护理站编码"
          align="center"
        >
        </el-table-column>
        <el-table-column
          property="nurseStationName"
          label="护理站名称"
          align="center"
        >
        </el-table-column>
        <el-table-column property="phone" label="联系电话" align="center">
        </el-table-column>
        <el-table-column
          property="address"
          label="护理站地址"
          align="center"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
      </el-table>

      <pagination
        v-show="stationtotal > 0"
        :total="stationtotal"
        :page.sync="getListByUserquery.pageNum"
        :limit.sync="getListByUserquery.pageSize"
        @pagination="info"
      />
    </el-dialog>
    <!-- 查看物流详细信息弹框 -->
    <!-- <el-dialog
      title="查看订单信息"
      :visible.sync="innerlogisticsinfo"
      append-to-body
      width="1048px"
    >
      <el-table
        :data="orderList"
        align="center"
        style="margin: 10px 0 20px 0; padding-bottom: 20px"
      >
        <el-table-column
          prop="orderNo"
          label="订单编号"
          width="120"
          align="center"
        >
        </el-table-column>

        <el-table-column
          prop="receiver"
          label="收货人"
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="phone" label="手机号" width="120" align="center">
        </el-table-column>
        <el-table-column
          prop="goodsName"
          label="商品名称"
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="goodsAttributeName"
          label="商品属性"
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="goodsPrice"
          label="商品价格"
          width="120"
          align="center"
        >
        </el-table-column>
      </el-table>
    </el-dialog> -->
  </div>
</template>

<script>
import indexjs from "./indexjs.js";
export default indexjs;
</script>

<style lang='scss' scoped>
.stationbtn {
  width: 208px;
  text-align: left;
  height: 32px;
  overflow: hidden;
  font-size: 14px;
}
</style>


