<!-- 土壤污染 -->
<template>
  <!-- 自定义表单 -->
  <BasicForm @register="registerForm">
    <template #trwr="{ model }">
      <div class="ml-5 flex">
        <div class="mr-6">超过土壤污染风险管控标准</div>
        <!-- 单选的时候，复选不禁用； 复选的时候，单选不选中-->
        <!-- dclx是2，是否未标准地块(sfwrdk是1)，筛选值、管制值、未超出 这3个不能选择，并且wrwYjwSxz及wrwYjwGzz清空 -->
        <a-checkbox v-model:checked="model['cbSxz']" value="筛选值" :disabled="isDisabled" @change="checkboxChanged(model)">筛选值</a-checkbox>
        <a-checkbox v-model:checked="model['cbGzz']" :disabled="isDisabled" value="管制值" @change="checkboxChanged(model)">管制值</a-checkbox>
        <a-radio v-model:checked="model['wcc']" value="未超出" :disabled="isDisabled" @change="radioChanged(model)">未超出</a-radio>
      </div>
    </template>
    <template #wrwSxz="{ model, field }">
      <div class="bd">
        <div class="row" :class="['row' + index]" v-for="(value, key, index) in oList" :key="index">
          <div class="colummn colummn0">{{ key }}</div>
          <div class="colummn colummn1" style="display: flex;width: 100%;">
            <a-checkbox-group v-model:value="previousValues[field + index]" @change="(val) => onChangeSxz(val, model, field + index)">
              <a-checkbox :value="item" v-for="(item, cIndex) in oList[key]" :key="cIndex" :disabled="allgz?.includes(item)">
                {{ item }}
              </a-checkbox>
            </a-checkbox-group>
            <a-input placeholder="请输入其他污染物" style="width: 200px;" v-if="key == '有机物'" v-model:value="model['yjwSxzQt']" :disabled="!model['wrwYjwSxz']?.includes('有机物其他')" @change="(val) => handleQt(val, model, field, index)"></a-input>
            <a-input placeholder="请输入其他污染物" style="width: 200px;" v-if="key == '重金属'" v-model:value="model['zjsSxzQt']" :disabled="!model['wrwZjsSxz']?.includes('重金属其他')" @change="(val) => handleQt(val, model, field, index)"></a-input>
            </div>
        </div>
        <div class="row">
          <div class="colummn colummn0">是否涉及易迁移污染物</div>
          <div class="colummn colummn1">
            <a-radio-group  name="radioGroup" @change="(e) => handleRadio(e,  model, 'sxz')" v-model:value="model['sxzSfsjyqywrw']">
              <a-radio value="0">否</a-radio>
              <a-radio value="1">是</a-radio>
            </a-radio-group>
          </div>
        </div>
      </div>
    </template>
    <template #wrwGzz="{ model, field }">
      <div class="bd">
        <div class="row" :class="['row' + index]" v-for="(value, key, index) in oList" :key="index">
          <div class="colummn colummn0">{{ key }}</div>
          <div class="colummn colummn1" style="display: flex;width: 100%;">
            <a-checkbox-group v-model:value="previousValues[field + index]" @change="(val) => onChangeGzz(val, model, field + index)">
              <a-checkbox :value="item" v-for="(item, cIndex) in oList[key]" :key="cIndex" :disabled="allSX?.includes(item)">
                {{ item }}
              </a-checkbox>
            </a-checkbox-group>
            <a-input placeholder="请输入其他污染物" style="width: 200px;" v-if="key == '有机物'" v-model:value="model['yjwGzzQt']" :disabled="!model['wrwYjwGzz']?.includes('有机物其他')" @change="(val) => handleQt(val, model, field, index)"></a-input>
            <a-input placeholder="请输入其他污染物" style="width: 200px;" v-if="key == '重金属'" v-model:value="model['zjsGzzQt']" :disabled="!model['wrwZjsGzz']?.includes('重金属其他')" @change="(val) => handleQt(val, model, field, index)"></a-input>
          </div>
        </div>
        <div class="row">
          <div class="colummn colummn0">是否涉及易迁移污染物</div>
          <div class="colummn colummn1">
            <a-radio-group  name="radioGroup" @change="(e) => handleRadio(e, model, 'gzz')" v-model:value="model['gzzSfsjyqywrw']">
                <a-radio value="0">否</a-radio>
                <a-radio value="1">是</a-radio>
              </a-radio-group>
          </div>
        </div>
      </div>
    </template>
    <template #cbqymj="{ model, field }">
      <a-input-number v-model:value="model[field]" />
    </template>
    <template #dxswrcbqymj="{ model, field }">
      <a-input-number v-model:value="model[field]" />
    </template>
    <template #dxsswrcd="{ model, field }">
      <a-radio-group  name="radioGroup" v-model:value="model[field]">
        <a-radio value="Ⅲ类">Ⅲ类</a-radio>
        <a-radio value="Ⅳ类">Ⅳ类</a-radio>
        <a-radio value="未超出">未超出</a-radio>
      </a-radio-group>
    </template>
    <template #yjwDxs="{ model, field }">
      <div class="bd">
        <div class="row" :class="['row' + index]" v-for="(value, key, index) in oList" :key="index">
          <div class="colummn colummn0">{{ key }}</div>
          <div class="colummn colummn1" style="display: flex;width: 100%;">
            <a-checkbox-group v-model:value="previousValues[field + index]" @change="(val) => onChangeDsx(val, model, field + index)">
              <a-checkbox :value="item" v-for="(item, cIndex) in oList[key]" :key="cIndex" >
                {{ item }}
              </a-checkbox>
            </a-checkbox-group>
            <a-input placeholder="请输入其他污染物" style="width: 200px;" v-if="key == '有机物'" v-model:value="model['yjwDxsQt']" :disabled="!model['yjwDxs']?.includes('有机物其他')" @change="(val) => handleQt(val, model, field, index)"></a-input>
            <a-input placeholder="请输入其他污染物" style="width: 200px;" v-if="key == '重金属'" v-model:value="model['wjwDxsQt']" :disabled="!model['wjwDxs']?.includes('重金属其他')" @change="(val) => handleQt(val, model, field, index)"></a-input>
          </div>
        </div>
        <div class="row">
          <div class="colummn colummn0">是否涉及易迁移污染物</div>
          <div class="colummn colummn1">
            <a-radio-group  name="radioGroup" @change="(e) => handleRadio(e, model, 'dxs')" v-model:value="model['dxsSfsjyqywrw']">
                <a-radio value="0">否</a-radio>
                <a-radio value="1">是</a-radio>
              </a-radio-group>
          </div>
        </div>
      </div>
    </template>
  </BasicForm>
