<template>
  <div>
    <div class="chooseStorageForm SplitForm minPiecesForm">
      <Form
        ref="formValidate"
        :model="VarianceForm"
        :label-width="120"
        class="chooseStorageBox"
      >
        <FormItem
          label="核销账单日期范围"
        >
          <DatePicker
            type="datetimerange"
            placeholder="请选择日期范围"
            style="width: 300px"
            @on-change="changeDateTimeRange"
          />
        </FormItem>
        <FormItem
          label="核销说明"
        >
          <Input
            v-model="VarianceForm.VERIFICATION_EXPLAIN"
            type="text"
            style="width: 300px;"
          ></Input>
        </FormItem>
      </Form>
    </div>
    <div class="bottomBtnBox">
      <Button
        size="small"
        class="cancelBtn"
        ghost
        @click="close()"
      >
        取消
      </Button>
      <Button
        type="primary"
        size="small"
        class="sureBtn"
        @click="sureWriteOff"
      >
        确定
      </Button>
    </div>
  </div>
</template>
<script>
  const R3 = window.R3;

  const { network } = R3;
  export default {
    props: {
      idArray: {// 可获取明细表勾选的明细ID
        type: [Array, Object],
        default: () => {}
      },
      selectRowData: {// 获取ID用于多选,获取勾选的明细对应的row内的数据
        type: [Array, Object],
        default: () => {}
      },
    },
    data() {
      return {
        VarianceForm: {
          startTime: '',
          endTime: '',
          VERIFICATION_EXPLAIN: '',
        },
      };
    },
    methods: {
      changeDateTimeRange(e) {
        this.VarianceForm.startTime = e[0];
        this.VarianceForm.endTime = e[1];
      },
      sureWriteOff() {
        if (!this.VarianceForm.startTime || !this.VarianceForm.endTime) {
          return this.$Message.warning('请选择日期范围');
        } 
        let params = {
          startTime: this.VarianceForm.startTime,
          endTime: this.VarianceForm.endTime,
          VERIFICATION_EXPLAIN: this.VarianceForm.VERIFICATION_EXPLAIN
        };
        network.post('/p/cs/billCancelAfterVerification', params).then((res) => {
          if (res.data.code == 0) {
            this.$Message.success(res.data.message);
            // this.close();
            this.$emit('closeActionDialog', true);
          } else {
            this.$Message.error(res.data.message);
          }
        });
      },
      close() {
        // 成功关闭弹框
        this.$parent.close();
      }
    }
    
  };
</script>
<style scoped lang='less'>
  .bottomBtnBox {
      width: calc(100% + 32px);
      margin: 16px auto 0px;
      margin-left: -16px;
      text-align: center;
      border-top: 1px solid #DEDEDE;
      padding-top: 16px;
      .cancelBtn,.sureBtn {
        width: 72px;
        height: 32px;
        font-size: 12px;
      }
      .cancelBtn {
        color: #909399;
        border: 1px solid #DADADA;
        margin-right: 8px;
      }
  }
</style>
