<template>
  <div class="btns" v-show="opts !== 'view'">
    <el-button type="primary" plain icon="Plus" @click="openDialog({}, 'add')">新增</el-button>
    <el-button type="primary" plain icon="Check" @click="submit2">确定</el-button>
  </div>
  <el-table class="table" :data="tableData" v-loading="loading" max-height="680" element-loading-text="数据加载中...">
    <el-table-column type="index" width="55" label="序号" />
    <el-table-column label="下垫面" prop="itemName" show-overflow-tooltip />
    <el-table-column label="下垫面大类" prop="itemName" show-overflow-tooltip>
      <template #default="{ row }">
        <span>{{ findText('underlying_surface_category_one', row.categoryOne) }}</span>
      </template>
    </el-table-column>
    <el-table-column label="下垫面小类" prop="itemName" show-overflow-tooltip>
      <template #default="{ row }">
        <span>{{ findText('underlying_surface_category_two', row.categoryTwo) }}</span>
      </template>
    </el-table-column>
    <el-table-column label="是否硬质地面" prop="hardFlag" show-overflow-tooltip>
      <template #default="{ row }">
        <span>{{ row.hardFlag === '1' ? '是' : '否' }}</span>
      </template>
    </el-table-column>
    <el-table-column label="下限值" prop="downValue" show-overflow-tooltip />
    <el-table-column label="上限值" prop="upValue" show-overflow-tooltip />
    <template v-if="opts !== 'add'">
      <el-table-column label="修改时间" prop="updateTime" show-overflow-tooltip />
      <el-table-column label="修改人" prop="updateBy" show-overflow-tooltip />
    </template>
    <el-table-column label="排序" prop="orderNo" show-overflow-tooltip />
    <template v-if="opts !== 'view'">
      <el-table-column label="操作" show-overflow-tooltip width="150">
        <template #default="{ row, index }">
          <el-button type="primary" link size="small" @click="openDialog(row, 'view')">查看</el-button>
          <el-button type="primary" link size="small" @click="openDialog(row, 'edit')">修改</el-button>
          <el-button type="danger" link size="small" @click="del(row, index)">删除</el-button>
        </template>
      </el-table-column>
    </template>
  </el-table>
  <el-dialog
    v-model="visible"
    :title="`${configOpts.text}下垫面系数`"
    :close-on-click-modal="false"
    width="50%"
    :before-close="closeDialog"
    class="innerDialog"
  >
    <el-form ref="ruleForm" :model="form" :rules="rules">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="下垫面名称:" prop="itemName" class="formItem">
            <el-input v-model="form.itemName" placeholder="请输入下垫面名称" :disabled="configOpts.type === 'view'" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="下垫面大类:" prop="categoryOne" class="formItem">
            <el-select v-model="form.categoryOne" placeholder="请选择下垫面大类" style="width: 100%" :disabled="configOpts.type === 'view'">
              <el-option v-for="dict in underlying_surface_category_one" :key="dict.value" :label="dict.label" :value="dict.value" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="下垫面小类:" prop="categoryTwo" class="formItem">
            <el-select v-model="form.categoryTwo" placeholder="请选择下垫面小类" style="width: 100%" :disabled="configOpts.type === 'view'">
              <el-option v-for="dict in underlying_surface_category_two" :key="dict.value" :label="dict.label" :value="dict.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否硬质地面:" prop="hardFlag" class="formItem">
            <el-select v-model="form.hardFlag" placeholder="请选择" style="width: 100%" :disabled="configOpts.type === 'view'">
              <el-option label="是" value="1" />
              <el-option label="否" value="0" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="径流系数下限:" prop="downValue" class="formItem">
            <el-input v-model="form.downValue" placeholder="请输入0-1的值" :disabled="configOpts.type === 'view'" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="径流系数上限:" prop="upValue" class="formItem">
            <el-input v-model="form.upValue" placeholder="请输入0-1的值" :disabled="configOpts.type === 'view'" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="排序:" prop="orderNo" class="formItem">
            <el-input v-model="form.orderNo" placeholder="请输入排序" :disabled="configOpts.type === 'view'" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer v-if="configOpts.type !== 'view'">
      <div class="dialog-footer">
        <el-button type="primary" @click="submit">确定</el-button>
        <el-button @click="closeDialog">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import {
  getUnderlyingSurfaceRunoffConfigItemList,
  underlyingSurfaceRunoffConfigItemAdd,
  underlyingSurfaceRunoffConfigAddWithItem,
  underlyingSurfaceRunoffConfigItemEdit,
  underlyingSurfaceRunoffConfigItemDel,
} from '@/api/preassess/runoffCoefficient.js';
import { ref, reactive, onMounted } from 'vue';
import { inheritAttr } from '@/utils/v3';
import { optTextMap } from '@/utils/map';
import { validate, orderNoValidate } from './validate';
const { proxy } = getCurrentInstance();