</template>

<script lang="ts" setup>
  //引入依赖
  import { ref, nextTick, watch, toRaw } from 'vue';
  import { useForm, BasicForm, FormSchema } from '/@/components/Form';

  const oList = ref({
    有机物: ['六六六', '滴滴涕', '多氯联苯', '二噁英', '其他POPs', '有机物其他'],
    重金属: ['镉', '铬', '砷', '铅', '汞', '重金属其他'],
  });
  const wrwYjwSxz = ref([]); // 例如：["六六六", "滴滴涕", "镉", "铬"]
  const wrwYjwGzz = ref([]); // 例如：["铅", "汞", "多氯联苯"]
 const sxzyhfwrw  = ref('0')
  const wrwZjsSxz = ref([]);
  const wrwZjsGzz = ref([]);
  const yjwDxs = ref([]);
  const wjwDxs = ref([]);
  const allSX = ref([]);
  const allgz = ref([]);
  const alldxs = ref([]);
  // 例如：{ "wrwYjwSxz0": [ "六六六", "滴滴涕" ], "wrwYjwSxz1": [ "镉", "铬" ], "wrwYjwGzz1": [ "铅", "汞" ], "wrwYjwGzz0": [ "多氯联苯" ] }
  let previousValues = ref({
    wrwYjwSxz0: [],
    wrwYjwSxz1: [],
    wrwYjwGzz0: [],
    wrwYjwGzz1: [],
    yjwDxs0: [],
    yjwDxs1: [],
  });
  const props = defineProps({
    labelFirst: {
      type: String,
      default: '初步',
    },
    data: {
      type: Object,
      default: {},
    },
    dclx: {
      type: Number,
    },
    sfwrdk: {
      type: String,
    },
    isRead: {
      type: Boolean,
      default: 0,
    },
  });
  // Emits声明
  const emit = defineEmits(['gettrMj']);
  //
  const checkboxChanged = (model) => {
    if (model.cbSxz || model.cbGzz) {
      model.wcc = false;
      updateSchema({
        label: '土壤污染物超标区域面积(m²)',
        field: 'cbqymj',
        component: 'InputNumber',
        required: true,
        slot: 'cbqymj',
        ifShow: ({ values }) => {
          console.log(values, 'values');
          let flg = true;
          if (!values.wcc) {
            flg = true;
          } else {
            if (values.cbGzz || values.cbSxz) {
              flg = true;
            } else {
              flg = false;
            }
          }

          return flg;
        },
        componentProps: ({ formModel, formActionType }) => {
          return {
            onchange: () => {
              emit('gettrMj', formModel.cbqymj);
            },
          };
        },
        //
      });
    } else {
      updateSchema({
        label: '土壤污染物超标区域面积(m²)',
        field: 'cbqymj',
        component: 'InputNumber',
        required: false,
        slot: 'cbqymj',
        ifShow: ({ values }) => {
          // console.log(values, 'values');
          let flg = true;
          if (!values.wcc) {
            flg = true;
          } else {
            if (values.cbGzz || values.cbSxz) {
              flg = true;
            } else {
              flg = false;
            }
          }

          return flg;
        },
        componentProps: ({ formModel, formActionType }) => {
          return {
            onchange: () => {
              emit('gettrMj', formModel.cbqymj);
            },
          };
        },
        //
      });
    }
  };

  const radioChanged = (model) => {
    if (model.wcc) {
      model.cbSxz = false;
      model.cbGzz = false;
      model.cbqymj = 0; // 土壤污染物超标区域面积变为0
    }
  };
  //自定义表单字段
  const formSchemas: FormSchema[] = [
    {
      label: '污染地块id',
      field: 'wrdkid',
      component: 'Input',
      show: false,
    },
    {
      label: 'id',
      field: 'id',
      component: 'Input',
      show: false,
    },
    {
      label: '超出筛选值',
      field: 'cbSxz',
      component: 'RadioGroup',
      show: false,
    },
    {
      label: '超出管制值',
      field: 'cbGzz',
      component: 'RadioGroup',
      show: false,
    },
    {
      label: '地下水是否涉及易迁移污染物',
      field: 'dxsSfsjyqywrw',
      component: 'RadioGroup',
      show: false,
    },
    {
      label: '管制值是否涉及易迁移污染物',
      field: 'gzzSfsjyqywrw',
      component: 'RadioGroup',
      show: false,
    },
    {
      label: '筛选值是否涉及易迁移污染物',
      field: 'sxzSfsjyqywrw',
      component: 'RadioGroup',
      show: false,
    },
    {
      label: '未超出',
      field: 'wcc',
      defaultValue: 3,
      component: 'RadioGroup',
      show: false,
    },
    {
      label: '土壤受污染程度',
      field: 'wrcd',
      component: 'RadioGroup',
      slot: 'trwr',
    },

    {
      label: '土壤污染物超标区域面积(m²)',
      field: 'cbqymj',
      component: 'InputNumber',
      slot: 'cbqymj',
      ifShow: ({ values }) => {
        // console.log(values, 'values');
        let flg = true;
        if (!values.wcc) {
          flg = true;
        } else {
          if (values.cbGzz || values.cbSxz) {
            flg = true;
          } else {
            flg = false;
          }
        }

        return flg;
      },
      componentProps: ({ formModel, formActionType }) => {
        return {
          onchange: () => {
            emit('gettrMj', formModel.cbqymj);
          },
        };
      },
      //
    },
    {
      label: '土壤超过筛选值的污染物',
      field: 'wrwYjwSxz',
      component: 'Input',
      slot: 'wrwSxz',
      colProps: { span: 24 },
      ifShow: ({ values }) => {
        let flg = true;
        if (values.cbSxz) flg = true;
        else flg = false;
        return flg;
      },
    },
    {
      label: '筛选值',
      field: 'wrwZjsSxz',
      show: false,
      component: 'RadioGroup',
    },
    {
      label: '土壤超过管制值的污染物',
      field: 'wrwYjwGzz',
      component: 'Input',
      slot: 'wrwGzz',
      colProps: { span: 24 },
      ifShow: ({ values }) => {
        let flg = true;
        if (values.cbGzz) flg = true;
        else flg = false;
        return flg;
      },
    },
    {
      label: '管制值',
      field: 'wrwZjsGzz',
      show: false,
      component: 'RadioGroup',
    },
    {
      label: '有机物管制值其他',
      field: 'yjwGzzQt',
      show: false,
      component: 'Input',
    },
    {
      label: '重金属管制值其他',
      field: 'zjsGzzQt',
      show: false,
      component: 'Input',
    },

    {
      label: '有机物筛选值其他',
      field: 'yjwSxzQt',
      show: false,
      component: 'Input',
    },
    {
      label: '重金属筛选值其他',
      field: 'zjsSxzQt',
      show: false,
      component: 'Input',
    },
    // {
    //   label: '地下水是否污染',
    //   field: 'sfWr',
    //   defaultValue: 0,
    //   component: 'RadioGroup',
    //   required: true,
    //   componentProps: {
    //     options: [
    //       { label: '否', value: 0 },
    //       { label: '是', value: 1 },
    //     ],
    //   },
    // },
    {
      label: '地下水是否作为饮用水源',
      field: 'sfYysy',
      defaultValue: 0,
      component: 'RadioGroup',
      required: true,
      componentProps: {
        options: [
          { label: '否', value: 0 },
          { label: '是', value: 1 },
        ],
      },
    },
    {
      label: '地下水受污染程度',
      field: 'dxsswrcd',
      // show: false,
      defaultValue: '未超出',
      component: 'RadioGroup',
      slot: 'dxsswrcd',
    },
    {
      label: '地下水污染超标区域面积(m²)',
      field: 'dxswrcbqymj',
      component: 'InputNumber',
      slot: 'dxswrcbqymj',
      ifShow: ({ values }) => {
        let flg = true;
        if (values.dxsswrcd === 'Ⅲ类' || values.dxsswrcd === 'Ⅳ类') {
          flg = true;
        } else {
          flg = false;
        }

        return flg;
      },
    },
    {
      label: '地下水超过标准限值的污染物',
      field: 'yjwDxs',
      component: 'Input',
      slot: 'yjwDxs',
      colProps: { span: 24 },
      ifShow: ({ values }) => {
        let flg = true;
        if (values.dxsswrcd === 'Ⅲ类' || values.dxsswrcd === 'Ⅳ类') {
          flg = true;
        } else {
          flg = false;
        }

        return flg;
      },
    },
    {
      label: '管制值',
      field: 'wjwDxs',
      show: false,
      component: 'RadioGroup',
    },
    {
      label: '有机物地下水其他',
      field: 'yjwDxsQt',
      show: false,
      component: 'RadioGroup',
    },
    {
      label: '无机物地下水其他',
      field: 'wjwDxsQt',
      show: false,
      component: 'RadioGroup',
    },
  ];

  const [registerForm, { getFieldsValue, setFieldsValue, validate, updateSchema }] = useForm({
    //注册表单列
    schemas: formSchemas,
    //不显示查询和重置按钮
    showActionButtonGroup: false,
    //默认row行配置,当 layout 为 horizontal 生效
    rowProps: { gutter: 24, justify: 'start', align: 'middle' },
    //全局col列占比(每列显示多少位)，和schemas中的colProps属性一致
    baseColProps: { span: 12 },
    //使用labelCol的样式参数来控制标题宽度
    labelCol: { style: { width: '250px' } },
    //row行的样式
    baseRowStyle: { width: '100%' },
    //表单布局属性，支持（vertical,horizontal），默认为horizontal
    layout: 'horizontal',
  });
  // 筛选之
  const onChangeSxz = (val, model, field) => {
    console.log(val, model, field, '222');
    allSX.value = [];
    const newValues = Array.from(val);
    previousValues.value[field] = newValues;
    // 筛选值有机物
    wrwYjwSxz.value = previousValues.value.wrwYjwSxz0;
    // 筛选值重金属
    wrwZjsSxz.value = previousValues.value.wrwYjwSxz1;

    allSX.value = [...wrwYjwSxz.value, ...wrwZjsSxz.value];

    model.wrwYjwSxz = wrwYjwSxz.value.join(',');
    model.wrwZjsSxz = wrwZjsSxz.value.join(',');

    if (field == 'wrwYjwSxz0' && val.indexOf('有机物其他') < 0) {
        model['yjwSxzQt'] = null
    } else if(field == 'wrwYjwSxz1' && val.indexOf('重金属其他') < 0) {
      model['zjsSxzQt'] = null
    }
  };
  const onChangeGzz = (val, model, field) => {
    console.log(val, model, field, '333');
    allgz.value = [];
    const newValues = Array.from(val);
    previousValues.value[field] = newValues;
    // 管制值有机物
    wrwYjwGzz.value = previousValues.value.wrwYjwGzz0;
    // 管制值重金属
    wrwZjsGzz.value = previousValues.value.wrwYjwGzz1;

    allgz.value = [...wrwYjwGzz.value, ...wrwZjsGzz.value];

    model.wrwYjwGzz = wrwYjwGzz.value.join(',');
    model.wrwZjsGzz = wrwZjsGzz.value.join(',');

    if (field == 'wrwYjwGzz0' && val.indexOf('有机物其他') < 0) {
        model['yjwGzzQt'] = null
    } else if(field == 'wrwYjwGzz1' && val.indexOf('重金属其他') < 0) {
      model['zjsGzzQt'] = null
    }
  };
  const onChangeDsx = (val, model, field) => {
    console.log(val, model, field, '333');
    allgz.value = [];
    const newValues = Array.from(val);
    previousValues.value[field] = newValues;
    // 地下水有机物
    yjwDxs.value = previousValues.value.yjwDxs0;
    // 地下水重金属
    wjwDxs.value = previousValues.value.yjwDxs1;

    alldxs.value = [...yjwDxs.value, ...wjwDxs.value];

    model.yjwDxs = yjwDxs.value.join(',');
    model.wjwDxs = wjwDxs.value.join(',');

    if (field == 'yjwDxs0' && val.indexOf('有机物其他') < 0) {
        model['yjwDxsQt'] = null
    } else if(field == 'yjwDxs1' && val.indexOf('重金属其他') < 0) {
      model['wjwDxsQt'] = null
    }
  };
  const handleQt = (e, model, field, index) =>{
    if (field == 'wrwYjwGzz') {
      if (index == 1) {
        model['zjsGzzQt'] = e.target.value
      } else {
        model['yjwGzzQt'] = e.target.value
      }
    } else if (field == 'wrwYjwSxz'){
      if (index == 1) {
        model['zjsSxzQt'] = e.target.value
      } else {
        model['yjwSxzQt'] = e.target.value
      }
    } else if (field == 'yjwDxs'){
      if (index == 1) {
        model['wjwDxsQt'] = e.target.value
      } else {
        model['yjwDxsQt'] = e.target.value
      }
    }
  }

  const handleRadio = (e, model, type) => {
    if (type == 'gzz') {
        model['gzzSfsjyqywrw'] = e.target.value
    } else if(type == 'sxz'){
      model['sxzSfsjyqywrw'] = e.target.value
      sxzyhfwrw.value = e.target.value
    } else if(type == 'dsxswr'){
      model['dxsswrcd'] = e.target.value
    } else {
      model['dxsSfsjyqywrw'] = e.target.value
    }
  }

  const isDisabled = ref(false);
  // const onPropsChange = ([dclxValue, sfwrdkValue]) => {
  //   console.log(dclxValue, sfwrdkValue, '2222');
  //   if (dclxValue === '2' && sfwrdkValue === '1') {
  //     isDisabled.value = true;
  //   } else {
  //     isDisabled.value = false;
  //   }

  //   wrwYjwSxz.value = [];
  //   wrwZjsSxz.value = [];
  //   wrwYjwGzz.value = [];
  //   wrwZjsGzz.value = [];
  // };
  // watch(() => [props.dclx, props.sfwrdk], onPropsChange, { deep: true });
  watch(
    () => [props.data, props.isRead],
    async ([val, val1]) => {
      val &&
        nextTick(async () => {
          const obj: any = toRaw(val);
          obj.cbGz = obj.cbGzz ? true : false;
          obj.cbSxz = obj.cbSxz ? true : false;
          obj.wcc = obj.wcc ? true : false;
          obj.cbGzz = obj.cbGzz ? true : false;
          if (!obj.sfWr) obj.sfWr = 0;
          if (!obj.sfYysy) obj.sfYysy = 0;
          allSX.value = [];
          // 筛选值有机物
          if (obj.wrwYjwSxz) {
            wrwYjwSxz.value = obj.wrwYjwSxz?.split(',') || [];
            allSX.value = [...wrwYjwSxz.value];
            wrwYjwSxz.value.forEach((a) => {
              if (oList.value['有机物'].includes(a)) {
                previousValues.value['wrwYjwSxz0'].push(a);
              }
            });
          }
          // 筛选值重金属
          if (obj.wrwZjsSxz) {
            wrwZjsSxz.value = obj.wrwZjsSxz?.split(',') || [];
            allSX.value = [...allSX.value, ...wrwZjsSxz.value];
            wrwZjsSxz.value.forEach((a) => {
              if (oList.value['重金属'].includes(a)) {
                previousValues.value['wrwYjwSxz1'].push(a);
              }
            });
          }
          allgz.value = [];
          // 管制值有机物
          if (obj.wrwYjwGzz) {
            wrwYjwGzz.value = obj.wrwYjwGzz?.split(',') || [];
            allgz.value = [...allgz.value, ...wrwYjwGzz.value];
            wrwYjwGzz.value.forEach((a) => {
              if (oList.value['有机物'].includes(a)) {
                previousValues.value['wrwYjwGzz0'].push(a);
              }
            });
          }
          // 管制值重金属
          if (obj.wrwZjsGzz) {
            wrwZjsGzz.value = obj.wrwZjsGzz?.split(',') || [];
            allgz.value = [...allgz.value, ...wrwZjsGzz.value];
            wrwZjsGzz.value.forEach((a) => {
              if (oList.value['重金属'].includes(a)) {
                previousValues.value['wrwYjwGzz1'].push(a);
              }
            });
          }
          // 地下水无机物
          if (obj.wjwDxs) {
            wjwDxs.value = obj.wjwDxs?.split(',') || [];
            wjwDxs.value.forEach((a) => {
              if (oList.value['重金属'].includes(a)) {
                previousValues.value['yjwDxs1'].push(a);
              }
            });
          }
          // 地下水有机物
          if (obj.yjwDxs) {
            yjwDxs.value = obj.yjwDxs?.split(',') || [];
            yjwDxs.value.forEach((a) => {
              if (oList.value['有机物'].includes(a)) {
                previousValues.value['yjwDxs0'].push(a);
              }
            });
          }

          updateSchema({
            label: '地下水是否污染',
            field: 'sfWr',
            defaultValue: 0,
            component: 'RadioGroup',
            required: val1 ? true : false,
            componentProps: {
              options: [
                { label: '否', value: 0 },
                { label: '是', value: 1 },
              ],
            },
          });
          updateSchema({
            label: '地下水是否作为饮用水源',
            field: 'sfYysy',
            defaultValue: 0,
            component: 'RadioGroup',
            required: val1 ? true : false,
            componentProps: {
              options: [
                { label: '否', value: 0 },
                { label: '是', value: 1 },
              ],
            },
          });
          await setFieldsValue({
            ...val,
          });
        });
    },
    { deep: true, immediate: true }
  );
  //
  // 获取子组件 列表
  async function getFormValueTr() {
    //获取所有值
    let fieldsValue = await getFieldsValue();
    fieldsValue = await validate();

    fieldsValue.cbGz = fieldsValue.cbGzz ? 1 : 0;
    fieldsValue.cbSxz = fieldsValue.cbSxz ? 1 : 0;
    fieldsValue.wcc = fieldsValue.wcc ? 1 : 0;
    fieldsValue.cbGzz = fieldsValue.cbGzz ? 1 : 0;
    console.log(fieldsValue, 'fieldsValue');

    return fieldsValue;
  }

  // 通过ref必须把在父组件里面的方法导出
  defineExpose({
    getFormValueTr,
  });
</script>

<style scoped>
  /** 时间和数字输入框样式 */
  :deep(.ant-input-number) {
    width: 100%;
  }

  :deep(.ant-picker) {
    width: 100%;
  }

  :deep(.ant-form-item-label) {
    height: fit-content;
  }
</style>
<style lang="less" scoped>
  .bd {
    border: 1px solid #e6e6e6;
    border-radius: 10px;
    // width: fit-content;

    .row {
      display: flex;

      .colummn {
        padding: 5px 10px;
      }

      .colummn0 {
        width: 120px;
        border-right: 1px solid #e6e6e6;
      }
      .colummn1 {
        flex: 1;
      }
    }

    .row0, .row1 {
      .colummn {
        border-bottom: 1px solid #e6e6e6;
      }
    }
  }
</style>
