<template>
  <app-dialog v-model="visible" :loading="loading" :title="title" append-to-body class="app-dialog-content" width="70%"
              @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" :label-position="labelPosition" :model="form" :rules="rules" class="demo-form"
               label-width="130px"
      >
        <!--        <el-divider content-position="left"-->
        <!--          ><i class="el-icon-document" style="color: rgb(24, 144, 255)" /><span class="divider-top">职务信息</span>-->
        <!--        </el-divider>-->
        <!--        <div class="form-content ml-120">-->
        <!--          <el-row :gutter="15">-->
        <!--            <app-filter-item :span="13" label="职务名称" prop="name">-->
        <!--              <el-input v-model="form.name" clearable placeholder="请输入名称" />-->
        <!--            </app-filter-item>-->
        <!--            <app-filter-item :span="13" label="职务别名" prop="alias">-->
        <!--              <el-input v-model="form.alias" v-pinyin="form.name" clearable placeholder="请输入职务等级" />-->
        <!--            </app-filter-item>-->
        <!--            <app-filter-item :span="13" label="职务等级" 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-tabs type="border-card">
          <el-tab-pane label="基础信息">
            <el-row :gutter="15">
              <app-filter-item :span="11" label="桥梁类型" prop="type">
                <!--                <el-input v-model="form.name" clearable placeholder="请输入名称" />-->
                <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="11" label="桥梁方向" prop="alias">
                <!--                <el-input v-model="form.alias" v-pinyin="form.name" clearable placeholder="请输入职务等级" />-->
                <el-select v-model="form.alias" clearable placeholder="请选择单位类型">
                  <el-option v-for="dict in aliasList" :key="dict.value" :label="dict.label" :value="dict.value" />
                </el-select>
              </app-filter-item>
            </el-row>
            <el-row :gutter="15">
              <app-filter-item :span="11" label="职务等级" prop="grade">
                <el-input v-model="form.grade" clearable placeholder="请输入职务等级" />
              </app-filter-item>
              <app-filter-item :span="11" label="职务等级" prop="grade">
                <el-input v-model="form.grade" clearable placeholder="请输入职务等级" />
              </app-filter-item>
              <app-filter-item :span="20" label="描述" prop="description">
                <el-input v-model="form.description" placeholder="请输入描述" type="textarea" />
              </app-filter-item>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="行政识别数据">
            <el-row :gutter="15">
              <app-filter-item :span="11" label="桥梁编号" prop="grade">
                <el-input v-model="form.grade" clearable placeholder="请输入职务等级" />
              </app-filter-item>
              <app-filter-item :span="11" label="桥梁名称" prop="grade">
                <el-input v-model="form.grade" clearable placeholder="请输入职务等级" />
              </app-filter-item>
              <app-filter-item :span="11" label="中心桩号" prop="grade">
                <el-input v-model="form.grade" clearable placeholder="请输入职务等级" />
              </app-filter-item>
              <app-filter-item :span="11" label="功能类型" prop="grade">
                <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="11" label="被跨越道路名" prop="grade">
                <el-input v-model="form.grade" clearable placeholder="请输入职务等级" />
              </app-filter-item>
              <app-filter-item :span="11" label="被跨越道路桩号" prop="grade">
                <el-input v-model="form.grade" clearable placeholder="请输入职务等级" />
              </app-filter-item>
              <app-filter-item :span="11" label="设计荷载" prop="grade">
                <el-input v-model="form.grade" clearable placeholder="请输入职务等级" />
              </app-filter-item>
              <app-filter-item :span="11" label="桥梁平曲线半径" prop="grade">
                <el-input v-model="form.grade" clearable placeholder="请输入职务等级" />
              </app-filter-item>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="桥梁技术指标">
            <el-row :gutter="15">
              <app-filter-item :span="11" label="桥梁全长(m)" prop="grade">
                <el-input v-model="form.grade" clearable placeholder="请输入职务等级" />
              </app-filter-item>
              <app-filter-item :span="11" label="桥面总宽(m)" prop="grade">
                <el-input v-model="form.grade" clearable placeholder="请输入职务等级" />
              </app-filter-item>
              <app-filter-item :span="11" label="车道宽度(m)" prop="grade">
                <el-input v-model="form.grade" clearable placeholder="请输入职务等级" />
              </app-filter-item>
              <app-filter-item :span="11" label="人行道宽度(m)" prop="grade">
                <el-input v-model="form.grade" clearable placeholder="请输入职务等级" />
              </app-filter-item>
              <app-filter-item :span="11" label="护栏或防撞墙宽度(m)" prop="grade">
                <el-input v-model="form.grade" clearable placeholder="请输入职务等级" />
              </app-filter-item>
              <app-filter-item :span="11" label="中央分隔带宽度(m)" prop="grade">
                <el-input v-model="form.grade" clearable placeholder="请输入职务等级" />
              </app-filter-item>
              <app-filter-item :span="11" label="桥面标准净空(m)" prop="grade">
                <el-input v-model="form.grade" clearable placeholder="请输入职务等级" />
              </app-filter-item>
              <app-filter-item :span="11" label="桥面实际净空(m)" prop="grade">
                <el-input v-model="form.grade" clearable placeholder="请输入职务等级" />
              </app-filter-item>
              <app-filter-item :span="11" label="桥下通航等级及标准净空(m)" prop="grade">
                <el-input v-model="form.grade" clearable placeholder="请输入职务等级" />
              </app-filter-item>
              <app-filter-item :span="11" label="桥下实际净空(m)" prop="grade">
                <el-input v-model="form.grade" clearable placeholder="请输入职务等级" />
              </app-filter-item>
            </el-row>
            <el-row :gutter="15">
              <app-filter-item :span="11" label="引道总宽(m)" prop="grade">
                <el-input v-model="form.grade" clearable placeholder="请输入职务等级" />
              </app-filter-item>
              <app-filter-item :span="11" label="引道线形或曲线半径(m)" prop="grade">
                <el-input v-model="form.grade" clearable placeholder="请输入职务等级" />
              </app-filter-item>
              <app-filter-item :span="11" label="设计洪水频率及其水位(m)" prop="grade">
                <el-input v-model="form.grade" clearable placeholder="请输入职务等级" />
              </app-filter-item>
              <app-filter-item :span="11" label="历史洪水位(m)" prop="grade">
                <el-input v-model="form.grade" clearable placeholder="请输入职务等级" />
              </app-filter-item>
            </el-row>
            <el-row :gutter="15">
              <app-filter-item :span="11" label="桥面高度(m)" prop="grade">
                <el-input v-model="form.grade" clearable placeholder="请输入职务等级" />
              </app-filter-item>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="桥梁结构信息">定时任务补偿</el-tab-pane>
          <el-tab-pane label="桥梁档案资料">定时任务补偿</el-tab-pane>
          <el-tab-pane label="结构技术信息">定时任务补偿</el-tab-pane>
          <el-tab-pane label="技术数据结构物图">定时任务补偿</el-tab-pane>
        </el-tabs>
      </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: '大桥' },
        { value: '选项3', label: '中桥' },
        { value: '选项4', label: '小桥' },
      ],
      aliasList: [
        { value: '选项1', label: '上行方向' },
        { value: '选项2', label: '下行方向' },
        { value: '选项3', label: '上下双向' },
        { value: '选项4', label: '匝道' },
      ],
      typeoptions: [
        { label: '公路', value: '1' },
        { label: '公铁两用', value: '0' },
      ],
      DICT,
      labelPosition: 'right',
      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;
}

.el-tabs {
  padding: 0;
}
</style>
