<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogFormVisible"
    width="500px"
    :close-on-click-modal="false"
    @close="close"
  >
    <el-form
      v-if="md === 'fill' || md === 'modify'"
      ref="form"
      :model="form"
      :rules="rules"
      label-width="80px"
    >
      <el-form-item label="承运公司" prop="courierId">
        <el-select
          class="w-300"
          @change="$forceUpdate()"
          v-model="form.courierId"
          filterable
          placeholder="请选择承运公司"
        >
          <el-option
            v-for="item in courierList"
            :key="item.courierId"
            :label="item.courierName"
            :value="item.courierId"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="发货单号" prop="courierNum">
        <el-input
          class="w-300"
          style="width: 200px"
          v-model.trim="form.courierNum"
          type="text"
          autocomplete="off"
          placeholder="请输入发货单号"
          minlength="30"
        />
      </el-form-item>
    </el-form>
    <!-- 商家退款 -->
    <el-form
      v-if="md === 'refund'"
      ref="refund"
      :model="refundIf"
      :rules="refundReason"
      label-width="80px"
    >
      <el-form-item label="退款原因" prop="refundReason">
        <el-select
          v-model="refundIf.refundReason"
          placeholder="选择退款原因"
          size="small"
        >
          <el-option label="库存不足" value="库存不足" />
          <el-option label="快递无法到达" value="快递无法到达" />
          <el-option label="其他" value="其他" />
        </el-select>
      </el-form-item>
      <el-form-item label="原因说明" prop="refundDesc3">
        {{ refundIf.refundDesc }}
        <el-input v-model="refundIf.refundDesc3" placeholder="原因说明" />
      </el-form-item>
    </el-form>

    <!-- 拒绝退款 -->
    <el-form
      v-if="md === 'refuseInfo'"
      ref="refuseInfo"
      :model="addRefuseRe"
      :rules="rulesAddRefuseRe"
    >
      <el-form-item label="拒绝退款原因" prop="refusereFundReason">
        <el-select
          v-model="addRefuseRe.refusereFundReason"
          placeholder="选择拒绝退款原因"
          size="small"
        >
          <el-option label="库存不足" value="库存不足" />
          <el-option label="快递无法到达" value="快递无法到达" />
          <el-option label="其他" value="其他" />
        </el-select>
      </el-form-item>
      <el-form-item label="拒绝原因说明">
        <el-input
          v-model="addRefuseRe.refuseRefundDesc"
          type="textarea"
          placeholder="拒绝原因说明"
        />
      </el-form-item>
    </el-form>

    <!-- 修改收货地址 -->
    <el-form
      v-if="md === 'adresse'"
      label-width="120px"
      :rules="adresse"
      :model="adresse"
      ref="adresse"
    >
      <el-form-item label="收货人" prop="consignee">
        <el-input
          class="w-300"
          style="width: 200px"
          v-model.trim="row.consignee"
          type="text"
          autocomplete="off"
          placeholder="收货地址"
          minlength="30"
        />
      </el-form-item>
      <el-form-item label="手机号码" prop="phone">
        <el-input
          class="w-300"
          style="width: 200px"
          v-model.trim="row.phone"
          type="text"
          autocomplete="off"
          placeholder="填写手机号码"
          minlength="30"
        />
      </el-form-item>
      <el-form-item label="收货人详细地址" prop="address">
        <el-input
          class="w-300"
          style="width: 200px"
          v-model.trim="row.address"
          type="text"
          placeholder="详细地址"
          minlength="30"
        />
      </el-form-item>
    </el-form>

    <el-form
      v-if="md === 'aprefund'"
      ref="aprefund"
      label-width="120px"
      class="list"
    >
      <el-form-item label="订单编号">
        <span>{{ refund.orderNum }}</span>
      </el-form-item>
      <el-form-item label="微信名">
        <span>{{ refund.wxName }}</span>
      </el-form-item>
      <el-form-item label="退款金额">
        <span style="color: red">¥{{ refund.payAmount }}</span>
      </el-form-item>
      <el-form-item label="申请退款时间">
        <span>{{ refund.refundTime }}</span>
      </el-form-item>
      <el-form-item label="退款原因">
        <span>{{ refund.refundReason }}</span>
      </el-form-item>
      <el-form-item label=" 原因说明">
        <span>{{ refund.refundDesc }}</span>
      </el-form-item>
    </el-form>

    <div v-if="md === 'adresse'" slot="footer" class="dialog-footer">
      <el-button type="primary" @click="close()">取消</el-button>
      <el-button type="primary" @click="updateOrderAddress()">修改</el-button>
    </div>

    <div v-if="md === 'aprefund'" slot="footer" class="dialog-footer">
      <el-button type="primary" @click="modiOrderState()">同意退款</el-button>
      <el-button type="primary" @click="refuse()">拒绝退款</el-button>
    </div>
    <div v-if="md === 'refuseInfo'">
      <el-button @click="close('refuseInfo')">取 消</el-button>
      <el-button type="primary" @click="addRefuseRefundInfo()">确定</el-button>
    </div>

    <div v-if="md === 'refund'">
      <el-button @click="close('refund')">取 消</el-button>
      <el-button type="primary" @click="addRefundInfo()">确定退款</el-button>
    </div>
    <div v-else slot="footer" class="dialog-footer">
      <el-button
        v-if="md === 'fill' || md === 'modify'"
        @click="close('modify')"
        >取 消</el-button
      >
      <el-button
        v-if="md === 'fill' || md === 'modify'"
        type="primary"
        @click="addCourierInfo()"
        >确 定</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import courier from "../../../styles/courier.json";
