
<template>
  <div style="background: #ececec; padding:10px 0px">
      <a-row :gutter="0">
            <a-col :span="6">
                <div style="font-size:15px;overflow-y: auto;height:720px;padding:0px 0px 0px 5px;margin-right:10px">
                  <a-card style="width: 100%">
                      <a-directory-tree :showLine="showLine"  :tree-data="leftTree" style="height:700px"
                        v-model:expandedKeys="expandedKeys"
                        v-model:selectedKeys="selectedKeys"
                        @select="onTreeSelect"
                      >
                      </a-directory-tree>
                  </a-card>    
                </div>
            </a-col>
            <a-col :span="18">
              <div style="font-size:15px;overflow-y: auto;height:720px;padding:0px 0px 0px 0px;">
                <a-card style="width: 100%;height:720px;">
                      <BasicTable @register="registerTable" style=";width:100%;">
                        <template #bodyCell="{column, record }">
                          <span v-if="column.dataIndex=='sname'" style="margin-right:10px;">{{ record.sname }}</span>
                          <span v-else-if="column.dataIndex=='code'" style="margin-right:10px;">{{ record.code }}</span>
                          <span v-else-if="column.dataIndex=='sformat'" style="margin-right:10px;"> 
                            <div v-if="record.valtp">
                              <a-input-number v-if="record.valtp==1"  class="underline-input"></a-input-number>
                              <a-radio-group  v-else-if="record.valtp==2" :options="['是','否']"> </a-radio-group>
                              <a-input v-else  class="underline-input"></a-input>
                            </div>
                          </span>
                          <span v-else-if="column.dataIndex=='files'" style="margin-right:10px;">
                            <span v-if="record.files&&!record.files==''">
                              <a-checkbox-group>
                                <div style="display: flex; flex-wrap: wrap;">
                                  <div :span="12" v-for="o in record.files.split(',')" :key="o">
                                    <a-checkbox :value="o">{{o}}</a-checkbox>
                                  </div>
                                </div>
                              </a-checkbox-group>
                            </span>
                            <span v-else>
                              <a-textarea  class="underline-input" placeholder="" allow-clear rows="3"/>
                            </span>
                          </span>
                          <span v-else  style="margin-right:0px;">
                            <a-textarea  class="underline-input" placeholder="" allow-clear rows="3"/>
                          </span>
                        </template>
                      </BasicTable>
                </a-card>
              </div>
            </a-col>
      </a-row>      
  </div>
</template>

<script lang="ts" setup name="system-depart">
  import { ref, reactive, defineExpose, nextTick, defineProps, computed } from 'vue';
  import { BasicTable, useTable, TableAction, EditRecordRow, BasicColumn } from '/@/components/Table';
  import { cloneDeep } from 'lodash-es';
  import { listTree } from './SurveyTplMain.api';
  import { allList } from './SurveyTplItem.api';

  
  const registerSurveyTplItemList = ref();
  const curSelNode = ref({})
  const showLine = ref(false)
  const expandedKeys = ref([]);
  const selectedKeys = ref([]);
  const leftTree = ref([])
  const tplItemDatas = ref([])
  const formTableVal = reactive({});

  const cols = ref<Array<Object>>([
    {
      title: '序号',
      dataIndex: 'code',
      align: "center",
      resizable: true,
      width:60
    },
    {
      title: '调查问题',
      dataIndex:'sname',
      align: "left",
      resizable: true,
      width: 150
    },
    {
      title: '当前值',
      dataIndex:'sformat',
      align: "left",
      resizable: true,
      width: 150
    },
    {
      title: '具体描述',
      dataIndex: "des",
      align: "left",
      resizable: true,
      width: 200
    },
    {
      title: '材料清单',
      dataIndex: 'files',
      align: "left",
      resizable: true,
      width: 150
    },

  ]);


async function setTplMainDatas() {
  leftTree.value = await listTree({})
}

async function setTplItemDatas(tplid) {
  tplItemDatas.value = await allList({tplid:tplid})

}

setTplMainDatas()



const [registerTable, { reload }] = useTable({
  dataSource: tplItemDatas,
  showTableSetting: false,
  pagination: false,
  canResize: false,
  showIndexColumn: false,
  scroll: { y: 600 },
  bordered: true,
  columns: cols
});

  function onTreeSelect(selectedKeys, e:{selected: Boolean, selectedNodes,node,event}) {
    if(e.selected) {
      curSelNode.value = e.node;
      let id = e.node.id
      setTplItemDatas(id)
    }
}

</script>
<style lang="less">

</style>
