<template>
  <div>
    <obj-modal
      ref="modal"
      labelWidth="150px"
      :modalConfig="modalConfig"
      :modalData="modalData"
      :modalHandles="modalHandles"
    >
      <div slot="dialog__content">
        <el-form
          :model="ruleForm"
          ref="ruleForm"
          label-width="150px"
          class="demo-ruleForm"
        >
          <el-row>
            <el-col :span="12">
              <el-form-item label="订金支付时间：" prop="startTime">
                <el-date-picker
                  @change="getOrderTime"
                  format="yyyy-MM-dd HH:mm"
                  data-format="yyyy-MM-dd HH:mm"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  v-model="orderTime"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :editable="false"
                >
                </el-date-picker> </el-form-item
            ></el-col>
            <el-col :span="12">
              <el-form-item
                label="尾款支付时间："
                prop="balancePaymentStartTime"
              >
                <el-date-picker
                  @change="getArrearsTime"
                  format="yyyy-MM-dd HH:mm"
                  data-format="yyyy-MM-dd HH:mm"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  v-model="arrears"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :picker-options="pickerOptions"
                >
                </el-date-picker> </el-form-item
            ></el-col>
          </el-row>
          <el-form-item
            label="预计发货时间："
            prop="estimatedStartDeliveryTime"
          >
            <el-date-picker
              format="yyyy-MM-dd HH:mm"
              data-format="yyyy-MM-dd HH:mm"
              value-format="yyyy-MM-dd HH:mm:ss"
              @change="deliveryTime"
              v-model="delivery"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="定金可退：" prop="isRefundEarnestMoney">
            <el-radio v-model="ruleForm.isRefundEarnestMoney" :label="1"
              >是</el-radio
            >
            <el-radio v-model="ruleForm.isRefundEarnestMoney" :label="0"
              >否</el-radio
            >
            <span>
              选择是，用户可在付尾款前申请退定金（申请后自动退，无需审核），或付尾款时间结束后系统自动退定金
            </span>
          </el-form-item>

          <div style="padding: 0 0 0 20px; font-size: 16px; font-weight: 600">
            已选择商品
          </div>
          <div style="padding: 20px">
            <div style="border-top: 1px solid #ccc; padding: 10px 0 0 0">
              <div style="font-size: 16px; margin-bottom: 20px">
                <span>商品ID:{{ ruleForm.productId }}</span>
                <span style="margin-left: 20px"
                  >商品名称:{{ ruleForm.name }}</span
                >
              </div>
              <el-table
                border
                ref="multipleTable"
                :data="ruleForm.productSpecificationList"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange"
              >
                <el-table-column align="center" label="是否预售" width="80">
                  <template slot-scope="scope">
                    <span>{{
                      scope.row.isAdvanceSell == 1 ? "是" : "否"
                    }}</span>
                    <!-- <el-checkbox
                      :true-label="1"
                      :false-label="0"
                      v-model="scope.row.isAdvanceSell"
                    ></el-checkbox> -->
                  </template>
                </el-table-column>
                <el-table-column align="center" label="SKU-ID" prop="id" />
                <el-table-column
                  align="center"
                  label="规格"
                  prop="attributeList"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row.attributeValue }}</span>
                  </template>
                </el-table-column>
                <el-table-column align="center" label="属性" prop="address">
                  <template slot-scope="scope">
                    <span>{{
                      scope.row.attributeList
                        ? scope.row.attributeList[0].attributeName
                        : "无"
                    }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  label="销售价"
                  prop="marketPrice"
                  width="120"
                />
                <el-table-column
                  prop="presalePrice"
                  align="center"
                  label="*预售价"
                  width="200"
                >
                  <template slot-scope="scope">
                    <span v-if="scope.row.isAdvanceSell">{{
                      scope.row.presalePrice
                    }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="earnestMoney"
                  align="center"
                  label="*定金"
                  width="200"
                >
                  <template slot-scope="scope">
                    <span v-if="scope.row.isAdvanceSell">{{
                      scope.row.earnestMoney
                    }}</span>
                  </template>
                </el-table-column>
                <el-table-column align="center" label="尾款" width="200">
                  <template slot-scope="scope">
                    <span v-if="scope.row.isAdvanceSell">{{
                      scope.row.presalePrice
                        ? scope.row.presalePrice - scope.row.earnestMoney
                        : ""
                    }}</span>
                  </template>
                </el-table-column>
                <el-table-column align="center" label="*预售库存" width="200">
                  <template slot-scope="scope">
                    <span v-if="scope.row.isAdvanceSell">{{
                      scope.row.advanceSellStockNum
                    }}</span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <el-empty
              v-show="ruleForm.productList?.length == 0"
              description="请选择商品"
            ></el-empty>
          </div>
        </el-form>
      </div>
      <!-- 选择商品 -->
    </obj-modal>
  </div>
</template>
<script>
import { debounce, cloneDeep } from "lodash";
export default {
  components: {},
  props: {
    marketId: {
      type: String,
      default: "",
    },
    shopId: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      isAdd: true,
      //表格属性
      modalConfig: {
        title: "查看预售",
        show: false,
        width: "1200px",
        fullscreen: true,
      },
      modalData: {},
      ruleForm: {
        productList: [],
        isRefundEarnestMoney: 1, //定金可退 1是 0
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now();
        },
      },
      orderTime: [], //订单支付时间
      arrears: [], //尾款时间
      delivery: [], //发货时间
      tableData: [],
    };
  },
  watch: {
    "modalConfig.show"(newVal) {
      if (newVal) {
        //关闭弹窗清空校验
        setTimeout(() => {
          this.$refs.ruleForm.resetFields();
        });
      }
    },
  },
  methods: {
    queryTableData(pageNo, pageSize) {},
    toggle(e) {
      if (this.modalConfig.show == false) {
        this.modalConfig.show = true;
      } else {
        this.modalConfig.show = false;
      }
      if (e) {
        this.init(cloneDeep(e));
      }
      return {
        add: () => {
          this.orderTime = [];
          this.arrears = [];
          this.delivery = [];
          this.ruleForm = {
            startTime: "",
            endTime: "",
            balancePaymentStartTime: "",
            balancePaymentEndTime: "",
            estimatedStartDeliveryTime: "",
            estimatedEndDeliveryTime: "",
            productList: [],
            isRefundEarnestMoney: 1, //定金可退 1是 0
          };
          this.modalConfig.title = "新增预售";
          this.isAdd = true;
        },
        update: () => {
          this.modalConfig.title = "查看预售";
          this.isAdd = false;
        },
      };
    },
    init(row) {
      console.log(row.startTime, row.endTime);
      this.orderTime = [row.startTime, row.endTime];
      this.arrears = [row.balancePaymentStartTime, row.balancePaymentEndTime];
      this.delivery = [
        row.estimatedStartDeliveryTime,
        row.estimatedEndDeliveryTime,
      ];
      (this.ruleForm = {
        productId: row.id,
        advanceSellId: row.advanceSellId,
        startTime: row.startTime,
        name: row.name,
        endTime: row.endTime,
        balancePaymentStartTime: row.balancePaymentStartTime,
        balancePaymentEndTime: row.balancePaymentEndTime,
        estimatedStartDeliveryTime: row.estimatedStartDeliveryTime,
        estimatedEndDeliveryTime: row.estimatedEndDeliveryTime,
        isRefundEarnestMoney: Number(row.isRefundEarnestMoney),
        productSpecificationList: row.productSpecificationList,
      }),
        console.log(this.orderTime, this.arrears, this.delivery);

      // this.ruleForm = row;
    },
    //订单支付时间
    getOrderTime(e) {
      if (e) {
        console.log(e);
        this.ruleForm.startTime = e[0];
        this.ruleForm.endTime = e[1];
      } else {
        this.ruleForm.startTime = "";
        this.ruleForm.endTime = "";
      }
    },
    //尾款支付时间
    getArrearsTime(e) {
      if (e) {
        console.log(e);
        this.ruleForm.balancePaymentStartTime = e[0];
        this.ruleForm.balancePaymentEndTime = e[1];
      } else {
        this.ruleForm.balancePaymentStartTime = "";
        this.ruleForm.balancePaymentEndTime = "";
      }
    },
    //发货时间
    deliveryTime(e) {
      if (e) {
        console.log(e);
        this.ruleForm.estimatedStartDeliveryTime = e[0];
        this.ruleForm.estimatedEndDeliveryTime = e[1];
      } else {
        this.ruleForm.estimatedStartDeliveryTime = "";
        this.ruleForm.estimatedEndDeliveryTime = "";
      }
    },
    selectProduct() {
      console.log("选择商品", this.marketId, this.shopId);
      this.$nextTick(() => {
        this.$refs.commodity.toggle().add({
          marketId: this.marketId,
          shopId: this.shopId,
        });
      });
    },
    handleSelectionChange(e) {
      console.log(e);
    },
    getProduct(row) {
      this.ruleForm.productList = row.map((item) => {
        return {
          productId: item.id,
          name: item.name,
          productSpecificationList: item.productSpecificationList,
        };
      });
      console.log(this.ruleForm.productList, this.ruleForm.productList.length);

      console.log("获取商品");
    },
  },
  computed: {
    modalHandles() {
      return [
        {
          label: "关闭",
          handle: () => {
            this.toggle();
          },
        },
        // {
        //   label: "确认",
        //   type: "primary",
        //   // submit: true,
        //   handle: () => {
        //   },
        // },
      ];
    },
  },
  asyncComputed: {},
};
</script>
<style lang="scss" scoped>
</style>
