<template>
  <div class="btns" v-show="opts !== 'view'">
    <el-button type="primary" plain icon="Plus" @click="openDialog({}, 'add')">新增</el-button>
  </div>
  <el-table
    class="table"
    :data="tableData"
    v-loading="loading"
    stripe
    max-height="680"
    element-loading-text="数据加载中..."
  >
    <el-table-column type="index" width="55" label="序号" align="center" fixed="left" />
    <el-table-column label="用地类型" align="center" prop="landType" width="180">
      <template #default="{ row }">
        <span>{{ findText('sponge_land_type', row.landType) }}</span>
      </template>
    </el-table-column>
    <el-table-column
      v-for="column in columns"
      :label="column.label"
      align="center"
    >
      <el-table-column
        v-for="item in column.list"
        :label="item.label"
        :prop="item.prop"
        align="center"
        width="200"
      >
      </el-table-column>
    </el-table-column>
    <template v-if="opts !== 'add'">
      <el-table-column label="修改时间" align="center" prop="updateTime" width="160" show-overflow-tooltip fixed="right" />
      <el-table-column label="修改人" align="center" prop="updateBy" show-overflow-tooltip fixed="right" />
    </template>
    <template v-if="opts !== 'view'">
      <el-table-column label="操作" align="center" width="150" fixed="right">
        <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="dialog"
  >
    <el-form
      ref="ruleForm"
      :model="form"
      :rules="rules"
      class="dialogForm"
      :disabled="configOpts.type === 'view'"
    >
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="用地类型:" prop="landType">
            <el-select
              v-model="form.landType"
              placeholder="请选择用地类型"
              style="width: 100%"
            >
              <el-option
                v-for="dict in sponge_land_type"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-card class="box-card" shadow="never">
        <template #header>
          <span class="title">综合治理类</span>
        </template>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="下沉式绿地率:" prop="comprehensiveSinkRate" class="beforeFormItem">
              <el-input v-model="form.comprehensiveSinkRate" placeholder="请输入正整数" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="绿色屋顶率:" prop="comprehensiveRoofRate" class="formItem">
              <el-input v-model="form.comprehensiveRoofRate" placeholder="请输入正整数" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="透水铺装率:" prop="comprehensivePermeableRate" class="beforeFormItem" style="margin-bottom: 0;">
              <el-input v-model="form.comprehensivePermeableRate" placeholder="请输入正整数" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="不透水下垫面径流控制率:" prop="comprehensiveUnpermeableRate" class="formItem" style="margin-bottom: 0;">
              <el-input v-model="form.comprehensiveUnpermeableRate" placeholder="请输入正整数" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="box-card" shadow="never" style="margin-top: 10px">
        <template #header>
          <span class="title">规划新建类</span>
        </template>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="下沉式绿地率:" prop="newSinkRate" class="beforeFormItem">
              <el-input v-model="form.newSinkRate" placeholder="请输入正整数" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="绿色屋顶率:" prop="newRoofRate" class="formItem">
              <el-input v-model="form.newRoofRate" placeholder="请输入正整数" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="透水铺装率:" prop="newPermeableRate" class="beforeFormItem" style="margin-bottom: 0;">
              <el-input v-model="form.newPermeableRate" placeholder="请输入正整数" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="不透水下垫面径流控制率:" prop="newUnpermeableRate" class="formItem" style="margin-bottom: 0;">
              <el-input v-model="form.newUnpermeableRate" placeholder="请输入正整数" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
    </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 { ref, reactive, onMounted } from 'vue'
import { inheritAttr } from '@/utils/v3'
import { optTextMap } from '@/utils/map'
import { isNumber, required } from '@/utils/validate-helper'
import {
  facilitiesSuggestRateConfigItemAdd,
  facilitiesSuggestRateConfigItemEdit,
  facilitiesSuggestRateConfigItemDel,
  facilitiesSuggestRateConfigItemList
} from '@/api/preassess/scaleConfig'
import { useDicts } from '@/hooks'
const { proxy } = getCurrentInstance()
const { sponge_land_type, findText } = useDicts(proxy)
const columns = reactive([
  {
    label: '综合整治类',
    list: [
      { label: '下沉式绿地率', prop: 'comprehensiveSinkRate' },
      { label: '绿色屋顶率', prop: 'comprehensiveRoofRate' },
      { label: '透水铺装率', prop: 'comprehensivePermeableRate' },
      { label: '不透水下垫面径流控制率', prop: 'comprehensiveUnpermeableRate' }
    ]
  },
  {
    label: '规划新建类',
    list: [
      { label: '下沉式绿地率', prop: 'newSinkRate' },
      { label: '绿色屋顶率', prop: 'newRoofRate' },
      { label: '透水铺装率', prop: 'newPermeableRate' },
      { label: '不透水下垫面径流控制率', prop: 'newUnpermeableRate' }
    ]
  }
])
const props = defineProps({
  id: {
    type: [String, Number],
    default: ''
  },
  opts: {
    type: String,
    default: ''
  }
})
const emit = defineEmits(['close'])

const { id, opts } = props
const loading = ref(false)
const tableData = ref([])
const visible = ref(false)
const form = reactive({
  comprehensiveSinkRate: '',
  comprehensiveRoofRate: '',
  comprehensivePermeableRate: '',
  comprehensiveUnpermeableRate: '',
  newSinkRate: '',
  newRoofRate: '',
  newPermeableRate: '',
  newUnpermeableRate: '',
  landType: ''
})
const rules = reactive({
  comprehensiveSinkRate: isNumber('下沉式绿地率', { required: true, min: 0, max: 100 }),
  comprehensiveRoofRate: isNumber('绿色屋顶率', { required: true, min: 0, max: 100 }),
  comprehensivePermeableRate: isNumber('透水铺装率', { required: true, min: 0, max: 100 }),
  comprehensiveUnpermeableRate: isNumber('不透水下垫面径流控制率', { required: true, min: 0, max: 100 }),
  comprehensiveUnpermeableRate: isNumber('不透水下垫面径流控制率', { required: true, min: 0, max: 100 }),
  newSinkRate: isNumber('下沉式绿地率', { required: true, min: 0, max: 100 }),
  newRoofRate: isNumber('绿色屋顶率', { required: true, min: 0, max: 100 }),
  newPermeableRate: isNumber('透水铺装率', { required: true, min: 0, max: 100 }),
  newUnpermeableRate: isNumber('不透水下垫面径流控制率', { required: true, min: 0, max: 100 }),
  landType: required('用地类型', { required: true })
})

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

const getTableList = async () => {
  loading.value = true
  const res = await facilitiesSuggestRateConfigItemList({
    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' ? facilitiesSuggestRateConfigItemAdd : facilitiesSuggestRateConfigItemEdit
        const params = { configId: id, ...form }
        if(configOpts.type === 'edit') {
          params.id = row.id
        }
        const res = await method(params)
        if(res?.code !== 200) return
        proxy.$modal.msgSuccess('操作成功！')
        getTableList()
      }
      closeDialog()
    } else {
      console.log('error submit!', fields)
    }
  })
}

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

onMounted(() => {
  if(id) getTableList()
})

defineExpose({
  tableData
})
</script>

<style lang="scss" scoped>
.btns {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 15px;
}
.title {
  font-weight: 700;
  font-size: 16px;
}
::v-deep(.formItem) {
  label {
    width: 200px;
    word-break: keep-all;
  }
}
::v-deep(.beforeFormItem) {
  label {
    width: 120px;
    word-break: keep-all;
  }
}
</style>