export default {
  name: "",
  data() {
    let courierNumAll = (rule, value, callback) => {
      let test = /^[A-Za-z0-9]+$/;
      if (!value) {
        return callback(new Error("发货单号不能为空"));
      } else if (!value.replace(test)) {
        return callback(new Error("请输入正确的货运单号"));
      } else {
        callback();
      }
    };
    return {
      courierList: [], // 快递公司LIST
      form: {
        courierName: "",
        courierNum: "",
        courierId: "",
      },
      //拒绝退款
      addRefuseRe: {
        refusereFundReason: "",
        refuseRefundDesc: "",
      },
      refuseInfo: {
        refundReason1: "",
        refundDesc1: "",
      },
      refundIf: {
        refundReason: "",
        refundDesc3: "",
      },
      refund: {},
      title: "",
      dialogFormVisible: false,
      row: "",
      md: "",
      rules: {
        courierId: [
          { required: true, trigger: "blur", message: "请选择承运公司" },
        ],
        courierNum: [
          { required: true, validator: courierNumAll, trigger: "blur" },
        ],
      },
      refundReason: {
        refundReason: [
          { required: true, trigger: "blur", message: "请选择退款原因" },
        ],
        refundDesc3: [
          { required: true, trigger: "blur", message: "请描述退款原因" },
        ],
      },
      refuseInfo1: {
        refundReason1: [
          { required: true, trigger: "blur", message: "请选择拒绝退款原因" },
        ],
        refundDesc1: [
          { required: true, trigger: "blur", message: "请描述拒绝退款原因" },
        ],
      },
      rulesAddRefuseRe: {
        refusereFundReason: [
          { required: true, trigger: "blur", message: "请选择拒绝退款原因" },
        ],
      },
      adresse: {
        consignee: [
          { required: true, trigger: "blur", message: "请填写收货人姓名" },
        ],
        phone: [
          { required: true, trigger: "blur", message: "请填写收货人手机号码" },
        ],
        address: [
          { required: true, trigger: "blur", message: "请填写收货人详细地址" },
        ],
      },
    };
  },
  created() {
    // this.changeStr();
    this.getcouList();
    // console.log("快递公司111", this.courierList);
  },
  methods: {
    // 转数据类型
    changeStr() {
      this.courierList = courier;
    },
    showEdit(row, md) {
      // console.log(row, md, "================");
      this.md = md;
      this.row = row;
      this.getDetails(row);
      this.dialogFormVisible = true;
      if (md === "refund") {
        this.title = "商家退款";
      } else if (md === "fill") {
        this.title = "填写物流信息";
      } else if (md === "modify") {
        this.title = " 修改物流信息";
        // 获取发货信息
      } else if (md === "aprefund") {
        this.title = "用户申请退款";
      } else if (md === "adresse") {
        // 修改收货地址
        this.title = " 修改收货地址";
      }
    },
    close(text) {
      if (text === "modify") {
        this.$refs["form"].resetFields();
        this.form = {
          courierName: "",
          courierNum: "",
        };
      }
      if (text === "refuseInfo") {
        this.$refs["refuseInfo"].resetFields();
        this.refuseInfo = {
          refundReason: "",
          refundDesc: "",
        };
      }
      if (text === "refund") {
        this.$refs["refund"].resetFields();
        this.refund1 = {
          refundReason: "",
          refundDesc: "",
        };
      }
      if (!text) {
        this.$refs["form"].resetFields();
        this.form = {
          courierName: "",
          courierNum: "",
        };
      }
      this.dialogFormVisible = false;
    },
    // 获取快递公司LIST
    getcouList() {
      const params = {
        type: "getLogisticsCode",
        data: {
          searchKey: "",
        },
      };
      this.$http.post(this.$api.getLogisticsCode, params).then((res) => {
        // console.log("快递公司", res);
        this.courierList = res.list;
        // console.log(res.list);
      });
    },
    // 填写快递信息
    addCourierInfo() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          const params = {
            type: "addCourierInfo",
            data: {
              orderID: this.row.orderID,
              courierName: this.form.courierName,
              courierId: this.form.courierId,
              courierNum: this.form.courierNum,
            },
          };
          this.$http.post(this.$api.addCourierInfo, params).then((res) => {
            // console.log("物流信息", res);
            this.$emit("getList");
            this.dialogFormVisible = false;
            this.$baseMessage("添加成功", "success");
            this.form = {
              courierName: "",
              courierNum: "",
              courierId: "",
            };
          });
        }
      });
    },
    // 商家拒绝退款
    addRefuseRefundInfo() {
      this.$refs["refuseInfo"].validate((valid) => {
        if (valid) {
          const params = {
            type: "addRefuseRefundInfo",
            data: {
              orderID: this.row.orderID,
              refusereFundReason: this.addRefuseRe.refusereFundReason,
              refuseRefundDesc: this.addRefuseRe.refuseRefundDesc,
            },
          };
          this.$http.post(this.$api.addRefuseRefundInfo, params).then((res) => {
            this.$emit("getList");
            this.dialogFormVisible = false;
            this.$baseMessage("添加成功", "success");
          });
        }
      });
    },
    // 商家退款
    addRefundInfo() {
      this.$refs["refund"].validate((valid) => {
        if (valid) {
          const params = {
            type: "addRefundInfo",
            data: {
              orderID: this.row.orderID,
              refundReason: this.refundIf.refundReason,
              refundDesc: this.refundIf.refundDesc3,
            },
          };
          this.$http.post(this.$api.addRefundInfo, params).then((res) => {
            this.$emit("getList");
            this.dialogFormVisible = false;
            this.$baseMessage("退款成功", "success");
          });
        }
      });
    },
    // 同意退款
    modiOrderState() {
      const params = {
        type: "addRefundInfo",
        data: {
          orderID: this.row.orderID,
          orderState: this.row.orderState,
        },
      };
      this.$http.post(this.$api.modiOrderState, params).then((res) => {
        this.$emit("getList");
        this.dialogFormVisible = false;
        this.$baseMessage("退款成功", "success");
      });
    },
    // 拒绝退款
    refuse() {
      this.md = "refuseInfo";
      this.title = "拒绝退款";
    },
    getDetails(row) {
      const params = {
        type: "getOrderDetails",
        data: {
          orderID: row.orderID,
        },
      };
      this.$http.post(this.$api.getOrderDetails, params).then((res) => {
        if (this.md === "modify") {
          this.form.courierNum = res.courierNum;
          this.form.courierId = res.courierId;
        }
        this.refund = res;
      });
    },
    //修改收货地址
    updateOrderAddress() {
      this.$refs["adresse"].validate((valid) => {
        if (valid) {
          const params = {
            type: "updateOrderAddress",
            data: {
              orderID: this.row.orderID,
              address: this.row.address,
              consignee: this.row.consignee,
              phone: this.row.phone,
            },
          };
          this.$http.post(this.$api.updateOrderAddress, params).then((res) => {
            if (!res) {
              this.$baseMessage("修改成功", "success");
              this.dialogFormVisible = false;
            }
          });
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.el-dialog {
  .el-form {
    img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      vertical-align: middle;
      margin-left: 10px;
    }
  }
}
.w-300 {
  width: 300px !important;
}
</style>
