<template>
  <el-drawer
    title="配置条件"
    :visible.sync="drawer"
    direction="rtl"
    :before-close="handleClose"
    size="800px"
  >
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="130px"
      class="add-settings"
    >
      <el-form-item label="当前模式">{{ info.name || "--" }}</el-form-item>

      <el-form-item label="自动化" prop="enabled">
        <el-switch
          v-model="form.enabled"
          :active-value="1"
          :inactive-value="0"
          @change="handleSwitchClick"
          :loading="switchLoading"
        >
        </el-switch>
      </el-form-item>

      <el-form-item label="当排队人数到达" prop="maxQueueCount">
        <el-input-number
          v-model="form.maxQueueCount"
          controls-position="right"
          placeholder="请输入当排队人数到达"
          :min="0"
          :precision="0"
          style="width: 300px"
        ></el-input-number>
        <span class="description">当排队订单数：{{ queueCount }}</span>
      </el-form-item>

      <el-form-item label="">
        <div style="width: 300px; text-align: center">或</div>
      </el-form-item>

      <el-form-item label="到达指定日期" prop="autoConvertDate">
        <el-date-picker
          v-model="form.autoConvertDate"
          type="date"
          placeholder="选择日期"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          style="width: 300px"
          :picker-options="pickerOptions"
        >
        </el-date-picker>
      </el-form-item>

      <el-form-item label="自动更换模式为" prop="targetModeId">
        <el-select
          v-model="form.targetModeId"
          placeholder="请选择"
          clearable
          style="width: 300px"
        >
          <el-option
            v-for="item in optionsList"
            :key="item.value"
            :label="item.namePrefix + item.sortOrder"
            :value="item.modeId"
            :disabled="item.modeId == info.modeId"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="">
        <el-button type="primary" @click="submitForm" :loading="buttonLoading"
          >保存</el-button
        >
        <el-button @click="handleClose">取消</el-button>
      </el-form-item>
    </el-form>
  </el-drawer>
</template>
<script>
import {
  subsidyModeAutoSet,
  subsidyModeAutoInfo,
  subsidyModeCurrentInfo,
  subsidyModeAutoEnabled,
  subsidyQueueValidQueueCount,
} from "@/api/subsidyMode/modeSettings";

export default {
  props: {
    optionsList: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      switchLoading: false,
      buttonLoading: false,
      drawer: false,
      form: {
        enabled: 0,
      },
      info: {},
      rules: {
        targetModeId: [
          { required: true, message: "请选择自动更换模式", trigger: "change" },
        ],
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() <= Date.now();
        },
      },
      queueCount: 0,
    };
  },
  mounted() {
    this.getSubsidyModeCurrentInfo();
    this.getSubsidyQueueValidQueueCount();
  },
  methods: {
    getSubsidyQueueValidQueueCount() {
      subsidyQueueValidQueueCount().then((res) => {
        if (res.code == 200) {
          console.log(res.data);
          this.queueCount = res.data || 0;
        }
      });
    },
    getSubsidyModeCurrentInfo() {
      subsidyModeCurrentInfo().then((res) => {
        if (res.code == 200 && res.data) {
          this.info = res.data || {};
          // this.form.modeAutoId = res.data.modeId || "";
        }
      });
    },
    open() {
      if (this.optionsList.length == 0) {
        return this.$message.warning("请先添加模式");
      }
      subsidyModeAutoInfo().then((res) => {
        if (res.code == 200) {
          let form = res.data ? { ...res.data } : {};
          this.form = {
            ...form,
            enabled: form.enabled ? 1 : 0,
          };
          this.drawer = true;
        }
      });
    },
    handleClose() {
      this.drawer = false;
      this.form = {};
    },
    // 切换自动化开关
    handleSwitchClick(e) {
      if (this.form.modeAutoId) {
        this.switchLoading = true;
        subsidyModeAutoEnabled(this.form.modeAutoId)
          .then((res) => {
            if (res.code == 200) {
              this.$message.success(e ? "自动化开启成功" : "自动化关闭成功");
              this.switchLoading = false;
            }
          })
          .catch((err) => {
            this.switchLoading = false;
            this.form.enabled = !this.form.enabled;
          });
      }
    },
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (!this.form.maxQueueCount && !this.form.autoConvertDate) {
            return this.$message.error(
              "当排队人数到达或到达指定日期至少填写一个"
            );
          }
          if (this.info.modeId == this.form.targetModeId) {
            return this.$message.warning("当前模式和自动更换模式不能相同");
          }
          this.buttonLoading = true;
          let form = {
            ...this.form,
            modeAutoId: this.form.modeAutoId
              ? this.form.modeAutoId
              : this.info.modeId,
          };
          subsidyModeAutoSet(form)
            .then((res) => {
              this.buttonLoading = false;

              if (res.code == 200) {
                this.$message.success("保存成功");
                this.handleClose();
              }
            })
            .catch((err) => {
              this.buttonLoading = false;
            });
        }
      });
    },
  },
};
</script>
<style scoped lang="scss">
.add-settings {
  padding: 0 30px;
  .percentage-unit {
    margin-left: 10px;
  }
  .description {
    margin-left: 20px;
    color: red;
  }
}
</style>
