<template>
  <el-dialog
    :visible.sync="isOpenDialog"
    :close-on-click-modal="false"
    :modal-append-to-body="false"
    :title="edbForm.edb_id ? '编辑指标' : '添加指标'"
    @close="cancelHandle"
    custom-class="dialog"
    center
    width="700px"
    v-dialogDrag
  >
    <div
      v-loading="isAddLoading"
      element-loading-text="加载时间大概20秒，关闭弹窗不影响加载"
      element-loading-spinner="el-icon-loading"
    >
      <div class="dialog-main">
        <el-form
          ref="diaForm"
          label-position="left"
          hide-required-asterisk
          label-width="90px"
          :model="formData"
          :rules="formRules"
        >
          <el-form-item label="分类" prop="classify">
            <el-cascader
              class="classify-cascader"
              v-model="formData.classify"
              :options="classifyOptions"
              :props="{
                label: 'ClassifyName',
                value: 'BaseFromMysteelChemicalClassifyId',
                children: 'Children',
                emitPath: false,
              }"
              style="width: 90%"
              placeholder="请选择分类"
            />
          </el-form-item>
          <el-form-item label="指标ID" prop="from_edb_code">
            <el-input
              v-model="formData.from_edb_code"
              placeholder="请输入指标ID"
              style="width: 90%"
              clearable
              :disabled="edbForm.edb_id"
            />
          </el-form-item>
          <el-form-item>
            <template slot="label">
              <span>
                更新频度
                <el-tooltip
                  effect="dark"
                  content="非必填，未选择更新频度时按照日度刷新的规则定时更新指标"
                  placement="top"
                >
                  <i class="el-icon-question" />
                </el-tooltip>
              </span>
            </template>
            <div>
              <el-select
                v-model="formData.frequency"
                placeholder="请选择频度"
                clearable
                style="width: 45%"
              >
                <el-option
                  v-for="item in frequencyArr"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
              <el-select
                v-model="formData.update_time"
                placeholder="请选择时间"
                multiple
                clearable
                style="width: 45%"
              >
                <el-option
                  v-for="item in timeArr"
                  :key="item"
                  :label="item"
                  :value="item"
                  :disabled="
                    formData.update_time.length > 1 &&
                    !formData.update_time.includes(item)
                  "
                >
                </el-option>
              </el-select>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <div class="dia-bot">
        <el-button type="primary" style="margin-right: 20px" @click="saveHandle"
          >保存</el-button
        >
        <el-button type="primary" plain @click="cancelHandle">取消</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { steelInterface } from "@/api/modules/thirdBaseApi";
export default {
  props: {
    isOpenDialog: {
      type: Boolean,
    },
    classifyList: {
      type: Object,
    },
    edbForm: {
      type: Object,
    },
  },
  watch: {
    isOpenDialog(newval) {
      if (newval) {
        let classifyArr = _.cloneDeep(this.classifyList);
        this.filterNodes(classifyArr);
        this.classifyOptions = classifyArr;

        const { edb_id, classify_id, from_edb_code, frequency, update_time } =
          this.edbForm;

        this.formData = {
          edb_id: edb_id || "",
          classify: edb_id ? classify_id : "",
          from_edb_code: edb_id ? from_edb_code : "",
          frequency: edb_id ? frequency : "",
          update_time: edb_id ? update_time : [],
        };
      }
    },
  },
  computed: {
    timeArr() {
      //30间隔的时间数组
      const timeArrays = new Array(48).fill("").map((item, index) => {
        let time_val = index * 30;
        let hour = Math.floor(time_val / 60);
        let min = time_val % 60;
        let time =
          (hour < 10 ? "0" + hour : hour) + ":" + (min === 0 ? "00" : min);

        return time;
      });
      return timeArrays;
    },
  },
  data() {
    return {
      formData: {
        classify: "",
        from_edb_code: "",
        frequency: "",
        update_time: [],
      },
      classifyOptions: [],
      isAddLoading: false,
      formRules: {
        classify: [
          { required: true, message: "分类名称不能为空", trigger: "blur" },
        ],
        from_edb_code: [
          { required: true, message: "指标ID不能为空", trigger: "blur" },
          { required: true, message: "指标ID不能为空" },
        ],
      },
      frequencyArr: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
    };
  },
  methods: {
    async saveHandle() {
      await this.$refs.diaForm.validate();

      const { edb_id, classify, from_edb_code, frequency, update_time } =
        this.formData;
      const params = {
        BaseFromMysteelChemicalClassifyId: classify,
        UpdateWeek: frequency,
        UpdateTime: update_time.join(","),
      };
      const { Ret, Data } = edb_id
        ? await steelInterface.edbEdit({
            ...params,
            BaseFromMysteelChemicalIndexId: edb_id,
          })
        : await steelInterface.edbAdd({
            ...params,
            IndexCode: from_edb_code,
          });
      if (Ret !== 200) return;

      if (!edb_id) {
        //新增
        this.isAddLoading = true;
        setTimeout(() => {
          this.cancelHandle();
          this.$emit("successCallback", {
            code: Data.UniqueCode,
            id: Data.BaseFromMysteelChemicalIndexId,
          });
        }, 20000);
      } else {
        //编辑
        this.cancelHandle();
        this.$emit("successCallback", {
          code: Data.UniqueCode,
          id: Data.BaseFromMysteelChemicalIndexId,
        });
      }
    },

    /* 取消 */
    cancelHandle() {
      this.isAddLoading = false;
      this.formData = {
        classify: "",
        from_edb_code: "",
        frequency: "",
        update_time: [],
      };
      this.$refs.diaForm.resetFields();
      this.$emit("update:isOpenDialog", false);
      // this.isAddLoading && this.$emit('successCallback',{classify,type: 'wait'})
    },

    // 递归改变第三级目录结构
    filterNodes(arr) {
      arr.length &&
        arr.forEach((item) => {
          item.Children &&
            item.Children.length &&
            this.filterNodes(item.Children);
          if (item.Level === 2) {
            delete item.Children;
          }
        });
    },
  },
  mounted() {},
};
</script>
<style lang="scss" scoped>
.dialog-main {
  padding-left: 50px;
}
.el-cascader .el-input {
  width: 100%;
}
.dia-bot {
  margin: 52px 0 30px;
  display: flex;
  justify-content: center;
}
</style>
<style lang="scss">
.dialog-main .classify-cascader .el-input {
  width: 100%;
}
</style>
