<template>
  <el-dialog
    :visible.sync="localVisible"
    :title="lang.webCrawlDialog.title"
    width="800px"
    :close-on-click-modal="true"
    class="web-crawl-dialog"
  >
    <el-tabs v-model="tab" class="web-crawl-tabs">
      <el-tab-pane :label="lang.webCrawlDialog.tabSingle" name="single" />
      <el-tab-pane :label="lang.webCrawlDialog.tabSite" name="site" disabled />
    </el-tabs>
    <div class="web-crawl-form">
      <el-input
        :value="inputUrl"
        @input="$emit('update:inputUrl', $event)"
        :placeholder="lang.webCrawlDialog.inputPlaceholder"
        class="web-crawl-input"
      />
      <div class="web-crawl-tip">
        {{lang.webCrawlDialog.tip}}
      </div>
      <el-collapse v-model="advancedOpen" class="web-crawl-advanced">
        <el-collapse-item :title="lang.webCrawlDialog.advancedTitle" name="advanced">
          <div class="web-crawl-advanced-row web-crawl-advanced-row-flex">
            <div class="web-crawl-advanced-block">
              <div class="web-crawl-advanced-item">
                <span>{{lang.webCrawlDialog.schedule}}</span>
                <el-select v-model="schedule" :placeholder="lang.webCrawlDialog.scheduleNever" style="width: 120px; margin-left: 8px;" disabled>
                  <!-- 暂未实现，禁用 -->
                  <el-option :label="lang.webCrawlDialog.scheduleNever" value="never" />
                  <el-option :label="lang.webCrawlDialog.scheduleDay" value="day" />
                  <el-option :label="lang.webCrawlDialog.scheduleWeek" value="week" />
                </el-select>
              </div>
              <div class="web-crawl-advanced-tip">{{lang.webCrawlDialog.scheduleTip}}</div>
            </div>
            <div class="web-crawl-advanced-block">
              <div class="web-crawl-advanced-item">
                <span>{{lang.webCrawlDialog.attachment}}</span>
                <el-switch v-model="getAttachment" style="margin-left: 8px;" disabled />
                <!-- 暂未实现，禁用 -->
              </div>
              <div class="web-crawl-advanced-tip">{{lang.webCrawlDialog.attachmentTip}}</div>
            </div>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="$emit('update:visible', false)">{{lang.cancel}}</el-button>
      <el-button type="primary" @click="handleConfirm">{{lang.webCrawlDialog.run}}</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'WebCrawlDialog',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    inputUrl: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      localVisible: this.visible,
      tab: 'single',
      advancedOpen: [],
      schedule: 'never',
      getAttachment: false
    }
  },
  watch: {
    visible(val) {
      this.localVisible = val;
    },
    localVisible(val) {
      this.$emit('update:visible', val);
    }
  },
  created() {
    // console.log('[WebCrawlDialog created] props.visible:', this.visible);
  },
  updated() {
    // console.log('[WebCrawlDialog updated] props.visible:', this.visible);
  },
  methods: {
    handleConfirm() {
      this.$emit('confirm', {
        url: this.inputUrl,
        tab: this.tab,
        schedule: this.schedule,
        getAttachment: this.getAttachment
      });
    }
  }
}
</script>

<style scoped>
.web-crawl-dialog >>> .el-dialog__body {
  padding-top: 0;
}
.web-crawl-tabs {
  margin-bottom: 10px;
}
.web-crawl-form {
  margin: 0 10px 0 10px;
}
.web-crawl-input {
  width: 100%;
  margin-bottom: 8px;
}
.web-crawl-tip {
  color: #888;
  font-size: 13px;
  margin-bottom: 10px;
}
.web-crawl-advanced {
  margin-top: 10px;
}
.web-crawl-advanced-row {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.web-crawl-advanced-row-flex {
  flex-direction: row;
  justify-content: flex-start;
  gap: 40px;
}
.web-crawl-advanced-block {
  display: flex;
  flex-direction: column;
  min-width: 260px;
}
.web-crawl-advanced-item {
  display: flex;
  align-items: center;
  margin-bottom: 0;
}
.web-crawl-advanced-row span {
  min-width: 110px;
  color: #333;
}
.web-crawl-advanced-tip {
  color: #888;
  font-size: 13px;
  padding-left: 0;
  margin-bottom: 8px;
  margin-top: 4px;
}
.dialog-footer {
  text-align: right;
}
</style> 