const { underlying_surface_category_one } = proxy.useDict('underlying_surface_category_one');
const { underlying_surface_category_two } = proxy.useDict('underlying_surface_category_two');

const dicts = {
  underlying_surface_category_one,
  underlying_surface_category_two,
};
const findText = (prop, type) => {
  const item = dicts[prop].value.find(it => it.value === type);
  return item?.label || '';
};

const props = defineProps({
  id: {
    type: [String, Number],
    default: '',
  },
  status: {
    type: String,
    default: '',
  },
  opts: {
    type: String,
    default: '',
  },
});
const emit = defineEmits(['close']);

const { id, status, opts } = props;
const loading = ref(false);
const tableData = ref([]);
const visible = ref(false);
const form = reactive({
  itemName: '',
  categoryOne: '',
  categoryTwo: '',
  hardFlag: '',
  downValue: '',
  upValue: '',
  orderNo: '',
});
const rules = reactive({
  itemName: [{ required: true, message: '下垫面名称不能为空', trigger: ['blur', 'change'] }],
  categoryOne: [{ required: true, message: '下垫面大类不能为空', trigger: ['blur', 'change'] }],
  categoryTwo: [{ required: true, message: '下垫面小类不能为空', trigger: ['blur', 'change'] }],
  hardFlag: [{ required: true, message: '是否硬质地板不能为空', trigger: ['blur', 'change'] }],
  downValue: [{ required: true, validator: validate, trigger: ['blur', 'change'] }],
  upValue: [{ required: true, validator: validate, trigger: ['blur', 'change'] }],
  orderNo: [{ required: true, validator: orderNoValidate, trigger: ['blur', 'change'] }],
});

let configOpts = reactive({
  type: '',
  text: '',
});
let row = {};

const getTableList = async () => {
  loading.value = true;
  const res = await getUnderlyingSurfaceRunoffConfigItemList({
    configId: id,
  });
  loading.value = false;
  if (res?.code === 200) {
    tableData.value = res.data;
  }
};

const openDialog = (data, opt) => {
  row = data;
  configOpts.type = opt;
  configOpts.text = optTextMap.get(opt);
  visible.value = true;
  nextTick(() => {
    inheritAttr(data, form);
    console.log(form);
  });
};

const closeDialog = () => {
  proxy.$refs.ruleForm.resetFields();
  visible.value = false;
};

const submit = () => {
  proxy.$refs.ruleForm.validate(async (valid, fields) => {
    if (valid) {
      if (opts === 'add') {
        if (configOpts.type === 'add') {
          tableData.value.push({ ...form });
        } else {
          inheritAttr(form, row);
        }
        proxy.$modal.msgSuccess('操作成功！');
      } else {
        let method = configOpts.type === 'add' ? underlyingSurfaceRunoffConfigItemAdd : underlyingSurfaceRunoffConfigItemEdit;
        const params = { ...form, status };
        if (configOpts.type === 'edit') {
          params.id = row.id;
        } else {
          params.configId = id;
        }
        const res = await method(params);
        if (res?.code !== 200) return;
        proxy.$modal.msgSuccess('操作成功！');
        getTableList();
      }
      closeDialog();
    } else {
      console.log('error submit!', fields);
    }
  });
};

const submit2 = async () => {
  if (opts === 'add') {
    const res = await underlyingSurfaceRunoffConfigAddWithItem(tableData.value);
    if (res?.code !== 200) return;
    emit('close', opts);
  } else {
    emit('close', opts);
  }
};

const del = (row, index) => {
  proxy.$modal
    .confirm('是否确认删除？')
    .then(async () => {
      if (opts === 'add') {
        tableData.value.splice(index, 1);
      } else {
        const res = await underlyingSurfaceRunoffConfigItemDel(row.id);
        if (res?.code !== 200) return;
        proxy.$modal.msgSuccess('操作成功！');
        getTableList();
      }
    })
    .catch(() => {});
};

onMounted(() => {
  if (id) getTableList();
});
</script>

<style lang="scss" scoped>
.btns {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 15px;
}
:deep(.formItem) {
  label {
    width: 116px;
    word-break: keep-all;
  }
}
</style>