<template>
  <el-dialog
    v-dialogDrag
    class="planEdit__tool edit-smooth-run-time"
    :title="title"
    :visible.sync="dialogShow"
    width="500px"
    :before-close="doClose"
    :z-index="2000"
    :modal="false"
    :close-on-click-modal="false"
  >
    <div style="margin: 10px;">
      <div style="border: 1px solid #B9B5A7">
        <el-row>
          <span style="position: relative; top: -8px; left: 20px">{{$t('planMonitor.editSmoothRun.trainProportion')}}</span>
          <el-col :offset="1">
            <el-checkbox v-model="model.useSame">{{$t('planMonitor.editSmoothRun.allTheLoopTrainProportion')}}</el-checkbox>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="9" :offset="1">
            <span>{{$t('planMonitor.editSmoothRun.sizeOfTheLoopTrainProportion')}}</span>
          </el-col>
          <el-col :span="12">
            <el-select v-model="model.scale" :placeholder="$t('planMonitor.editSmoothRun.pleaseSelect')">
              <el-option
                v-for="item in scaleList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-col>
        </el-row>
      </div>
      <el-row style="margin-top: 20px">
        <el-table :data="model.smoothList" border :height="240">
          <el-table-column prop="startTime" :label="$t('planMonitor.editSmoothRun.startTime')" />
          <el-table-column prop="stopTime" :label="$t('planMonitor.editSmoothRun.stopTime')" />
          <el-table-column prop="runInterval" :label="$t('planMonitor.editSmoothRun.runInterval')" />
          <el-table-column prop="scale" :label="$t('planMonitor.editSmoothRun.trainProportion')" />
        </el-table>
      </el-row>
      <el-row type="flex" justify="center" class="button-group">
        <el-button @click="handleAdd">{{$t('planMonitor.editSmoothRun.add')}}</el-button>
        <el-button @click="handleDelete">{{$t('planMonitor.editSmoothRun.delete')}}</el-button>
        <el-button @click="handleEdit">{{$t('planMonitor.editSmoothRun.modify')}}</el-button>
      </el-row>
    </div>
    <el-row type="flex" justify="center" class="button-group">
      <el-button style="padding: 0px; margin: 0px 30px" @click="handleCommit">{{$t('global.confirm')}}</el-button>
      <el-button style="padding: 0px; margin: 0px 30px" @click="doClose">{{$t('global.cancel')}}</el-button>
    </el-row>
  </el-dialog>
</template>

<script>

export default {
	name: 'EditSmoothRunTime',
	components: {
	},
	data() {
		return {
			dialogShow: false,
			loading: false,
			model: {
				useSame: false,
				smoothList: []
			},
			scaleList: []
		};
	},
	computed: {
		title() {
			return this.$t('planMonitor.editSmoothRun.editSmoothRunTime');
		}
	},
	mounted() {
	},
	methods: {
		doShow() {
			this.dialogShow = true;
		},
		doClose() {
			this.loading = false;
			this.dialogShow = false;
		},
		handleAdd() {
			this.$emit('dispatchDialog', { name: 'addSmoothRunTime', params: {} });
		},
		handleDelete() {
			this.$emit('dispatchDialog', { name: 'addSmoothRunTime', params: {} });
		},
		handleEdit() {

		},
		handleCommit() {
		}
	}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "src/styles/mixin.scss";

    /deep/ {
        .el-row {
            margin-bottom: 10px !important;
        }

        .el-dialog .el-input__inner {
            height: 20px !important;
            line-height: 20px !important;
        }

        .el-dialog .el-input {
            width: 160px !important;
        }
    }
</style>
