<template>
  <div class="app-container">
    <div class="search_con m-b-28">
      <el-form
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        v-show="showSearch"
        label-width="68px"
      >
        <el-form-item label="订单编号" prop="orderNo">
          <el-input
            v-model="queryParams.orderNo"
            placeholder="请输入订单编号"
            clearable
            size="medium"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>

        <el-form-item label="商家名称" prop="storeName">
          <el-input
            v-model="queryParams.storeName"
            placeholder="请输入商家名称"
            clearable
            size="medium"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>

        <el-form-item label="用户名称" prop="userName">
          <el-input
            v-model="queryParams.userName"
            placeholder="请输入用户名称"
            clearable
            size="medium"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>

        <el-form-item label="类型" prop="tradeType">
          <el-select
            v-model="queryParams.tradeType"
            placeholder="请选择类型"
            clearable
            size="medium"
          >
            <el-option
              v-for="dict in tradeTypeStatusOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>

        <!--      <el-form-item label="类型" prop="feeType">-->
        <!--        <el-select v-model="queryParams.feeType" placeholder="请选择类型" clearable size="medium">-->
        <!--          <el-option-->
        <!--            v-for="dict in feeTypeOptions"-->
        <!--            :key="dict.dictValue"-->
        <!--            :label="dict.dictLabel"-->
        <!--            :value="dict.dictValue"-->
        <!--          />-->
        <!--        </el-select>-->
        <!--      </el-form-item>-->

        <el-form-item label="状态" prop="orderStatus">
          <el-select
            v-model="queryParams.orderStatus"
            placeholder="请选择状态"
            clearable
            size="medium"
          >
            <el-option
              v-for="dict in orderStatusOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="下单时间">
          <el-date-picker
            v-model="dateRange"
            size="medium"
            style="width: 360px"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetimerange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :unlink-panels="true"
            :default-time="['00:00:00', '23:59:59']"
          ></el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" size="medium" @click="handleQuery"
            >搜索</el-button
          >
          <el-button size="medium" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="bg bg-white">
      <el-row :gutter="10" class="m-b-16">
        <!--      <el-col :span="1.5">-->
        <!--        <el-button-->
        <!--          type="primary"-->
        <!--          plain-->
        <!--          icon="el-icon-plus"-->
        <!--          size="medium"-->
        <!--          @click="handleAdd"-->
        <!--          v-hasPermi="['otc:otcOrder:add']"-->
        <!--        >新增</el-button>-->
        <!--      </el-col>-->
        <!--      <el-col :span="1.5">-->
        <!--        <el-button-->
        <!--          type="success"-->
        <!--          plain-->
        <!--          icon="el-icon-edit"-->
        <!--          size="medium"-->
        <!--          :disabled="single"-->
        <!--          @click="handleUpdate"-->
        <!--          v-hasPermi="['otc:otcOrder:edit']"-->
        <!--        >修改</el-button>-->
        <!--      </el-col>-->
        <!--      <el-col :span="1.5">-->
        <!--        <el-button-->
        <!--          type="danger"-->
        <!--          plain-->
        <!--          icon="el-icon-delete"-->
        <!--          size="medium"-->
        <!--          :disabled="multiple"-->
        <!--          @click="handleDelete"-->
        <!--          v-hasPermi="['otc:otcOrder:remove']"-->
        <!--        >删除</el-button>-->
        <!--      </el-col>-->
        <el-col :span="1.5">
          <el-button
            type="primary"
            size="medium"
            @click="handleExport"
            v-hasPermi="['otc:otcOrder:export']"
            >导出</el-button
          >
        </el-col>
        <right-toolbar
          :showSearch.sync="showSearch"
          @queryTable="getList"
        ></right-toolbar>
      </el-row>

      <el-table
        v-loading="loading"
        :data="otcOrderList"
        @selection-change="handleSelectionChange"
      >
        <!--      <el-table-column label="流水编号" align="center" prop="id" />-->
        <el-table-column label="订单编号" align="center" prop="orderNo" />
        <el-table-column label="总单编号" align="center" prop="storeOrder" />
        <!-- <el-table-column label="交易类型" align="center" prop="tradeType"   :formatter="tradeTypeFormat"  /> -->
        <el-table-column
          label="交易类型"
          align="center"
          prop="tradeType"
          width="180"
        >
          <template slot-scope="scope">
            <span :style="classObje(scope.row.tradeType)">{{
              tradeTypeFormat(scope.row)
            }}</span>
          </template>
        </el-table-column>

        <el-table-column
          label="订单状态"
          align="center"
          prop="tradeType"
          width="180"
        >
          <template slot-scope="scope">
            <span :style="classObje(scope.row.orderStatus)">{{
              orderStatusFormat(scope.row)
            }}</span>
          </template>
        </el-table-column>

        <el-table-column label="转账凭证" align="center" prop="proofImg">
        <template slot-scope="scope">
          <el-image v-if="scope.row.proofImg"
            style="width: 50px; height:50px"
            :src="scope.row.proofImg"
             @click="previewImage(scope.row.proofImg)"
            :preview-src-list="srcList"
          ></el-image>
          <span v-else>无</span>
        </template>
      </el-table-column>

        <el-table-column label="用户名称" align="center" prop="userName" />
        <el-table-column label="商家名称" align="center" prop="storeName" />
        <el-table-column label="币种" align="center" prop="coin" />
        <el-table-column label="数量" align="center" prop="realityCoinNum" />
        <!-- <el-table-column label="实际数量" align="center" prop="realitySettleCoinNums" /> -->
        <el-table-column label="单价" align="center" prop="legalCurrency" />
        <el-table-column
          label="总金额"
          align="center"
          prop="realityLegalNums"
        />
        <el-table-column label="法币币种" align="center" prop="limitCoin" />
        <!--      <el-table-column label="手续费类型" align="center" prop="feeType"  :formatter="feeTypeFormat"/>-->
        <!-- <el-table-column label="手续费" align="center" prop="fee" /> -->
        <!-- <el-table-column label="支付方式" align="center" prop="paymentType" /> -->
        <!--      <el-table-column label="付款时间倒计时" align="center" prop="paymentEndTime" width="180">-->
        <!--        <template slot-scope="scope">-->
        <!--          <span>{{ parseTime(scope.row.paymentEndTime, '{y}-{m}-{d}') }}</span>-->
        <!--        </template>-->
        <!--      </el-table-column>-->
        <!--      <el-table-column label="确定放行时间" align="center" prop="releaseTime" width="180">-->
        <!--        <template slot-scope="scope">-->
        <!--          <span>{{ parseTime(scope.row.releaseTime) }}</span>-->
        <!--        </template>-->
        <!--      </el-table-column>-->
        <!--      <el-table-column label="支付时间" align="center" prop="paymentTime" width="180">-->
        <!--        <template slot-scope="scope">-->
        <!--          <span>{{ parseTime(scope.row.paymentTime) }}</span>-->
        <!--        </template>-->
        <!--      </el-table-column>-->
        <!--      <el-table-column label="完成时间" align="center" prop="closeTime" width="180">-->
        <!--        <template slot-scope="scope">-->
        <!--          <span>{{ parseTime(scope.row.closeTime) }}</span>-->
        <!--        </template>-->
        <!--      </el-table-column>-->
        <!-- <el-table-column label="收款人" align="center" prop="payee" /> -->
        <!-- <el-table-column label="收款银行" align="center" prop="collectionBank" /> -->
        <!-- <el-table-column label="收款账号" align="center" prop="collectionAccount" /> -->
        <!-- <el-table-column label="支付参考账号" align="center" prop="paymentAccount" />
        <el-table-column label="是否可以申诉" align="center" prop="isAppeal" />
        <el-table-column label="申诉订单编号" align="center" prop="appealOrderId" />
        <el-table-column label="申诉状态" align="center" prop="appealStatus" />
        <el-table-column label="取消类型" align="center" prop="cancelType" /> -->
        <el-table-column
          label="下单时间"
          align="center"
          prop="crateTime"
          width="180"
        >
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button
              size="medium"
              type="text"
              @click="handleUpdate(scope.row)"
              v-hasPermi="['otc:otcOrder:edit']"
              >详情</el-button
            >
            <el-button
              size="medium"
              type="text"
              @click="handleConfirmPayment(scope.row)"
              v-if="scope.row.orderStatus == 'pending_order'"
              >确认付款</el-button
            >
            <el-button
              size="medium"
              type="text"
              @click="handleUpload(scope.row)"
              v-if="!scope.row.proofImg&&scope.row.orderStatus!='cancel'"
              >上传凭证</el-button
            >
            <!--          <el-button-->
            <!--            size="medium"-->
            <!--            type="text"-->
            <!--            icon="el-icon-delete"-->
            <!--            @click="handleDelete(scope.row)"-->
            <!--            v-hasPermi="['otc:otcOrder:remove']"-->
            <!--          >删除</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"
      />
    </div>

    <!-- 添加或修改用户otc订单对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="100px"
        class="flex"
        style="justify-content: space-around"
      >
        <div>
          <el-form-item label="订单编号">
            {{ form.orderNo }}
          </el-form-item>
          <el-form-item label="总订单编号">
            {{ form.storeOrder }}
          </el-form-item>
          <el-form-item label="交易类型" v-if="form.tradeType">
            {{ tradeTypeFormat(form) }}
          </el-form-item>
          <el-form-item label="商家编号">
            {{ form.storeName }}
          </el-form-item>
          <el-form-item label="用户编号">
            {{ form.userName }}
          </el-form-item>
          <el-form-item label="币种">
            {{ form.coin }}
          </el-form-item>
          <el-form-item label="交易数量">
            {{ form.realityCoinNum }}
          </el-form-item>
          <el-form-item label="得到数量">
            {{ form.realitySettleCoinNums }}
          </el-form-item>
          <el-form-item label="法币金额">
            {{ form.realityLegalNums }}
          </el-form-item>
          <el-form-item label="法币价格">
            {{ form.legalCurrency }}
          </el-form-item>
          <el-form-item label="手续费类型" v-if="form.feeType">
            {{ feeTypeFormat(form) }}
          </el-form-item>
          <el-form-item label="手续费">
            {{ form.fee }}
          </el-form-item>
        </div>
        <div>

            <el-form-item label="转账凭证">
          <el-image v-if="form.proofImg"
            style="width: 50px; height:50px"
            :src="form.proofImg"
             @click="previewImage(form.proofImg)"
            :preview-src-list="srcList"
          ></el-image>
          <span v-else>无</span>
      </el-form-item>

          <el-form-item label="订单状态" v-if="form.orderStatus">
            {{ orderStatusFormat(form) }}
          </el-form-item>

          <el-form-item label="支付方式" v-if="form.paymentType">
            {{ form.paymentType }}
          </el-form-item>

          <el-form-item label="支付时间">
            {{ form.paymentTime }}
          </el-form-item>

          <el-form-item label="完成时间">
            {{ form.closeTime }}
          </el-form-item>

          <el-form-item label="收款人">
            {{ form.payee }}
          </el-form-item>
          <el-form-item label="收款银行">
            {{ form.collectionBank }}
          </el-form-item>
          <el-form-item label="收款账号">
            {{ form.collectionAccount }}
          </el-form-item>
          <el-form-item label="支付参考账号">
            {{ form.paymentAccount }}
          </el-form-item>
          <el-form-item label="是否可以申诉">
            {{ form.isAppeal == "Y" ? "是" : "否" }}
          </el-form-item>
          <el-form-item label="申诉订单编号">
            {{ form.appealOrderId }}
          </el-form-item>
          <el-form-item label="申诉状态" v-if="form.appealStatus">
            {{ appealStatusFormat(form) }}
          </el-form-item>
          <el-form-item label="取消类型" v-if="form.cancelType">
            {{ cancelTypeOptionsFormat(form) }}
          </el-form-item>
        </div>
      </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="上传凭证"
      :visible.sync="openTranslate"
      width="500px"
      append-to-body
      :close-on-click-modal="false"
      :before-close="cancel"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="82px">
        <el-form-item label="转账凭证">
          <el-upload
            style="display: inline-block"
            :limit="5"
            action=""
            class="avatar-uploader"
            :http-request="changeFile"
            :show-file-list="false"
            :on-change="imgSaveToUrl"
            ref="upload"
          >
            <img
              v-if="form.localUrl"
              :src="form.localUrl"
              class="avatar"
              style="width: 150px"
              height="150px"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitTranslate">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
  
  <script>
