<template>
  <a-modal
    v-model="visible"
    title="批量设置调度周期"
    :width="500"
    wrapClassName="batch_schedule_conf"
    okText="确定"
    cancelText="取消"
    @ok="scheduleConfSubmit"
  >
    <a-form-model
      class="cron_cont"
      :model="formList"
      :rules="rules"
      layout="horizontal"
      :labelCol="{ span: 5 }"
      :wrapperCol="{ span: 17 }"
      ref="formList"
    >
      <a-form-model-item label="调度周期" prop="scheduleCronConf" class="cron">
        <a-popover placement="bottomRight" v-model="cronShow" trigger="click" @click="cronShow=true">
          <template slot="content">
            <selectCron :data="formList.scheduleCronConf" :show="cronShow" @setSchConf="callBack" @close="cronShow=false"></selectCron>
          </template>
          <div class="schedule_conf">
            <a-tooltip>
              <template slot="title">{{ formList.sConf }}</template>
              <p class="schedule_txt">{{ formList.sConf }}</p>
            </a-tooltip>
            <a-button :loading="scheduleLoading" icon="form"></a-button>
          </div>
        </a-popover>
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script>
const selectCron = require("../components/selectcron.vue").default;
const $dispatchcenter = require("@/api/dispatchcenter");

export default {
  components: {
    selectCron
  },
  props: {
    show: [Boolean],
    info: [Object, Array]
  },
  data() {
    return {
      dataList: [],
      cronShow: false,
      scheduleLoading: false,
      formList: {},
      rules: {
        scheduleCronConf: [{ required: true, message: '请输入', trigger: 'blur' }],
      }
    };
  },
  computed: {
    visible: {
      get() {
        return this.show;
      },
      set(val) {
        this.$emit("update:show", val)
      }
    }
  },
  watch: {
    visible(val) {
      if(val) {
        this.dataList = this.info;
        this.formList = {
          scheduleCronConf: {
            second: '*',
            minute: '*',
            hour: '*',
            day: '*',
            month: '*',
            week: '?',
            year: ''
          },
          sConf: "每月每日每时每分每秒",
        }

      }
    }
  },
  created() {},
  methods: {
    scheduleConfSubmit() {
      let params = this.dataList.map(item => {
        return {
          ...item,
          scheduleCronConf: this.formList.scheduleCronConf,
          _X_ROW_KEY: undefined
        }
      })
      $dispatchcenter.updateCron(params).then(req => {
        this.$message.success("批量设置调度任务成功");
        this.visible = false;
        this.$emit("callback");
      })
    },
    callBack(val) {
      this.formList.scheduleCronConf = val;
      this.getSConf();
    },

    getSConf() {
      this.scheduleLoading = true;
      $dispatchcenter
        .translateCron(this.formList.scheduleCronConf)
        .then((req) => {
          this.formList.sConf = req.data;
        }).finally(() => {
          this.scheduleLoading = false;
        })
    },


  }
};
</script>
<style lang="less" scoped>
.batch_schedule_conf {
  .schedule_conf {
    display: flex;
  }
  .schedule_txt {
    flex: 1;
    cursor: pointer;
    color: #2d5afa;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .ant-btn {
    margin-left: 10px;
    margin-top: 4px;
    color: #7E89A4;
  }
}
</style>