<template>
  <app-dialog v-model="visible" :loading="loading" :title="title" append-to-body class="app-dialog-content" width="50%"
              @cancel="onCancel" @confirm="onConfirm"
  >
    <div ref="scroll-box" class="h-100 overflow-y pr-10 demo" style="scroll-behavior: smooth">
      <el-form ref="form" :inline="false" :model="form" :rules="rules" class="demo-form" label-width="120px">

        <div class="form-content">
          <el-row :gutter="15">
            <app-filter-item :span="12" label="所属路段" prop="name">
              <el-input v-model="form.name" clearable placeholder="请输入名称" />
            </app-filter-item>
            <app-filter-item :span="12" label="管养单位" prop="alias">
              <el-input v-model="form.alias" clearable placeholder="请输入职务等级" />
            </app-filter-item>
            <app-filter-item :span="12" label="边坡方向" prop="description">
              <el-select v-model="form.type" clearable placeholder="请选择隧道类型">
                <el-option v-for="dict in trendList" :key="dict.value" :label="dict.label" :value="dict.value" />
              </el-select>
            </app-filter-item>
            <app-filter-item :span="12" label="边坡类型" prop="grade">
              <el-select v-model="form.type" clearable placeholder="请选择隧道类型">
                <el-option v-for="dict in options" :key="dict.value" :label="dict.label" :value="dict.value" />
              </el-select>
            </app-filter-item>
            <app-filter-item :span="12" label="边坡等级" prop="description">
              <el-select v-model="form.type" clearable placeholder="请选择隧道类型">
                <el-option v-for="dict in levelList" :key="dict.value" :label="dict.label" :value="dict.value" />
              </el-select>
            </app-filter-item>
            <app-filter-item :span="12" label="是否匝道结构物" prop="description">
              <el-radio-group v-model="form.apiQureyType">
                <el-radio-button v-for="radio in typeoptions" :key="radio.value" :label="radio.value">{{ radio.label
                }}
                </el-radio-button>
              </el-radio-group>
            </app-filter-item>
            <app-filter-item :span="12" label="起点桩号KM" prop="grade">
              <el-input v-model="form.grade" clearable placeholder="请输入职务等级" />
            </app-filter-item>
            <app-filter-item :span="12" label="止点桩号KM" prop="grade">
              <el-input v-model="form.grade" clearable placeholder="请输入职务等级" />
            </app-filter-item>
            <app-filter-item :span="24" label="备注" prop="description">
              <el-input v-model="form.description" placeholder="请输入描述" type="textarea" />
            </app-filter-item>
          </el-row>
        </div>
      </el-form>
    </div>
  </app-dialog>
</template>

<script>
import dialogMixin from '@/mixins/dialog.js';
import DICT from '@/utils/dict';

export default {
  name: 'CompanyDialog',
  mixins: [dialogMixin],
  props: {},
  data() {
    return {
      options: [{ value: '选项1', label: '填方边坡' },
        { value: '选项2', label: '挖方边坡' }],
      levelList: [{ value: '选项1', label: '高边坡' },
        { value: '选项2', label: '其他边坡' }],
      trendList: [{ value: '选项1', label: '上行方向' },
        { value: '选项2', label: '下行方向' },
        { value: '选项3', label: '上下双向' },
        { value: '选项4', label: '匝道' }],
      typeoptions: [{ value: '1', label: '是' }, { value: '0', label: '否' }],
      DICT,
      form: {
        name: '',
        alias: '',
        grade: '',
        description: '',
      },
      rules: {
        name: [{ required: true, message: '职务名称不能为空' }],
        alias: [{ required: true, message: '职务别名不能为空' }],
        grade: [{ required: true, message: '职务等级不能为空' }],
      },
      loading: false,
    };
  },
  methods: {
    /**
     * @description: dialog每次显示时触发的init方法
     * @param {*} data 传入data
     * @return {*}
     */
    initData(data) {
      const orgForm = this.$options.data().form;
      this.form = { ...orgForm, ...data };
      this.$nextTick(() => {
        this.$refs.form.clearValidate();
      });
    },
    onCancel() {
      this.visible = false;
    },
    onConfirm() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          // const params = this.handleParams()
          // try {
          //   this.loading = true
          //   if (this.data?.id) {
          //     await updateData(params)
          //   } else {
          //     await dataAdd(params)
          //   }
          //   this.$message.success('操作成功')
          //   this.onCancel()
          this.loading = true;
          this.$emit('confirm', { ...this.form });
          // } finally {

          // }
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep {
  .el-form-item {
    margin-bottom: 18px !important;
  }

  .el-input__suffix {
    right: 0;
  }
}

//.demo-form {
//  border: solid 1px #eff0f5;
//}

.demo {
  //border: solid 0.5px #eff0f5;
  //width: 100%;
  //margin: 0 auto;
}

//.app-dialog-content {
//  border: solid 1px gold;
//}
</style>
