<template>
    <div class="progress-content">
        <el-form class="progress-header">
            <el-form-item label="应填报日期">
                <el-tag v-if="ytbDate" type="primary" size="large">每月{{ ytbDate }}日</el-tag>
                <el-tag v-else type="info" size="large">未设置</el-tag>
            </el-form-item>
        </el-form>

        <el-tabs v-model="element">
            <el-tab-pane v-for="(label, key) in progressTab" :key="key" :label="label" :name="key"></el-tab-pane>
        </el-tabs>

        <component :is="allComps[element]" @condition_set="condition_set"></component>
    </div>

    <ytb-dialog v-if="dialog" ref="ytbDialog" @success="getCondition" @closed="dialog = false"></ytb-dialog>
</template>

<script>
import API from "@/api/policy/progress";
import { progressTab } from "@/views/progress/main";
import ytbDialog from "@/views/progress/dialog.vue";
import allComps from "@/views/progress/component/index";

export default {
    components: {
        ytbDialog
    },

    data() {
        return {
            allComps,
            progressTab,

            // element: "policy_share",
            element: "policy_strive",

            dialog: false,
            ytbDate: null
        }
    },

    mounted() {
        this.getCondition();
    },

    methods: {
        getCondition() {
            API.condition.get().then(res => this.ytbDate = res.data || null).catch(() => this.ytbDate = null);
        },

        condition_set() {
            this.dialog = true;
            nextTick(() => this.$refs.ytbDialog.open(this.ytbDate));
        }
    }
}
</script>

<style lang="scss" scoped>
.progress-content {
  padding-top: 10px;
  background: #fff;
  border: 1px solid var(--el-border-color-light);
  border-radius: var(--el-border-radius-base);
  box-shadow: var(--el-box-shadow-light);

  .progress-header {
    margin: 5px 20px 10px;

    .el-form-item {
      margin-bottom: 0;

      :deep(.el-form-item__label) {
        color: var(--el-text-color-primary);
      }
    }
  }

  .el-tabs {
    padding: 0 20px;

    :deep(.el-tabs__content) {
      display: none;
    }
  }
}
</style>