import {
  listOtcOrder,
  getOtcOrder,
  delOtcOrder,
  addOtcOrder,
  updateOtcOrder,
  exportOtcOrder,
  confirmPayment,
  subProofImg,
} from "@/api/otc/otcOrder";

export default {
  name: "OtcOrder",
  components: {},
  computed: {
    classObje(status) {
      return (status) => {
        if (status == "sell") {
          return { color: "rgba(231, 53, 53, 1)" };
        }
        if (status == "buy") {
          return { color: "rgba(9, 186, 122, 1)" };
        }

        if (status == "in_appeal") {
          return { color: "rgba(231, 53, 53, 1)" };
        }
        if (status == "released") {
          return { color: "rgba(255, 124, 30, 1)" };
        }
      };
    },
  },
  data() {
    return {
           // 预览
      srcList: ["http://118.25.187.239:9099/img/adImg/557097620301025280.jpg"],
      dateRange: [],

      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 用户otc订单表格数据
      otcOrderList: [],
      feeTypeOptions: [],
      orderStatusOptions: [],
      tradeTypeStatusOptions: [],
      //申诉字典
      appealStatusOptions: [],
      cancelTypeOptions: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      openTranslate: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        orderNo: null,
        storeOrder: null,
        tradeType: null,
        storeName: null,
        storeId: null,
        userName: null,
        userId: null,
        coin: null,
        realityCoinNum: null,
        realityLegalNums: null,
        realitySettleCoinNums: null,
        legalCurrency: null,
        feeType: null,
        fee: null,
        orderStatus: null,
        paymentType: null,
        paymentEndTime: null,
        releaseTime: null,
        paymentTime: null,
        closeTime: null,
        payee: null,
        collectionBank: null,
        collectionAccount: null,
        paymentAccount: null,
        isAppeal: null,
        appealOrderId: null,
        appealStatus: null,
        cancelType: null,
        userType: "acceptor_order",
      },
      // 表单参数
      form: {},
      fd: null,
      // 表单校验
      rules: {
        orderNo: [
          { required: true, message: "订单编号不能为空", trigger: "blur" },
        ],
        storeOrder: [
          { required: true, message: "总订单编号不能为空", trigger: "blur" },
        ],
        tradeType: [
          { required: true, message: "交易类型不能为空", trigger: "change" },
        ],
        storeId: [
          { required: true, message: "商家编号不能为空", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.getList();
    this.getDicts("trade_type").then((response) => {
      this.tradeTypeStatusOptions = response.data;
      this.tradeTypeStatusOptions.unshift({
        dictValue: null,
        dictLabel: "全部",
      });
    });
    this.getDicts("translate_order_status").then((response) => {
      this.orderStatusOptions = response.data;
      this.orderStatusOptions.unshift({
        dictValue: null,
        dictLabel: "全部",
      });
    });

    this.getDicts("fee_type").then((response) => {
      this.feeTypeOptions = response.data;
      this.feeTypeOptions.unshift({
        dictValue: null,
        dictLabel: "全部",
      });
    });
    this.getDicts("appeal_status").then((response) => {
      this.appealStatusOptions = response.data;
      this.appealStatusOptions.unshift({
        dictValue: null,
        dictLabel: "全部",
      });
    });
    this.getDicts("cancel_type").then((response) => {
      this.cancelTypeOptions = response.data;
      this.cancelTypeOptions.unshift({
        dictValue: null,
        dictLabel: "全部",
      });
    });
  },
  methods: {
      // 预览图片
      previewImage(abUrl) {
      this.srcList[0] = abUrl;
    },
    imgSaveToUrl(event) {
      // 获取上传图片的本地URL，用于上传前的本地预览
      var URL = null;
      if (window.createObjectURL != undefined) {
        // basic
        URL = window.createObjectURL(event.raw);
      } else if (window.URL != undefined) {
        // mozilla(firefox)
        URL = window.URL.createObjectURL(event.raw);
      } else if (window.webkitURL != undefined) {
        // webkit or chrome
        URL = window.webkitURL.createObjectURL(event.raw);
      }
      // 转换后的地址为 blob:http://xxx/7bf54338-74bb-47b9-9a7f-7a7093c716b5
      this.form.localUrl = URL;
      this.$forceUpdate();
    },
    changeFile(file) {
      this.fd = new FormData();
      this.fd.append("file", file.file); // 传文件
      this.fd.append("orderNo", this.form.orderNo);
    },
    /** 提交按钮 */
    submitTranslate() {
      subProofImg(this.fd).then((response) => {
        this.msgSuccess("上传成功");
        this.openTranslate = false;
        this.getList();
      });
    },
    handleUpload(row) {
      this.reset();
      this.form.orderNo = row.orderNo;
      this.openTranslate = true;
    },

    /** 查询用户otc订单列表 */
    getList() {
      this.loading = true;
      listOtcOrder(this.addSESDateRange(this.queryParams, this.dateRange)).then(
        (response) => {
          this.otcOrderList = response.rows;
          this.total = Number(response.total);
          this.loading = false;
        }
      );
    },

    cancelTypeOptionsFormat(row, column) {
      return this.selectDictLabel(this.cancelTypeOptions, row.cancelType);
    },

    appealStatusFormat(row, column) {
      return this.selectDictLabel(this.appealStatusOptions, row.appealStatus);
    },

    tradeTypeFormat(row, column) {
      return this.selectDictLabel(this.tradeTypeStatusOptions, row.tradeType);
    },
    orderStatusFormat(row, column) {
      return this.selectDictLabel(this.orderStatusOptions, row.orderStatus);
    },

    feeTypeFormat(row, column) {
      return this.selectDictLabel(this.feeTypeOptions, row.feeType);
    },
    // 取消按钮
    cancel() {
      this.openTranslate = false;
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {};
      this.dateRange = [];
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.dateRange = [];
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加用户otc订单";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids;
      getOtcOrder(id).then((response) => {
        this.form = response.data;
        this.open = true;
        this.title = "查询用户otc订单";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            updateOtcOrder(this.form).then((response) => {
              this.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addOtcOrder(this.form).then((response) => {
              this.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 确认付款 */
    handleConfirmPayment(row) {
      const ids = row.orderNo;
      this.$confirm(
        '是否确认付款用户otc订单编号为"' + ids + '"的数据项?',
        "警告",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(function () {
          return confirmPayment(ids);
        })
        .then(() => {
          this.getList();
          this.msgSuccess("操作成功");
        });
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm("是否确认导出所有用户otc订单数据项?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return exportOtcOrder(queryParams);
        })
        .then((response) => {
          this.download(response.msg);
        });
    },
  },
};
</script>
  